feat(form button): form and button add native api (#3084)

Tencent · Sep 9, 2024 · 940621d · 940621d
1 parent 2c290fd
commit 940621d
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 0 deletions.
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
@@ -11,6 +11,7 @@ block | Boolean | false | make button to be a block-level element | N
 children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
 ghost | Boolean | false | make background-color to be transparent | N
 href | String | - | \- | N
 icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/button/button.md b/src/button/button.md
@@ -11,6 +11,7 @@ block | Boolean | false | 是否为块级元素 | N
 children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
 icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/button/defaultProps.ts b/src/button/defaultProps.ts
@@ -7,6 +7,7 @@ import { TdButtonProps } from './type';
 export const buttonDefaultProps: TdButtonProps = {
   block: false,
   disabled: false,
+  form: undefined,
   ghost: false,
   loading: false,
   shape: 'rectangle',

diff --git a/src/button/type.ts b/src/button/type.ts
@@ -26,6 +26,10 @@ export interface TdButtonProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件
+   */
+  form?: string;
   /**
    * 是否为幽灵按钮（镂空按钮）
    * @default false

diff --git a/src/form/Form.tsx b/src/form/Form.tsx
@@ -40,6 +40,7 @@ const Form = forwardRefWithStatics(
       preventSubmitDefault,
       disabled,
       children,
+      id,
       onReset,
       onValuesChange = noop,
     } = props;
@@ -107,6 +108,7 @@ const Form = forwardRefWithStatics(
       >
         <form
           ref={formRef}
+          id={id}
           style={style}
           className={formClass}
           onSubmit={formInstance.submit}

diff --git a/src/form/defaultProps.ts b/src/form/defaultProps.ts
@@ -7,6 +7,7 @@ import { TdFormProps, TdFormItemProps } from './type';
 export const formDefaultProps: TdFormProps = {
   colon: false,
   disabled: undefined,
+  id: undefined,
   labelAlign: 'right',
   labelWidth: '100px',
   layout: 'vertical',

diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md
@@ -13,6 +13,7 @@ disabled | Boolean | undefined | \- | N
 errorMessage | Object | - | Typescript：`FormErrorMessage` | N
 form | Object | - | Typescript：`FormInstanceFunctions` | N
 formControlledComponents | Array | - | Typescript：`Array<string>` | N
+id | String | undefined |  native id attribute of the form，which supports being used in conjunction with non-form buttons through the form attribute to trigger form events | N
 initialData | Object | - | \- | N
 labelAlign | String | right | options: left/right/top | N
 labelWidth | String / Number | '100px' | \- | N

diff --git a/src/form/form.md b/src/form/form.md
@@ -103,6 +103,7 @@ disabled | Boolean | undefined | 是否禁用整个表单 | N
 errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
 form | Object | - | 经 `Form.useForm()` 创建的 form 控制实例。TS 类型：`FormInstanceFunctions` | N
 formControlledComponents | Array | - | 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`。TS 类型：`Array<string>` | N
+id | String | undefined | 表单原生的id属性，支持用于配合非表单内的按钮通过form属性来触发表单事件 | N
 initialData | Object | - | 表单初始数据，重置时所需初始数据，优先级小于 FormItem 设置的 initialData | N
 labelAlign | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
 labelWidth | String / Number | '100px' | 可以整体设置label标签宽度，默认为100px | N

diff --git a/src/form/type.ts b/src/form/type.ts
@@ -30,6 +30,10 @@ export interface TdFormProps<FormData extends Data = Data> {
    * 允许表单统一控制禁用状态的自定义组件名称列表。默认会有组件库的全部输入类组件：TInput、TInputNumber、TCascader、TSelect、TOption、TSwitch、TCheckbox、TCheckboxGroup、TRadio、TRadioGroup、TTreeSelect、TDatePicker、TTimePicker、TUpload、TTransfer、TSlider。对于自定义组件，组件内部需要包含可以控制表单禁用状态的变量 `formDisabled`。示例：`['CustomUpload', 'CustomInput']`
    */
   formControlledComponents?: Array<string>;
+  /**
+   * 表单原生的id属性，支持用于配合非表单内的按钮通过form属性来触发表单事件
+   */
+  id?: string;
   /**
    * 表单初始数据，重置时所需初始数据，优先级小于 FormItem 设置的 initialData
    */