fix: Select support maxCount (#1015)

* fix: Select support maxCount

* fix: fix error

* test: add test case

* test: add test case

* Update src/BaseSelect.tsx

Co-authored-by: MadCcc <[email protected]>

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* Update src/hooks/useOverMaxCount.ts

Co-authored-by: MadCcc <[email protected]>

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* Update src/BaseSelect.tsx

Co-authored-by: MadCcc <[email protected]>

* fix: fix

---------

Co-authored-by: MadCcc <[email protected]>

Author: li-jia-nan

docs/examples/auto-tokenization.tsx

@@ -7,6 +7,7 @@ const Demo: React.FC = () => (
     <h2>自动分词</h2>
     <Select
       mode="tags"
+      maxCount={3}
       style={{ width: '100%' }}
       tokenSeparators={[',']}
       options={Array.from({ length: 20 }, (_, i) => ({ label: i.toString(), value: i.toString() }))}

src/BaseSelect.tsx

@@ -28,6 +28,8 @@ import type { RefTriggerProps } from './SelectTrigger';
 import SelectTrigger from './SelectTrigger';
 import TransBtn from './TransBtn';
 import { getSeparatedContent } from './utils/valueUtil';
+import SelectContext from './SelectContext';
+import type { SelectContextProps } from './SelectContext';
 
 export type {
   DisplayInfoType,
@@ -394,12 +396,21 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     [tokenSeparators],
   );
 
+  const { maxCount, rawValues } = React.useContext<SelectContextProps>(SelectContext) || {};
+
   const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
+    if (rawValues?.size >= maxCount) {
+      return;
+    }
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
 
-    const separatedList = getSeparatedContent(searchText, tokenSeparators);
+    const separatedList = getSeparatedContent(
+      searchText,
+      tokenSeparators,
+      maxCount && maxCount - rawValues.size,
+    );
 
     // Check if match the `tokenSeparators`
     const patchLabels: string[] = isCompositing ? null : separatedList;

src/utils/valueUtil.ts

@@ -111,7 +111,7 @@ export function injectPropsWithOption<T extends object>(option: T): T {
   return newOption;
 }
 
-export const getSeparatedContent = (text: string, tokens: string[]): string[] => {
+export const getSeparatedContent = (text: string, tokens: string[], end?: number): string[] => {
   if (!tokens || !tokens.length) {
     return null;
   }
@@ -127,5 +127,9 @@ export const getSeparatedContent = (text: string, tokens: string[]): string[] =>
       .filter(Boolean);
   };
   const list = separate(text, tokens);
-  return match ? list : null;
+  if (match) {
+    return typeof end !== 'undefined' ? list.slice(0, end) : list;
+  } else {
+    return null;
+  }
 };

tests/Tags.test.tsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -505,4 +505,25 @@ describe('Select.Tags', () => {
     expect(wrapper.find('.rc-select-item-option').length).toBe(1);
     expect(errSpy).not.toHaveBeenCalled();
   });
+
+  it(`paste content to split when count >= maxCount`, () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Select
+        mode="tags"
+        maxCount={3}
+        onChange={onChange}
+        tokenSeparators={[',']}
+        value={['1', '2', '3']}
+      />,
+    );
+    const input = container.querySelector<HTMLInputElement>('input');
+    fireEvent.paste(input, {
+      clipboardData: { getData: () => 'test' },
+    });
+    fireEvent.change(input, {
+      target: { value: 'test' },
+    });
+    expect(onChange).not.toBeCalled();
+  });
 });