feat(ArticleDetail): refactor CopyToClipboard Component

thematters · Feb 29, 2024 · d83e534 · d83e534
1 parent 2f8643d
commit d83e534
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 246 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -871,9 +871,6 @@
     "defaultMessage": "Number of comments",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "JRkgKV": {
-    "defaultMessage": "Failed to copy, please try again."
-  },
   "JTWayV": {
     "defaultMessage": "Add description",
     "description": "src/views/User/CollectionDetail/Content.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -871,9 +871,6 @@
     "defaultMessage": "Number of comments",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "JRkgKV": {
-    "defaultMessage": "Failed to copy, please try again."
-  },
   "JTWayV": {
     "defaultMessage": "Add description",
     "description": "src/views/User/CollectionDetail/Content.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -871,9 +871,6 @@
     "defaultMessage": "评论数量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "JRkgKV": {
-    "defaultMessage": "复制失败"
-  },
   "JTWayV": {
     "defaultMessage": "添加描述",
     "description": "src/views/User/CollectionDetail/Content.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -871,9 +871,6 @@
     "defaultMessage": "評論數量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
-  "JRkgKV": {
-    "defaultMessage": "複製失敗"
-  },
   "JTWayV": {
     "defaultMessage": "添加描述",
     "description": "src/views/User/CollectionDetail/Content.tsx"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -107,7 +107,6 @@
     "pulltorefreshjs": "^0.1.22",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "react-focus-lock": "^2.9.4",
     "react-hot-toast": "^2.4.1",
@@ -160,7 +159,6 @@
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.26",
     "@types/react-beautiful-dnd": "^13.1.4",
-    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.10",
     "@types/react-lottie": "^1.2.6",
     "@types/react-responsive": "^8.0.5",

diff --git a/src/components/CommentBeta/DropdownActions/CopyCommentButton.tsx b/src/components/CommentBeta/DropdownActions/CopyCommentButton.tsx
@@ -1,28 +1,18 @@
-import * as clipboard from 'clipboard-polyfill'
 import { FormattedMessage } from 'react-intl'
 
-import { IconCopy16, Menu, toast } from '~/components'
+import { CopyToClipboard, IconCopy16, Menu } from '~/components'
 
 const CopyCommentButton = ({ content }: { content: string }) => {
-  const copyHtmlToClipboard = async function () {
-    const item = new clipboard.ClipboardItem({
-      'text/html': new Blob([content], { type: 'text/html' }),
-    })
-    await clipboard.write([item])
-
-    toast.success({
-      message: (
-        <FormattedMessage defaultMessage="Copied successful" id="SYyBFF" />
-      ),
-    })
-  }
-
   return (
-    <Menu.Item
-      text={<FormattedMessage defaultMessage="Copy comment" id="eY3YIa" />}
-      icon={<IconCopy16 size="mdS" />}
-      onClick={copyHtmlToClipboard}
-    />
+    <CopyToClipboard text={content} type="html">
+      {({ copyToClipboard }) => (
+        <Menu.Item
+          text={<FormattedMessage defaultMessage="Copy comment" id="eY3YIa" />}
+          icon={<IconCopy16 size="mdS" />}
+          onClick={copyToClipboard}
+        />
+      )}
+    </CopyToClipboard>
   )
 }
 

diff --git a/src/components/CopyToClipboard/CopyToClipboard.test.tsx b/src/components/CopyToClipboard/CopyToClipboard.test.tsx
@@ -8,7 +8,11 @@ describe('<CopyToClipboard>', () => {
     const textToCopy = 'text to copy'
     render(
       <CopyToClipboard text={textToCopy}>
-        <button type="button">Copy</button>
+        {({ copyToClipboard }) => (
+          <button type="button" onClick={copyToClipboard}>
+            Copy
+          </button>
+        )}
       </CopyToClipboard>
     )
 
@@ -20,6 +24,6 @@ describe('<CopyToClipboard>', () => {
     // FIXME: not support clipboard in jsdom yet
     const $toast = screen.getByRole('alert')
     expect($toast).toBeInTheDocument()
-    expect($toast).toHaveTextContent('Failed to copy, please try again.')
+    expect($toast).toHaveTextContent('Copied successful')
   })
 })
diff --git a/src/components/CopyToClipboard/index.tsx b/src/components/CopyToClipboard/index.tsx
@@ -1,41 +1,43 @@
-import C2C from 'react-copy-to-clipboard'
+import * as clipboard from 'clipboard-polyfill'
 import { FormattedMessage } from 'react-intl'
 
 import { toast } from '~/components'
 
 interface CopyToClipboardProps {
   text: string
   successMessage?: React.ReactNode
+  type?: 'plain' | 'html'
+  children: ({
+    copyToClipboard,
+  }: {
+    copyToClipboard: () => void
+  }) => React.ReactNode
 }
 
-export const CopyToClipboard: React.FC<
-  React.PropsWithChildren<CopyToClipboardProps>
-> = ({ text, successMessage, children }) => {
-  return (
-    <C2C
-      text={text}
-      onCopy={(_, copied) => {
-        if (!copied) {
-          toast.error({
-            message: (
-              <FormattedMessage
-                defaultMessage="Failed to copy, please try again."
-                id="JRkgKV"
-              />
-            ),
-          })
+export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
+  text,
+  successMessage,
+  type = 'plain',
+  children,
+}) => {
+  const copyToClipboard = async function () {
+    let item = new clipboard.ClipboardItem({
+      'text/plain': new Blob([text], { type: 'text/plain' }),
+    })
+    if (type === 'html') {
+      item = new clipboard.ClipboardItem({
+        'text/html': new Blob([text], { type: 'text/html' }),
+      })
+    }
 
-          return
-        }
+    await clipboard.write([item])
 
-        toast.success({
-          message: successMessage || (
-            <FormattedMessage defaultMessage="Copied successful" id="SYyBFF" />
-          ),
-        })
-      }}
-    >
-      {children}
-    </C2C>
-  )
+    toast.success({
+      message: successMessage || (
+        <FormattedMessage defaultMessage="Copied successful" id="SYyBFF" />
+      ),
+    })
+  }
+
+  return <>{children({ copyToClipboard })}</>
 }
diff --git a/src/components/Dialogs/ENSDialog/LinkENS.tsx b/src/components/Dialogs/ENSDialog/LinkENS.tsx
@@ -208,21 +208,24 @@ const LinkENS = ({
                   />
                 }
               >
-                <Button
-                  spacing={['xtight', 'xtight']}
-                  aria-label={intl.formatMessage({
-                    defaultMessage: 'Copy',
-                    id: '4l6vz1',
-                  })}
-                >
-                  <TextIcon
-                    icon={<IconCopy16 color="black" size="xs" />}
-                    color="grey"
-                    textPlacement="left"
+                {({ copyToClipboard }) => (
+                  <Button
+                    spacing={['xtight', 'xtight']}
+                    aria-label={intl.formatMessage({
+                      defaultMessage: 'Copy',
+                      id: '4l6vz1',
+                    })}
+                    onClick={copyToClipboard}
                   >
-                    {maskAddress(viewer.info.ethAddress || '')}
-                  </TextIcon>
-                </Button>
+                    <TextIcon
+                      icon={<IconCopy16 color="black" size="xs" />}
+                      color="grey"
+                      textPlacement="left"
+                    >
+                      {maskAddress(viewer.info.ethAddress || '')}
+                    </TextIcon>
+                  </Button>
+                )}
               </CopyToClipboard>
             </p>
           </section>

diff --git a/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx b/src/components/Dialogs/FingerprintDialog/ArticleSecret.tsx
@@ -49,21 +49,24 @@ const ArticleSecretSection: React.FC<ArticleSecretSectionProps> = ({ id }) => {
 
       <section className={styles.key}>
         <CopyToClipboard text={secret}>
-          <button
-            aria-label={intl.formatMessage({
-              defaultMessage: 'Copy',
-              id: '4l6vz1',
-            })}
-            className={styles.copyButton}
-          >
-            <TextIcon
-              icon={<IconCopy16 />}
-              textPlacement="left"
-              spacing="xtight"
+          {({ copyToClipboard }) => (
+            <button
+              aria-label={intl.formatMessage({
+                defaultMessage: 'Copy',
+                id: '4l6vz1',
+              })}
+              className={styles.copyButton}
+              onClick={copyToClipboard}
             >
-              {secret.slice(0, 4)}...{secret.slice(-4)}
-            </TextIcon>
-          </button>
+              <TextIcon
+                icon={<IconCopy16 />}
+                textPlacement="left"
+                spacing="xtight"
+              >
+                {secret.slice(0, 4)}...{secret.slice(-4)}
+              </TextIcon>
+            </button>
+          )}
         </CopyToClipboard>
       </section>
     </section>

diff --git a/src/components/Dialogs/FingerprintDialog/Content.tsx b/src/components/Dialogs/FingerprintDialog/Content.tsx
@@ -221,14 +221,17 @@ const FingerprintDialogContent = ({
                 {dataHash || translate({ id: 'waitingForHash', lang })}
               </div>
               <CopyToClipboard text={dataHash}>
-                <Button
-                  aria-label={intl.formatMessage({
-                    defaultMessage: 'Copy',
-                    id: '4l6vz1',
-                  })}
-                >
-                  <IconCopy16 />
-                </Button>
+                {({ copyToClipboard }) => (
+                  <Button
+                    aria-label={intl.formatMessage({
+                      defaultMessage: 'Copy',
+                      id: '4l6vz1',
+                    })}
+                    onClick={copyToClipboard}
+                  >
+                    <IconCopy16 />
+                  </Button>
+                )}
               </CopyToClipboard>
             </section>
           </section>