mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 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; const cssLineClamp = rows && rows > 1 && cssEllipsis;
let textNode: React.ReactNode = children; let textNode: React.ReactNode = children;
let ariaLabel: string | undefined;
// Only use js ellipsis when css ellipsis not support // Only use js ellipsis when css ellipsis not support
if (rows && isEllipsis && !expanded && !cssEllipsis) { if (rows && isEllipsis && !expanded && !cssEllipsis) {
const { title } = restProps; const { title } = restProps;
ariaLabel = title; let restContent = title || '';
if (!title && (typeof children === 'string' || typeof children === 'number')) { 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 // We move full content to outer element to avoid repeat read the content by accessibility
textNode = ( textNode = (
<span title={ariaLabel} aria-hidden="true"> <>
{ellipsisContent} {ellipsisContent}
{ELLIPSIS_STR} <span title={restContent} aria-hidden="true">
{ELLIPSIS_STR}
</span>
{suffix} {suffix}
</span> </>
); );
} else { } else {
textNode = ( textNode = (
@ -517,7 +522,6 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
}} }}
component={component} component={component}
ref={this.contentRef} ref={this.contentRef}
aria-label={ariaLabel}
direction={direction} direction={direction}
{...textProps} {...textProps}
> >

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

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