feat(table): add copied tooltip text for table col element (#36)

softconstruct · Jan 10, 2024 · 356b35a · 356b35a
1 parent dc2a133
commit 356b35a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/lib/organisms/Table/Row/col.js b/src/lib/organisms/Table/Row/col.js
@@ -2,10 +2,10 @@ import React, { useRef, useCallback, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import isEqual from 'react-fast-compare';
 
-import { guid, stopEvent, copyToClipboard } from 'utils';
-import Icon from '../../../atoms/Icon';
-import SkeletonLoader from '../../../atoms/SkeletonLoader';
-import Tooltip from '../../../molecules/Tooltip';
+import { guid, stopEvent, copyToClipboard, callAfterDelay } from 'utils';
+import Icon from 'src/lib/atoms/Icon';
+import SkeletonLoader from 'src/lib/atoms/SkeletonLoader';
+import Tooltip from 'src/lib/molecules/Tooltip';
 
 function Col({
     id,
@@ -25,6 +25,7 @@ function Col({
     copyableValue,
     stickyColumns,
     copyTooltipText,
+    copiedTooltipText,
     initialColWidth,
     disabledColumnPin,
     defaultCustomWidth,
@@ -53,6 +54,7 @@ function Col({
             return guidRef.current;
         }
     });
+    const [isCopied, setIsCopied] = useState(false);
 
     useEffect(() => {
         mounted.current = true;
@@ -70,8 +72,12 @@ function Col({
         (event) => {
             stopEvent(event);
             copyToClipboard(copyableValue || value);
+            !isCopied && setIsCopied(true);
+            callAfterDelay(() => {
+                setIsCopied(false);
+            }, 2000);
         },
-        [copyableValue, value]
+        [copyableValue, value, isCopied]
     );
 
     return (
@@ -97,12 +103,12 @@ function Col({
             >
                 <SkeletonLoader height={20} isBusy={guidRef.current && promiseValue === guidRef.current}>
                     {copyable && value && (
-                        <Tooltip title={copyTooltipText}>
+                        <Tooltip title={isCopied ? copiedTooltipText : copyTooltipText}>
                             <Icon
                                 tabIndex="1"
                                 className="cursor-pointer copy-icon"
-                                type="bc-icon-copy-mirror"
-                                onClick={handleCopy}
+                                type={isCopied ? 'bc-icon-checkbox-checked' : 'bc-icon-copy-mirror'}
+                                onClick={!isCopied && handleCopy}
                             />
                         </Tooltip>
                     )}
@@ -116,7 +122,8 @@ function Col({
 }
 
 Col.defaultProps = {
-    copyTooltipText: 'Copy'
+    copyTooltipText: 'Copy',
+    copiedTooltipText: 'Copied!'
 };
 
 export default React.memo(Col, isEqual);
diff --git a/src/lib/organisms/Table/Row/index.js b/src/lib/organisms/Table/Row/index.js
@@ -237,8 +237,16 @@ function Row({
                     </div>
                 )}
                 {orders.map(({ dataKey, id }, colIndex) => {
-                    const { hide, getter, copyable, formatter, colRenderer, copyableValue, copyTooltipText } =
-                        columns.find((column) => column.uid === id) || {};
+                    const {
+                        hide,
+                        getter,
+                        copyable,
+                        formatter,
+                        colRenderer,
+                        copyableValue,
+                        copyTooltipText,
+                        copiedTooltipText
+                    } = columns.find((column) => column.uid === id) || {};
                     const { autoSizeOn, customWidth, autoSizeWidth, defaultCustomWidth } = colsInfo[id];
                     if (hide) return null;
                     return (
@@ -263,6 +271,7 @@ function Row({
                             disabledColumnPin={disabledColumnPin}
                             initialColWidth={initialColWidth}
                             copyTooltipText={copyTooltipText}
+                            copiedTooltipText={copiedTooltipText}
                             defaultCustomWidth={defaultCustomWidth}
                         />
                     );

diff --git a/src/lib/organisms/Table/index.js b/src/lib/organisms/Table/index.js
@@ -634,6 +634,10 @@ Table.propTypes = {
      *
      * exportDisabled: Hide that column from export
      *
+     * copyTooltipText: Text for the tooltip when you hover on the element that can be copied.
+     *
+     * copiedTooltipText: Text for the tooltip when you already pressed copy button on the element that can be copied.
+     *
      * resizable: Allows resizing if true
      *
      * current column's data key
@@ -663,6 +667,7 @@ Table.propTypes = {
             copyable: PropTypes.bool,
             exportDisabled: PropTypes.bool,
             copyTooltipText: PropTypes.string,
+            copiedTooltipText: PropTypes.string,
             copyableValue: PropTypes.string,
             sortable: PropTypes.bool,
             resizable: PropTypes.bool,