chore: Adjust style merge order #1207
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1207 +/- ##
==========================================
+ Coverage 97.72% 97.83% +0.11%
==========================================
Files 75 75
Lines 7374 7476 +102
Branches 1121 1123 +2
==========================================
+ Hits 7206 7314 +108
+ Misses 162 157 -5
+ Partials 6 5 -1 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
tests/Cell.spec.tsx (1)
127-148: 建议增加反向测试用例当前测试用例验证了样式覆盖的情况，建议添加一个反向测试用例，验证当没有自定义样式时，默认的对齐方式是否正确应用。
it('style merge order', () => { const wrapper = mount( <Table columns={[ { align: 'center', onHeaderCell: () => ({ style: { color: 'red', textAlign: 'end', // overwrite align }, }), }, ]} />, ); expect(wrapper.find('thead th').prop('style')).toEqual({ color: 'red', textAlign: 'end', }); + + // 验证默认对齐方式 + const wrapper2 = mount( + <Table + columns={[ + { + align: 'center', + onHeaderCell: () => ({ + style: { + color: 'red', + }, + }), + }, + ]} + />, + ); + + expect(wrapper2.find('thead th').prop('style')).toEqual({ + color: 'red', + textAlign: 'center', + }); });src/Cell/index.tsx (1)
Line range hint
226-231: 建议增强 mergedChildNode 的类型检查当前的验证逻辑可以防止无效的 React 节点导致崩溃，但建议考虑使用 React.isValidElement 作为主要检查方式，可以更准确地验证节点的有效性。
建议参考以下改进方案：
- if ( - typeof mergedChildNode === 'object' && - !Array.isArray(mergedChildNode) && - !React.isValidElement(mergedChildNode) - ) { + if (mergedChildNode !== null && !React.isValidElement(mergedChildNode) && !Array.isArray(mergedChildNode)) { mergedChildNode = null; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/Cell/index.tsx(1 hunks)tests/Cell.spec.tsx(1 hunks)
🔇 Additional comments (4)
tests/Cell.spec.tsx (3)
126-127: 测试用例与 GitHub Issue 关联明确
通过注释清晰地引用了相关的 GitHub Issue，有助于理解测试用例的背景和目的。
132-138: 样式优先级验证设计合理
测试用例通过以下方式验证样式合并顺序：
- 设置列的默认对齐方式为
center - 通过
onHeaderCell返回的样式将文本对齐更改为end
这个设计很好地测试了自定义样式是否能够正确覆盖默认样式。
144-147: 断言验证完整且准确
断言不仅验证了样式覆盖（textAlign: 'end'），还确保了其他自定义样式（color: 'red'）得到正确应用，验证逻辑完整。
src/Cell/index.tsx (1)
215-221: 样式合并顺序的调整是合理的！
样式合并顺序的调整确保了用户自定义样式（通过 additionalProps.style）能够正确覆盖默认样式，这与组件库的最佳实践保持一致。注释也清晰地解释了这个改动的原因。
background: ant-design/ant-design#51763 (comment)
Summary by CodeRabbit
新功能
Cell组件的样式处理和渲染逻辑，确保用户自定义样式优先应用。错误修复
测试