Skip to content

Conversation

@ug-hero
Copy link
Contributor

@ug-hero ug-hero commented Dec 1, 2025

Summary by CodeRabbit

  • 新特性

    • 搜索过滤增强:搜索配置现可在多字段中匹配(支持在多个属性上搜索),提升搜索灵活性。
    • 示例与控件更新:示例改为受控初始值显示。
  • 变更

    • 选项属性调整:示例中选项由原来的描述字段切换为 pinyin 字段,并新增 Lisa 选项。
  • 测试

    • 新增测试覆盖多属性搜索过滤行为。

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Dec 1, 2025

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 1, 2025

Walkthrough

将 Select 的 optionFilterProp 扩展为支持字符串数组并在内部规范化;调整相关 Hook(useFilterOptions、useOptions)以按多个属性进行筛选;更新示例为受控用法并添加测试覆盖多字段搜索行为。

Changes

Cohort / File(s) 变更摘要
公共 API 与核心实现
src/Select.tsx
optionFilterProp 类型从 string 扩展为 string | string[];新增 normalizedOptionFilterProp(useMemo)并在搜索/填充流程中使用;新增/更新 hasItemMatchingSearch 与相关依赖数组。
筛选 Hook
src/hooks/useFilterOptions.ts
函数签名改为接收 optionFilterProp: string[];过滤逻辑由单属性比较改为对数组属性使用 .some(...);将结果通过 React.useMemo 返回并修复函数闭合。
选项构建 Hook
src/hooks/useOptions.ts
接口签名接受 optionFilterProp: string[];构建 labelOptions 时对每个属性执行 forEach,支持多个筛选属性;更新 useMemo 依赖。
示例 & 测试
docs/examples/optionFilterProp.tsx, tests/Select.test.tsx
示例从非受控改为受控(初始值由 '' 改为 '张三',使用 value/onChange);将 Option 的 desc 改为 pinyin 并新增 lisa 选项;新增测试验证 optionFilterProp 数组(['value','pinyin'])能跨字段匹配。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

  • 重点检查:
    • useFilterOptions.ts 中多属性 .some() 的边界条件(空数组、属性不存在)
    • useOptions.ts 中对 labelOptions 的多次写入是否与原数据结构兼容
    • normalizedOptionFilterProp 在各处依赖数组中的一致性与性能影响
    • 向后兼容性:单字符串 optionFilterProp 的调用者是否仍被正确处理(normalize)

Possibly related PRs

  • feat: combine search props #1152:同类更改 Select 搜索相关 API(showSearch / optionFilterProp)的 PR,代码层面高度相关,可能涉及相同设计决策。

Suggested reviewers

  • zombieJ

Poem

🐰 我在键盘上轻轻跳,
多字段搜索把花草找,
张三李四与小 Lisa,
拼音与值都能照,
代码里开了新小道~✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰准确地反映了主要变更:optionFilterProp 从仅支持 string 扩展为支持 string | string[]。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 945316d and b3856b0.

📒 Files selected for processing (1)
  • src/Select.tsx (6 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/Select.tsx (1)
src/BaseSelect/index.tsx (1)
  • BaseSelectPropsWithoutPrivate (130-130)
🔇 Additional comments (5)
src/Select.tsx (5)

120-120: 类型定义更新符合预期。

optionFilterProp 现在支持 string | string[],向后兼容单个字符串的用法,同时允许多属性过滤。

Also applies to: 157-157


447-452: LGTM! 精确匹配逻辑符合 tags 模式需求。

hasItemMatchingSearch 使用严格相等判断是正确的——在 tags 模式下需要检查是否已存在完全匹配的选项,以决定是否自动创建新标签。当指定了多个属性时,只要任一属性精确匹配即返回 true。


290-290: LGTM! 正确传递规范化后的属性数组。

useOptionsuseFilterOptions 传递 normalizedOptionFilterProp 确保了这些 hooks 始终接收数组格式,与类型定义保持一致。

Also applies to: 442-442


466-473: LGTM! 依赖数组正确更新。

normalizedOptionFilterProp 添加到 filledSearchOptions 的依赖数组中是必要的,因为它在 hasItemMatchingSearch 函数中被使用。所有依赖项都已正确列出。


253-256: Verify downstream handling of empty array case in useFilterOptions and useOptions hooks.

The normalization logic is sound: it converts optionFilterProp to an array (empty when falsy, single-element when string, unchanged when already array) with correct dependency tracking. However, confirm that both useFilterOptions and useOptions properly handle the empty array case returned when no specific filter properties are configured.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist
Copy link

Summary of Changes

Hello @ug-hero, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant enhancement to the Select component's filtering capabilities by allowing the optionFilterProp to accept an array of strings. This change enables more flexible and powerful search functionality, as users can now specify multiple option properties to be considered during filtering, improving the overall user experience for selecting items.

Highlights

  • Enhanced optionFilterProp: The optionFilterProp in the Select component now accepts an array of strings, in addition to a single string. This allows filtering options based on multiple properties.
  • Multi-field Filtering Logic: The internal filtering logic has been updated to iterate through the provided array of properties when optionFilterProp is an array, enabling comprehensive search across different option attributes.
  • Updated Type Definitions: The TypeScript type definitions for optionFilterProp in SelectProps and SearchConfig have been updated to reflect the new string | string[] support.
  • Example and Test Coverage: A new example in docs/examples/optionFilterProp.tsx demonstrates the usage with ['value', 'pinyin'], and a corresponding test case in tests/Select.test.tsx validates this multi-field filtering functionality.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request successfully implements the feature to allow optionFilterProp to accept an array of strings, enabling multi-field searching within the Select component. The changes are well-structured, including updates to type definitions, normalization of the optionFilterProp to an array, and modification of the filtering logic to iterate over these properties. A comprehensive test case has been added to validate the new functionality, covering various search scenarios. The code is clean and follows good practices for maintainability and correctness.

@codecov
Copy link

codecov bot commented Dec 1, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.42%. Comparing base (18f176f) to head (b3856b0).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1179   +/-   ##
=======================================
  Coverage   99.41%   99.42%           
=======================================
  Files          31       31           
  Lines        1202     1211    +9     
  Branches      407      430   +23     
=======================================
+ Hits         1195     1204    +9     
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@afc163 afc163 merged commit 49ec5c0 into react-component:master Dec 2, 2025
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants