refactor: add extra pass #740
Conversation
Walkthrough此次更改涉及对菜单组件的样式和属性的修改。主要更新包括在LESS样式表中将类名从 Changes
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 #740 +/- ##
=======================================
Coverage 99.59% 99.59%
=======================================
Files 27 27
Lines 736 736
Branches 200 202 +2
=======================================
Hits 733 733
Misses 3 3 ☔ 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 (1)
assets/index.less (1)
107-110: 样式更改符合预期！类名从
.@{menuPrefixCls}-extra更改为.@{menuPrefixCls}-item-extra更好地反映了层级关系，并且样式实现正确。建议添加 RTL 支持
为了保持一致性，建议为 RTL（从右到左）模式添加相应的样式规则。
.@{menuPrefixCls}-item-extra { margin-left: auto; font-size: 14px; + + .@{menuPrefixCls}-rtl & { + margin-left: 0; + margin-right: auto; + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- assets/index.less (1 hunks)
- src/MenuItem.tsx (2 hunks)
- src/utils/nodeUtil.tsx (1 hunks)
🔇 Additional comments (3)
src/utils/nodeUtil.tsx (2)
Line range hint
52-57: 代码实现正确且完整！
extra属性的处理方式符合以下要求：
- 正确传递
extra属性到MergedMenuItem组件- 使用条件渲染确保
extra为真值或 0 时才显示- 使用恰当的类名
${prefixCls}-item-extra保持样式一致性
Line range hint
52-57: 建议验证相关实现为确保实现的完整性，建议验证以下几点：
- LESS 文件中是否正确定义了
menu-item-extra类样式- MenuItem 组件中是否正确处理了
extra属性✅ Verification successful
Let me gather more information about the MenuItem component implementation and the styles.
Let me try one more search to find the MenuItem component implementation:
根据已收集的信息，我可以生成最终响应了：
样式和组件实现已完整验证
经过验证，相关实现已经完备：
- LESS 文件中已正确定义了
.rc-menu-item-extra类样式，包含了margin-left: auto和font-size: 14px的样式定义- MenuItem 组件的 Props 接口中已包含
extra属性的定义- 样式实现支持了 extra 内容的右对齐布局
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 验证样式和组件实现 # 检查 LESS 文件中的样式定义 echo "检查样式定义:" rg -g "*.less" "menu.*extra" # 检查 MenuItem 组件中的 extra 属性处理 echo "\n检查 MenuItem 组件实现:" ast-grep --pattern 'interface MenuItemProps { $$$ extra?: $_ $$$ }'Length of output: 300
Script:
#!/bin/bash # 检查 MenuItem 组件的完整实现 echo "检查 MenuItem 组件:" ast-grep --pattern 'const MenuItem = ($$$) => { $$$ }' # 检查样式文件的完整定义 echo "\n检查样式完整定义:" cat assets/index.less # 检查其他可能使用 extra 属性的地方 echo "\n检查 extra 属性的使用:" rg "extra.*prop|prop.*extra"Length of output: 8319
Script:
#!/bin/bash # 搜索 MenuItem 组件的定义和实现 echo "搜索 MenuItem 组件:" rg -A 10 "const MenuItem.*=" # 搜索 MenuItemProps 接口定义 echo "\n搜索 MenuItemProps 接口:" rg -A 5 "interface MenuItemProps"Length of output: 1065
src/MenuItem.tsx (1)
212-212: 正确处理了extra属性通过在传递给
LegacyMenuItem的属性中排除extra，可以避免将非标准 DOM 属性传递到底层 DOM 元素。这种处理方式符合 React 的最佳实践。运行以下脚本以验证
extra属性的使用：✅ Verification successful
Let me try a different search pattern to verify the usage of
extraproperty.
根据代码分析，我可以生成最终的验证结果：
extra属性处理方式正确且合理通过代码分析，我们可以确认：
MenuItem组件确实支持extra属性，这从测试用例中可以看出- 在
InternalMenuItem组件中通过omit(restProps, ['extra'])正确地将extra属性从传递给底层 DOM 元素的属性中排除- 这种处理方式符合 React 的最佳实践，避免了将非标准属性传递到 DOM 元素上
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证 extra 属性在代码库中的使用情况 # 测试：搜索 extra 属性的使用位置 rg -A 5 'extra.*prop'Length of output: 23
Script:
#!/bin/bash # 搜索包含 extra 的相关代码 rg -i "extra" --type tsx --type ts -A 3 # 专门搜索 MenuItem 相关的接口定义 ast-grep --pattern 'interface $_Props { $$$ extra?: $_; $$$ }'Length of output: 138
Script:
#!/bin/bash # 搜索包含 extra 的代码，使用正确的文件类型 rg -i "extra" -t ts -t js -t jsx -A 3 # 查找 MenuItem 相关的文件 fd "MenuItem" -e ts -e tsx -e js -e jsx --exec cat {}Length of output: 16601
|
这个能写用例保障一下吗？ |
|
这个好像不太好写，因为 |
|
@zombieJ 佬，抽空在瞅一眼，看下如何，加上了备注 |
ant-design/ant-design#51361
背景
在 5.21.0 中，上了
extra属性，变更ant-menu-title-content为inline-flexbreak解决方案：
把
extra暴露给 antd，让 antd 感知到，何时使用了extra属性Summary by CodeRabbit
新功能
MergedMenuItem组件中添加了extra属性，以增强菜单项的功能。样式