fix(console): add tips for Clip component (#2161)

tkestack · Nov 9, 2022 · 21070cf · 21070cf
1 parent 353cc88
commit 21070cf
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/web/console/package-lock.json b/web/console/package-lock.json
diff --git a/web/console/package.json b/web/console/package.json
@@ -33,6 +33,7 @@
     "axios": "^0.21.1",
     "buffer": "^6.0.3",
     "classnames": "2.2.6",
+    "clipboard": "^2.0.11",
     "compare-versions": "^3.6.0",
     "d3": "^5.9.2",
     "dayjs": "^1.7.7",

diff --git a/web/console/src/modules/common/components/clip/Clip.tsx b/web/console/src/modules/common/components/clip/Clip.tsx
@@ -16,8 +16,9 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useLayoutEffect, useState } from 'react';
-import { Copy, Icon } from 'tea-component';
+import React, { useRef, useLayoutEffect, useState } from 'react';
+import { Button } from 'tea-component';
+import ClipboardJS from 'clipboard';
 
 export interface ClipProps {
   target: string;
@@ -28,24 +29,41 @@ export interface ClipProps {
 }
 
 export const Clip = ({ target, className, isShow = true, isShowTip }: ClipProps) => {
-  const [text, setText] = useState('');
+  const copyBtn = useRef(null);
+  const copyInstance = useRef(null);
+
+  const [tips, setTips] = useState('复制');
 
   useLayoutEffect(() => {
-    let targetText = '';
-    try {
-      targetText = document?.querySelector(target)?.textContent ?? '';
-    } catch (error) {
-      console.log(error);
+    function clean() {
+      copyInstance.current && copyInstance.current.destroy();
+    }
+
+    clean();
+
+    if (copyBtn.current) {
+      copyInstance.current = new ClipboardJS(copyBtn.current, {
+        text() {
+          return document?.querySelector(target)?.textContent ?? '';
+        }
+      });
+
+      copyInstance?.current?.on('success', () => setTips('复制成功'));
     }
 
-    setText(targetText);
-  }, [target]);
+    return clean;
+  }, [copyBtn, target]);
 
   return (
     isShow && (
-      <Copy text={text}>
-        <Icon type="copy" className={className} />
-      </Copy>
+      <Button
+        type="icon"
+        tooltip={tips}
+        icon="copy"
+        className={className}
+        ref={copyBtn}
+        onMouseLeave={() => setTimeout(() => setTips('复制'), 100)}
+      />
     )
   );
 };