feat: supplement maxCount logic for complicated cases #602
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改涉及多个组件的修改，主要集中在 Changes
Possibly related PRs
Suggested reviewers
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #602 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 16 16
Lines 561 586 +25
Branches 167 168 +1
=========================================
+ Hits 561 586 +25 ☔ View full report in Codecov by Sentry. |
![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
🧹 Outside diff range and nitpick comments (2)
src/OptionList.tsx (1)
171-221: 建议优化nodeDisabled函数的可读性当前的
nodeDisabled函数逻辑较为复杂，嵌套深度较大，可能影响代码的可读性和维护性。建议将复杂的逻辑拆分为多个小函数，或在关键部分添加注释，以提高代码的可读性。examples/mutiple-with-maxCount.tsx (1)
87-87: 考虑清理已注释的showCheckedStrategy属性在第 87 行，
showCheckedStrategy="SHOW_PARENT"被注释掉。若不再需要，建议删除该注释代码；若需保留，建议添加说明以解释注释原因。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
examples/mutiple-with-maxCount.tsx(2 hunks)src/OptionList.tsx(3 hunks)src/TreeSelect.tsx(2 hunks)src/TreeSelectContext.ts(2 hunks)
🔇 Additional comments (4)
src/TreeSelect.tsx (2)
628-629: 确保在上下文中正确传递 maxCount 和 showCheckedStrategy
将 maxCount 和 mergedShowCheckedStrategy 添加到 treeSelectContext 中，确保子组件能够访问并使用这些新添加的配置属性。
646-646: 在依赖项数组中包含 mergedShowCheckedStrategy
在 useMemo 的依赖项数组中添加 mergedShowCheckedStrategy，确保当该策略更改时，treeSelectContext 能够正确地重新计算和更新。
src/TreeSelectContext.ts (2)
4-4: 引入 CheckedStrategy 类型
从 './utils/strategyUtil' 导入 CheckedStrategy，以便在接口中使用该类型，增强类型检查和代码可读性。
20-21: 在 TreeSelectContextProps 接口中添加 maxCount 和 showCheckedStrategy 属性
为 TreeSelectContextProps 接口新增可选的 maxCount 和 showCheckedStrategy 属性，使上下文配置更灵活，支持最大选择数量和选择显示策略的定制。
src/OptionList.tsx
Outdated
| // Simulate checked state after selecting current node | ||
| const simulatedCheckedKeys = [...checkedKeys, ...selectableNodeValues]; | ||
|
|
||
| const { checkedKeys: conductedKeys } = conductCheck(simulatedCheckedKeys, true, keyEntities); |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
tests/Select.maxCount.spec.tsx (1)
449-470: 建议将代码注释统一为英文为了保持代码库的一致性和方便全球开发者理解，建议将测试代码中的中文注释翻译为英文。
Also applies to: 493-502
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
examples/mutiple-with-maxCount.tsx(2 hunks)src/OptionList.tsx(3 hunks)src/TreeSelect.tsx(3 hunks)src/TreeSelectContext.ts(2 hunks)tests/Select.maxCount.spec.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/TreeSelectContext.ts
- examples/mutiple-with-maxCount.tsx
🧰 Additional context used
🪛 eslint
src/OptionList.tsx
[error] 178-178: 'fieldNames' is already declared in the upper scope on line 46 column 5.
(@typescript-eslint/no-shadow)
🔇 Additional comments (1)
tests/Select.maxCount.spec.tsx (1)
375-503: 测试用例正确地覆盖了复杂场景
新增的测试用例有效地验证了在复杂树结构下 maxCount 的行为，逻辑清晰，符合预期。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/OptionList.tsx (1)
164-176: 建议优化缓存重置逻辑当前实现在
checkedKeys或maxCount变化时会清空整个缓存。考虑以下优化建议：
- 可以只清除受影响的缓存项，而不是清空整个 Map
- 考虑添加缓存大小限制，避免在大型树结构中内存占用过大
const resetCache = React.useCallback(() => { - disabledCacheRef.current.clear(); + // 只清除受影响的缓存项 + const affectedPrefix = `${checkedKeys.join(',')}-${maxCount}`; + for (const key of disabledCacheRef.current.keys()) { + if (key.includes(affectedPrefix)) { + disabledCacheRef.current.delete(key); + } + } lastCheckedKeysRef.current = [...checkedKeys]; lastMaxCountRef.current = maxCount; }, [checkedKeys, maxCount]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/OptionList.tsx(3 hunks)src/TreeSelectContext.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/TreeSelectContext.ts
🔇 Additional comments (2)
src/OptionList.tsx (2)
12-16: 导入和上下文变更看起来不错！
新增的导入和上下文值很好地支持了 maxCount 和 showCheckedStrategy 的功能实现。
Also applies to: 53-54
192-226:
性能优化警告：需要处理非虚拟列表场景
根据之前 @zombieJ 的评论，当前实现在未启用虚拟列表时可能会导致性能雪崩。建议：
- 在非虚拟列表场景下，实现节点懒加载机制
- 考虑使用 worker 线程处理复杂计算
- 实现节点计算结果的批量更新
const nodeDisabled = useEvent((node: DataNode) => {
+ // 非虚拟列表场景下的性能优化
+ if (!virtual) {
+ const batchSize = 100;
+ const throttleMs = 16;
+
+ // 实现节点计算的批量处理逻辑
+ // TODO: 添加具体实现
+ }
// 原有逻辑保持不变
const nodeValue = node[fieldNames.value];
// ...
});
| @@ -163,8 +161,69 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_, | |||
| // eslint-disable-next-line react-hooks/exhaustive-deps | |||
| }, [searchValue]); | |||
|
|
|||
| const disabledCacheRef = React.useRef(new Map<Key, boolean>()); | |||
There was a problem hiding this comment.
这个 cache 用处不大，如果是 defaultExpandedAll + 关闭 virtual。初始化阶段没有 cache 会直接炸死。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/TreeSelect.tsx (2)
Line range hint
89-89: 建议为 maxCount 属性添加 JSDoc 注释为了提高代码的可维护性和使用体验，建议添加 JSDoc 注释来说明 maxCount 属性的用途、限制条件和使用示例。
建议添加如下注释：
+ /** + * 最大可选择的节点数量 + * @default undefined + */ maxCount?: number;
Line range hint
391-476: 建议重构 onOptionSelect 函数以提高可维护性当前的
onOptionSelect函数职责过重，包含了选择逻辑、树形结构处理和 maxCount 限制等多个功能。建议将其拆分为更小的、职责单一的函数。建议按照以下方式重构：
const canSelectMore = (newValue: SafeKey) => { if (!mergedMultiple || maxCount === undefined) { return true; } const newNodeCount = getNodeCount(newValue, keyEntities); return calculateSelectedCount + newNodeCount <= maxCount; }; const handleTreeConduction = (newRawValues: SafeKey[], selected: boolean) => { const { missingRawValues, existRawValues } = splitRawValues(newRawValues); const keyList = existRawValues.map(val => valueEntities.get(val).key); const { checkedKeys } = selected ? conductCheck(keyList, true, keyEntities) : conductCheck(keyList, { checked: false, halfCheckedKeys: rawHalfCheckedValues }, keyEntities); return [...missingRawValues, ...checkedKeys.map(key => keyEntities[key as SafeKey].node[mergedFieldNames.value])]; }; const onOptionSelect = (selectedKey: SafeKey, { selected, source }) => { const entity = keyEntities[selectedKey]; const node = entity?.node; const selectedValue = node?.[mergedFieldNames.value] ?? selectedKey; if (!mergedMultiple) { triggerChange([selectedValue], { selected: true, triggerValue: selectedValue }, 'option'); onSelect?.(selectedValue, fillLegacyProps(node)); return; } if (selected && !canSelectMore(selectedValue)) { return; } const newRawValues = selected ? [...rawValues, selectedValue] : rawCheckedValues.filter(v => v !== selectedValue); const finalValues = treeConduction ? handleTreeConduction(newRawValues, selected) : newRawValues; triggerChange(finalValues, { selected, triggerValue: selectedValue }, source || 'option'); if (selected) { onSelect?.(selectedValue, fillLegacyProps(node)); } else { onDeselect?.(selectedValue, fillLegacyProps(node)); } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/OptionList.tsx(3 hunks)src/TreeSelect.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/OptionList.tsx
🔇 Additional comments (1)
src/TreeSelect.tsx (1)
Line range hint 4-4: 建议补充 maxCount 功能的测试用例
为确保 maxCount 功能在各种场景下的正确性，建议补充以下测试场景：
- 不同 showCheckedStrategy 策略下的 maxCount 限制
- 父子节点选择时的 maxCount 计数
- 取消选择时的状态恢复
- 边界条件测试（maxCount 为 0、1 等）
TreeSelect maxCount 功能优化
修复了 TreeSelect 组件在设置 maxCount 时对树形结构处理的问题，使其能够正确处理父子节点关系和树的传导规则。
主要改动
具体改进
相关问题
修复了以下场景的问题：
Summary by CodeRabbit
Summary by CodeRabbit
新功能
TreeSelect组件中引入了最大选择数量 (maxCount) 和显示选中策略 (showCheckedStrategy) 属性。OptionList组件的节点选择逻辑，增强了对最大选择数量的管理。bug 修复