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
xulingling0 · Mar 15, 2024 · 8631321 · 8631321
1 parent 3b00d4e
commit 8631321
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 4 deletions.
diff --git 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, `<Checkbox>` 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)&lt;FormData, FieldValue, FieldKey&gt; |`-`|-|
 |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<FieldValue = any> = {
 };
 ```
 
+### FormItemChildrenFn
+
+```js
+export type FormItemChildrenFn<
+  FormData = any,
+  FieldValue = FormData[keyof FormData],
+  FieldKey extends KeyType = keyof FormData
+> = (
+  formData: any,
+  form: FormInstance<FormData, FieldValue, FieldKey>
+) => 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
@@ -48,12 +48,14 @@
 |trigger|接管子节点，搜集子节点值的时机。|string |`onChange`|-|
 |triggerPropName|子节点被接管的值的属性名，默认是 `value`,比如 `<Checkbox>` 为 `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)&lt;FormData, FieldValue, FieldKey&gt; |`-`|-|
 |className|节点类名|string \| string[] |`-`|-|
 |dependencies|设置依赖字段。当依赖的字段值改变时，触发自身的校验。如果是想动态渲染某个表单控件/表单区域，使用 shouldUpdate|string[] |`-`|2.40.0|
 |field|受控组件的唯一标示|FieldKey |`-`|-|
@@ -170,6 +172,19 @@ export type FieldError<FieldValue = any> = {
 };
 ```
 
+### FormItemChildrenFn
+
+```js
+export type FormItemChildrenFn<
+  FormData = any,
+  FieldValue = FormData[keyof FormData],
+  FieldKey extends KeyType = keyof FormData
+> = (
+  formData: any,
+  form: FormInstance<FormData, FieldValue, FieldKey>
+) => React.ReactNode;
+```
+
 ### Rules
 
 底层使用 [b-validate](https://github.com/PengJiyuan/b-validate)。

diff --git 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<FormData, FieldValue, FieldKey>;
 }
 

diff --git 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
@@ -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;
   /**