feat(useEllipsisDetection): add detect multiline ellipsis functionality

softconstruct · Feb 22, 2024 · c4f6d8c · c4f6d8c
1 parent b9115c1
commit c4f6d8c
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/hooks/useEllipsisDetection.js b/src/hooks/useEllipsisDetection.js
@@ -1,21 +1,30 @@
 import { useEffect, useState } from 'react';
 
+const EQUAL_HEIGHT_DIFF = 3;
+
 const useEllipsisDetection = (ref, externalDependencies = []) => {
     const [isTruncated, setIsTruncated] = useState(false);
 
     useEffect(() => {
         const handleResize = () => {
             if (!ref.current) return;
-            const { scrollWidth, clientWidth } = ref.current;
-            setIsTruncated(scrollWidth > clientWidth);
+            const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
+            setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
         };
 
         window.addEventListener('resize', handleResize);
 
         handleResize();
 
         return () => window.removeEventListener('resize', handleResize);
-    }, [ref, ref?.current?.scrollWidth, ref?.current?.clientWidth, ...externalDependencies]);
+    }, [
+        ref,
+        ref?.current?.scrollWidth,
+        ref?.current?.clientWidth,
+        ref?.current?.scrollHeight,
+        ref?.current?.clientHeight,
+        ...externalDependencies
+    ]);
 
     return isTruncated;
 };