refactor(flat-components): format pmi id (#2060)

netless-io · Oct 27, 2023 · e5290be · e5290be
1 parent 883aad5
commit e5290be
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/flat-components/src/components/Pmi/index.tsx b/packages/flat-components/src/components/Pmi/index.tsx
@@ -1,6 +1,7 @@
 import "./style.less";
 
 import React, { HTMLAttributes, FC } from "react";
+import { formatInviteCode } from "../../utils/room";
 export * from "./PmiExistTip";
 
 export interface PmiDescProps extends HTMLAttributes<HTMLSpanElement> {
@@ -12,7 +13,19 @@ export const PmiDesc: FC<PmiDescProps> = ({ text, pmi, ...restProps }) => {
     return (
         <span className="pmi" {...restProps}>
             <span className="pmi-text">{text}</span>
-            <span className="pmi-id">{pmi}</span>
+            <Pmi className="pmi-id" pmi={pmi} />
+        </span>
+    );
+};
+
+export interface PmiProps extends HTMLAttributes<HTMLSpanElement> {
+    pmi: string;
+}
+
+export const Pmi: FC<PmiProps> = ({ pmi, ...restProps }) => {
+    return (
+        <span className="pmi-selectable" {...restProps}>
+            {formatInviteCode("", pmi)}
         </span>
     );
 };

diff --git a/packages/flat-components/src/components/Pmi/style.less b/packages/flat-components/src/components/Pmi/style.less
@@ -1,8 +1,15 @@
 .pmi-id {
-    margin-left: 4px;
     color: var(--grey-3);
 }
 
+.pmi-text {
+    margin-right: 4px;
+}
+
+.pmi-selectable {
+    user-select: text;
+}
+
 
 .flat-color-scheme-dark {
     .pmi-id {

diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
@@ -17,6 +17,7 @@ import {
     LoginButtonProviderType,
     SVGCopy,
     PmiExistTip,
+    Pmi,
 } from "flat-components";
 import {
     LoginPlatform,
@@ -200,7 +201,8 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                                     <PmiExistTip title={t("pmi-help")} />
                                 </span>
 
-                                <span>{globalStore.pmi}</span>
+                                <Pmi pmi={globalStore.pmi!} />
+
                                 <Button
                                     className="general-setting-item-btn"
                                     type="link"