diff --git a/i18n/en/code.json b/i18n/en/code.json index de0955e3..924533d2 100644 --- a/i18n/en/code.json +++ b/i18n/en/code.json @@ -1118,5 +1118,8 @@ }, "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": { "message": "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later." + }, + "Copied": { + "message": "Copied" } } diff --git a/i18n/fr/code.json b/i18n/fr/code.json index 4e66c8e9..80308d40 100644 --- a/i18n/fr/code.json +++ b/i18n/fr/code.json @@ -1118,5 +1118,8 @@ }, "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": { "message": "Le serveur est actuellement incapable de traiter la requête en raison d'une surcharge temporaire ou d'une maintenance du serveur. Veuillez réessayer plus tard." + }, + "Copied": { + "message": "Copié" } } diff --git a/src/features/dashboard/components/common-table/cell-copy-text.module.scss b/src/features/dashboard/components/common-table/cell-copy-text.module.scss index 993e4a5f..e8eaeda8 100644 --- a/src/features/dashboard/components/common-table/cell-copy-text.module.scss +++ b/src/features/dashboard/components/common-table/cell-copy-text.module.scss @@ -14,4 +14,38 @@ .copyTextIcon { margin-left: 8px; margin-top: 4px; + position: relative; +} + +.tooltip { + position: absolute; + background-color: rgba(0, 0, 0, 0.75); + color: white; + padding: 5px 10px; + border-radius: 4px; + top: 100%; + left: 50%; + transform: translateX(-50%); + z-index: 1000; + white-space: nowrap; + font-size: 12px; + transition: opacity 0.3s ease, visibility 0.3s ease; + opacity: 0; + visibility: hidden; + + &::after { + content: ''; + position: absolute; + top: -6px; + left: 50%; + transform: translateX(-50%); + border-width: 0 6px 6px; + border-style: solid; + border-color: transparent transparent rgba(0, 0, 0, 0.75); + } +} + +.tooltip.visible { + opacity: 1; + visibility: visible; } diff --git a/src/features/dashboard/components/common-table/cell-copy-text.tsx b/src/features/dashboard/components/common-table/cell-copy-text.tsx index a2bc8f52..4ea1c1ad 100644 --- a/src/features/dashboard/components/common-table/cell-copy-text.tsx +++ b/src/features/dashboard/components/common-table/cell-copy-text.tsx @@ -1,29 +1,36 @@ import React from 'react'; import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/quill-ui'; +import Translate from '@docusaurus/Translate'; import styles from './cell-copy-text.module.scss'; const CopyTextCell: React.FC<{ cell: { value: React.ReactNode; }; -}> = ({ cell }) => { +}> = ({ cell: { value } }) => { + const [tooltipVisible, setTooltipVisible] = React.useState(false); + + const handleCopy = React.useCallback(() => { + navigator.clipboard.writeText(value.toString()); + setTooltipVisible(true); + setTimeout(() => setTooltipVisible(false), 1000); + }, [value]); + return ( - {cell.value ? ( -
{ - navigator.clipboard.writeText(cell.value.toString()); - }} - > - {cell.value} + {value && ( +
+ {value} + {tooltipVisible && ( +
+ Copied +
+ )}
- ) : ( - '' )} );