Browse Source

fix: Typography ellipsis not working in Table (#32447)

* chore: add reproduce demo

* fix: Typography ellipsis in Table

close #32432
pull/32450/head
afc163 3 years ago
committed by GitHub
parent
commit
3b27f47097
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      components/typography/Base.tsx
  2. 10
      components/typography/util.tsx

8
components/typography/Base.tsx

@ -314,10 +314,14 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
const { ellipsisText, isEllipsis, expanded } = this.state;
const { rows, suffix, onEllipsis } = this.getEllipsis();
const { children } = this.props;
if (!rows || rows < 0 || !this.contentRef.current || expanded) return;
if (!rows || rows < 0 || !this.contentRef.current || expanded) {
return;
}
// Do not measure if css already support ellipsis
if (this.canUseCSSEllipsis()) return;
if (this.canUseCSSEllipsis()) {
return;
}
devWarning(
toArray(children).every((child: React.ReactNode) => typeof child === 'string'),

10
components/typography/util.tsx

@ -106,8 +106,9 @@ export default (
// Get origin style
const originStyle = window.getComputedStyle(originElement);
const lineHeight = getRealLineHeight(originElement);
const maxHeight =
Math.floor(lineHeight) * (rows + 1) +
const overflowRows = rows + 1;
const oneRowMaxHeight =
Math.floor(lineHeight) +
pxToNumber(originStyle.paddingTop) +
pxToNumber(originStyle.paddingBottom);
@ -128,7 +129,9 @@ export default (
// Check if ellipsis in measure div is height enough for content
function inRange() {
return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
return (
Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
);
}
// Skip ellipsis if already match
@ -223,6 +226,7 @@ export default (
reactNode: null,
};
}
if (type === TEXT_NODE) {
const fullText = childNode.textContent || '';
const textNode = document.createTextNode(fullText);

Loading…
Cancel
Save