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: avoid shaking in typography by check widths whether is repeat #43039

Closed
wants to merge 1 commit into from

Conversation

bbb169
Copy link
Contributor

@bbb169 bbb169 commented Jun 15, 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

avoid shaking in typography by check widths whether is repeat

📝 Changelog

Language Changelog
🇺🇸 English avoid shaking in typography by check widths whether is repeat in a short time
🇨🇳 Chinese 通过检查短时间内宽度是否重复,来避免反复触发resize事件

☑️ 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 e714258

Improved typography ellipsis performance by skipping unnecessary state updates. Added getHistoryWidthsMapChecker function and reordered imports in components/typography/Base/index.tsx.

🔍 Walkthrough

🤖 Generated by Copilot at e714258

  • Add a function to detect repeated widths from resize events (link) and use it to avoid unnecessary ellipsis calculations and updates in the typography base component (link). This improves the performance and stability of the component when rendering long texts with ellipsis.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 15, 2023

@codecov
Copy link

codecov bot commented Jun 15, 2023

Codecov Report

Patch coverage: 93.33% and project coverage change: -0.01 ⚠️

Comparison is base (b72d313) 100.00% compared to head (e714258) 99.99%.

Additional details and impacted files
@@             Coverage Diff             @@
##            master   #43039      +/-   ##
===========================================
- Coverage   100.00%   99.99%   -0.01%     
===========================================
  Files          648      648              
  Lines        10953    10967      +14     
  Branches      2972     2975       +3     
===========================================
+ Hits         10953    10966      +13     
- Misses           0        1       +1     
Impacted Files Coverage Δ
components/typography/Base/index.tsx 99.54% <93.33%> (-0.46%) ⬇️

... and 5 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

if (clearTimer) clearTimeout(clearTimer);

clearTimer = setTimeout(() => {
historyWidthsMap.clear();
Copy link
Member

@zombieJ zombieJ Jun 15, 2023

Choose a reason for hiding this comment

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

有点黑,这个看起来对于同时多个 Ellipsis 会出现冲突,比如 Table 的场景

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@bbb169 bbb169 closed this Jun 16, 2023
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刚好出现滚动条时一直闪屏
2 participants