feat:Using the showScrollBar property of the List component #1121
Conversation
This file contains 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 ↗︎
|
Walkthrough该 PR 对 rc-select 组件库进行了多项更新。主要工作包括：更新 package.json 中 rc-overflow 的版本；在 BaseSelect 和 OptionList 组件中添加 showScrollBar 属性；在 MultipleSelector 渲染函数中增加 index 参数，并更新相应接口（DisplayValueType 和 CustomTagProps）；同时新增了测试用例和工具函数以验证滚动条和 tagRender 的行为，以及监控 Element 原型属性。 Changes
Sequence Diagram(s)sequenceDiagram
participant S as Select组件
participant MS as MultipleSelector
participant CR as customizeRenderSelector
participant TR as tagRender函数
S->>MS: 调用 renderItem(value, { index })
MS->>CR: 调用 customizeRenderSelector(..., info: { index })
CR->>TR: 传递标签渲染信息（含 index）
TR-->>CR: 返回渲染后的标签
CR-->>MS: 返回渲染结果
Possibly related PRs
Suggested reviewers
Poem
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/OptionList.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/BaseSelect/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
tests/ListScrollBar.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
✨ 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 (3)
tests/utils/domHook.ts (1)
4-54: 实现得很好，但建议添加类型定义！
spyElementPrototypes函数实现得很完整，包含了属性和方法的模拟以及清理功能。不过建议添加 TypeScript 类型定义以提高代码的可维护性。建议添加以下类型定义：
+interface SpyProperty { + get?: (descriptor: PropertyDescriptor) => any; + set?: (descriptor: PropertyDescriptor, value: any) => void; +} + +type SpyProperties = { + [key: string]: ((descriptor: PropertyDescriptor, ...args: any[]) => any) | SpyProperty; +}; + export function spyElementPrototypes( + Element: typeof HTMLElement, + properties: SpyProperties ) {tests/ListScrollBar.test.tsx (1)
70-84: 建议添加更多测试用例！当前的测试用例验证了
showScrollBar为 true 时的情况，建议添加以下测试场景：
showScrollBar为 false 时的情况- 动态切换
showScrollBar的情况- 不同选项数量下的滚动条行为
示例测试用例：
it('should not show scrollbar when showScrollBar is false', async () => { const options = Array.from({ length: 10 }, (_, index) => ({ label: `${index + 1}`, value: `${index + 1}`, })); const { container } = render(<Select open showScrollBar={false} options={options} />); await waitFor(() => { const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible'); expect(scrollbarElement).toBeNull(); }); }); it('should toggle scrollbar visibility when showScrollBar changes', async () => { const options = Array.from({ length: 10 }, (_, index) => ({ label: `${index + 1}`, value: `${index + 1}`, })); const { container, rerender } = render(<Select open showScrollBar options={options} />); // 首先验证滚动条可见 await waitFor(() => { const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible'); expect(scrollbarElement).not.toBeNull(); }); // 重新渲染组件，关闭滚动条 rerender(<Select open showScrollBar={false} options={options} />); // 验证滚动条不可见 await waitFor(() => { const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible'); expect(scrollbarElement).toBeNull(); }); });src/Selector/MultipleSelector.tsx (1)
155-188: 建议优化代码实现！当前实现在传递
info参数时有一些冗余，可以通过以下方式优化：
- 使用对象解构来简化参数传递
- 将
undefined替换为更明确的空对象建议按如下方式重构代码：
- const renderItem = (valueItem: DisplayValueType, info: { index: number }) => { + const renderItem = (valueItem: DisplayValueType, { index }: { index: number }) => { const { disabled: itemDisabled, label, value } = valueItem; // ... return typeof tagRender === 'function' ? customizeRenderSelector( value, displayLabel, itemDisabled, closable, onClose, - undefined, + false, - info, + { index }, ) : defaultRenderSelector(valueItem, displayLabel, itemDisabled, closable, onClose); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
package.json(1 hunks)src/BaseSelect/index.tsx(4 hunks)src/OptionList.tsx(2 hunks)src/Selector/MultipleSelector.tsx(4 hunks)src/interface.ts(1 hunks)tests/ListScrollBar.test.tsx(1 hunks)tests/Tags.test.tsx(2 hunks)tests/utils/domHook.ts(1 hunks)
🔇 Additional comments (6)
src/interface.ts (1)
19-19: 代码变更看起来不错！添加
index可选属性到DisplayValueType接口是一个很好的改进，它为标签渲染提供了更多的上下文信息。src/OptionList.tsx (1)
47-47: 新增 showScrollBar 属性以控制滚动条显示该更改通过 useBaseProps 引入 showScrollBar 属性并将其传递给 List 组件，增强了滚动条的可见性控制。
Also applies to: 329-329
tests/Tags.test.tsx (1)
17-17: 新增 tagRender 索引属性的测试用例测试用例验证了 tagRender 函数是否正确接收并使用了 index 属性。测试覆盖了多个标签的渲染场景，确保每个标签都能获得正确的索引值。
Also applies to: 305-324
src/BaseSelect/index.tsx (2)
71-71: 为 CustomTagProps 添加 index 属性为标签渲染函数添加了索引信息，使得可以根据标签的位置实现更灵活的自定义渲染。
139-139: 实现滚动条显示控制功能通过以下更改实现了滚动条显示的控制：
- 在 BaseSelectProps 中添加 showScrollBar 属性
- 设置默认值为 'optional'
- 将属性添加到 baseSelectContext 中
Also applies to: 226-226, 689-689
package.json (1)
56-56: 更新 rc-overflow 依赖版本将 rc-overflow 依赖版本从 ^1.3.1 更新到 ^1.4.0，这是一个小版本更新，应该保持向后兼容性。
✅ Verification successful
🌐 Web query:
rc-overflow 1.4.0 的更新内容是什么？💡 Result:
Based on the provided search results, there is no specific information available about **rc-overflow 1.4.0** updates in the indexed sources. The latest version mentioned in the results is **rc-overflow 1.4.1**, released approximately a month ago[7], but no detailed changelog for version **1.4.0** is provided in the given search data. For accurate details about **rc-overflow 1.4.0**, you would need to consult its official repository or npm page directly, as none of the provided sources explicitly document this version's changes[4][7]. Citations: - 1: https://github.com/AUTOMATIC1111/stable-diffusion-webui/releases - 2: https://detekt.dev/changelog/ - 3: https://developer.android.com/jetpack/androidx/releases/compose-foundation?hl=zh-cn - 4: https://www.npmjs.com/package/rc-overflow?activeTab=versions - 5: https://github.com/anvilco/spectaql/blob/main/CHANGELOG.md - 6: https://gitee.com/react-native-oh-library/usage-docs - 7: https://www.npmjs.com/package/rc-overflow - 8: https://docs.mia-platform.eu/docs/microfrontend-composer/composer/changelog - 9: https://v2.tauri.app/zh-cn/release/tauri/v1.0.3/ - 10: https://tdesign.tencent.com/mobile-vue/changelog
确认 rc-overflow 依赖更新无问题
- 将 rc-overflow 依赖由 ^1.3.1 更新到 ^1.4.0 属于小版本升级，保持向后兼容性。
- Web 查询结果中没有显示该版本的详细更新内容，因此建议可参考官方仓库或 npm 页面以获取更多信息，但现有更新本身风险较低。
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#33915
Summary by CodeRabbit