create a CopyButton component

mat-sz · Oct 24, 2023 · c9e57b9 · c9e57b9
1 parent e75e9bf
commit c9e57b9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/web/src/components/CopyButton.tsx b/web/src/components/CopyButton.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18not';
+import { IoCopy } from 'react-icons/io5/index.js';
+
+import { IconButton, IconButtonProps } from './IconButton.js';
+
+export interface CopyButtonProps
+  extends Omit<IconButtonProps, 'title' | 'href' | 'download' | 'children'> {}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ ...props }) => {
+  const { t } = useTranslation();
+
+  return (
+    <IconButton {...props} title={t('copy')}>
+      <IoCopy />
+    </IconButton>
+  );
+};
diff --git a/web/src/components/IconButton.tsx b/web/src/components/IconButton.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 import styles from './IconButton.module.scss';
 
-interface IconButtonProps
+export interface IconButtonProps
   extends Omit<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
     'ref'

diff --git a/web/src/sections/Chat/ChatItem.tsx b/web/src/sections/Chat/ChatItem.tsx
@@ -1,7 +1,6 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18not';
 import { motion } from 'nanoanim';
-import { IoCopy } from 'react-icons/io5/index.js';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
@@ -10,7 +9,7 @@ import { animationPropsSlide } from '../../animationSettings.js';
 import { ChatItemModel } from '../../types/Models.js';
 import { copy } from '../../utils/copy.js';
 import { TargetTile } from '../../components/TargetTile.js';
-import { IconButton } from '../../components/IconButton.js';
+import { CopyButton } from '../../components/CopyButton.js';
 import { connection } from '../../stores/index.js';
 
 export interface ChatItemProps {
@@ -58,9 +57,7 @@ export const ChatItem: React.FC<ChatItemProps> = observer(({ item }) => {
         <div>
           {item.date.toLocaleTimeString(language, { timeStyle: 'short' })}
         </div>
-        <IconButton onClick={() => copy(item.message)} title={t('copy')}>
-          <IoCopy />
-        </IconButton>
+        <CopyButton onClick={() => copy(item.message)} />
       </div>
       <div className={styles.message} ref={messageRef}>
         {urlify(item.message)}

diff --git a/web/src/sections/Connect/index.tsx b/web/src/sections/Connect/index.tsx
@@ -2,14 +2,15 @@ import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { QRCodeSVG } from 'qrcode.react';
 import { useTranslation } from 'react-i18not';
-import { IoSend, IoCopy } from 'react-icons/io5/index.js';
+import { IoSend } from 'react-icons/io5/index.js';
 import { useLocation } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 
 import styles from './index.module.scss';
 import { copy } from '../../utils/copy.js';
 import { isShareSupported } from '../../utils/browser.js';
 import { IconButton } from '../../components/IconButton.js';
+import { CopyButton } from '../../components/CopyButton.js';
 import { applicationStore, networkStore } from '../../stores/index.js';
 import { LocalNetworks } from '../LocalNetworks/index.js';
 
@@ -32,9 +33,7 @@ export const ConnectSection: React.FC = observer(() => {
             <div className={styles.copy}>
               <pre>{href}</pre>
               <div className={styles.buttons}>
-                <IconButton onClick={() => copy(href)} title={t('copy')}>
-                  <IoCopy />
-                </IconButton>
+                <CopyButton onClick={() => copy(href)} />
                 {isShareSupported && (
                   <IconButton
                     onClick={() => applicationStore.share(href)}

diff --git a/web/src/sections/Transfers/Transfer/TransferActions.tsx b/web/src/sections/Transfers/Transfer/TransferActions.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  IoCopy,
   IoCloseSharp,
   IoCheckmark,
   IoArrowDown,
@@ -10,6 +9,7 @@ import { useTranslation } from 'react-i18not';
 
 import styles from './TransferActions.module.scss';
 import { IconButton } from '../../../components/IconButton.js';
+import { CopyButton } from '../../../components/CopyButton.js';
 import { Transfer } from '../../../stores/Transfer.js';
 
 interface TransferProps {
@@ -33,14 +33,11 @@ export const TransferActions: React.FC<TransferProps> = observer(
           </IconButton>
         )}
         {transfer.canCopy && (
-          <IconButton
+          <CopyButton
             round
             onClick={() => transfer.copy()}
             className={styles.copy}
-            title={t('copy')}
-          >
-            <IoCopy />
-          </IconButton>
+          />
         )}
         {transfer.canAccept && (
           <IconButton