feat: TreeSelect support maxCount

Author: aojunhao123

docs/demo/mutiple-with-maxCount.md

@@ -0,0 +1,8 @@
+---
+title: mutiple-with-maxCount
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/mutiple-with-maxCount.tsx"></code>

examples/mutiple-with-maxCount.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import TreeSelect from '../src';
+
+export default () => {
+  const treeData = [
+    {
+      key: '1',
+      value: '1',
+      title: '1',
+      children: [
+        {
+          key: '1-1',
+          value: '1-1',
+          title: '1-1',
+        },
+      ],
+    },
+    {
+      key: '2',
+      value: '2',
+      title: '2',
+    },
+    {
+      key: '3',
+      value: '3',
+      title: '3',
+    },
+    {
+      key: '4',
+      value: '4',
+      title: '4',
+    },
+  ];
+  const onChange = () => {};
+
+  return (
+    <TreeSelect
+      style={{ width: 300 }}
+      multiple
+      maxCount={3}
+      treeData={treeData}
+      onChange={onChange}
+    />
+  );
+};

src/OptionList.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import LegacyContext from './LegacyContext';
 import TreeSelectContext from './TreeSelectContext';
 import type { Key, SafeKey } from './interface';
-import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
+import { getAllKeys, isCheckDisabled, isValidCount } from './utils/valueUtil';
 
 const HIDDEN_STYLE = {
   width: 0,
@@ -45,6 +45,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     treeExpandAction,
     treeTitleRender,
     onPopupScroll,
+    maxCount,
   } = React.useContext(TreeSelectContext);
 
   const {
@@ -76,6 +77,11 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     (prev, next) => next[0] && prev[1] !== next[1],
   );
 
+  const isOverMaxCount = React.useMemo<boolean>(
+    () => multiple && isValidCount(maxCount) && checkedKeys.length >= maxCount,
+    [checkedKeys, maxCount, multiple],
+  );
+
   // ========================== Active ==========================
   const [activeKey, setActiveKey] = React.useState<Key>(null);
   const activeEntity = keyEntities[activeKey as SafeKey];
@@ -150,8 +156,13 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
       return;
     }
 
+    const isSelected = !checkedKeys.includes(node.key);
+    if (maxCount && isSelected && checkedKeys.length >= maxCount) {
+      return;
+    }
+
     onSelect(node.key, {
-      selected: !checkedKeys.includes(node.key),
+      selected: isSelected,
     });
 
     if (!multiple) {
@@ -197,10 +208,10 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   }));
 
   const loadDataFun = useMemo(
-    () => searchValue ? null : (loadData as any),
+    () => (searchValue ? null : (loadData as any)),
     [searchValue, treeExpandedKeys || expandedKeys],
     ([preSearchValue], [nextSearchValue, nextExcludeSearchExpandedKeys]) =>
-      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys)
+      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys),
   );
 
   // ========================== Render ==========================

src/TreeSelect.tsx

@@ -72,6 +72,7 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
   treeCheckable?: boolean | React.ReactNode;
   treeCheckStrictly?: boolean;
   labelInValue?: boolean;
+  maxCount?: number;
 
   // >>> Data
   treeData?: OptionType[];
@@ -136,6 +137,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
     treeCheckable,
     treeCheckStrictly,
     labelInValue,
+    maxCount,
 
     // FieldNames
     fieldNames,
@@ -507,6 +509,10 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
         // Single mode always set value
         triggerChange([selectedValue], { selected: true, triggerValue: selectedValue }, 'option');
       } else {
+        if (maxCount && selected && rawValues.length >= maxCount) {
+          return;
+        }
+
         let newRawValues = selected
           ? [...rawValues, selectedValue]
           : rawCheckedValues.filter(v => v !== selectedValue);
@@ -609,6 +615,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       treeExpandAction,
       treeTitleRender,
       onPopupScroll,
+      maxCount,
     }),
     [
       virtual,
@@ -622,6 +629,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
       treeExpandAction,
       treeTitleRender,
       onPopupScroll,
+      maxCount,
     ],
   );
 

src/TreeSelectContext.ts

@@ -14,6 +14,7 @@ export interface TreeSelectContextProps {
   treeExpandAction?: ExpandAction;
   treeTitleRender?: (node: any) => React.ReactNode;
   onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+  maxCount?: number;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

src/utils/valueUtil.ts

@@ -35,3 +35,6 @@ export const getAllKeys = (treeData: DataNode[], fieldNames: FieldNames): SafeKe
 };
 
 export const isNil = (val: any): boolean => val === null || val === undefined;
+
+export const isValidCount = (value?: number) =>
+  typeof value !== 'undefined' && !Number.isNaN(value);