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

fix: Typography ellipsis title (#27328)

Browse Source 
* fix: Typography ellipsis title

close #27324

* fix ci
This commit is contained in:
偏右 2020-10-23 19:31:41 +08:00 committed by GitHub
parent 6fba4d1136
commit 9a368a59f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/typography/Base.tsx
View File

@ -462,22 +462,27 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
const cssLineClamp = rows && rows > 1 && cssEllipsis;
let textNode: React.ReactNode = children;
let ariaLabel: string | undefined;
// Only use js ellipsis when css ellipsis not support
if (rows && isEllipsis && !expanded && !cssEllipsis) {
const { title } = restProps;
ariaLabel = title;
let restContent = title || '';
if (!title && (typeof children === 'string' || typeof children === 'number')) {
ariaLabel = String(children);
restContent = String(children);
}
// show rest content as title on symbol
restContent = restContent?.replace(new RegExp(`^${ellipsisContent}`), '');
// We move full content to outer element to avoid repeat read the content by accessibility
textNode = (
<span title={ariaLabel} aria-hidden="true">
<>
{ellipsisContent}
{ELLIPSIS_STR}
<span title={restContent} aria-hidden="true">
{ELLIPSIS_STR}
</span>
{suffix}
</span>
</>
);
} else {
textNode = (
@ -517,7 +522,6 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
}}
component={component}
ref={this.contentRef}
aria-label={ariaLabel}
direction={direction}
{...textProps}
>

8
components/typography/__tests__/index.test.js
View File

@ -85,16 +85,14 @@ describe('Typography', () => {
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little ...');
expect(wrapper.text()).toEqual('Bamboo is Little ...');
expect(onEllipsis).toHaveBeenCalledWith(true);
onEllipsis.mockReset();
wrapper.setProps({ ellipsis: { rows: 2, onEllipsis } });
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual(
'Bamboo is Little Light Bamboo is Litt...',
);
expect(wrapper.text()).toEqual('Bamboo is Little Light Bamboo is Litt...');
expect(onEllipsis).not.toHaveBeenCalled();
wrapper.setProps({ ellipsis: { rows: 99, onEllipsis } });
@ -161,7 +159,7 @@ describe('Typography', () => {
await sleep(20);
wrapper.update();
expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little...');
expect(wrapper.text()).toEqual('Bamboo is Little...');
});
it('should expandable work', async () => {