perf: render tooltip when text is overflow

dream-num · Feb 27, 2025 · a4ae866 · a4ae866
1 parent 2f12db8
commit a4ae866
Showing 1 changed file with 35 additions and 2 deletions.
diff --git a/packages/ui/components/initial-sheet-view/InitialSheetView.tsx b/packages/ui/components/initial-sheet-view/InitialSheetView.tsx
@@ -1,6 +1,6 @@
 import { type IInitialSheet, Sheet_Cell_Type_Enum } from '@univer-clipsheet-core/table';
 import clsx from 'clsx';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { t } from '@univer-clipsheet-core/locale';
 import type { TableProps } from '@components/table';
 import { Table } from '@components/table';
@@ -18,6 +18,39 @@ type GetFunction<T> = T extends Function ? T : never;
 
 const tooltipAlign = { autoArrow: false };
 
+function elementIsClamped(element: HTMLElement) {
+    const style = getComputedStyle(element);
+    const lineHeight = Number.parseFloat(style.lineHeight);
+    const maxLines = Number.parseInt(style.webkitLineClamp, 10);
+
+    return element.scrollHeight > (maxLines * lineHeight);
+}
+
+function TextWithTooltip(props: { text: string }) {
+    const { text } = props;
+
+    const [isClamped, setIsClamped] = useState(false);
+    const detectIsClamped = useCallback((node: HTMLDivElement | null) => {
+        if (node) {
+            setTimeout(() => {
+                setIsClamped(elementIsClamped(node));
+            });
+        }
+    }, []);
+
+    const content = <div className="line-clamp-4" ref={detectIsClamped}>{text}</div>;
+
+    if (!isClamped) {
+        return content;
+    }
+
+    return (
+        <Tooltip align={tooltipAlign} placement="right" overlay={<span>{text}</span>}>
+            {content}
+        </Tooltip>
+    );
+}
+
 export const InitialSheetView = (props: InitialSheetViewProps) => {
     const { className, sheet, scroll, rounded = false } = props;
 
@@ -48,7 +81,7 @@ export const InitialSheetView = (props: InitialSheetViewProps) => {
                         ? <Link href={cell.url}>{cell.text || cell.url}</Link>
                         : cell.type === Sheet_Cell_Type_Enum.IMAGE
                             ? <img src={cell.url} alt={cell.text} className="w-20 h-20 object-contain" />
-                            : <Tooltip align={tooltipAlign} overlay={<span>{cell.text}</span>}><div className="line-clamp-4">{cell.text}</div></Tooltip>;
+                            : <TextWithTooltip text={cell.text} />;
 
                     return <div className="text-sm text-gray-900 px-2 py-2 font-normal">{textContent}</div>;
                 },