@purpurds/table 6.12.4 → 7.0.0

package/src/use-truncated-hook.tsx

@@ -1,66 +1,22 @@
-import { useEffect, useRef, useState } from "react";
-import { Cell, RowData } from "@tanstack/react-table";
+import { useRef, useState } from "react";
 
-const useTruncatedTooltip = <TData extends RowData>(cell: Cell<TData, unknown> | undefined) => {
-  const divRef = useRef<HTMLParagraphElement>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const timeoutIdRef = useRef<NodeJS.Timeout | undefined>(undefined);
+const useTruncatedTooltip = () => {
   const [showPopover, setShowPopover] = useState(false);
-
-  const debounce = (func: (...args: unknown[]) => void, delay: number) => {
-    let timeoutId: NodeJS.Timeout;
-    const debouncedFunction = (...args: unknown[]) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => func.apply(this, args), delay);
-    };
-    return {
-      debouncedFunction,
-      get timeoutId() {
-        return timeoutId;
-      },
-    };
-  };
-
-  useEffect(() => {
-    if (!cell) {
-      return;
-    }
-
-    const { debouncedFunction: checkTruncation, timeoutId } = debounce(() => {
-      if (divRef.current && cell) {
-        const pEl = divRef.current.querySelector("p");
-        if (pEl) {
-          setIsTruncated(pEl.scrollWidth > cell.column.getSize());
-        }
-      }
-    }, 100); // Adjust debounce delay as needed
-
-    checkTruncation();
-    timeoutIdRef.current = timeoutId;
-
-    return () => {
-      clearTimeout(timeoutIdRef.current);
-    };
-  }, [cell]);
-
-  useEffect(() => {
-    if (divRef.current && cell) {
-      if (divRef.current.textContent) {
-        const pEl = divRef.current.querySelector("p");
-        if (pEl) {
-          setIsTruncated(pEl.scrollWidth > cell.column.getSize());
-        }
-        const aEl = divRef.current.querySelector("a");
-        if (aEl) {
-          setIsTruncated(aEl.scrollWidth > cell.column.getSize());
-        }
-      }
-    }
-  }, [divRef, cell, isTruncated]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const onMouseEnter = () => {
-    if (isTruncated) {
-      setShowPopover(true);
+    if (containerRef.current) {
+      const contentElement: HTMLLinkElement | HTMLParagraphElement | null =
+        containerRef.current.querySelector("a, p"); // Find "a" or "p" tag
+      if (contentElement) {
+        const containerWidth = containerRef.current.clientWidth;
+        const contentWidth =
+          contentElement.tagName.toLowerCase() === "a"
+            ? contentElement.offsetWidth
+            : contentElement.scrollWidth;
+
+        setShowPopover(contentWidth > containerWidth);
+      }
     }
   };
 
@@ -68,7 +24,7 @@ const useTruncatedTooltip = <TData extends RowData>(cell: Cell<TData, unknown> |
     setShowPopover(false);
   };
 
-  return { divRef, onMouseEnter, onMouseLeave, showPopover };
+  return { showPopover, containerRef, onMouseEnter, onMouseLeave };
 };
 
 export default useTruncatedTooltip;