feat(TagInput): enhance max rows functionality and styling #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,72 @@
+import React, { useState } from 'react';
+import { TagInput, Space } from 'tdesign-react';
+import type { TagInputProps, TagInputValue } from 'tdesign-react';
+
+export default function TagInputMaxRowExample() {
+  const [tags1, setTags1] = useState<TagInputValue>(['Vue', 'React', 'Angular', 'Svelte', 'Solid', 'Preact']);
+  const [tags2, setTags2] = useState<TagInputValue>(['Ember', 'Backbone']);
+  const [tags3, setTags3] = useState<TagInputValue>(['Alpine', 'Lit']);
+
+  const onTagInputEnter: TagInputProps['onEnter'] = (val, context) => {
+    console.log(val, context);
+  };
+
+  const onChange1: TagInputProps['onChange'] = (val, context) => {
+    console.log(val, context);
+    setTags1(val);
+  };
+
+  const onChange2: TagInputProps['onChange'] = (val, context) => {
+    console.log(val, context);
+    setTags2(val);
+  };
+
+  const onChange3: TagInputProps['onChange'] = (val, context) => {
+    console.log(val, context);
+    setTags3(val);
+  };
+
+  const onPaste: TagInputProps['onPaste'] = (context) => {
+    console.log(context);
+  };
+
+  return (
+    <Space direction="vertical" style={{ width: '80%' }}>
+      <h3>Small Size with 2 Max Rows</h3>
+      <TagInput
+        size="small"
+        maxRows={2}
+        value={tags1}
+        onChange={onChange1}
+        excessTagsDisplayType="break-line"
+        clearable
+        onPaste={onPaste}
+        onEnter={onTagInputEnter}
+        placeholder="Small Size, Max 2 Rows"
+      />
+
+      <h3>Default Size with 3 Max Rows</h3>
+      <TagInput
+        maxRows={3}
+        value={tags2}
+        onChange={onChange2}
+        excessTagsDisplayType="break-line"
+        label="Default Size: "
+        clearable
+        placeholder="Default Size, Max 3 Rows"
+      />
+
+      <h3>Large Size with 4 Max Rows</h3>
+      <TagInput
+        size="large"
+        maxRows={4}
+        value={tags3}
+        onChange={onChange3}
+        excessTagsDisplayType="break-line"
+        label="Large Size: "
+        clearable
+        placeholder="Large Size, Max 4 Rows"
+      />
+    </Space>
+  );
+}

src/tag-input/type.ts

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