From 6f0a6402878f723b6bbb95c77a072076dcbc9488 Mon Sep 17 00:00:00 2001 From: huang_cq Date: Fri, 13 Dec 2024 15:15:36 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(Ellipsis):=20=E9=9D=9E=E6=95=B4?= =?UTF-8?q?=E6=95=B0=E8=A1=8C=E9=AB=98=E6=97=B6=EF=BC=8C=E7=9C=81=E7=95=A5?= =?UTF-8?q?=E8=A1=8C=E6=95=B0=E4=B8=8D=E7=AC=A6=E5=90=88=E9=A2=84=E6=9C=9F?= =?UTF-8?q?=20(#6792)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ellipsis/useMeasure.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ellipsis/useMeasure.tsx b/src/components/ellipsis/useMeasure.tsx index a23411a737..468ebf0cd2 100644 --- a/src/components/ellipsis/useMeasure.tsx +++ b/src/components/ellipsis/useMeasure.tsx @@ -66,7 +66,7 @@ export default function useMeasure( const fullMeasureHeight = fullMeasureRef.current?.offsetHeight || 0 const singleRowMeasureHeight = singleRowMeasureRef.current?.offsetHeight || 0 - const rowMeasureHeight = singleRowMeasureHeight * rows + const rowMeasureHeight = singleRowMeasureHeight * (rows + 0.5) if (fullMeasureHeight <= rowMeasureHeight) { setStatus(MEASURE_STATUS.STABLE_NO_ELLIPSIS) From 10cceed7240bdf857117faba2f6165ee92f60951 Mon Sep 17 00:00:00 2001 From: huang_cq Date: Fri, 13 Dec 2024 15:15:58 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(Ellipsis):=20walkingIndexes=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=8C=96=E8=A6=86=E7=9B=96=E8=AE=A1=E7=AE=97=E7=BB=93?= =?UTF-8?q?=E6=9E=9C,=E5=AF=BC=E8=87=B4=E6=96=87=E6=9C=AC=E7=9C=81?= =?UTF-8?q?=E7=95=A5=E5=AD=97=E6=95=B0=E4=B8=8D=E7=AC=A6=E5=90=88=E9=A2=84?= =?UTF-8?q?=E6=9C=9F=20(#6792)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ellipsis/useMeasure.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ellipsis/useMeasure.tsx b/src/components/ellipsis/useMeasure.tsx index 468ebf0cd2..8f52daa567 100644 --- a/src/components/ellipsis/useMeasure.tsx +++ b/src/components/ellipsis/useMeasure.tsx @@ -47,12 +47,6 @@ export default function useMeasure( const startMeasure = useEvent(() => { setStatus(MEASURE_STATUS.PREPARE) - setWalkingIndexes([ - 0, - direction === 'middle' - ? Math.ceil(contentChars.length / 2) - : contentChars.length, - ]) }) // Initialize @@ -72,6 +66,12 @@ export default function useMeasure( setStatus(MEASURE_STATUS.STABLE_NO_ELLIPSIS) } else { setMaxHeight(rowMeasureHeight) + setWalkingIndexes([ + 0, + direction === 'middle' + ? Math.ceil(contentChars.length / 2) + : contentChars.length, + ]) setStatus(MEASURE_STATUS.MEASURE_WALKING) } } From 13b2c068ebfce4376f6b20f896ce1cb11ad59ed4 Mon Sep 17 00:00:00 2001 From: huang_cq Date: Fri, 13 Dec 2024 15:16:08 +0800 Subject: [PATCH 3/4] =?UTF-8?q?test(Ellipsis):=20=E5=8D=95=E6=B5=8B?= =?UTF-8?q?=E8=A1=A5=E5=85=85=20(#6792)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ellipsis/tests/ellipsis.test.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx index 8cb1738abb..2e8414e915 100644 --- a/src/components/ellipsis/tests/ellipsis.test.tsx +++ b/src/components/ellipsis/tests/ellipsis.test.tsx @@ -17,7 +17,8 @@ describe('Ellipsis', () => { const that = this as HTMLElement const charLen = (that.textContent || '').length || 1 const rows = Math.ceil(charLen / 30) - return rows * lineHeight + const styleLineHeight = parseFloat(that.style.lineHeight) + return Math.round(rows * (styleLineHeight || lineHeight)) }, }, }) @@ -132,4 +133,30 @@ describe('Ellipsis', () => { fireEvent.click(getByText('expand')) expect(getByText('collapse')).toBeInTheDocument() }) + + test('non-integer line height', () => { + const rows = 2 + const lineHeight = '16.4px' + + const { getByTestId } = render( + + +
+ {content} +
+ + ) + + const { offsetHeight } = getByTestId('ellipsis') || {} + const { offsetHeight: maxheight } = getByTestId('maxheight') || {} + const rowsHeight = Math.round(parseFloat(lineHeight) * rows) + const expectHeight = Math.min(rowsHeight, maxheight) + + expect(offsetHeight).toBe(expectHeight) + }) }) From b94978757e0e6398da8cfbd7a16bfd4cc8eb10e2 Mon Sep 17 00:00:00 2001 From: huang_cq Date: Wed, 18 Dec 2024 17:36:17 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix(Ellipsis):=20=E8=B0=83=E6=95=B4setWalki?= =?UTF-8?q?ngIndexes=E8=B0=83=E7=94=A8=E6=97=B6=E6=9C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ellipsis/useMeasure.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ellipsis/useMeasure.tsx b/src/components/ellipsis/useMeasure.tsx index 8f52daa567..a19f50cb92 100644 --- a/src/components/ellipsis/useMeasure.tsx +++ b/src/components/ellipsis/useMeasure.tsx @@ -46,6 +46,12 @@ export default function useMeasure( const midMeasureRef = React.useRef(null) const startMeasure = useEvent(() => { + setWalkingIndexes([ + 0, + direction === 'middle' + ? Math.ceil(contentChars.length / 2) + : contentChars.length, + ]) setStatus(MEASURE_STATUS.PREPARE) }) @@ -66,12 +72,6 @@ export default function useMeasure( setStatus(MEASURE_STATUS.STABLE_NO_ELLIPSIS) } else { setMaxHeight(rowMeasureHeight) - setWalkingIndexes([ - 0, - direction === 'middle' - ? Math.ceil(contentChars.length / 2) - : contentChars.length, - ]) setStatus(MEASURE_STATUS.MEASURE_WALKING) } }