test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

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

Browse Source 
* fix: Typography with ellipsis of symbol height

* test: update snapshot
This commit is contained in:
二货爱吃白萝卜 2024-03-15 13:56:03 +08:00 committed by GitHub
parent 7884eba28e
commit 31ff625d8f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/typography/Base/Ellipsis.tsx
View File

@ -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 */}

2
components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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,

11
components/typography/demo/ellipsis-debug.tsx
View File

@ -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)}