mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

enhance: ssr ellipsis effect (#48205)

Browse Source 
* enhance: ssr ellipsis effect

* test: update snapshot

* chore: fix lint
This commit is contained in:
二货爱吃白萝卜 2024-04-02 14:50:46 +08:00 committed by GitHub
parent 0a79a79bc7
commit 7e6678aa51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 38 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -4590,8 +4590,7 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
title=""
>
<span
aria-label="longtextlongtextlongtextlongtextlongtextlongtextlongtext"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
longtextlongtextlongtextlongtextlongtextlongtextlongtext
</span>
@ -4632,8 +4631,7 @@ exports[`renders components/form/demo/label-debug.tsx correctly 1`] = `
title=""
>
<span
aria-label="longtext longtext longtext longtext longtext longtext longtext"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
longtext longtext longtext longtext longtext longtext longtext
</span>

3
components/menu/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -1822,8 +1822,7 @@ Array [
class="ant-menu-title-content"
>
<span
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
Ant Design, a design language for background applications, is refined by Ant UED Team
</span>

24
components/typography/Base/index.tsx
View File

@ -207,14 +207,14 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
const needMeasureEllipsis = React.useMemo(
() =>
// Disable ellipsis
!mergedEnableEllipsis ||
mergedEnableEllipsis &&
// Provide suffix
ellipsisConfig.suffix !== undefined ||
ellipsisConfig.onEllipsis ||
// Can't use css ellipsis since we need to provide the place for button
ellipsisConfig.expandable ||
enableEdit ||
enableCopy,
(ellipsisConfig.suffix !== undefined ||
ellipsisConfig.onEllipsis ||
// Can't use css ellipsis since we need to provide the place for button
ellipsisConfig.expandable ||
enableEdit ||
enableCopy),
[mergedEnableEllipsis, ellipsisConfig, enableEdit, enableCopy],
);
@ -225,7 +225,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
}
}, [needMeasureEllipsis, enableEllipsis]);
const cssEllipsis = React.useMemo(() => {
const [cssEllipsis, setCssEllipsis] = React.useState(mergedEnableEllipsis);
const canUseCssEllipsis = React.useMemo(() => {
if (needMeasureEllipsis) {
return false;
}
@ -237,6 +239,12 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
return isLineClampSupport;
}, [needMeasureEllipsis, isTextOverflowSupport, isLineClampSupport]);
// We use effect to change from css ellipsis to js ellipsis.
// To make SSR still can see the ellipsis.
useIsomorphicLayoutEffect(() => {
setCssEllipsis(canUseCssEllipsis && mergedEnableEllipsis);
}, [canUseCssEllipsis, mergedEnableEllipsis]);
const isMergedEllipsis = mergedEnableEllipsis && (cssEllipsis ? isNativeEllipsis : isJsEllipsis);
const cssTextOverflow = mergedEnableEllipsis && rows === 1 && cssEllipsis;

50
components/typography/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -663,8 +663,7 @@ Array [
</div>
</div>,
<div
aria-label="This is a loooooooooooooooooooooooooooooooong editable text with suffix."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
This is a loooooooooooooooooooooooooooooooong editable text
<!-- -->
@ -1145,27 +1144,24 @@ Array [
</span>
</button>,
<div
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
</div>,
<div
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis"
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
style="-webkit-line-clamp:2"
>
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
</div>,
<span
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="width:200px"
>
Ant Design, a design language for background applications, is refined by Ant UED Team.
</span>,
<span
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="width:200px"
>
<code>
@ -1233,8 +1229,8 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
</div>
</div>
<div
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis"
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
style="-webkit-line-clamp:2"
>
Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
<div
@ -1378,7 +1374,7 @@ Array [
/>
</div>,
<div
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
<!-- -->
@ -1397,8 +1393,7 @@ Array [
case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
</div>,
<span
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="max-width:400px;font-size:24px"
>
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@ -1432,8 +1427,7 @@ Array [
</span>,
<br />,
<span
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="max-width:400px;font-size:12px"
>
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@ -1467,8 +1461,7 @@ Array [
</span>,
<br />,
<span
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="width:400px;font-size:24px"
>
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@ -1502,8 +1495,7 @@ Array [
</span>,
<br />,
<span
aria-label="Ant Design is a design language for background applications, is refined by Ant UED Team."
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="width:100px"
>
Ant Design is a design language for background applications, is refined by Ant UED Team.
@ -1538,8 +1530,7 @@ Array [
<p>
[Before]
<span
aria-label="not ellipsis"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
>
not ellipsis
</span>
@ -1549,16 +1540,15 @@ Array [
style="display:none"
>
<span
aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="width:100px"
>
默认display none 样式的超长文字， 悬停tooltip失效了
</span>
</div>,
<div
class="ant-typography ant-typography-ellipsis"
style="width:300px"
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
style="width:300px;-webkit-line-clamp:3"
>
In the process of internal desktop applications development,
<span
@ -1573,8 +1563,7 @@ Array [
exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] = `
<span
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of "
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
style="max-width:100%"
>
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of
@ -1812,8 +1801,7 @@ Array [
/>
</div>,
<div
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
>
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life