chore: hoist traverse operation to TreeSelect

react-component · Nov 14, 2024 · e9b59f9 · e9b59f9
1 parent c178539
commit e9b59f9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/examples/mutiple-with-maxCount.tsx b/examples/mutiple-with-maxCount.tsx
@@ -56,7 +56,13 @@ export default () => {
   return (
     <>
       <h2>multiple with maxCount</h2>
-      <TreeSelect style={{ width: 300 }} multiple maxCount={3} treeData={treeData} />
+      <TreeSelect
+        style={{ width: 300 }}
+        fieldNames={{ value: 'value', label: 'title' }}
+        multiple
+        maxCount={3}
+        treeData={treeData}
+      />
 
       <h2>checkable with maxCount</h2>
       <TreeSelect

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -257,24 +257,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     setActiveKey(key);
   };
 
-  const traverse = (nodes: EventDataNode<any>[]): EventDataNode<any>[] => {
-    return nodes.map(node => ({
-      ...node,
-      disabled:
-        isOverMaxCount && !displayValues?.some(v => v.value === node[fieldNames.value])
-          ? true
-          : node.disabled,
-      children: node.children ? traverse(node.children) : undefined,
-    }));
-  };
-
-  const processedTreeData = React.useMemo(
-    () => traverse(memoTreeData),
-    [memoTreeData, isOverMaxCount],
-  );
-
   // ========================== Render ==========================
-  if (processedTreeData.length === 0) {
+  if (memoTreeData.length === 0) {
     return (
       <div role="listbox" className={`${prefixCls}-empty`} onMouseDown={onListMouseDown}>
         {notFoundContent}
@@ -304,7 +288,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         ref={treeRef}
         focusable={false}
         prefixCls={`${prefixCls}-tree`}
-        treeData={processedTreeData}
+        treeData={memoTreeData}
         height={listHeight}
         itemHeight={listItemHeight}
         itemScrollOffset={listItemScrollOffset}

diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx
@@ -613,17 +613,33 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   });
 
   // ========================== Context ===========================
-  const treeSelectContext = React.useMemo<TreeSelectContextProps>(() => {
-    const isOverMaxCount =
-      mergedMultiple && maxCount !== undefined && cachedDisplayValues?.length >= maxCount;
+  const isOverMaxCount =
+    mergedMultiple && maxCount !== undefined && cachedDisplayValues?.length >= maxCount;
+
+  const traverse = (nodes: DataNode[]): DataNode[] => {
+    return nodes.map(node => ({
+      ...node,
+      disabled:
+        isOverMaxCount && !cachedDisplayValues?.some(v => v.value === node.value)
+          ? true
+          : node.disabled,
+      children: node.children ? traverse(node.children) : undefined,
+    }));
+  };
 
+  const processedTreeData = React.useMemo(
+    () => traverse(filteredTreeData),
+    [filteredTreeData, isOverMaxCount],
+  );
+
+  const treeSelectContext = React.useMemo<TreeSelectContextProps>(() => {
     return {
       virtual,
       dropdownMatchSelectWidth,
       listHeight,
       listItemHeight,
       listItemScrollOffset,
-      treeData: filteredTreeData,
+      treeData: processedTreeData,
       fieldNames: mergedFieldNames,
       onSelect: onOptionSelect,
       treeExpandAction,
@@ -638,7 +654,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     listHeight,
     listItemHeight,
     listItemScrollOffset,
-    filteredTreeData,
+    processedTreeData,
     mergedFieldNames,
     onOptionSelect,
     treeExpandAction,