feat：Give the parameter 'info' field 'index' of the renderItem method in rc-overflow to the tagRender method #1102
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/BaseSelect/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
概述遍历此次更改主要涉及 变更
序列图sequenceDiagram
participant Selector
participant MultipleSelector
participant TagRender
Selector->>MultipleSelector: 调用 renderItem
MultipleSelector->>MultipleSelector: 传递 index 信息
MultipleSelector->>TagRender: 调用 customizeRenderSelector
TagRender-->>MultipleSelector: 渲染带索引的标签
诗歌
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Finishing Touches
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 (
|
![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
🧹 Nitpick comments (1)
tests/Tags.test.tsx (1)
305-324: 测试用例实现完善，建议补充边界场景！当前测试用例很好地验证了
tagRender属性中index的正确性。为了使测试更加健壮，建议考虑添加以下场景：
- 空数组场景
- 动态添加/删除标签时 index 的变化
- 大数据量场景下的索引正确性
建议添加如下测试场景：
it('tagRender props have index', () => { const tagRender = (props: CustomTagProps) => { const { index: tagIndex, label } = props; return <div className={`${label}-${tagIndex}-test`}>{label}</div>; }; - const values = ['light', 'dark']; + const values = ['light', 'dark']; + const emptyValues: string[] = []; const { container } = render( <Select mode="tags" - value={values} + value={values} tagRender={tagRender} options={[{ value: 'light' }, { value: 'dark' }]} />, ); values.forEach((value, index) => { const expectedText = `.${value}-${index}-test`; const nodes = container.querySelectorAll(expectedText); expect(nodes).toHaveLength(1); }); + + // 测试空数组场景 + const { container: emptyContainer } = render( + <Select + mode="tags" + value={emptyValues} + tagRender={tagRender} + options={[{ value: 'light' }, { value: 'dark' }]} + />, + ); + expect(emptyContainer.querySelectorAll('[class$="-test"]')).toHaveLength(0); + + // 测试大数据量场景 + const largeValues = Array.from({ length: 1000 }, (_, i) => `item-${i}`); + const { container: largeContainer } = render( + <Select + mode="tags" + value={largeValues} + tagRender={tagRender} + options={largeValues.map(v => ({ value: v }))} + />, + ); + expect(largeContainer.querySelector(`.item-999-999-test`)).toBeTruthy(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
package.json(1 hunks)src/BaseSelect/index.tsx(1 hunks)src/Selector/MultipleSelector.tsx(4 hunks)src/interface.ts(1 hunks)tests/Tags.test.tsx(2 hunks)
🔇 Additional comments (7)
src/interface.ts (1)
19-19: 代码变更正确！向
DisplayValueType接口添加可选的index属性是一个向后兼容的改动，符合 TypeScript 的最佳实践。src/Selector/MultipleSelector.tsx (3)
134-134: 参数添加正确！向
customizeRenderSelector函数添加可选的info参数，用于传递索引信息。
145-145: 索引传递实现正确！正确地将
index信息传递给tagRender函数。
155-155: 函数签名更新和实现正确！
renderItem函数现在接收info参数并正确地传递给customizeRenderSelector。Also applies to: 178-186
src/BaseSelect/index.tsx (1)
71-71: 类型定义更新正确！向
CustomTagProps接口添加可选的index属性，与整体功能实现保持一致。package.json (1)
56-56: 请验证依赖版本更新！
rc-overflow依赖从 ^1.3.1 更新到 ^1.4.0，建议验证：
- 这是支持新功能所需的最低版本
- 此版本没有已知的安全问题
✅ Verification successful
依赖版本更新验证完成
经过验证：
- rc-overflow 1.4.x 版本没有已知安全问题
- 当前代码仅使用基础功能，1.3.1 版本应该足够使用
- 建议保持使用 ^1.3.1 版本，除非有明确的功能需求需要 1.4.0
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查 rc-overflow 的版本历史和安全公告 # 获取最新版本信息 curl -s https://registry.npmjs.org/rc-overflow | jq '.versions | keys[]' | grep "1.4" # 检查安全公告 gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "rc-overflow") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }'Length of output: 446
Script:
#!/bin/bash # Search for rc-overflow imports and usage echo "=== Searching for rc-overflow imports ===" rg "from 'rc-overflow'" -A 2 echo -e "\n=== Searching for Overflow component usage ===" rg "Overflow" -A 2Length of output: 885
Script:
#!/bin/bash # Check git history for rc-overflow related changes echo "=== Checking recent commits mentioning rc-overflow ===" git log -n 5 --grep="rc-overflow" echo -e "\n=== Checking changes in MultipleSelector.tsx ===" git log -n 5 -- src/Selector/MultipleSelector.tsxLength of output: 231
tests/Tags.test.tsx (1)
17-17: 类型导入正确！导入
CustomTagProps类型有助于提供更好的类型安全性和代码提示。
zombieJ
reviewed
Jan 9, 2025
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1102 +/- ##
=======================================
Coverage 98.24% 98.24%
=======================================
Files 39 39
Lines 1484 1484
Branches 420 447 +27
=======================================
Hits 1458 1458
Misses 26 26 ☔ View full report in Codecov by Sentry. |
zombieJ
approved these changes
Jan 10, 2025
afc163
pushed a commit
that referenced
this pull request
Jan 12, 2025
… in rc-overflow to the tagRender method (#1102) * feat：从rc-overflow的renderItem中获取info参数，后添加到tagRender中 * 修改不正确的类型定义 --------- Co-authored-by: 刘欢 <[email protected]>
afc163
added a commit
that referenced
this pull request
Jan 12, 2025
* feat：从rc-overflow的renderItem中获取info参数，后添加到tagRender中 * 修改不正确的类型定义 --------- Co-authored-by: EmilyyyLiu <[email protected]> Co-authored-by: 刘欢 <[email protected]>
This was referenced Jan 12, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
修改背景：
ant-design/ant-design#31501
Summary by CodeRabbit
版本发布说明
新功能
依赖更新
rc-overflow依赖版本从^1.3.1升级到^1.4.0测试
这些更改提高了选择器组件的灵活性和渲染能力，允许更精细地控制和识别标签。