feat: combine search props #1152
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough此次更改对 Select 组件的搜索相关配置进行了重构。将原本分散的搜索相关属性集中到一个新的 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户 as User
participant Select组件 as Select
participant useSearchConfig钩子 as useSearchConfig
participant BaseSelect
用户->>Select组件: 传入 showSearch（布尔值或对象）及其他 props
Select组件->>useSearchConfig钩子: 传递 showSearch 和 props
useSearchConfig钩子-->>Select组件: 返回 mergedShowSearch, searchConfig
Select组件->>BaseSelect: 传递 mergedShowSearch、searchConfig 等参数
用户->>Select组件: 触发搜索相关操作（如输入、选择）
Select组件->>BaseSelect: 处理并响应搜索行为
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/Select.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
📜 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
🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
EmilyyyLiu
force-pushed
the
combine-showSearch
branch
from
f87c667 to
9a2c1f6
Compare
EmilyyyLiu
force-pushed
the
combine-showSearch
branch
from
9f851c3 to
a76b137
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1152 +/- ##
==========================================
+ Coverage 98.23% 98.25% +0.01%
==========================================
Files 38 39 +1
Lines 1471 1487 +16
Branches 446 451 +5
==========================================
+ Hits 1445 1461 +16
Misses 26 26 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/Select.tsx (3)
230-241:autoClearSearchValue在showSearch={false}时仍默认为true当
showSearch显式为false时，useSearchConfig返回的searchConfig为空对象，但此处解构时仍将autoClearSearchValue设为true，随后传递给BaseSelect。
虽然目前BaseSelect在关闭搜索时大概率忽略该字段，但多余的默认值会增加认知负担，也容易在后续重构时产生意外行为。建议仅在开启搜索时才赋默认值：- autoClearSearchValue = true, + autoClearSearchValue = mergedShowSearch ? true : undefined,或直接在传参时用条件运算符包裹。
387-388: 补充mode、setSearchValue到useEffect依赖
react-hooks/exhaustive-deps已报告缺失；若后续有人将setSearchValue通过useCallback包裹，会导致闭包捕获旧引用。按规则补全依赖或显式禁用 eslint 规则。🧰 Tools
🪛 GitHub Actions: ✅ test
[warning] 387-387: React Hook React.useEffect has missing dependencies: 'mode' and 'setSearchValue'. Either include them or remove the dependency array. (react-hooks/exhaustive-deps)
470-477:useMemo缺少sorter依赖同样的 ESLint 告警，理论上
sorter在每次渲染都会重新创建，但若以后将其提取为useCallback，缺失依赖会导致排序逻辑卡在旧版本。请补充或禁用。🧰 Tools
🪛 GitHub Actions: ✅ test
[warning] 476-476: React Hook React.useMemo has a missing dependency: 'sorter'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)
tests/Select.test.tsx (1)
2556-2560: 在combine showSearch套件中复用jest.fn，避免跨测试污染
currentSearchFn与legacySearchFn定义于顶层，会在多个it之间共享调用计数，潜在引起断言错误。可改为在beforeEach中重新声明。README.md (1)
141-141: 小语法：考虑在 “auto clear” 之间加连字符
auto-clear search input value更符合英文习惯，可与其他行保持一致性。🧰 Tools
🪛 LanguageTool
[uncategorized] ~141-~141: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...(AUTO_HYPHEN)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
README.md(2 hunks)src/Select.tsx(5 hunks)src/hooks/useSearchConfig.ts(1 hunks)tests/Select.test.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/hooks/useSearchConfig.ts (1)
src/Select.tsx (2)
SearchConfig(114-123)DefaultOptionType(99-103)
🪛 LanguageTool
README.md
[uncategorized] ~141-~141: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...
(AUTO_HYPHEN)
🪛 GitHub Actions: ✅ test
tests/Select.test.tsx
[error] 1-1: 'DefaultOptionType' is defined but never used. (typescript-eslint/no-unused-vars)
[error] 1-1: 'SearchConfig' is defined but never used. (typescript-eslint/no-unused-vars)
src/hooks/useSearchConfig.ts
[warning] 29-29: React Hook React.useMemo has a missing dependency: 'props'. Preferred fix is to destructure 'props' outside useMemo. (react-hooks/exhaustive-deps)
src/Select.tsx
[warning] 387-387: React Hook React.useEffect has missing dependencies: 'mode' and 'setSearchValue'. Either include them or remove the dependency array. (react-hooks/exhaustive-deps)
[warning] 476-476: React Hook React.useMemo has a missing dependency: 'sorter'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: WIP
🔇 Additional comments (1)
tests/Select.test.tsx (1)
2524-2540: 删除遗留注释块，保持测试文件简洁这里的大段注释仅为示例代码，既不会执行，也容易与正式测试混淆。建议彻底删除。
-// searchValue?: string; -// autoClearSearchValue?: boolean; -// onSearch?: (value: string) => void; -// tokenSeparators?: string[]; -// filterOption?: boolean | FilterFunc<OptionType>; -// filterSort?: (optionA: OptionType, optionB: OptionType, info: { searchValue: string }) => number; -// optionFilterProp?: string; -// optionLabelProp?: string; -// const props = { -// ... -// };[ suggest_optional_refactor ]
EmilyyyLiu
changed the title
README.md
Outdated
| | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' | | ||
| | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' | | ||
| | searchValue | The current input "search" text | string | - | | ||
| | tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | | |
There was a problem hiding this comment.
tokenSeparators 和 optionLabelProp 这两个和 showSearch 没关系吧。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
README.md (2)
91-91: 建议更明确地引用 SearchConfig 类型
当前将 showSearch 的类型写为boolean | Object，建议将Object替换为具体的SearchConfig接口名称并加上链接或文档引用，以提升可读性和可维护性。
142-142: 建议在 “auto clear” 中增加连字符
根据英文书写规范，将auto clear修改为auto-clear以符合“自动清除”短语的惯用格式。🧰 Tools
🪛 LanguageTool
[uncategorized] ~142-~142: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...(AUTO_HYPHEN)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
README.md(2 hunks)src/Select.tsx(5 hunks)src/hooks/useSearchConfig.ts(1 hunks)tests/Select.test.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/hooks/useSearchConfig.ts
- src/Select.tsx
- tests/Select.test.tsx
🧰 Additional context used
🪛 LanguageTool
README.md
[uncategorized] ~142-~142: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...
(AUTO_HYPHEN)
🔇 Additional comments (1)
README.md (1)
138-138: 文档分组清晰：新增 showSearch 小节
将所有搜索相关属性集中到showSearch小节下，结构更加直观，保持一致性。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
README.md (2)
92-92: 建议：完善showSearch类型和描述
当前文档将showSearch类型标注为boolean | Object且描述为 “whether show search input in single mode”，应：
- 将类型改为
boolean \| SearchConfig，使用具体接口名称以提升可读性和可维护性。- 更新描述为 “是否启用搜索（支持对象配置）”，以反映搜索功能在所有模式下的统一管理。
143-143: 建议：添加连字符提升可读性
auto clear search input value建议改为auto-clear search input value，符合英语书写习惯。🧰 Tools
🪛 LanguageTool
[uncategorized] ~143-~143: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...(AUTO_HYPHEN)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
README.md(2 hunks)src/Select.tsx(5 hunks)src/hooks/useSearchConfig.ts(1 hunks)tests/Select.test.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/hooks/useSearchConfig.ts
- src/Select.tsx
- tests/Select.test.tsx
🧰 Additional context used
🪛 LanguageTool
README.md
[uncategorized] ~143-~143: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...
(AUTO_HYPHEN)
| ### showSearch | ||
|
|
||
| | name | description | type | default | | ||
| | --- | --- | --- | --- | | ||
| | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | | ||
| | filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean\| (inputValue: string, option: Option) => boolean | true | | ||
| | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - | | ||
| | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' | | ||
| | searchValue | The current input "search" text | string | - | | ||
| | onSearch | called when input changed | function | - | | ||
|
|
There was a problem hiding this comment.
缺失 tokenSeparators 属性文档
在 showSearch 小节中未列出 tokenSeparators 配置，建议同其他搜索相关属性一并文档化，以保持文档与实现一致。
示例 diff：
### showSearch
| name | description | type | default |
| --- | --- | --- | --- |
+| tokenSeparators | 多选模式下用于分隔输入值并生成 tag 的分隔符数组 | string[] | - |
| autoClearSearchValue | auto-clear 搜索框中输入值，当多选模式下选中/取消选中会清空 | boolean | true |
| filterOption | 是否根据输入值过滤选项；默认按 `optionFilterProp` 指定的属性过滤 | boolean \| (inputValue: string, option: Option) => boolean | true |
...Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~143-~143: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’).
Context: ... | --- | --- | | autoClearSearchValue | auto clear search input value when multiple select...
(AUTO_HYPHEN)
🤖 Prompt for AI Agents
In README.md around lines 139 to 149, the showSearch section is missing
documentation for the tokenSeparators property. Add a new row in the table
describing tokenSeparators, including its name, description, type, and default
value, consistent with the style of other properties in this section to keep the
documentation complete and aligned with the implementation.
ant-design/ant-design#33482
FRC: ant-design/ant-design#53978
Summary by CodeRabbit
文档
重构
新功能
测试