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

enhance: auto layout hasSider #45361

Merged
merged 2 commits into from Oct 16, 2023
Merged

enhance: auto layout hasSider #45361

merged 2 commits into from Oct 16, 2023

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Oct 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

resolves #44518 #42576

💡 Background and solution

遍历子节点添加 hasSider,不是最优解,比如对 HOC 无效。不过这个应该也能解90% 的 SSR 问题了。

📝 Changelog

Language Changelog
🇺🇸 English Layout support auto hasSider check to avoid blink in SSR.
🇨🇳 Chinese Layout 支持自动检测 hasSider 以防止在 SSR 场景下的闪烁问题。

☑️ 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 1cf0df7

The pull request refactors the Layout and Sider components to use React hooks and a separate context file. It also improves the test coverage and the import order for the components. The main files affected are layout.tsx, Sider.tsx, context.ts, useHasSider.ts, and index.test.tsx.

🔍 Walkthrough

🤖 Generated by Copilot at 1cf0df7

  • Extract and export LayoutContext and its interface from layout.tsx to a new file context.ts for better modularity and reusability (link, link, link).

@stackblitz
Copy link

stackblitz bot commented Oct 16, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 16, 2023

Preview Is ready


const childNodes = toArray(children);

return childNodes.some((node) => node.type === Sider);
Copy link
Member

Choose a reason for hiding this comment

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

type 不是应该是字符串吗?Slider 应该是一个组件吧,这个能相等吗?

Copy link
Member Author

Choose a reason for hiding this comment

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

type 是 ReactComponent 类型,包含字符串和方法和特殊 obj

@github-actions
Copy link
Contributor

github-actions bot commented Oct 16, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 397.91 KB (+6 B 🔺)
./dist/antd-with-locales.min.js 457.22 KB (+15 B 🔺)

@kiner-tang
Copy link
Member

要更新一下快照

@argos-ci
Copy link

argos-ci bot commented Oct 16, 2023

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 12 changes Oct 16, 2023, 6:24 AM

@zombieJ
Copy link
Member Author

zombieJ commented Oct 16, 2023

snapshot 也修复了:

截屏2023-10-16 14 28 49

@codecov
Copy link

codecov bot commented Oct 16, 2023

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (dce8782) 100.00% compared to head (3faee31) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #45361   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          692       694    +2     
  Lines        11667     11674    +7     
  Branches      3116      3117    +1     
=========================================
+ Hits         11667     11674    +7     
Files Coverage Δ
components/layout/Sider.tsx 100.00% <ø> (ø)
components/layout/context.ts 100.00% <100.00%> (ø)
components/layout/hooks/useHasSider.ts 100.00% <100.00%> (ø)
components/layout/layout.tsx 100.00% <100.00%> (ø)

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

@zombieJ zombieJ merged commit 7f9aff2 into master Oct 16, 2023
92 checks passed
@zombieJ zombieJ deleted the layout-auto branch October 16, 2023 06:49
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.

layout组件嵌套 刷新会导致页面闪屏
3 participants