useClipboard

RocketChat · Oct 4, 2023 · 2492e91 · 2492e91
1 parent 3147fab
commit 2492e91
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 64 deletions.
diff --git a/packages/onboarding-ui/package.json b/packages/onboarding-ui/package.json
@@ -80,7 +80,6 @@
     "typescript": "~5.0.4"
   },
   "dependencies": {
-    "clipboard": "~2.0.11",
     "i18next": "~21.6.16",
     "react-hook-form": "~7.27.1"
   },

diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx
@@ -6,10 +6,9 @@ import {
   Label,
   Scrollable,
 } from '@rocket.chat/fuselage';
-import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { useBreakpoints, useClipboard } from '@rocket.chat/fuselage-hooks';
 import { Form } from '@rocket.chat/layout';
-import Clipboard from 'clipboard';
-import { useRef, type ReactElement, useEffect } from 'react';
+import { type ReactElement } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -33,23 +32,13 @@ const CopyStep = ({
   const { t } = useTranslation();
   const breakpoints = useBreakpoints();
   const isMobile = !breakpoints.includes('md');
-  const copyRef = useRef<HTMLButtonElement>(null);
+
   const {
     register,
     formState: { isValid },
   } = useFormContext();
 
-  useEffect(() => {
-    if (!copyRef.current) {
-      return;
-    }
-
-    const clipboard = new Clipboard(copyRef.current);
-
-    return (): void => {
-      clipboard.destroy();
-    };
-  }, []);
+  const clipboard = useClipboard(clientKey);
 
   return (
     <>
@@ -86,12 +75,7 @@ const CopyStep = ({
               {clientKey}
             </Box>
           </Scrollable>
-          <Button
-            icon='copy'
-            ref={copyRef}
-            primary
-            data-clipboard-text={clientKey}
-          />
+          <Button icon='copy' primary onClick={() => clipboard.copy()} />
         </Box>
         <Box mbs={24}>
           <Box

diff --git a/yarn.lock b/yarn.lock
@@ -6824,7 +6824,6 @@ __metadata:
     "@types/react": ~17.0.57
     "@types/react-dom": ^17.0.19
     bump: "workspace:~"
-    clipboard: ~2.0.11
     countries-list: ^2.6.1
     eslint: ~8.38.0
     i18next: ~21.6.16
@@ -12487,17 +12486,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clipboard@npm:~2.0.11":
-  version: 2.0.11
-  resolution: "clipboard@npm:2.0.11"
-  dependencies:
-    good-listener: ^1.2.2
-    select: ^1.1.2
-    tiny-emitter: ^2.0.0
-  checksum: 413055a6038e43898e0e895216b58ed54fbf386f091cb00188875ef35b186cefbd258acdf4cb4b0ac87cbc00de936f41b45dde9fe1fd1a57f7babb28363b8748
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^6.0.0":
   version: 6.0.0
   resolution: "cliui@npm:6.0.0"
@@ -14065,13 +14053,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"delegate@npm:^3.1.2":
-  version: 3.2.0
-  resolution: "delegate@npm:3.2.0"
-  checksum: d943058fe05897228b158cbd1bab05164df28c8f54127873231d6b03b0a5acc1b3ee1f98ac70ccc9b79cd84aa47118a7de111fee2923753491583905069da27d
-  languageName: node
-  linkType: hard
-
 "delegates@npm:^1.0.0":
   version: 1.0.0
   resolution: "delegates@npm:1.0.0"
@@ -16821,15 +16802,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"good-listener@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "good-listener@npm:1.2.2"
-  dependencies:
-    delegate: ^3.1.2
-  checksum: f39fb82c4e41524f56104cfd2d7aef1a88e72f3f75139115fbdf98cc7d844e0c1b39218b2e83438c6188727bf904ed78c7f0f2feff67b32833bc3af7f0202b33
-  languageName: node
-  linkType: hard
-
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -25734,13 +25706,6 @@ fsevents@^1.2.7:
   languageName: unknown
   linkType: soft
 
-"select@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "select@npm:1.1.2"
-  checksum: 4346151e94f226ea6131e44e68e6d837f3fdee64831b756dd657cc0b02f4cb5107f867cb34a1d1216ab7737d0bf0645d44546afb030bbd8d64e891f5e4c4814e
-  languageName: node
-  linkType: hard
-
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0, semver@npm:^5.7.1":
   version: 5.7.1
   resolution: "semver@npm:5.7.1"
@@ -27680,13 +27645,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"tiny-emitter@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "tiny-emitter@npm:2.1.0"
-  checksum: fbcfb5145751a0e3b109507a828eb6d6d4501352ab7bb33eccef46e22e9d9ad3953158870a6966a59e57ab7c3f9cfac7cab8521db4de6a5e757012f4677df2dd
-  languageName: node
-  linkType: hard
-
 "tiny-glob@npm:^0.2.9":
   version: 0.2.9
   resolution: "tiny-glob@npm:0.2.9"