fix the issue with copyToClipboard component (#133)

Co-authored-by: Aleksandar Drazhev <[email protected]>
LimeChain · Nov 7, 2024 · 75c2dd0 · 75c2dd0
1 parent 548cd5d
commit 75c2dd0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/src/components/copyToClipboard/index.tsx b/src/components/copyToClipboard/index.tsx
@@ -19,12 +19,11 @@ import type {
 interface ICopyToClipboardProps {
   text: string;
   toastMessage?: string;
-  children: (props: { ClipboardIcon: ReactNode; onClick: (e: React.MouseEvent) => void }) => ReactElement;
+  children: (props: { ClipboardIcon: ReactNode; onClick: (e: React.MouseEvent) => void; text: string }) => ReactElement;
   onCopy?: (success: boolean, text: string) => void;
   showToast?: boolean;
   className?: string;
   iconSize?: number;
-  textClassName?: string;
 }
 
 export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
@@ -36,7 +35,6 @@ export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
     onCopy,
     className,
     iconSize = 16,
-    textClassName,
   } = props;
 
   const refTimeout = useRef<NodeJS.Timeout>();
@@ -125,19 +123,12 @@ export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
   ]);
 
   return (
-    <div className="flex w-full items-center gap-x-2">
-      {text && (
-        <p
-          className={textClassName}
-          onClick={copyToClipboard}
-        >
-          {text}
-        </p>
-      )}
+    <>
       {children({
         ClipboardIcon,
         onClick: copyToClipboard,
+        text,
       })}
-    </div>
+    </>
   );
 });
diff --git a/src/views/blockDetails/blockHeader/index.tsx b/src/views/blockDetails/blockHeader/index.tsx
@@ -39,18 +39,25 @@ const DetailRow = (props: DetailRowProps) => {
           <CopyToClipboard
             className="relative flex items-center"
             text={value}
-            textClassName="cursor-pointer peer"
             toastMessage={label}
           >
-            {({ ClipboardIcon }) => (
-              <div
-                className={cn(
-                  'transition-opacity duration-200 ease-in-out',
-                  'opacity-100 md:opacity-0',
-                  'group-hover:opacity-100 peer-hover:text-dev-pink-400 md:group-hover:opacity-100',
-                )}
-              >
-                {ClipboardIcon}
+            {({ ClipboardIcon, text, onClick }) => (
+              <div className="flex items-center gap-x-2">
+                <p
+                  className="peer cursor-pointer"
+                  onClick={onClick}
+                >
+                  {text}
+                </p>
+                <div
+                  className={cn(
+                    'transition-opacity duration-200 ease-in-out',
+                    'opacity-100 md:opacity-0',
+                    'group-hover:opacity-100 peer-hover:text-dev-pink-400 md:group-hover:opacity-100',
+                  )}
+                >
+                  {ClipboardIcon}
+                </div>
               </div>
             )}
           </CopyToClipboard>

diff --git a/src/views/forks/virtualizedList.tsx b/src/views/forks/virtualizedList.tsx
@@ -217,20 +217,25 @@ export const VirtualizedList = (props: IVirtualizedListProps) => {
                             <CopyToClipboard
                               className="hover:text-dev-dev-purple-50"
                               text={item.blockHash}
-                              textClassName="truncate cursor-pointer"
                               toastMessage="Block Hash"
                             >
-                              {
-                                ({ ClipboardIcon }) => (
+                              {({ ClipboardIcon, text, onClick }) => (
+                                <div className="flex items-center gap-x-2 overflow-hidden">
+                                  <p
+                                    className="cursor-pointer truncate"
+                                    onClick={onClick}
+                                  >
+                                    {text}
+                                  </p>
                                   <div
                                     className={cn(
                                       'ml-auto flex items-center justify-center rounded-full dark:bg-dev-green-600/30',
                                     )}
                                   >
                                     {ClipboardIcon}
                                   </div>
-                                )
-                              }
+                                </div>
+                              )}
                             </CopyToClipboard>
                           </div>
                         </Fragment>