feat(TagInput): enhance max rows for TagInput component#3025

src/tag-input/TagInput.tsx

@@ -43,6 +43,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
     suffixIcon,
     suffix,
     prefixIcon,
+    maxRows,
     onClick,
     onPaste,
     onFocus,
@@ -133,10 +134,18 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       [WITH_SUFFIX_ICON_CLASS]: !!suffixIconNode,
       [`${prefix}-is-empty`]: isEmpty,
       [`${prefix}-tag-input--with-tag`]: !isEmpty,
+      [`${prefix}-tag-input--max-rows`]: excessTagsDisplayType === 'break-line' && maxRows,
     },
     props.className,
   ];
 
+  const maxRowsStyle = maxRows
+    ? ({
+        '--max-rows': maxRows,
+        '--tag-input-size': size,
+      } as React.CSSProperties)
+    : {};
+
   return (
     <TInput
       ref={tagInputRef as React.RefObject<InputRef>}
@@ -152,7 +161,10 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       disabled={disabled}
       label={renderLabel({ displayNode, label })}
       className={classnames(classes)}
-      style={props.style}
+      style={{
+        ...props.style,
+        ...maxRowsStyle,
+      }}
       tips={tips}
       status={status}
       placeholder={tagInputPlaceholder}

src/tag-input/_example/max-row.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { TagInput, Space } from 'tdesign-react';
+
+export default function TagInputMaxRowExample() {
+  const [tags, setTags] = useState<string[]>([
+    'Vue',
+    'React',
+    'Angular',
+    'Svelte',
+    'Solid',
+    'MiniProgram',
+    'Flutter',
+    'UniApp',
+    'Html5',
+    'Css3',
+    'JavaScript',
+    'TypeScript',
+    'Node.js',
+    'Python',
+    'Java',
+    'Go',
+    'Rust',
+    'C++',
+  ]);
+
+  return (
+    <Space direction="vertical" style={{ width: '80%' }}>
+      <h3>最大高度为2</h3>
+      <TagInput
+        size="small"
+        maxRows={2}
+        value={tags}
+        onChange={(val) => setTags(val.map(String))}
+        clearable
+        onPaste={(context) => console.log(context)}
+        onEnter={(val, context) => console.log(val, context)}
+        label="小尺寸: "
+        placeholder="最大高度为2行，超出部分滚动显示"
+      />
+
+      <h3>最大高度为3</h3>
+      <TagInput
+        maxRows={3}
+        value={tags}
+        onChange={(val) => setTags(val.map(String))}
+        label="中等尺寸: "
+        clearable
+        placeholder="最大高度为3行，超出部分滚动显示"
+      />
+
+      <h3>最大高度为4</h3>
+      <TagInput
+        size="large"
+        maxRows={4}
+        value={tags}
+        onChange={(val) => setTags(val.map(String))}
+        label="大尺寸: "
+        clearable
+        placeholder="最大高度为4行，超出部分换行显示"
+      />
+    </Space>
+  );
+}

src/tag-input/tag-input.en-US.md

@@ -20,6 +20,7 @@ inputValue | String / Number | '' | input value。Typescript：`string` | N
 defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript：`string` | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 max | Number | - | max tag number | N
+maxRows | Number | - | max tag rows | N
 minCollapsedNum | Number | 0 | \- | N
 placeholder | String | undefined | placeholder description | N
 prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

src/tag-input/tag-input.md

@@ -20,6 +20,7 @@ inputValue | String / Number | '' | 输入框的值。TS 类型：`string` | N
 defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型：`string` | N
 label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 max | Number | - | 最大允许输入的标签数量 | N
+maxRows | Number | - | 最大允许显示的行数，超出会出现滚动条，默认为不限制。  | N
 minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N
 placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

src/tag-input/type.ts

@@ -48,6 +48,11 @@ export interface TdTagInputProps {
    * @default break-line
    */
   excessTagsDisplayType?: 'scroll' | 'break-line';
+  /**
+   * 标签最大换行数
+   * @default 1
+   */
+  maxRows?: number;
   /**
    * 透传 Input 输入框组件全部属性
    */