moved copyToClipboard function to helpers for the reusability (DRY)

themesberg · Jun 3, 2024 · b7c3792 · b7c3792
1 parent 0b44dc2
commit b7c3792
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/.changeset/poor-tools-hide.md b/.changeset/poor-tools-hide.md
@@ -1,5 +1,5 @@
 ---
-"flowbite-react": patch
+"flowbite-react": minor
 ---
 
 feat(components): add "Clipboard"
diff --git a/packages/ui/src/components/Clipboard/Clipboard.tsx b/packages/ui/src/components/Clipboard/Clipboard.tsx
@@ -10,6 +10,7 @@ import { ClipboardWithIcon } from "./ClipboardWithIcon";
 import type { FlowbiteClipboardWithIconTheme } from "./ClipboardWithIcon";
 import { ClipboardWithIconText } from "./ClipboardWithIconText";
 import type { FlowbiteClipboardWithIconTextTheme } from "./ClipboardWithIconText";
+import { copyToClipboard } from "./helpers";
 
 export interface FlowbiteClipboardTheme {
   button: {
@@ -32,15 +33,14 @@ const ClipboardComponent = forwardRef<HTMLButtonElement, ClipboardProps>(
 
     const theme = mergeDeep(getTheme().clipboard.button, customTheme);
 
-    const copyToClipboard = () => {
-      setIsJustCopied(true);
-      navigator?.clipboard?.writeText(valueToCopy);
-      setTimeout(() => setIsJustCopied(false), 4000);
-    };
-
     return (
       <Tooltip content={isJustCopied ? "Copied" : "Copy to clipboard"} className="[&_*]:cursor-pointer">
-        <button className={twMerge(theme.base, className)} onClick={copyToClipboard} {...rest} ref={ref}>
+        <button
+          className={twMerge(theme.base, className)}
+          onClick={() => copyToClipboard(valueToCopy, setIsJustCopied)}
+          {...rest}
+          ref={ref}
+        >
           <span className={theme.label}>{label}</span>
         </button>
       </Tooltip>

diff --git a/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx b/packages/ui/src/components/Clipboard/ClipboardWithIcon.tsx
@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
 import type { DeepPartial } from "../../types";
+import { copyToClipboard } from "./helpers";
 
 export interface FlowbiteClipboardWithIconTheme {
   base: string;
@@ -27,14 +28,13 @@ export const ClipboardWithIcon = forwardRef<HTMLButtonElement, ClipboardWithIcon
 
     const theme = mergeDeep(getTheme().clipboard.withIcon, customTheme);
 
-    const copyToClipboard = () => {
-      setIsJustCopied(true);
-      navigator?.clipboard?.writeText(valueToCopy);
-      setTimeout(() => setIsJustCopied(false), 4000);
-    };
-
     return (
-      <button className={twMerge(theme.base, className)} onClick={copyToClipboard} {...rest} ref={ref}>
+      <button
+        className={twMerge(theme.base, className)}
+        onClick={() => copyToClipboard(valueToCopy, setIsJustCopied)}
+        {...rest}
+        ref={ref}
+      >
         {isJustCopied ? (
           <FaCheck aria-hidden className={theme.icon.successIcon} />
         ) : (

diff --git a/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx b/packages/ui/src/components/Clipboard/ClipboardWithIconText.tsx
@@ -6,6 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
 import type { DeepPartial } from "../../types";
+import { copyToClipboard } from "./helpers";
 
 export interface FlowbiteClipboardWithIconTextTheme {
   base: string;
@@ -33,14 +34,13 @@ export const ClipboardWithIconText = forwardRef<HTMLButtonElement, ClipboardWith
 
     const theme = mergeDeep(getTheme().clipboard.withIconText, customTheme);
 
-    const copyToClipboard = () => {
-      setIsJustCopied(true);
-      navigator?.clipboard?.writeText(valueToCopy);
-      setTimeout(() => setIsJustCopied(false), 4000);
-    };
-
     return (
-      <button className={twMerge(theme.base, className)} onClick={copyToClipboard} {...rest} ref={ref}>
+      <button
+        className={twMerge(theme.base, className)}
+        onClick={() => copyToClipboard(valueToCopy, setIsJustCopied)}
+        {...rest}
+        ref={ref}
+      >
         {isJustCopied ? (
           <span className={theme.label.base}>
             <FaCheck aria-hidden className={theme.icon.successIcon} />

diff --git a/packages/ui/src/components/Clipboard/helpers.ts b/packages/ui/src/components/Clipboard/helpers.ts
@@ -0,0 +1,7 @@
+import type { Dispatch, SetStateAction } from "react";
+
+export const copyToClipboard = (valueToCopy: string, setIsJustCopied: Dispatch<SetStateAction<boolean>>) => {
+  setIsJustCopied(true);
+  navigator?.clipboard?.writeText(valueToCopy);
+  setTimeout(() => setIsJustCopied(false), 4000);
+};