From 8631321d47de911285b9db4fde70059215823b0b Mon Sep 17 00:00:00 2001 From: wy-luke Date: Fri, 15 Mar 2024 16:47:28 +0800 Subject: [PATCH] docs: add some descriptions for Form.Item API * docs: add children description for Form.Item API * docs: add isFormList description for Form.Item API * docs: fix typo * docs: add layout description for Form.Item API * docs: remove isFormList description for Form.Item API --- components/Form/README.en-US.md | 17 ++++++++++++++++- components/Form/README.zh-CN.md | 15 +++++++++++++++ components/Form/interface.tsx | 13 ++++++++++++- components/Modal/README.en-US.md | 2 +- components/Modal/interface.ts | 2 +- 5 files changed, 45 insertions(+), 4 deletions(-) diff --git a/components/Form/README.en-US.md b/components/Form/README.en-US.md index 47cfcc0fb6..cb25d2ab54 100644 --- a/components/Form/README.en-US.md +++ b/components/Form/README.en-US.md @@ -44,16 +44,18 @@ A form with data collection, verification and submission functions, including ch |disabled|Whether the FormItem is disabled. Priority is higher than the `disabled` prop of `Form`|boolean |`-`|-| |hasFeedback|Whether to show the verification icon, configure `validateStatus` to use.|boolean |`-`|-| |hidden|hide the form item|boolean |`-`|2.29.0| -|required|Whether The FormItem is Required, Will display an red symbol in front of the `label` label.If it is not set here, it will look for `required` from the rules|boolean |`-`|-| +|required|Whether the FormItem is Required, Will display an red symbol in front of the `label` label.If it is not set here, it will look for `required` from the rules|boolean |`-`|-| |trigger|When to take over and collecting the child nodes.|string |`onChange`|-| |triggerPropName|The attribute name of the child node being taken over, default is `value`, ex, `` is `checked`.|string |`value`|-| |labelAlign|Text alignment of `label`|'left' \| 'right' |`right`|-| +|layout|The layout|'horizontal' \| 'vertical' \| 'inline' |`-`|-| |requiredSymbol|Whether show red symbol when item is required，Set position props, you can choose to place the symbol before/after the label|boolean \| { position: 'start' \| 'end' } |`true`|`position` in 2.24.0| |validateStatus|Validate status|'success' \| 'warning' \| 'error' \| 'validating' |`-`|-| |colon|Whether show colon after `label`. Priority is lower than `colon` in `Form.Item`.(`ReactNode` in `v2.41.0`)|boolean \| ReactNode |`-`|-| |extra|Additional hint content.|ReactNode |`-`|-| |help|Custom help text|ReactNode |`-`|-| |label|Label text|ReactNode |`-`|-| +|children|`ReactNode` type and Fuction type children|React.ReactNode \| [FormItemChildrenFn](#formitemchildrenfn)<FormData, FieldValue, FieldKey> |`-`|-| |className|Additional css class|string \| string[] |`-`|-| |dependencies|the dependency fields. When the value of the dependent field changes, trigger its own validation.If you want to dynamically render a form control/form area, use shouldUpdate|string[] |`-`|2.40.0| |field|Unique identification of controlled components|FieldKey |`-`|-| @@ -170,6 +172,19 @@ export type FieldError = { }; ``` +### FormItemChildrenFn + +```js +export type FormItemChildrenFn< + FormData = any, + FieldValue = FormData[keyof FormData], + FieldKey extends KeyType = keyof FormData +> = ( + formData: any, + form: FormInstance +) => React.ReactNode; +``` + ### Rules Low-level use [b-validate](https://github.com/PengJiyuan/b-validate). diff --git a/components/Form/README.zh-CN.md b/components/Form/README.zh-CN.md index 6b2b778caf..9b7581511b 100644 --- a/components/Form/README.zh-CN.md +++ b/components/Form/README.zh-CN.md @@ -48,12 +48,14 @@ |trigger|接管子节点，搜集子节点值的时机。|string |`onChange`|-| |triggerPropName|子节点被接管的值的属性名，默认是 `value`,比如 `` 为 `checked`。|string |`value`|-| |labelAlign|标签的文本对齐方式，优先级高于 `Form`|'left' \| 'right' |`right`|-| +|layout|布局|'horizontal' \| 'vertical' \| 'inline' |`-`|-| |requiredSymbol|是否在 required 的时候显示加重的红色星号，设置 position 可选择将星号置于 label 前/后|boolean \| { position: 'start' \| 'end' } |`true`|`position` in 2.24.0| |validateStatus|校验状态|'success' \| 'warning' \| 'error' \| 'validating' |`-`|-| |colon|是否显示标签后的一个冒号，优先级小于 `Form.Item` 中 `colon` 的优先级。(`ReactNode` in `v2.41.0`)|boolean \| ReactNode |`-`|-| |extra|额外的提示内容。|ReactNode |`-`|-| |help|自定义校验文案|ReactNode |`-`|-| |label|标签的文本|ReactNode |`-`|-| +|children|`ReactNode` 类型与函数类型的 children|React.ReactNode \| [FormItemChildrenFn](#formitemchildrenfn)<FormData, FieldValue, FieldKey> |`-`|-| |className|节点类名|string \| string[] |`-`|-| |dependencies|设置依赖字段。当依赖的字段值改变时，触发自身的校验。如果是想动态渲染某个表单控件/表单区域，使用 shouldUpdate|string[] |`-`|2.40.0| |field|受控组件的唯一标示|FieldKey |`-`|-| @@ -170,6 +172,19 @@ export type FieldError = { }; ``` +### FormItemChildrenFn + +```js +export type FormItemChildrenFn< + FormData = any, + FieldValue = FormData[keyof FormData], + FieldKey extends KeyType = keyof FormData +> = ( + formData: any, + form: FormInstance +) => React.ReactNode; +``` + ### Rules 底层使用 [b-validate](https://github.com/PengJiyuan/b-validate)。 diff --git a/components/Form/interface.tsx b/components/Form/interface.tsx index 8d283a2291..6efa512bc8 100644 --- a/components/Form/interface.tsx +++ b/components/Form/interface.tsx @@ -308,7 +308,7 @@ export interface FormItemProps< * @zh * 是否必选，会在 `label` 标签前显示加重红色符号，如果这里不设置，会从 rules 中寻找是否是 required * @en - * Whether The FormItem is Required, Will display an red symbol in front of the `label` label. + * Whether the FormItem is Required, Will display an red symbol in front of the `label` label. * If it is not set here, it will look for `required` from the rules */ required?: boolean; @@ -380,6 +380,10 @@ export interface FormItemProps< * @defaultValue right */ labelAlign?: 'left' | 'right'; + /** + * @zh 布局 + * @en The layout + */ layout?: 'horizontal' | 'vertical' | 'inline'; /** * @zh 是否在 required 的时候显示加重的红色星号，设置 position 可选择将星号置于 label 前/后 @@ -388,7 +392,14 @@ export interface FormItemProps< * @version `position` in 2.24.0 */ requiredSymbol?: boolean | { position: 'start' | 'end' }; + /** + * 内部使用属性，无需在文档上体现 + */ isFormList?: boolean; + /** + * @zh `ReactNode` 类型与函数类型的 children + * @en `ReactNode` type and Fuction type children + */ children?: React.ReactNode | FormItemChildrenFn; } diff --git a/components/Modal/README.en-US.md b/components/Modal/README.en-US.md index 62f4ff45b0..8379a3b43b 100644 --- a/components/Modal/README.en-US.md +++ b/components/Modal/README.en-US.md @@ -17,7 +17,7 @@ Open a floating layer on the current page to carry related operations. |alignCenter|Modal is centered vertically and horizontally|boolean |`true`|-| |autoFocus|Whether to focus the first focusable element|boolean |`true`|-| |closable|Whether to show the close button in TitleBar|boolean |`-`|-| -|confirmLoading|Whether The `ok` button is loading|boolean |`-`|-| +|confirmLoading|Whether the `ok` button is loading|boolean |`-`|-| |escToExit|Whether enable press `ESC` to close Modal|boolean |`true`|-| |focusLock|Whether to lock the focus in the Modal|boolean |`true`|-| |mask|Whether show mask|boolean |`true`|-| diff --git a/components/Modal/interface.ts b/components/Modal/interface.ts index 607982cd64..6b25dd066b 100644 --- a/components/Modal/interface.ts +++ b/components/Modal/interface.ts @@ -116,7 +116,7 @@ export interface ModalProps { afterClose?: () => void; /** * @zh 确认按钮加载中 - * @en Whether The `ok` button is loading + * @en Whether the `ok` button is loading */ confirmLoading?: boolean; /**