From d12c4e39a4f67471b097df05db0f7e545f18c272 Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Sat, 31 Aug 2024 20:28:41 +0800 Subject: [PATCH] feat(form): formErrorMessage add whitespace (#3067) --- src/_common | 2 +- src/form/form.en-US.md | 24 ++++++++++++++---------- src/form/form.md | 18 +++++++++++------- src/form/type.ts | 9 +++++++-- 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/_common b/src/_common index f597d1bad..fe449a2ad 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit f597d1bada510e16cd9b3efd46000a674760a5ce +Subproject commit fe449a2ad4a247e0abb49e995f459c19644d8bbf diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md index df0aacadb..78467fd89 100644 --- a/src/form/form.en-US.md +++ b/src/form/form.en-US.md @@ -1,12 +1,13 @@ :: BASE_DOC :: ## API + ### Form Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N colon | Boolean | false | \- | N disabled | Boolean | undefined | \- | N errorMessage | Object | - | Typescript：`FormErrorMessage` | N @@ -32,8 +33,8 @@ onValuesChange | Function | | Typescript：`(changedValues: Record)` | \- | required currentElement | \- | `HTMLFormElement` | required getFieldValue | `(field: NamePath) ` | `unknown` | required @@ -43,15 +44,16 @@ setFields | `(fields: FieldData[])` | \- | required。Typescript：`(fields: Fie setFieldsValue | `(field: Data)` | \- | required setValidateMessage | `(message: FormValidateMessage)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`
submit | `(params?: { showErrorMessage?: boolean })` | \- | required -validate | `(params?: FormValidateParams)` | `Promise>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'all'`
+validate | `(params?: FormValidateParams)` | `Promise>` | required。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
validateOnly | `(params?: Pick)` | `Promise>` | required + ### FormItem Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N for | String | - | \- | N help | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N initialData | String / Number / Object / Array | - | Typescript：`InitialData` `type InitialData = any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N @@ -69,12 +71,13 @@ successBorder | Boolean | false | \- | N tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N valueFormat | Function | - | Triggered when user interaction results in data changes, used to format data。Typescript：`FormItemFormatType` `type FormItemFormatType = (value: any) => any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N + ### FormList Props name | type | default | description | required -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，Typescript：`React.CSSProperties` | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N children | Function | - | Typescript：`(fields: FormListField[], operation: FormListFieldOperation) => React.ReactNode` `type FormListField = { key: number; name: number; isListField: boolean }` `type FormListFieldOperation = { add: (defaultValue?: any, insertIndex?: number) => void, remove: (index: number \| number[]) => void, move: (from: number, to: number) => void }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N initialData | Array | - | Typescript：`Array` | N name | String / Number / Array | - | Typescript：`NamePath` | N @@ -97,7 +100,7 @@ number | Boolean | - | \- | N pattern | Object | - | Typescript：`RegExp` | N required | Boolean | - | \- | N telnumber | Boolean | - | \- | N -trigger | String | change | options: change/blur/submit | N +trigger | String | change | Typescript：`ValidateTriggerType` | N type | String | error | options: error/warning | N url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N @@ -120,3 +123,4 @@ required | String | - | \- | N telnumber | String | - | \- | N url | String | - | \- | N validator | String | - | \- | N +whitespace | String | - | \- | N diff --git a/src/form/form.md b/src/form/form.md index c29eefa87..0f84ad3f3 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -91,9 +91,10 @@ Form 组件设计的初衷是为了解放开发者配置大量的 `value`、`onC ``` ## API + ### Form Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -133,12 +134,13 @@ setFields | `(fields: FieldData[])` | \- | 必需。设置多组字段状态。T setFieldsValue | `(field: Data)` | \- | 必需。设置表单字段值 setValidateMessage | `(message: FormValidateMessage)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`
submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单，表单里面没有提交按钮`