feat: retire deprecated api #1099
Conversation
|
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/Select.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
概述演练这组更改主要集中在 Select 组件的清除功能和属性管理上。修改包括移除 变更
序列图sequenceDiagram
participant User
participant Select
participant AllowClear
User->>Select: 配置 allowClear
Select->>AllowClear: 传递清除配置
AllowClear-->>Select: 渲染清除图标
User->>Select: 触发清除
Select->>Select: 清空选择
诗歌
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (3)
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)
src/hooks/useAllowClear.tsx (1)
18-18: 确认对象引用的稳定性当前依赖数组仅包含
allowClear，若外部频繁生成新对象引用，可能导致不必要的渲染。可根据实际情况确保引用稳定或进行性能评估。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/examples/common.less(0 hunks)docs/examples/custom-icon.tsx(2 hunks)src/BaseSelect/index.tsx(0 hunks)src/Select.tsx(1 hunks)src/hooks/useAllowClear.tsx(2 hunks)src/utils/warningPropsUtil.ts(0 hunks)tests/Select.test.tsx(4 hunks)
💤 Files with no reviewable changes (3)
- docs/examples/common.less
- src/utils/warningPropsUtil.ts
- src/BaseSelect/index.tsx
🔇 Additional comments (9)
src/Select.tsx (1)
236-236: 建议确认search值是否为字符串在此处使用
search || ''，可以避免search为不期望的 falsy 值（如null、undefined）时的潜在报错。但如果在其他情况下需要保留 0 等特殊值，需提前验证需求。src/hooks/useAllowClear.tsx (2)
14-17: 实现对clearIcon的简洁提取通过判断
allowClear是否为对象，直接返回其所包含的clearIcon，逻辑清晰，易于维护。
38-38: 为自定义图标提供一致的渲染路径此处将
clearIcon作为TransBtn的customizeIcon，让清除按钮的呈现更加灵活，符合代码整体设计。docs/examples/custom-icon.tsx (2)
101-101: 通过对象方式设置allowClear此处使用
allowClear={{ clearIcon: getSvg(clearPath) }}可以使清除图标更灵活，符合新结构的配置方式。
187-187: 为多选模式提供自定义清除图标在此同样通过
allowClear={{ clearIcon: getSvg(clearPath) }}赋予多选模式下可配置的清除图标，增强可扩展性。tests/Select.test.tsx (4)
Line range hint
292-296: 测试自定义清除图标在有值时的显示此处校验
allowClear为对象时，已选择值时会展示自定义图标，符合预期测试场景。
Line range hint
301-305: 测试无选中值的情况下清除图标不出现此用例预期覆盖无 value 状态下是否隐藏自定义清除图标，验证逻辑准确。
Line range hint
1243-1247: 验证filterOption={false}时选项列表不进行过滤此测试段落确保当
filterOption为 false 时，无论输入搜索值如何，依旧展示所有候选项，符合预期。
2333-2333: 测试 labelInValue 再配合 labelRender 的缓存逻辑此处在用 labelInValue 时，即使 options 发生变化，通过 labelRender 依旧能够维持自定义标签的显示，体现良好的缓存机制。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1099 +/- ##
==========================================
- Coverage 98.31% 98.24% -0.08%
==========================================
Files 39 39
Lines 1487 1484 -3
Branches 443 447 +4
==========================================
- Hits 1462 1458 -4
- Misses 25 26 +1 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
tests/Multiple.test.tsx (1)
Line range hint
468-470: onChange 回调中的值组装逻辑需要留意
这段代码根据labeledValues决定返回给上层的是{ label, value }还是单纯的字符串(或数字)value。若 labelInValue 为真则返回对象格式，否则返回纯值。请在后续开发中留意切换该布尔值时的序列化结果和调用方法，以免产生意外。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/Select.tsx(4 hunks)tests/Multiple.test.tsx(3 hunks)tests/Select.test.tsx(6 hunks)tests/shared/removeSelectedTest.tsx(2 hunks)
🧰 Additional context used
🪛 GitHub Actions: ✅ test
src/Select.tsx
[warning] 356-356: React Hook React.useEffect has missing dependencies: 'mode' and 'setSearchValue'
[warning] 445-445: React Hook React.useMemo has a missing dependency: 'sorter'
[error] 468-468: 'value' is already declared in the upper scope on line 202
🔇 Additional comments (18)
tests/shared/removeSelectedTest.tsx (3)
53-53: 在 labelInValue 模式中使用新属性结构非常好
这里将{ key: '1' }换成{ value: '1' }，与新的value={[{ value: '1' }, { value: '2' }]}格式保持一致，可读性和一致性更佳。注意后续需要确保程序逻辑及测试期待结果都正确更新。
66-66: 检验 labelInValue 的断言逻辑
expect.objectContaining({ value: '1', label: '1' })已清晰地验证了value和label属性，说明测试用例所期望的返回结构已做相应调整，测试覆盖合理。
71-71: 确认多选剩余值断言
[expect.objectContaining({ value: '2', label: '2' })]同样对保留下来的选项进行断言，确保与新结构保持一致。测试思路清晰，符合预期。tests/Multiple.test.tsx (7)
378-383: 为多选模式增加前缀展示
在多选模式下新增属性prefix="Foobar"，可用于在输入前面显示固定文本或图标。此特性对可视化和用户输入提示有帮助。确保在使用时不会对筛选逻辑或可点击区域造成干扰。
464-464: 确保已选择的值结构正确
[{ label: 'Light', value: 'light' }]说明返回值数组包含对象的label与value两字段。若后续需要引用其他字段，应确保测试一起更新。
475-476: 多选时支持合并新旧值
新增[{ label: 'Light', value: 'light' }, { label: 'Bamboo', value: 'bamboo' }]表示新的用户选择追加到已有已选项目中。对于多选或 tag 模式要考虑清理重复以及维持正确顺序。
Line range hint
292-292: 自定义清除图标
这里通过allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }}的方式来替换内置的清除按钮，可满足更灵活的 UI 需求。确保样式与交互都得到合理的测试覆盖。
Line range hint
301-301: 在未选中值时不渲染自定义清除图标
和上方测试一致，当value为空或 undefined 时，清除图标不会出现，以保证交互符合预期。请继续关注边缘情况，比如仅含空字符串的场景。
Line range hint
1243-1243: filterOption 禁用后绕过默认筛选
当filterOption={false}并且searchValue="1"时，组件将不执行任何筛选逻辑，显示所有选项。确保此行为符合预期，并在需要自定义筛选时由外部自行实现。
Line range hint
2333-2333: 在 labelInValue 情况下设置默认值
value={{ value: 1, label: 'One' }}以对象形式存储并展示，测试中要兼顾 labelInValue 的多种场景，比如空 label 或 value 的处理。src/Select.tsx (4)
236-236: 初始化搜索字符时采用空字符串回退
postState: (search) => search || ''确保搜索值为 falsy 时自动回退为空字符串，避免非受控组件状态错乱。逻辑简洁易懂，推荐保留。
268-268: 在映射空值时需要排除对象类型
这里通过isRawValue(val)判断是否为非对象值，若是对象则取其 label、value 等字段。请确保组件调用方严格维护该数据结构，以免出现不可预料的类型错误。
296-296: 用 rawValue 作为 key
key: rawValue是为了在渲染列表时使用一致的 key。需要确认rawValue确定唯一，否则 React diff 可能受到影响。
467-470: onChange 的回调处理
此处通过判断labelInValue决定返回值的类型是否为对象数组，合理地区分了使用者的配置需求。请额外关注当 value 类型为数字或字符串，但 labelInValue 同时为真时，代码是否可能出现不可控场景。🧰 Tools
🪛 GitHub Actions: ✅ test
[error] 468-468: 'value' is already declared in the upper scope on line 202
tests/Select.test.tsx (4)
292-292: 自定义清除图标用例
allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }}可使业务自定义接入，测试覆盖得当。推荐在多浏览器环境下测试外观。
301-301: 未选中时不出现清除图标
这与之前的测试相对应，验证当value为空时，清除图标不会渲染。逻辑无异常，符合用户期待。
1243-1243: filterOption={false} 情况下显示所有选项
测试中显式提供了searchValue="1"，然而filterOption={false}将不进行任何筛选，符合组件设计。后续若需自定义筛选，可自行实现回调。
2333-2333: 标签渲染逻辑
此处用{ value: 1, label: 'One' }测试 labelInValue，结合labelRender可以自定义展示文案，注意确保与真实选项一致以避免潜在的不一致警告。
Summary by CodeRabbit
新功能
listHeight、listItemHeight和componentallowClear属性的配置方式，支持自定义清除图标弃用的功能
multiple、tags、combobox、firstActiveValue、dropdownMenuStyle和openClassName等旧 APIinputValue，推荐使用searchValue性能优化
测试更新
allowClear功能的测试覆盖，确保新结构的有效性