feat(selct-input): support size (#2894)

* fix(selct-input): fix example * feat(selectinput): select-input support size * docs: fix docs size typo --------- Co-authored-by: Heising <[email protected]>
Tencent · May 13, 2024 · c49f7b2 · c49f7b2
1 parent d341dba
commit c49f7b2
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 6 deletions.
diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
@@ -30,6 +30,7 @@ popupVisible | Boolean | - | \- | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
 readonly | Boolean | false | \- | N
 reserveKeyword | Boolean | false | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | default | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
@@ -30,6 +30,7 @@ popupVisible | Boolean | - | 是否显示下拉框 | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
 readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/select-input/type.ts b/src/select-input/type.ts
@@ -9,7 +9,7 @@ import { PopupProps } from '../popup';
 import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input';
 import { TagProps } from '../tag';
 import { PopupVisibleChangeContext } from '../popup';
-import { TNode, TElement } from '../common';
+import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdSelectInputProps {
@@ -117,6 +117,11 @@ export interface TdSelectInputProps {
    * @default false
    */
   reserveKeyword?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
   /**
    * 输入框状态
    * @default default

diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx
@@ -73,6 +73,7 @@ export default function useMultiple(props: TdSelectInputProps) {
       }}
       {...props.tagInputProps}
       inputProps={{
+        ...props.inputProps,
         readonly: !props.allowInput || props.readonly,
         inputClass: classNames(props.tagInputProps?.className, {
           [`${classPrefix}-input--focused`]: p.popupVisible,

diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx
@@ -27,6 +27,7 @@ const COMMON_PROPERTIES = [
   'onEnter',
   'onMouseenter',
   'onMouseleave',
+  'size',
 ];
 
 const DEFAULT_KEYS: TdSelectInputProps['keys'] = {

diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
@@ -24,7 +24,7 @@ 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
 readonly | Boolean | false | \- | N
-size | String | medium | options: small/medium/large | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | options: default/success/warning/error | N
 suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
@@ -24,7 +24,7 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于标签数量过多的
 placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | 只读状态，值为真会隐藏标签移除按钮和输入框 | N
-size | String | medium | 尺寸。可选项：small/medium/large | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | 输入框状态。可选项：default/success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
@@ -6,7 +6,7 @@
 
 import { InputProps } from '../input';
 import { TagProps } from '../tag';
-import { TNode, TElement } from '../common';
+import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdTagInputProps {
@@ -89,10 +89,10 @@ export interface TdTagInputProps {
    */
   readonly?: boolean;
   /**
-   * 尺寸
+   * 组件尺寸
    * @default medium
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: SizeEnum;
   /**
    * 输入框状态
    */