From b7c379219261aa015caecae3a310c3b724a39085 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Mon, 3 Jun 2024 06:50:53 +0530
Subject: [PATCH] moved copyToClipboard function to helpers for the reusability
 (DRY)

---
 .changeset/poor-tools-hide.md                      |  2 +-
 packages/ui/src/components/Clipboard/Clipboard.tsx | 14 +++++++-------
 .../src/components/Clipboard/ClipboardWithIcon.tsx | 14 +++++++-------
 .../components/Clipboard/ClipboardWithIconText.tsx | 14 +++++++-------
 packages/ui/src/components/Clipboard/helpers.ts    |  7 +++++++
 5 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 packages/ui/src/components/Clipboard/helpers.ts

diff --git a/.changeset/poor-tools-hide.md b/.changeset/poor-tools-hide.md
index 69a7f7542..ac2d1bf43 100644
--- 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
index 941629c8d..a32914e83 100644
--- 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
index 184550109..574c8fa66 100644
--- 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
index bbb87cfe8..224ef6a89 100644
--- 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
new file mode 100644
index 000000000..a661dc311
--- /dev/null
+++ 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);
+};