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.

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

fix: Typography ellipsis not working in Table #32447

Merged
merged 2 commits into from
Oct 12, 2021
Merged

Conversation

afc163
Copy link
Member

@afc163 afc163 commented Oct 12, 2021

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

close #32432

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fix Typography ellipsis calculation bug when browser zoomed in.
🇨🇳 Chinese 修复 Typography ellipsis 在 Chrome 下屏幕缩小时溢出的问题。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2021

@codecov
Copy link

codecov bot commented Oct 12, 2021

Codecov Report

Merging #32447 (e9c16fc) into master (08fabf9) will not change coverage.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##            master    #32447   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          414       414           
  Lines         7586      7589    +3     
  Branches      2132      2132           
=========================================
+ Hits          7586      7589    +3     
Impacted Files Coverage Δ
components/typography/Base.tsx 100.00% <100.00%> (ø)
components/typography/util.tsx 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 08fabf9...e9c16fc. Read the comment docs.

@github-actions
Copy link
Contributor

Size Change: +16 B (0%)

Total Size: 920 kB

Filename Size Change
./dist/antd-with-locales.min.js 354 kB +9 B (0%)
./dist/antd.min.js 304 kB +7 B (0%)
ℹ️ View Unchanged
Filename Size
./dist/antd.compact.min.css 65 kB
./dist/antd.dark.min.css 66.3 kB
./dist/antd.min.css 65.2 kB
./dist/antd.variable.min.css 65.6 kB

compressed-size-action

@afc163 afc163 merged commit 3b27f47 into master Oct 12, 2021
@afc163 afc163 deleted the fix-table-ellipsis branch October 12, 2021 09:19
Copy link
Contributor

@hydraZty hydraZty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding 计算问题

Math.floor(lineHeight) * (rows + 1) +
const overflowRows = rows + 1;
const oneRowMaxHeight =
Math.floor(lineHeight) +
pxToNumber(originStyle.paddingTop) +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oneRowMaxHeight 应当不包括 padding
const oneRowMaxHeight = Math.floor(lineHeight)

@@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pureHeight = ellipsisContainer.getBoundingClientRect().height -
 pxToNumber(originStyle.paddingBottom) -
 pxToNumber(originStyle.paddingBottom) -
 pxToNumber(originStyle.borderTop) -
 pxToNumber(originStyle.borderBottom)
Math.ceil(pureHeight / overflowRows) < oneRowMaxHeight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

修复 Typography ellipsis 在屏幕放大缩小时计算错误的问题。#31449
2 participants