Feature/panel default expand keys #547
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改在多个文件中引入了新的属性 Changes
Possibly related PRs
Suggested reviewers
Poem
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: 1
🧹 Outside diff range and nitpick comments (4)
examples/panel.tsx (1)
102-102: 代码变更正确展示了新功能
defaultActiveKey的使用与第一个面板的 "Set Value" 按钮设置的值保持一致，很好地演示了默认展开功能。建议添加注释说明这个属性的用途，以帮助其他开发者理解。建议添加如下注释：
<Cascader.Panel checkable value={value2} options={addressOptions} onChange={nextValue => { console.log('Change:', nextValue); setValue2(nextValue); }} disabled={disabled} + // 设置面板默认展开到"北京-海淀区" defaultActiveKey={['bj', 'haidian']} />tests/Panel.spec.tsx (1)
82-94: 建议增加更多测试场景当前测试用例仅验证了菜单展开数量，建议添加以下测试场景：
- 验证默认激活项的选中状态
- 验证用户交互后的状态变化
- 验证无效的
defaultActiveKey值的处理建议参考以下代码添加更多测试：
it('multiple with defaultActiveKey', () => { const onChange = jest.fn(); const { container } = render( <Cascader.Panel checkable options={options} onChange={onChange} defaultActiveKey={['bamboo', 'little']} />, ); expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(2); + + // 验证默认激活项 + const activeItems = container.querySelectorAll('.rc-cascader-menu-item-active'); + expect(activeItems).toHaveLength(2); + expect(activeItems[0].textContent).toBe('Bamboo'); + expect(activeItems[1].textContent).toBe('Little'); + + // 验证用户交互 + fireEvent.click(container.querySelectorAll('.rc-cascader-menu-item')[0]); + expect(container.querySelectorAll('.rc-cascader-menu')).toHaveLength(1); + + // 验证无效值处理 + const { container: container2 } = render( + <Cascader.Panel + checkable + options={options} + onChange={onChange} + defaultActiveKey={['invalid', 'key']} + />, + ); + expect(container2.querySelectorAll('.rc-cascader-menu')).toHaveLength(1); });src/Panel.tsx (1)
Line range hint
1-211: 建议补充属性文档说明为了提高代码的可维护性，建议为
defaultActiveKey属性添加 JSDoc 注释，说明其用途和预期值类型。建议在属性定义处添加如下注释：
export type PickType = | 'value' | 'defaultValue' + /** @description 默认展开的面板key + * @type {string[]} + */ | 'defaultActiveKey';src/Cascader.tsx (1)
162-162: 检查 defaultActiveKey 属性的类型定义
defaultActiveKey的类型定义为可选的React.Key数组是合适的，这与 React 组件中常见的键值类型保持一致。建议添加属性文档注释，说明该属性的用途和预期值格式。建议添加如下 JSDoc 注释：
+ /** 设置默认展开的面板键值 */ defaultActiveKey?: React.Key[];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
examples/panel.tsx(1 hunks)src/Cascader.tsx(2 hunks)src/OptionList/List.tsx(3 hunks)src/OptionList/useActive.ts(1 hunks)src/Panel.tsx(3 hunks)tests/Panel.spec.tsx(1 hunks)tests/selector.spec.tsx(1 hunks)
🔇 Additional comments (11)
src/OptionList/useActive.ts (2)
18-18: 状态初始化实现恰当
使用空值合并运算符（??）来处理默认值是一个很好的选择，既保持了向后兼容性，又确保了类型安全。
10-10: 新参数 defaultActiveKey 的集成需要验证
新增的 defaultActiveKey 参数扩展了组件的功能，但需要确保在所有调用处都正确处理了这个可选参数。
运行以下脚本来验证所有使用此 hook 的地方：
✅ Verification successful
Let me check the implementation of List.tsx to verify how the defaultActiveKey is being used.
Let me check the implementation of useActive hook to complete the verification.
defaultActiveKey 参数集成验证完成
经过验证，defaultActiveKey 参数的集成是安全且合理的：
- 参数在
List.tsx中正确传递给useActivehook useActivehook 中使用空数组作为默认值，保持了向后兼容性- 在非多选模式下，
useEffect会正确覆盖初始值，确保了原有行为不变 - 参数类型定义完整且符合 React 规范
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 useActive hook 的所有调用位置
# 搜索所有调用 useActive 的地方
rg "useActive\(" -A 3
Length of output: 337
Script:
#!/bin/bash
# Check the implementation of List.tsx
cat src/OptionList/List.tsx
Length of output: 7784
Script:
#!/bin/bash
# Check the implementation of useActive hook
cat src/OptionList/useActive.ts
Length of output: 937
examples/panel.tsx (1)
102-102: 建议验证不同面板行为的一致性
需要确认第一个不可选中的面板和第二个可选中的面板在使用 defaultActiveKey 时行为是否一致。
✅ Verification successful
defaultActiveKey 行为在不同面板中表现一致
根据代码分析，我可以确认：
- 在测试用例
tests/Panel.spec.tsx中验证了defaultActiveKey在多选面板中的行为 - 在源码
src/OptionList/useActive.ts中，defaultActiveKey的处理逻辑对所有面板类型是统一的 - 示例代码
examples/panel.tsx中的两个面板（可选和不可选）都使用了相同的defaultActiveKey处理机制
因此可以确认第一个不可选中的面板和第二个可选中的面板在使用 defaultActiveKey 时行为是一致的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他文件中 Cascader.Panel 组件的 defaultActiveKey 属性使用情况
ast-grep --pattern 'Cascader.Panel $$$defaultActiveKey={$_}$$$'
Length of output: 65
Script:
#!/bin/bash
# 搜索包含 Cascader.Panel 的文件
rg -l "Cascader\.Panel"
# 查看包含 Cascader.Panel 的代码上下文
rg "Cascader\.Panel" -A 5 -B 5
# 搜索包含 defaultActiveKey 的代码
rg "defaultActiveKey"
Length of output: 7381
tests/Panel.spec.tsx (1)
82-94: 测试用例实现正确！
测试用例结构清晰，验证了 defaultActiveKey 属性的基本功能。
src/Panel.tsx (3)
39-40: 类型定义更新正确且完整
PickType 类型定义中新增的 defaultActiveKey 属性与组件的功能扩展相符。
74-74: 属性解构位置恰当
defaultActiveKey 的解构位置正确，与其他可选配置项保持一致的代码风格。
208-208: 建议验证属性传递的完整性
属性已正确传递给 RawOptionList 组件，但建议确认 RawOptionList 组件是否已正确处理该属性。
运行以下脚本来验证 RawOptionList 组件的属性定义：
✅ Verification successful
defaultActiveKey 属性已正确处理
从代码分析可以看到，RawOptionList 组件确实接收并正确处理了 defaultActiveKey 属性：
- 在组件的 props 解构中明确包含了
defaultActiveKey（第44行） - 该属性被传递给
useActivehook 用于管理活动状态（第109行） - 活动状态被用于控制选项列表的展开和键盘导航
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 RawOptionList 组件是否正确定义了 defaultActiveKey 属性
# 搜索 RawOptionList 的属性定义
ast-grep --pattern 'interface RawOptionListProps {
$$$
}'
# 搜索 defaultActiveKey 的使用情况
rg -A 3 'defaultActiveKey.*RawOptionList'
Length of output: 105
Script:
#!/bin/bash
# 搜索 RawOptionList 组件的定义和属性使用
ast-grep --pattern 'class RawOptionList {
$$$
}'
ast-grep --pattern 'const RawOptionList = $_'
# 搜索包含 RawOptionList 的文件
fd RawOptionList --type f --exec cat {}
Length of output: 13186
src/OptionList/List.tsx (3)
32-32: 类型定义正确且完整
defaultActiveKey 的类型定义作为可选属性添加到 RawOptionListProps 中，类型声明清晰且符合 TypeScript 最佳实践。
44-44: 属性解构符合规范
defaultActiveKey 属性的解构位置正确，保持了字母顺序，便于代码维护。
109-109: 验证 useActive 钩子的实现
defaultActiveKey 作为参数传递给 useActive 钩子看起来是正确的，但建议验证 useActive 钩子的具体实现，以确保默认值的处理逻辑符合预期。
✅ Verification successful
useActive 钩子实现已验证完成
经过验证，useActive 钩子的实现完全符合预期：
- 正确接收并使用
defaultActiveKey作为默认值 - 通过
React.useState妥善管理激活状态 - 在非多选模式下会自动同步第一个选中值
- 测试用例完整覆盖了相关功能
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找并检查 useActive 钩子的实现
# 搜索 useActive 的实现
ast-grep --pattern 'export default function useActive($_) {
$$$
}'
# 搜索 useActive 的测试用例
rg -l "useActive" --glob "**/*.test.{ts,tsx}"
Length of output: 265
Script:
#!/bin/bash
# 搜索 useActive 的定义，使用更广泛的搜索模式
rg -A 10 "function useActive"
# 搜索包含 useActive 的文件
fd -e ts -e tsx | xargs rg "useActive"
# 搜索导出 useActive 的语句
rg "export.*useActive"
Length of output: 726
Script:
#!/bin/bash
# 查看 useActive 钩子的完整实现
cat src/OptionList/useActive.ts
# 查看测试文件中的相关测试用例
cat tests/selector.spec.tsx
Length of output: 5452
src/Cascader.tsx (1)
179-179: 验证内部属性接口的一致性
内部接口 InternalCascaderProps 中的 defaultActiveKey 定义与外部接口保持一致，这是正确的做法。
✅ Verification successful
defaultActiveKey 属性定义和使用验证完成
通过代码库分析，确认 defaultActiveKey 属性在整个组件中使用一致：
- 在
Cascader.tsx中正确定义了类型React.Key[] - 在
OptionList/List.tsx和OptionList/useActive.ts中保持了相同的类型定义 - 在测试文件和示例中的使用方式也符合类型定义
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 defaultActiveKey 属性在组件中的使用情况
# 检查属性的使用
rg "defaultActiveKey" --type typescript
Length of output: 74
Script:
#!/bin/bash
# 搜索 defaultActiveKey 的使用情况
rg "defaultActiveKey"
# 使用 ast-grep 查找接口定义
ast-grep --pattern 'interface $_ {
$$$
defaultActiveKey$_
$$$
}'
Length of output: 1218
| jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean, defaultActiveKey: React.Key[]) => { | ||
| // Pass to origin hooks | ||
| const originHook = jest.requireActual('../src/OptionList/useActive').default; | ||
| const [activeValueCells, setActiveValueCells] = originHook(multiple, open); | ||
| const [activeValueCells, setActiveValueCells] = originHook(multiple, open, defaultActiveKey); |
There was a problem hiding this comment.
💡 Codebase verification
需要为 selector.spec.tsx 添加 defaultActiveKey 相关的测试用例
经过验证，当前 selector.spec.tsx 中虽然更新了 mock 函数以支持 defaultActiveKey 参数，但缺少对该功能的具体测试。Panel.spec.tsx 中已有相关测试，但范围有限。
建议在 selector.spec.tsx 中添加以下测试场景：
- defaultActiveKey 的默认值处理
- 设置 defaultActiveKey 时的选择器初始状态
- defaultActiveKey 与 value 属性同时存在时的优先级验证
- 多选模式下 defaultActiveKey 的行为测试
🔗 Analysis chain
代码更改看起来没有问题，但建议增加测试用例
mock 函数的更新正确地支持了新增的 defaultActiveKey 参数，并且保持了与原始 hook 的一致性。
建议添加以下测试场景：
defaultActiveKey的默认行为- 传入无效的
defaultActiveKey时的处理 defaultActiveKey与已有value属性的交互
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有相关的测试用例
rg -l "defaultActiveKey.*test|it.*defaultActiveKey" tests/
Length of output: 81
Script:
#!/bin/bash
# Check the content of Panel.spec.tsx to see existing defaultActiveKey tests
rg "defaultActiveKey.*test|it.*defaultActiveKey" -A 5 tests/Panel.spec.tsx
# Check selector.spec.tsx for any existing test cases
cat tests/selector.spec.tsx
Length of output: 4770
|
上面单选面板的能用吗，好像没生效，要不然也补个 demo？ |
单选面板不需要这个属性默认展开，单选面板展开的节点一定是被选中的节点。单选面板 默认展开可以依赖其value |
|
为什么一个简单的pull-requst review效率如此低 |
Summary by CodeRabbit
新特性
Cascader.Panel组件中添加了defaultActiveKey属性，以便在渲染时预设活动键。Panel组件现在支持defaultActiveKey属性，增强了其配置能力。测试
Cascader.Panel组件添加了新测试用例，验证defaultActiveKey属性的正确初始化。useActive钩子的模拟，以支持新的defaultActiveKey参数。