From 92c1c04995cb09d74a66f4fa8f3459b4f3d6cfbd Mon Sep 17 00:00:00 2001
From: hayao <hayao@fascode.net>
Date: Sat, 28 Oct 2023 00:03:10 +0900
Subject: [PATCH] Add: Click to copy button

---
 src/components/CopyBtn.tsx | 44 ++++++++++++++++++++++++++++++++++++++
 src/options/pages/Top.tsx  |  7 +++---
 src/utils/addClass.ts      |  6 +++---
 3 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/components/CopyBtn.tsx

diff --git a/src/components/CopyBtn.tsx b/src/components/CopyBtn.tsx
new file mode 100644
index 0000000..611dd7b
--- /dev/null
+++ b/src/components/CopyBtn.tsx
@@ -0,0 +1,44 @@
+import { ReactNode, useState } from "react";
+import { Tooltip } from "react-daisyui";
+
+export default function CopyTootrip({
+    children,
+    copyText,
+    className,
+}: {
+    children: ReactNode;
+    copyText: string;
+    className?: string;
+}) {
+    const defaultMsg = "クリックしてコピー";
+    const [tooltipMsg, setTooltipMsg] = useState(defaultMsg);
+
+    const handleClick = (/*e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>*/) => {
+        navigator.clipboard.writeText(copyText);
+        setTooltipMsg("コピーしました");
+    };
+
+    const handleMouseOut = () => {
+        setTooltipMsg(defaultMsg);
+    };
+
+    const handleMouseOver = (/*e: React.MouseEvent<HTMLDivElement, MouseEvent>*/) => {
+        setTimeout(() => {
+            setTooltipMsg(defaultMsg);
+        }, 2000);
+    };
+
+    return (
+        <>
+            <Tooltip
+                message={tooltipMsg}
+                onClick={handleClick}
+                onMouseOut={handleMouseOut}
+                onMouseOver={handleMouseOver}
+                className={className}
+            >
+                {children}
+            </Tooltip>
+        </>
+    );
+}
diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx
index 1b94885..54c8ed5 100644
--- a/src/options/pages/Top.tsx
+++ b/src/options/pages/Top.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { useEffect, useState } from "react";
 
 import { StorageTool } from "../../class/StorageTool";
+import CopyTootrip from "../../components/CopyBtn";
 import Heading from "../../components/Heading";
 import { Switches } from "../../components/Switches";
 import IsTrue from "../../utils/isTrue";
@@ -27,9 +28,9 @@ export default function Top() {
 
             <ConfigSection name="群馬大学学務課・メディアセンターの方へ">
                 <p>このソフトウェアについて問題がある場合は以下のメールアドレスまでご連絡ください。</p>
-                <a href="mailto:shun819.mail@gmail.com" className="btn btn-neutral my-5">
-                    shun819.mail@gmail.com
-                </a>
+                <CopyTootrip copyText="shun819.mail@gmail.com" className="my-5">
+                    <button className="btn btn-neutral">shun819.mail@gmail.com</button>
+                </CopyTootrip>
             </ConfigSection>
         </>
     );
diff --git a/src/utils/addClass.ts b/src/utils/addClass.ts
index 077e531..2046292 100644
--- a/src/utils/addClass.ts
+++ b/src/utils/addClass.ts
@@ -4,9 +4,9 @@ export function addClass(elements: Elements[], classNames: string[]) {
     elements.forEach((element) => {
         if (typeof element === "string") {
             const elements = document.querySelectorAll(element);
-            elements.forEach((element) => {
-                //console.log("adding classes to", element);
-                element.classList.add(...classNames);
+            elements.forEach((e) => {
+                console.log(`adding classes (${classNames}) to`, e);
+                e.classList.add(...classNames);
             });
         } else {
             let list: HTMLElement[];