fix: Typography symbol height exceed line should also support ellipsis (

ant-design#47889) * fix: Typography with ellipsis of symbol height * test: update snapshot
DraculaPrince · Mar 29, 2024 · b8aa920 · b8aa920
1 parent 81d574f
commit b8aa920
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx
@@ -146,6 +146,10 @@ export default function EllipsisMeasure(props: EllipsisProps) {
   // ========================= NeedEllipsis =========================
   const needEllipsisRef = React.useRef<MeasureTextRef>(null);
 
+  // Measure for `rows-1` height, to avoid operation exceed the line height
+  const descRowsEllipsisRef = React.useRef<MeasureTextRef>(null);
+  const symbolRowEllipsisRef = React.useRef<MeasureTextRef>(null);
+
   const [needEllipsis, setNeedEllipsis] = React.useState(STATUS_MEASURE_NONE);
   const [ellipsisHeight, setEllipsisHeight] = React.useState(0);
 
@@ -166,8 +170,17 @@ export default function EllipsisMeasure(props: EllipsisProps) {
       setNeedEllipsis(isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS);
       setEllipsisCutIndex(isOverflow ? [0, nodeLen] : null);
 
-      // For the accuracy issue, we add 1px to the height
-      setEllipsisHeight((needEllipsisRef.current?.getHeight() || 0) + 1);
+      // Get the basic height of ellipsis rows
+      const baseRowsEllipsisHeight = needEllipsisRef.current?.getHeight() || 0;
+
+      // Get the height of `rows - 1` + symbol height
+      const descRowsEllipsisHeight = rows === 1 ? 0 : descRowsEllipsisRef.current?.getHeight() || 0;
+      const symbolRowEllipsisHeight = symbolRowEllipsisRef.current?.getHeight() || 0;
+      const rowsWithEllipsisHeight = descRowsEllipsisHeight + symbolRowEllipsisHeight;
+
+      const maxRowsHeight = Math.max(baseRowsEllipsisHeight, rowsWithEllipsisHeight);
+
+      setEllipsisHeight(maxRowsHeight + 1);
 
       onEllipsis(isOverflow);
     }
@@ -246,16 +259,43 @@ export default function EllipsisMeasure(props: EllipsisProps) {
 
       {/* Measure if current content is exceed the rows */}
       {needEllipsis === STATUS_MEASURE_START && (
-        <MeasureText
-          style={{
-            ...measureStyle,
-            ...lineClipStyle,
-            WebkitLineClamp: rows,
-          }}
-          ref={needEllipsisRef}
-        >
-          {fullContent}
-        </MeasureText>
+        <>
+          {/** With `rows` */}
+          <MeasureText
+            style={{
+              ...measureStyle,
+              ...lineClipStyle,
+              WebkitLineClamp: rows,
+            }}
+            ref={needEllipsisRef}
+          >
+            {fullContent}
+          </MeasureText>
+
+          {/** With `rows - 1` */}
+          <MeasureText
+            style={{
+              ...measureStyle,
+              ...lineClipStyle,
+              WebkitLineClamp: rows - 1,
+            }}
+            ref={descRowsEllipsisRef}
+          >
+            {fullContent}
+          </MeasureText>
+
+          {/** With `rows - 1` */}
+          <MeasureText
+            style={{
+              ...measureStyle,
+              ...lineClipStyle,
+              WebkitLineClamp: 1,
+            }}
+            ref={symbolRowEllipsisRef}
+          >
+            {children([], true, true)}
+          </MeasureText>
+        </>
       )}
 
       {/* Real size overflow measure */}

diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1919,7 +1919,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
+    class="ant-typography ant-typography-ellipsis"
     style="width: 300px;"
   >
     In the process of internal desktop applications development,

diff --git a/components/typography/demo/ellipsis-debug.tsx b/components/typography/demo/ellipsis-debug.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Slider, Switch, Typography } from 'antd';
+import { Button, Slider, Switch, Typography } from 'antd';
 
 const { Text, Paragraph } = Typography;
 
@@ -78,7 +78,14 @@ const App: React.FC = () => {
         </Text>
       </div>
 
-      <Typography.Paragraph style={{ width: 300 }} ellipsis={{ rows: 3 }}>
+      <Typography.Paragraph
+        style={{ width: 300 }}
+        ellipsis={{
+          rows: 3,
+          expandable: true,
+          symbol: <Button>Open</Button>,
+        }}
+      >
         {templateStr.slice(0, 60)}
         <span style={{ fontSize: '5em' }}>ANTD</span>
         {templateStr.slice(60)}