mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

fix: ellipsis should display tooltip if rows larger than 1 (#33875)

Browse Source 
* fix: ellipsis should display tooltip if rows larger than 1

* test: add test case
This commit is contained in:
MadCcc 2022-01-28 14:54:03 +08:00 committed by GitHub
parent eb45dbb4db
commit a9bc316b80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -293,12 +293,14 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
const textEle = typographyRef.current;
if (enableEllipsis && cssEllipsis && textEle) {
const currentEllipsis = textEle.offsetWidth < textEle.scrollWidth;
const currentEllipsis = cssLineClamp
? textEle.offsetHeight < textEle.scrollHeight
: textEle.offsetWidth < textEle.scrollWidth;
if (isNativeEllipsis !== currentEllipsis) {
setIsNativeEllipsis(currentEllipsis);
}
}
}, [enableEllipsis, cssEllipsis, children]);
}, [enableEllipsis, cssEllipsis, children, cssLineClamp]);
// ========================== Tooltip ===========================
const tooltipTitle = ellipsisConfig.tooltip === true ? children : ellipsisConfig.tooltip;

30
components/typography/__tests__/ellipsis.test.js
View File

@ -277,4 +277,34 @@ describe('Typography.Ellipsis', () => {
const tooltipWrapper = mount(<Base ellipsis={{ expandable: true, tooltip: 'little' }} />);
expect(tooltipWrapper.find('.ant-typography').prop('aria-label')).toEqual('little');
});
it('should display tooltip if line clamp', () => {
mockRectSpy = spyElementPrototypes(HTMLElement, {
scrollHeight: {
get() {
let html = this.innerHTML;
html = html.replace(/<[^>]*>/g, '');
const lines = Math.ceil(html.length / LINE_STR_COUNT);
return lines * 16;
},
},
offsetHeight: {
get: () => 32,
},
offsetWidth: {
get: () => 100,
},
scrollWidth: {
get: () => 100,
},
});
const wrapper = mount(
<Base ellipsis={{ tooltip: 'This is tooltip', rows: 2 }}>
Ant Design, a design language for background applications, is refined by Ant UED Team.
</Base>,
);
expect(wrapper.find('EllipsisTooltip').prop('isEllipsis')).toBeTruthy();
mockRectSpy.mockRestore();
});
});