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
tests/Select.test.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.24% +0.01%
==========================================
Files 38 39 +1
Lines 1471 1480 +9
Branches 446 441 -5
==========================================
+ Hits 1445 1454 +9
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
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/hooks/useSearchConfig.ts (2)
3-33:legacySearchProps未被使用且导致重复代码，可顺便过滤掉undefined字段当前常量
legacySearchProps定义后并未在后续逻辑中使用，CodeQL 已提示未使用变量。同时，legacyShowSearch对象手动枚举了同样的字段，既冗余也会把undefined值写入结果对象。建议直接复用legacySearchProps来动态收集旧属性，并跳过undefined，既消除警告，也避免对象出现无意义键。示例修正：-const legacySearchProps = [ - 'filterOption', - 'searchValue', - 'optionFilterProp', - 'filterSort', - 'onSearch', - 'autoClearSearchValue', -]; +const legacySearchProps = [ + 'filterOption', + 'searchValue', + 'optionFilterProp', + 'filterSort', + 'onSearch', + 'autoClearSearchValue', +] as const; ... - const legacyShowSearch: SearchConfig<DefaultOptionType> = { - filterOption, - searchValue, - optionFilterProp, - filterSort, - onSearch, - autoClearSearchValue, - }; + const legacyShowSearch: SearchConfig<DefaultOptionType> = {}; + legacySearchProps.forEach((key) => { + const val = (props as any)[key]; + if (val !== undefined) { + (legacyShowSearch as any)[key] = val; + } + });如此一来可保持字段一次性维护，减少后续修改遗漏。
🧰 Tools
🪛 GitHub Check: CodeQL
[notice] 3-3: Unused variable, import, function or class
Unused variable legacySearchProps.
12-15: 为props与OptionType增加泛型，消除潜在的any漏出
SelectProps本身是带泛型的，此处直接使用裸类型会丢失类型信息，调用方无法得到正确推导。可以如下声明：-export default function useSearchConfig( - showSearch: boolean | SearchConfig<DefaultOptionType> | undefined, - props: SelectProps, -) { +export default function useSearchConfig< + OptionType extends DefaultOptionType = DefaultOptionType, +>( + showSearch: boolean | SearchConfig<OptionType> | undefined, + props: SelectProps<any, OptionType>, +) {这样
searchConfig的回传类型也能随OptionType联动，保持类型安全。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/hooks/useSearchConfig.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/hooks/useSearchConfig.ts (1)
src/Select.tsx (3)
SearchConfig(114-121)DefaultOptionType(99-103)SelectProps(122-182)
🪛 GitHub Check: CodeQL
src/hooks/useSearchConfig.ts
[notice] 3-3: Unused variable, import, function or class
Unused variable legacySearchProps.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test / react component workflow
🔇 Additional comments (1)
src/hooks/useSearchConfig.ts (1)
34-39:showSearch === undefined的分支行为需再次确认当
showSearch为undefined且存在旧搜索相关属性时，当前实现返回[undefined, legacyShowSearch]。如果上层逻辑仅用!!enabled判断是否开启搜索，undefined会被当作false，导致“有配置却不开启”——这与旧版 API（只要给旧属性就自动开启搜索）不一致。请确认Select组件对第一项的判定规则，必要时考虑改为返回true。
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR centralizes all search-related props into a single showSearch configuration, introduces a hook to normalize these options, and updates component logic, tests, and documentation accordingly.
- Unify search props under a new
showSearchAPI supporting boolean or detailed object. - Add
useSearchConfighook to process and merge legacy and new search options. - Refactor
Selectcomponent to consume the unified config and refresh docs and tests.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| tests/Select.test.tsx | Add combine showSearch test suite comparing legacy vs current. |
| src/hooks/useSearchConfig.ts | New hook to derive search enablement and config from props. |
| src/Select.tsx | Integrate useSearchConfig and pass merged search settings. |
| README.md | Document showSearch option group and update API table. |
Comments suppressed due to low confidence (3)
tests/Select.test.tsx:2604
- [nitpick] The test title has inconsistent casing and punctuation. Consider renaming to something like
it('sort options with filterSort and optionFilterProp', ...)for clarity.
it('option:sort,FilterProp ', () => {
tests/Select.test.tsx:2525
- Add a test case covering the
filterOptionconfiguration to verify that a custom filter function is applied correctly whenshowSearchis an object.
describe('combine showSearch', () => {
README.md:92
- Update the type column to reference the actual config interface, e.g.,
boolean \| SearchConfig, to accurately document the supported object shape.
| showSearch | whether show search input in single mode | boolean \| Object | true |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/hooks/useSearchConfig.ts (2)
17-26: 建议过滤掉undefined字段，避免下游出现“存在但为 undefined”判断差异当前直接扩展所有旧 props，
searchConfig中会保留下大量值为undefined的 key。
这在后续通过in或hasOwnProperty判断字段是否存在时会产生歧义，也会导致序列化体积偏大。- const searchConfig = { - filterOption, - searchValue, - optionFilterProp, - filterSort, - onSearch, - autoClearSearchValue, - ...(typeof showSearch === 'object' ? showSearch : {}), - }; + const searchConfig = Object.fromEntries( + Object.entries({ + filterOption, + searchValue, + optionFilterProp, + filterSort, + onSearch, + autoClearSearchValue, + ...(typeof showSearch === 'object' ? showSearch : {}), + }).filter(([, v]) => v !== undefined), + ) as SearchConfig<DefaultOptionType>;这样可以保证配置对象紧凑且语义清晰。
28-34: 返回元组第一位的三态布尔值可读性一般，考虑显式常量
false / undefined / true三态依赖调用方额外注释才能快速辨认。可以考虑返回枚举或常量，比如'disabled' | 'inherit' | 'enabled'，提升可读性与类型安全。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/Select.tsx(6 hunks)src/hooks/useSearchConfig.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/Select.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/hooks/useSearchConfig.ts (1)
src/Select.tsx (3)
SearchConfig(114-121)DefaultOptionType(99-103)SelectProps(122-182)
ant-design/ant-design#33482
FRC: ant-design/ant-design#53978
Summary by CodeRabbit
文档
重构
新功能
测试