demo: update demo (#1014)

* demo: update demo

* update demo

Author: li-jia-nan

docs/demo/auto-tokenization.md

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

docs/examples/auto-tokenization.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Select from 'rc-select';
+import '../../assets/index.less';
+
+const Demo: React.FC = () => (
+  <>
+    <h2>自动分词</h2>
+    <Select
+      mode="tags"
+      style={{ width: '100%' }}
+      tokenSeparators={[',']}
+      options={Array.from({ length: 20 }, (_, i) => ({ label: i.toString(), value: i.toString() }))}
+    />
+  </>
+);
+
+export default Demo;

src/BaseSelect.tsx

@@ -205,9 +205,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-export function isMultiple(mode: Mode) {
-  return mode === 'tags' || mode === 'multiple';
-}
+export const isMultiple = (mode: Mode) => mode === 'tags' || mode === 'multiple';
 
 const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref) => {
   const {
@@ -293,7 +291,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
 
   const domProps = {
     ...restProps,
-  } as Omit<keyof typeof restProps, (typeof DEFAULT_OMIT_PROPS)[number]>;
+  };
 
   DEFAULT_OMIT_PROPS.forEach((propName) => {
     delete domProps[propName];
@@ -400,10 +398,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     let newSearchText = searchText;
     onActiveValueChange?.(null);
 
+    const separatedList = getSeparatedContent(searchText, tokenSeparators);
+
     // Check if match the `tokenSeparators`
-    const patchLabels: string[] = isCompositing
-      ? null
-      : getSeparatedContent(searchText, tokenSeparators);
+    const patchLabels: string[] = isCompositing ? null : separatedList;
 
     // Ignore combobox since it's not split-able
     if (mode !== 'combobox' && patchLabels) {

src/utils/valueUtil.ts

@@ -47,7 +47,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
     label: fieldLabel,
     value: fieldValue,
     options: fieldOptions,
-    groupLabel
+    groupLabel,
   } = fillFieldNames(fieldNames, false);
 
   function dig(list: OptionType[], isGroupOption: boolean) {
@@ -111,26 +111,21 @@ export function injectPropsWithOption<T extends object>(option: T): T {
   return newOption;
 }
 
-export function getSeparatedContent(text: string, tokens: string[]): string[] {
+export const getSeparatedContent = (text: string, tokens: string[]): string[] | null => {
   if (!tokens || !tokens.length) {
     return null;
   }
-
   let match = false;
-
-  function separate(str: string, [token, ...restTokens]: string[]) {
+  const separate = (str: string, [token, ...restTokens]: string[]): string[] => {
     if (!token) {
       return [str];
     }
-
     const list = str.split(token);
     match = match || list.length > 1;
-
     return list
       .reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], [])
-      .filter((unit) => unit);
-  }
-
+      .filter(Boolean);
+  };
   const list = separate(text, tokens);
   return match ? list : null;
-}
+};