feat(TagInput): expand the deletion function of collapsedItems(Tencen…

…t#2625)
topazur · Nov 30, 2023 · 4988b47 · 4988b47
1 parent f734aa6
commit 4988b47
Show file tree

Hide file tree

Showing 25 changed files with 344 additions and 109 deletions.
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
@@ -72,7 +72,7 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
       popupVisible={visible}
       allowInput={isFilterable}
       minCollapsedNum={props.minCollapsedNum}
-      collapsedItems={props.collapsedItems as any}
+      collapsedItems={props.collapsedItems}
       readonly={props.readonly}
       clearable={props.clearable}
       placeholder={inputPlaceholder}

diff --git a/src/cascader/_example/collapsed.jsx b/src/cascader/_example/collapsed.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Cascader, Space } from 'tdesign-react';
+import { Cascader, Space, Popup, Tag, Radio, Checkbox } from 'tdesign-react';
 
 export default function Example() {
   const [value, setValue] = useState(['1.1', '1.2', '1.3']);
@@ -38,31 +38,66 @@ export default function Example() {
     },
   ];
 
-  const onChange = (value) => {
-    setValue(value);
-  };
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadonly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
+  const renderCollapsedItems = ({ value, onClose }) => {
+    const count = value.length - minCollapsedNum;
+    const collapsedTags = value.slice(minCollapsedNum, value.length);
+    if (count <= 0) return null;
+    return (
+      <Popup
+        key={'tags'}
+        content={collapsedTags.map((item, index) => (
+          <Tag
+            key={item}
+            style={{ marginRight: '4px' }}
+            size={size}
+            disabled={disabled}
+            closable={!readonly && !disabled}
+            onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+          >
+            {item}
+          </Tag>
+        ))}
+      >
+        <Tag size={size} disabled={disabled}>More({count})</Tag>
+      </Popup>
+    );
+  }
 
   return (
-    <Space direction="vertical">
-      <Cascader options={options} value={value} onChange={onChange} multiple minCollapsedNum={1} />
+    <Space direction="vertical" style={{ width: '80%' }}>
+
+      <h3>default: </h3>
+      <Cascader options={options} value={value} onChange={setValue} multiple minCollapsedNum={1} />
+
+      <h3>use collapsedItems: </h3>
+      <Space>
+        <div>size control:</div>
+        <Radio.Group value={size} options={['small', 'medium', 'large']} onChange={setSize} />
+      </Space>
+      <Space>
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={setDisabled} />
+      </Space>
+      <Space>
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={setReadonly} />
+      </Space>
       <Cascader
         options={options}
         value={value}
-        onChange={onChange}
+        onChange={setValue}
         multiple
-        minCollapsedNum={1}
-        collapsedItems={({ count }) =>
-          count > 0 && (
-            <span
-              style={{
-                color: '#00a870',
-              }}
-            >
-              +{count - 1}
-            </span>
-          )
-        }
-      />
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
+      ></Cascader>
     </Space>
   );
 }
diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
@@ -11,7 +11,7 @@ autofocus | Boolean | - | \- | N
 checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N

diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
@@ -11,7 +11,7 @@ autofocus | Boolean | - | 自动聚焦 | N
 checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 clearable | Boolean | false | 是否支持清空选项 | N
-collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: CascaderOption[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | TNode | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N

diff --git a/src/cascader/type.ts b/src/cascader/type.ts
@@ -13,7 +13,7 @@ import { TagProps } from '../tag';
 import { TreeNodeModel } from '../tree';
 import { PopupVisibleChangeContext } from '../popup';
 import { TNode, TElement, TreeOptionData, SizeEnum } from '../common';
-import { FocusEvent } from 'react';
+import { FocusEvent, MouseEvent } from 'react';
 
 export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
   /**
@@ -35,9 +35,12 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件s
    */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: CascaderOption[];
+    onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void;
+  }>;
   /**
    * 是否禁用组件
    */

diff --git a/src/select-input/_example/collapsed-items.jsx b/src/select-input/_example/collapsed-items.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { SelectInput, Checkbox, Tag, Space } from 'tdesign-react';
+import { SelectInput, Checkbox, Tag, Space, Popup, Radio } from 'tdesign-react';
 import { ChevronDownIcon } from 'tdesign-icons-react';
 
 const classStyles = `
@@ -47,6 +47,11 @@ export default function SelectInputCollapsedItems() {
   const [options, setOptions] = useState([...OPTIONS]);
   const [value, setValue] = useState(OPTIONS.slice(1));
 
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadonly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
   const getCheckboxValue = () => {
     const arr = [];
     const list = value;
@@ -97,6 +102,34 @@ export default function SelectInputCollapsedItems() {
     }
   };
 
+  const renderCollapsedItems = ({ value, onClose }) => {
+    const count = value.length - minCollapsedNum;
+    const collapsedTags = value.slice(minCollapsedNum, value.length);
+    if (count <= 0) return null;
+    return (
+      <Popup
+        key={'tags'}
+        content={collapsedTags.map((item, index) => (
+          <Tag
+            key={item}
+            style={{ marginRight: '4px' }}
+            size={size}
+            disabled={disabled}
+            closable={!readonly && !disabled}
+            onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+          >
+            {item}
+          </Tag>
+        ))}
+      >
+        <Tag
+          size={size}
+          disabled={disabled}
+        >More({count})</Tag>
+      </Popup>
+    );
+  }
+
   const CheckboxPanel = (
     <Checkbox.Group
       value={checkboxValue}
@@ -113,6 +146,8 @@ export default function SelectInputCollapsedItems() {
 
   return (
     <Space direction="vertical" className="tdesign-demo__select-input-collapsed-items">
+
+      <h3>default: </h3>
       {/* <!-- :popup-props="{ trigger: 'hover' }" --> */}
       <SelectInput
         value={value}
@@ -123,18 +158,36 @@ export default function SelectInputCollapsedItems() {
         multiple
         onTagChange={onTagChange}
       />
-      <br /> <br />
+
       {/* 使用 collapsedItems 自定义折叠标签 */}
+      <h3>use collapsedItems: </h3>
+      <Space>
+        <div>size control:</div>
+        <Radio.Group value={size} options={['small', 'medium', 'large']} onChange={setSize} />
+      </Space>
+      <Space>
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={setDisabled} />
+      </Space>
+      <Space>
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={setReadonly} />
+      </Space>
       <SelectInput
         value={value}
-        minCollapsedNum={2}
         panel={CheckboxPanel}
         suffixIcon={<ChevronDownIcon key="suffixIcon" />}
-        collapsedItems={({ collapsedTags }) => <Tag key={'More'}>More(+{collapsedTags.length})</Tag>}
         clearable
         multiple
         onTagChange={onTagChange}
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        tagInputProps={{
+          size,
+        }}
+        disabled={disabled}
+        readonly={readonly}
       />
     </Space>
   );
-}
+}
diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
@@ -12,7 +12,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | input value。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N

diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
@@ -12,7 +12,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量。TS 类型：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量。TS 类型：`TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用 | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N

diff --git a/src/select-input/type.ts b/src/select-input/type.ts
@@ -42,7 +42,10 @@ export interface TdSelectInputProps {
   /**
    * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量
    */
-  collapsedItems?: TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>;
+  collapsedItems?: TNode<{
+    value: SelectInputValue;
+    onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void;
+  }>;
   /**
    * 是否禁用
    */

diff --git a/src/select/_example/collapsed.jsx b/src/select/_example/collapsed.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Select, Space } from 'tdesign-react';
+import { Select, Popup, Tag, Space, Radio, Checkbox } from 'tdesign-react';
 
 const options = [
   { label: '选项一', value: '1' },
@@ -10,28 +10,71 @@ const options = [
 
 const MultipleSelect = () => {
   const [value, setValue] = useState(['1', '3']);
-  const onChange = (value) => {
-    setValue(value);
-  };
+
+  const [size, setSize] = useState('medium');
+  const [disabled, setDisabled] = useState(false);
+  const [readonly, setReadonly] = useState(false);
+  const [minCollapsedNum] = useState(1);
+
+  const renderCollapsedItems = ({ value, onClose }) => {
+    const count = value.length - minCollapsedNum;
+    const collapsedTags = value.slice(minCollapsedNum, value.length);
+    if (count <= 0) return null;
+    return (
+      <Popup
+        key={'tags'}
+        content={collapsedTags.map((item, index) => (
+          <Tag
+            key={item}
+            style={{ marginRight: '4px' }}
+            size={size}
+            // disabled={disabled}
+            closable={!readonly && !disabled}
+            onClose={(context) => onClose({ e: context.e, index: minCollapsedNum + index })}
+          >
+            {item}
+          </Tag>
+        ))}
+      >
+        <Tag
+          size={size}
+          // disabled={disabled}
+        >More({count})</Tag>
+      </Popup>
+    );
+  }
+
   return (
-    <Space breakLine style={{ width: '100%' }}>
+    <Space direction="vertical" style={{ width: '80%' }}>
+
+      <h3>default: </h3>
+      <Select style={{ width: '40%' }} options={options} value={value} onChange={setValue} multiple minCollapsedNum={1} />
+
+      <h3>use collapsedItems: </h3>
+      <Space>
+        <div>size control:</div>
+        <Radio.Group value={size} options={['small', 'medium', 'large']} onChange={setSize} />
+      </Space>
+      <Space>
+        <span>disabled control:</span>
+        <Checkbox checked={disabled} onChange={setDisabled} />
+      </Space>
+      <Space>
+        <span>readonly control:</span>
+        <Checkbox checked={readonly} onChange={setReadonly} />
+      </Space>
       <Select
-        value={value}
-        onChange={onChange}
-        multiple
         style={{ width: '40%' }}
         options={options}
-        minCollapsedNum={1}
-      />
-      <Select
         value={value}
-        onChange={onChange}
+        onChange={setValue}
         multiple
-        style={{ width: '40%' }}
-        options={options}
-        minCollapsedNum={1}
-        collapsedItems={({ count }) => (count > 0 ? <span style={{ color: '#ED7B2F' }}>+{count}</span> : null)}
-      />
+        minCollapsedNum={minCollapsedNum}
+        collapsedItems={renderCollapsedItems}
+        size={size}
+        disabled={disabled}
+        readonly={readonly}
+      ></Select>
     </Space>
   );
 };