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: record the completed length of the last calculation as the transison length #43058

Merged
merged 6 commits into from Aug 30, 2023

Conversation

bbb169
Copy link
Contributor

@bbb169 bbb169 commented Jun 16, 2023

[中文版模板 / 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
  • Workflow
  • Other (about what?)

🔗 Related issue link

fix #42958

💡 Background and solution

The bug is caused by below codes:
if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) {
return children(nodeList, false);
}

when ellipsis is walking, will use all the nodelist as temporary text, this caused space is not enough, so page scroll bar will show up
solution is record the completed length of the last calculation as the transition length in the calculation

📝 Changelog

Language Changelog
🇺🇸 English record the completed length of the last calculation as the transition length in the calculation
🇨🇳 Chinese 记录上次计算完成的文字长度作为计算中的过渡文字长度

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • 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

🚀 Summary

🤖 Generated by Copilot at 741a1de

Improve ellipsis feature in Typography component by reusing optimal text length. Refactor Ellipsis.tsx to use a state variable lastLen.

🔍 Walkthrough

🤖 Generated by Copilot at 741a1de

  • Optimize the performance of the ellipsis component by introducing a new state variable lastLen to store the last length of the text that was successfully rendered with ellipsis (link, link)
  • Use the lastLen as a temporary width for the text if it exists, to avoid rendering the text with the full length and then shrinking it, which could cause unnecessary layout shifts and performance issues (link)

@github-actions
Copy link
Contributor

github-actions bot commented Jun 16, 2023

@bbb169 bbb169 changed the title fix: record the completed width of the last calculation as the transison width fix: record the completed length of the last calculation as the transison length Jun 16, 2023
@afc163 afc163 requested a review from zombieJ June 22, 2023 16:58
@afc163
Copy link
Member

afc163 commented Jul 11, 2023

ci 挂了

@argos-ci
Copy link

argos-ci bot commented Jul 19, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No change detected - Aug 30, 2023, 3:01 PM

@bbb169
Copy link
Contributor Author

bbb169 commented Jul 19, 2023

ci 挂了
image
已改

@codecov
Copy link

codecov bot commented Jul 19, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (64fd1cd) 100.00% compared to head (b71c8c2) 100.00%.
Report is 3 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #43058   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          665       665           
  Lines        11276     11280    +4     
  Branches      3048      3049    +1     
=========================================
+ Hits         11276     11280    +4     
Files Changed Coverage Δ
components/typography/Base/Ellipsis.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@afc163
Copy link
Member

afc163 commented Jul 19, 2023

@MadCcc 看看

Copy link

@AbdullahWins AbdullahWins left a comment

Choose a reason for hiding this comment

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

Uploading 5486283.png…

@bbb169 bbb169 force-pushed the fixEllipsisShake branch 2 times, most recently from bba0531 to 4893325 Compare August 28, 2023 13:15
@zombieJ
Copy link
Member

zombieJ commented Aug 28, 2023

这个 Demo 挂了:

截屏2023-08-28 23 03 11


it('should not throw default dom nodes', async () => {
let currentWidth = 100;
// string conut is different with different width
Copy link
Member

Choose a reason for hiding this comment

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

typo: count

@zombieJ zombieJ merged commit a265257 into ant-design:master Aug 30, 2023
52 checks passed
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.Paragraph刚好出现滚动条时一直闪屏
5 participants