fix(TagInput): compatibility of parameters for function collapsedItems

Tencent · Dec 8, 2023 · b9be887 · b9be887
1 parent 3a5c3e5
commit b9be887
Show file tree

Hide file tree

Showing 23 changed files with 65 additions and 40 deletions.
diff --git a/src/cascader/_example/collapsed.jsx b/src/cascader/_example/collapsed.jsx
@@ -43,14 +43,14 @@ export default function Example() {
   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);
+  const renderCollapsedItems = ({ value, collapsedSelectedItems, count, onClose }) => {
+    // const count = value.length - minCollapsedNum;
+    // const collapsedSelectedItems = value.slice(minCollapsedNum, value.length);
     if (count <= 0) return null;
     return (
       <Popup
         key={'tags'}
-        content={collapsedTags.map((item, index) => (
+        content={collapsedSelectedItems.map((item, index) => (
           <Tag
             key={item}
             style={{ marginRight: '4px' }}

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[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; 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` 表示当前存在的所有标签，`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
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; 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
@@ -35,10 +35,13 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件
    */
   collapsedItems?: TNode<{
     value: CascaderOption[];
+    collapsedSelectedItems: CascaderOption[];
+    collapsedTags: CascaderOption[];
+    count: number;
     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
@@ -102,14 +102,14 @@ export default function SelectInputCollapsedItems() {
     }
   };
 
-  const renderCollapsedItems = ({ value, onClose }) => {
-    const count = value.length - minCollapsedNum;
-    const collapsedTags = value.slice(minCollapsedNum, value.length);
+  const renderCollapsedItems = ({ value, collapsedSelectedItems, count, onClose }) => {
+    // const count = value.length - minCollapsedNum;
+    // const collapsedSelectedItems = value.slice(minCollapsedNum, value.length);
     if (count <= 0) return null;
     return (
       <Popup
         key={'tags'}
-        content={collapsedTags.map((item, index) => (
+        content={collapsedSelectedItems.map((item, index) => (
           <Tag
             key={item}
             style={{ marginRight: '4px' }}

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; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; 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` 表示所有标签值，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; 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
@@ -40,10 +40,13 @@ export interface TdSelectInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件
    */
   collapsedItems?: TNode<{
     value: SelectInputValue;
+    collapsedSelectedItems: SelectInputValue;
+    collapsedTags: SelectInputValue;
+    count: number;
     onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void;
   }>;
   /**

diff --git a/src/select/_example/collapsed.jsx b/src/select/_example/collapsed.jsx
@@ -16,14 +16,14 @@ const MultipleSelect = () => {
   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);
+  const renderCollapsedItems = ({ value, collapsedSelectedItems, count, onClose }) => {
+    // const count = value.length - minCollapsedNum;
+    // const collapsedSelectedItems = value.slice(minCollapsedNum, value.length);
     if (count <= 0) return null;
     return (
       <Popup
         key={'tags'}
-        content={collapsedTags.map((item, index) => (
+        content={collapsedSelectedItems.map((item, index) => (
           <Tag
             key={item}
             style={{ marginRight: '4px' }}

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -37,8 +37,8 @@ import { parseContentTNode } from '../../_util/parseTNode';
 export interface SelectProps<T = SelectOption> extends TdSelectProps<T>, StyledProps {
   // 子节点
   children?: React.ReactNode;
-  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 type OptionsType = TdOptionProps[];
@@ -363,10 +363,12 @@ const Select = forwardRefWithStatics(
         collapsedItems
           ? parseContentTNode(collapsedItems, {
               value: selectedLabel,
+              collapsedSelectedItems: selectedLabel.slice(minCollapsedNum, selectedLabel.length),
+              count: selectedLabel.length - minCollapsedNum,
               onClose,
             })
           : null,
-      [selectedLabel, collapsedItems, onClose],
+      [selectedLabel, collapsedItems, minCollapsedNum, onClose],
     );
 
     // 将第一个选中的 option 置于列表可见范围的最后一位

diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md
@@ -11,7 +11,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: T[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 creatable | Boolean | false | \- | 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

diff --git a/src/select/select.md b/src/select/select.md
@@ -11,7 +11,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可以清空选项 | N
-collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: T[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | TNode | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/select/type.ts b/src/select/type.ts
@@ -37,9 +37,15 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
-   */
-  collapsedItems?: TNode<{ value: T[]; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void }>;
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件
+   */
+  collapsedItems?: TNode<{
+    value: T[];
+    collapsedSelectedItems: T[];
+    collapsedTags: T[];
+    count: number;
+    onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void;
+  }>;
   /**
    * 是否允许用户创建新条目，需配合 filterable 使用
    * @default false

diff --git a/src/tag-input/_example/collapsed.jsx b/src/tag-input/_example/collapsed.jsx
@@ -9,14 +9,14 @@ export default function TagInputCollapsedExample() {
   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);
+  const renderCollapsedItems = ({ value, collapsedSelectedItems, count, onClose }) => {
+    // const count = value.length - minCollapsedNum;
+    // const collapsedSelectedItems = value.slice(minCollapsedNum, value.length);
     if (count <= 0) return null;
     return (
       <Popup
         key={'tags'}
-        content={collapsedTags.map((item, index) => (
+        content={collapsedSelectedItems.map((item, index) => (
           <Tag
             key={item}
             style={{ marginRight: '4px' }}

diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
@@ -9,7 +9,7 @@ className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 autoWidth | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; 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
 dragSort | Boolean | false | \- | N
 excessTagsDisplayType | String | break-line | options：scroll/break-line | N

diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
@@ -9,7 +9,7 @@ className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: TagInputValue; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+collapsedItems | TElement | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用标签输入框 | N
 dragSort | Boolean | false | 拖拽调整标签顺序 | N
 excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N

diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
@@ -22,10 +22,13 @@ export interface TdTagInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示关闭标签时触发的事件
    */
   collapsedItems?: TNode<{
     value: TagInputValue;
+    collapsedSelectedItems: TagInputValue;
+    collapsedTags: TagInputValue;
+    count: number;
     onClose: (p: { e?: MouseEvent<SVGSVGElement>; index: number }) => void;
   }>;
   /**

diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
@@ -101,6 +101,9 @@ export default function useTagList(props: TagInputProps) {
       const len = tagValue.length - newList.length;
       const params = {
         value: tagValue,
+        collapsedSelectedItems: tagValue.slice(minCollapsedNum, tagValue.length),
+        collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
+        count: tagValue.length - minCollapsedNum,
         onClose,
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;