Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhance: ssr ellipsis effect #48205

Merged
merged 3 commits into from
Apr 2, 2024
Merged

enhance: ssr ellipsis effect #48205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db19e71
enhance: ssr ellipsis effect
zombieJ Apr 1, 2024
fc7fc70
test: update snapshot
zombieJ Apr 1, 2024
49d0cab
chore: fix lint
zombieJ Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 2 additions & 4 deletions components/form/__tests__/__snapshots__/demo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions components/menu/__tests__/__snapshots__/demo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 16 additions & 8 deletions components/typography/Base/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
zombieJ marked this conversation as resolved.
Show resolved Hide resolved
[mergedEnableEllipsis, ellipsisConfig, enableEdit, enableCopy],
);

Expand All @@ -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;
}
Expand All @@ -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;
Expand Down
50 changes: 19 additions & 31 deletions components/typography/__tests__/__snapshots__/demo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<!-- -->
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
<!-- -->
Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down