chore: change limit maxCount

Author: zombieJ

examples/mutiple-with-maxCount.tsx

@@ -80,7 +80,6 @@ export default () => {
       <h2>checkable with maxCount</h2>
       <TreeSelect
         style={{ width: 300 }}
-        multiple
         treeCheckable
         // showCheckedStrategy="SHOW_ALL"
         // showCheckedStrategy="SHOW_PARENT"

src/OptionList.tsx

@@ -48,8 +48,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     treeExpandAction,
     treeTitleRender,
     onPopupScroll,
-    isOverMaxCount,
-    maxCount,
+    leftMaxCount,
     showCheckedStrategy,
   } = React.useContext(TreeSelectContext);
 
@@ -160,33 +159,19 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValue]);
 
-  const disabledCacheRef = React.useRef(new Map<Key, boolean>());
-  const lastCheckedKeysRef = React.useRef<Key[]>([]);
-  const lastMaxCountRef = React.useRef<number>(null);
+  // const getSelectableKeys = (targetNode: DataNode, names: FieldNames): Key[] => {
+  //   const keys = [targetNode[names.value]];
+  //   if (!Array.isArray(targetNode.children)) {
+  //     return keys;
+  //   }
 
-  const resetCache = React.useCallback(() => {
-    disabledCacheRef.current.clear();
-    lastCheckedKeysRef.current = [...checkedKeys];
-    lastMaxCountRef.current = maxCount;
-  }, [checkedKeys, maxCount]);
-
-  React.useEffect(() => {
-    resetCache();
-  }, [checkedKeys, maxCount]);
-
-  const getSelectableKeys = (targetNode: DataNode, names: FieldNames): Key[] => {
-    const keys = [targetNode[names.value]];
-    if (!Array.isArray(targetNode.children)) {
-      return keys;
-    }
-
-    return targetNode.children.reduce((acc, child) => {
-      if (!child.disabled) {
-        acc.push(...getSelectableKeys(child, names));
-      }
-      return acc;
-    }, keys);
-  };
+  //   return targetNode.children.reduce((acc, child) => {
+  //     if (!child.disabled) {
+  //       acc.push(...getSelectableKeys(child, names));
+  //     }
+  //     return acc;
+  //   }, keys);
+  // };
 
   const nodeDisabled = useEvent((node: DataNode) => {
     const nodeValue = node[fieldNames.value];
@@ -195,33 +180,35 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       return false;
     }
 
-    if (isOverMaxCount) {
-      return true;
+    if (leftMaxCount === null) {
+      return false;
     }
 
-    const cacheKey = `${nodeValue}-${checkedKeys.join(',')}-${maxCount}`;
+    // const cacheKey = `${nodeValue}-${checkedKeys.join(',')}-${maxCount}`;
 
-    // check cache
-    if (disabledCacheRef.current.has(cacheKey)) {
-      return disabledCacheRef.current.get(cacheKey);
-    }
+    // // check cache
+    // if (disabledCacheRef.current.has(cacheKey)) {
+    //   return disabledCacheRef.current.get(cacheKey);
+    // }
 
-    // calculate disabled state
-    const selectableNodeKeys = getSelectableKeys(node, fieldNames);
-    const simulatedCheckedKeys = [...checkedKeys, ...selectableNodeKeys];
-    const simulatedDisplayValues = formatStrategyValues(
-      simulatedCheckedKeys as SafeKey[],
-      showCheckedStrategy,
-      keyEntities,
-      fieldNames,
-    );
+    // // calculate disabled state
+    // const selectableNodeKeys = getSelectableKeys(node, fieldNames);
+    // const simulatedCheckedKeys = [...checkedKeys, ...selectableNodeKeys];
+    // const simulatedDisplayValues = formatStrategyValues(
+    //   simulatedCheckedKeys as SafeKey[],
+    //   showCheckedStrategy,
+    //   keyEntities,
+    //   fieldNames,
+    // );
+
+    // const isDisabled = simulatedDisplayValues.length > maxCount;
 
-    const isDisabled = simulatedDisplayValues.length > maxCount;
+    // // update cache
+    // disabledCacheRef.current.set(cacheKey, isDisabled);
 
-    // update cache
-    disabledCacheRef.current.set(cacheKey, isDisabled);
+    // return isDisabled;
 
-    return isDisabled;
+    return false;
   });
 
   // ========================== Get First Selectable Node ==========================

src/TreeSelect.tsx

@@ -422,6 +422,11 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
         mergedFieldNames,
       );
 
+      // Not allow pass with `maxCount`
+      if (maxCount && formattedKeyList.length > maxCount) {
+        return;
+      }
+
       const labeledValues = convert2LabelValues(newRawValues);
       setInternalValue(labeledValues);
 
@@ -600,9 +605,6 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
   });
 
   // ========================== Context ===========================
-  const isOverMaxCount =
-    mergedMultiple && maxCount !== undefined && cachedDisplayValues?.length >= maxCount;
-
   const treeSelectContext = React.useMemo<TreeSelectContextProps>(() => {
     return {
       virtual,
@@ -616,8 +618,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       treeExpandAction,
       treeTitleRender,
       onPopupScroll,
-      isOverMaxCount,
-      maxCount,
+      leftMaxCount: maxCount ? maxCount - cachedDisplayValues.length : null,
       showCheckedStrategy: mergedShowCheckedStrategy,
     };
   }, [
@@ -633,7 +634,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeTitleRender,
     onPopupScroll,
     maxCount,
-    mergedMultiple,
+    cachedDisplayValues.length,
     mergedShowCheckedStrategy,
   ]);
 

src/TreeSelectContext.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ExpandAction } from 'rc-tree/lib/Tree';
 import type { DataNode, FieldNames, Key } from './interface';
-import { CheckedStrategy } from './utils/strategyUtil';
+import type { CheckedStrategy } from './utils/strategyUtil';
 
 export interface TreeSelectContextProps {
   virtual?: boolean;
@@ -15,8 +15,7 @@ export interface TreeSelectContextProps {
   treeExpandAction?: ExpandAction;
   treeTitleRender?: (node: any) => React.ReactNode;
   onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
-  isOverMaxCount?: boolean;
-  maxCount?: number;
+  leftMaxCount?: number | null;
   showCheckedStrategy?: CheckedStrategy;
 }