From 32cafbff9b6bb697f9516e62f2938a7652b95f12 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 7 Nov 2023 07:20:17 +0800
Subject: [PATCH] chore: add OverflowTip kit component

---
 web/src/components/CreateTagDialog.tsx | 23 ++++++++++---------
 web/src/components/TagList.tsx         |  2 +-
 web/src/components/kit/OverflowTip.tsx | 31 ++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 web/src/components/kit/OverflowTip.tsx

diff --git a/web/src/components/CreateTagDialog.tsx b/web/src/components/CreateTagDialog.tsx
index 4667893a..76cc2223 100644
--- a/web/src/components/CreateTagDialog.tsx
+++ b/web/src/components/CreateTagDialog.tsx
@@ -8,6 +8,7 @@ import { useTagStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
+import OverflowTip from "./kit/OverflowTip";
 
 type Props = DialogProps;
 
@@ -108,13 +109,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
               {Array.from(tagNameList)
                 .sort()
                 .map((tag) => (
-                  <span
-                    className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  <OverflowTip
                     key={tag}
-                    onClick={() => handleDeleteTag(tag)}
+                    className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through"
                   >
-                    #{tag}
-                  </span>
+                    <span className="w-full" onClick={() => handleDeleteTag(tag)}>
+                      #{tag}
+                    </span>
+                  </OverflowTip>
                 ))}
             </div>
           </>
@@ -135,13 +137,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
               <>
                 <div className="w-full flex flex-row justify-start items-start flex-wrap mb-2">
                   {shownSuggestTagNameList.map((tag) => (
-                    <span
-                      className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60"
+                    <OverflowTip
                       key={tag}
-                      onClick={() => handleUpsertTag(tag)}
+                      className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60"
                     >
-                      #{tag}
-                    </span>
+                      <span className="w-full" onClick={() => handleUpsertTag(tag)}>
+                        #{tag}
+                      </span>
+                    </OverflowTip>
                   ))}
                 </div>
                 <Button size="sm" variant="outlined" onClick={handleSaveSuggestTagList}>
diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx
index d9d7e6d9..3bf15aaf 100644
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@@ -139,7 +139,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       </div>
       {hasSubTags ? (
         <div
-          className={`w-full flex flex-col justify-start items-start h-auto ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
+          className={`w-[calc(100%-1rem)] flex flex-col justify-start items-start h-auto ml-4 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
             !showSubTags && "!hidden"
           }`}
         >
diff --git a/web/src/components/kit/OverflowTip.tsx b/web/src/components/kit/OverflowTip.tsx
new file mode 100644
index 00000000..b417da0f
--- /dev/null
+++ b/web/src/components/kit/OverflowTip.tsx
@@ -0,0 +1,31 @@
+import { Tooltip } from "@mui/joy";
+import classNames from "classnames";
+import { useRef, useState, useEffect } from "react";
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const OverflowTip = ({ children, className }: Props) => {
+  const [isOverflowed, setIsOverflow] = useState(false);
+  const textElementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!textElementRef.current) {
+      return;
+    }
+
+    setIsOverflow(textElementRef.current.scrollWidth > textElementRef.current.clientWidth);
+  }, []);
+
+  return (
+    <Tooltip title={children} placement="top" arrow disableHoverListener={!isOverflowed}>
+      <div ref={textElementRef} className={classNames("truncate", className)}>
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+export default OverflowTip;