feat: [TagInput] add split API (#2984)

* feat: [TagInput] add split API

* docs: change API version

* chore: Modify the API version number in the doc

Author: YyumeiZhang

content/input/taginput/index-en-US.md

@@ -454,6 +454,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 |separator     |Customize the separator                          |string\|string[]                                                 |,          |1.19.0,string[] is supported since 1.29.0|
 |showClear     |Whether to show the clear button                 |boolean                                                          |false      |1.19.0|
 |size          |Size, one of `small`、`large`、`default`          |string                                                           |`default` |1.19.0|
+|split         |Customize the separator processing function      |(value: string, separator: string) => string[] | -        |2.90.0|
 |style         |Inline style                                     |React.CSSProperties                                               | -        |1.19.0|
 |suffix        |Suffix                                            |ReactNode                                                        |-         |1.19.0|
 |validateStatus|Validate status for styling only, one of  `default`、`warning`、`error`|string                                       |`default` |1.19.0|

content/input/taginput/index.md

@@ -455,6 +455,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 |separator    |设置批量输入时的分隔符                               |string\|string[]                         |,    |1.19.0, string[]是从1.29.0开始支持|
 |showClear    |是否支持一键删除所有标签和输入内容                     |boolean                        |false      |1.19.0|
 |size         |设置输入框尺寸,可选: `small`、`large`、`default`     |string                          |`default` |1.19.0|
+|split        |自定义分隔符处理函数                              |(value: string, separator: string) => string[] | -        |2.90.0|
 |style        |内联样式                                          |React.CSSProperties                         | -        |1.19.0|
 |suffix       |后缀标签                                           |ReactNode                      |-         |1.19.0|
 |validateStatus|设置校验状态样式,可选: `default`、`warning`、`error` |string                          |`default` |1.19.0|

packages/semi-foundation/tagInput/foundation.ts

@@ -73,6 +73,14 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         this._adapter.setEntering(true);
     }
 
+    _splitArray = (originString: string, separators: string | string[] | null) => {
+        const { split } = this.getProps();
+        if (isFunction(split)) {
+            return split(originString, separators);
+        }
+        return getSplitedArray(originString, separators);
+    }
+
     handleInputCompositionEnd = (e: any) => {
         const { value } = e.target;
         const {
@@ -85,7 +93,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         }
         this._adapter.setEntering(false);
         let allowChange = true;
-        const inputArr = getSplitedArray(value, separator);
+        const inputArr = this._splitArray(value, separator);
         let index = 0;
         for (; index < inputArr.length; index++) {
             if (inputArr[index].length > maxLength) {
@@ -121,8 +129,8 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
         const { inputValue } = this._adapter.getStates();
         let allowChange = true;
         if (isNumber(maxLength)) {
-            const valueArr = getSplitedArray(value, separator);
-            const inputArr = getSplitedArray(inputValue, separator);
+            const valueArr = this._splitArray(value, separator);
+            const inputArr = this._splitArray(inputValue, separator);
             const maxLen = Math.max(valueArr.length, inputArr.length);
             for (let i = 0; i < maxLen; i++) {
                 // When the input length is increasing
@@ -174,7 +182,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             inputValue,
             tagsArray
         } = this._adapter.getStates();
-        let addTags = getSplitedArray(inputValue, separator);
+        let addTags = this._splitArray(inputValue, separator);
 
         addTags = addTags.filter((item, idx) => {
             // If allowDuplicates is false, then filter duplicates

packages/semi-ui/tagInput/_story/tagInput.stories.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import { Toast, Icon, Button, Avatar, Form, Popover, SideSheet, Modal, TagInput, Switch } from '../../index';
-import { IconGift, IconVigoLogo, IconClose } from '@douyinfe/semi-icons';
+import { IconGift, IconVigoLogo, IconClose, IconCopy } from '@douyinfe/semi-icons';
+import copy from 'copy-text-to-clipboard';
+
 const style = {
   width: 400,
   marginTop: 10,
@@ -591,4 +593,39 @@ export const longTextItemDraggable = () => {
       style={{ width: 300 }} 
     />
   )
-}
+}
+
+export const customSplit = () => {
+  
+  const split = (value, separator) => {
+    // custom split logic
+    // 这是一个简单的测试用例，假设 separator 为 ','，不想被拆分的,前面用了 '/' 反义字符做标识
+    const uniqueSeparator = 'uniq_semi_tag_input_separator';
+    const uniqueSeparator2 = 'uniq2_semi_tag_input_separator';
+    let temp = value.replace(new RegExp('/,', 'g'), uniqueSeparator);
+    temp = temp.replace(new RegExp(',', 'g'), uniqueSeparator2);
+    temp = temp.replace(new RegExp(uniqueSeparator, 'g'), ',');
+    return temp.split(uniqueSeparator2);
+  }
+
+  const clickToCopy = useCallback(() => {
+    copy('test1,test2,test3/,3, test4');
+  }, []);
+
+  return (
+    <>
+     <div>点击获取测试数据<Button theme='borderless' type='primary' onClick={clickToCopy} icon={<IconCopy />} /></div>
+     <TagInput 
+      separator={','}
+      placeholder='单个标签长度不超过5...'  
+      style={{ marginTop: 12, width: 400 }}
+      onChange={v => console.log(v)}
+      split={split}
+      onInputExceed={v => {
+          Toast.warning('超过 maxLength');
+          console.log(v);
+      }} 
+    />
+    </>
+  );
+}

packages/semi-ui/tagInput/index.tsx

@@ -66,6 +66,7 @@ export interface TagInputProps {
     separator?: string | string[] | null;
     showClear?: boolean;
     size?: Size;
+    split?: (originString: string, separators: string | string[] | null) => string[];
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;