Skip to content

Commit

Permalink
doc: add form and formitem (#700)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnIsOnTheRoad
JohnIsOnTheRoad authored Mar 4, 2020
1 parent dd355b8 commit aaa4742
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 7 deletions.
13 changes: 7 additions & 6 deletions packages/antd-components/README.zh-cn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2130,12 +2130,13 @@ ReactDOM.render(<App />, document.getElementById('root'))
|:----------|:---------------------------------|:--------------------|:--------------------|
| dataSource | 分步配置 | StepItemProps[] | |
| current | 当前步骤 | number | |
| direction | 展示方向 | 'hoz' `or` 'ver' | |
| labelPlacement | 横向布局时的内容排列 | 'hoz' `or` 'ver' | |
| shape | 类型 | 'circle' `or` 'arrow' `or` 'dot' | |
| readOnly | 是否只读模式 | boolean | |
| animation | 是否开启动效 | boolean | |
| itemRender | StepItem 的自定义渲染 | (index: number, status: string) => React.ReactNode | |
| direction | 展示方向 | 'horizontal' `or` 'vertical' | |
| labelPlacement | 横向布局时的内容排列 | 'horizontal' `or` 'vertical' | |
| status | 状态 | 'wait' `or` 'process' `or` 'finish' `or` 'error' | |
| size | 指定大小，目前支持普通（default）和迷你（small） | 'default' `or` 'small' | |
| onChange | 点击切换步骤时触发 | (current: number) => void | |
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 vertical | boolean | Function | |
| initial | 起始序号，从 0 开始记数 | number | 0 |


**用法**
Expand Down
69 changes: 69 additions & 0 deletions packages/antd/README.zh-cn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,75 @@ const App = () => {
ReactDOM.render(<App />, document.getElementById('root'))
```

#### `<Form/>`

适用于纯JSX开发，开发者可以基于此进行二次封装。

| 参数 | 说明 | 类型 | 默认值 |
|:----------|:---------------------------------|:--------------------|:--------------------|
| fields |传入自定义表单组件 | { [key: string]: [ISchemaFieldComponent](#ISchemaFieldComponent) } | |
| virtualFields |传入自定义虚拟组件 | { [key: string]: [ISchemaVirtualFieldComponent](#ISchemaVirtualFieldComponent) } | |
| labelCol |label布局控制 | number `or` { span: number; offset?: number } | |
| wrapperCol |FormItem布局控制 | number `or` { span: number; offset?: number } | |
| previewPlaceholder |自定义预览placeholder | string `or` ((props: [IPreviewTextProps](#IPreviewTextProps)) => string) | |
| prefix |样式前缀 | string | |
| inline |是否为内联表单 | boolean | |
| size |单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。 | 'large' `or` 'medium' `or` 'small' | |
| labelAlign |标签的位置 | 'top' `or` 'left' `or` 'inset' | |
| labelTextAlign |标签的左右对齐方式 | 'left' `or` 'right' | |
| labelCol |控制所有 Item 的 labelCol | `{}` | |
| wrapperCol |控制所有 Item 的 wrapperCol | `{}` | |
| className |扩展class | string | |
| style |自定义内联样式 | React.CSSProperties | |
| component |设置标签类型 | string `or` (() => void) | |
| value |全局value | {} | |
| defaultValue |全局defaultValue | {} | |
| initialValues |全局initialValues | {} | |
| actions |FormActions实例 | [FormActions](#FormActions) | |
| effects |IFormEffect实例 | IFormEffect<FormEffectPayload, [FormActions](#FormActions)> | |
| form |表单实例 | [IForm](#IForm) | |
| onChange |表单变化回调 | (values: {}) => void | |
| onSubmit |form内有 `htmlType="submit"` 或 actions.submit时 触发 | (values: {}) => void `or` Promise<{}> | |
| onReset |form内有 <Reset/> 或 actions.reset时 触发 | () => void | |
| onValidateFailed |校验失败时触发 | (valideted: [IFormValidateResult](#IFormValidateResult)) => void | |
| children |全局value | React.ReactElement `or` ((form: [IForm](#IForm)) => React.ReactElement) | |
| useDirty |是否使用脏检查，默认会走immer精确更新 | boolean | |
| editable |是否可编辑 | boolean `or` ((name: string) => boolean) | |
| validateFirst |是否走悲观校验，遇到第一个校验失败就停止后续校验 | boolean | |

#### `<FormItem>`

适用于纯JSX开发，开发者可以基于此进行二次封装。

> 当 `<FormItem>` 接收 `component` 字段时，`<FormItem>` 会继承对应组件的所有属性。
| 参数 | 说明 | 类型 | 默认值 |
|:----------|:---------------------------------|:--------------------|:--------------------|
| label |字段label | React.ReactNode | |
| component |表单组件 | React.ReactNode | |
| path |字段路径 | [FormPathPattern](#FormPathPattern) | |
| name |字段名 | [FormPathPattern](#FormPathPattern) | |
| dataType |数据类型(array/object) | string | |
| value |字段值 | any | |
| initialValue |初始哈字段值 | any | |
| values |字段集合, 从onChange获取的所有参数 | any | |
| triggerType | 字段触发校验类型 | 'onChange' `|` 'onBlur' | |
| getValueFromEvent | 字段变更时，从event中获取value的计算函数 | (...args: any[]) => any | |
| itemClassName | formItem类名 | string | |
| itemStyle | formItem样式控制 | { [key: string]: string `|` number } | |
| props | 字段属性 | `{}` | |
| rules | 校验规则 | [ValidatePatternRules](#ValidatePatternRules) | |
| required | 是否必填，为true会同时设置校验规则 | string[] `or` boolean | |
| editable | 字段是否可编辑 | boolean | |
| visible | 字段是否显示（伴随value的显示和隐藏） | boolean | |
| display | 字段是否显示（纯视觉，不影响value） | boolean | |
| useDirty | 是否使用脏检查 | boolean | false |
| computeState | 计算字段状态 | (draft: [IFieldState](#IFieldState), prevState: [IFieldState](#IFieldState)) => void | |
| valueName | value字段名 | string | value |
| eventName | value变更方式 | string | onChange |
| noStyle | `(antd)`为 true 时不带样式，作为纯字段控件使用 | boolean | false |
| hasFeedback | `(antd)`配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
| validateStatus | `(antd)`校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |

#### `<Field/>(废弃)`

Expand Down
1 change: 0 additions & 1 deletion packages/core/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@ export interface IFieldStateProps<FieldProps = any> {
visible?: boolean
display?: boolean
useDirty?: boolean
useListMode?: boolean
computeState?: (draft: IFieldState, prevState: IFieldState) => void
}

Expand Down
77 changes: 77 additions & 0 deletions packages/next/README.zh-cn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,83 @@ const App = () => {
ReactDOM.render(<App />, document.getElementById('root'))
```

#### `<Form/>`

适用于纯JSX开发，开发者可以基于此进行二次封装。

| 参数 | 说明 | 类型 | 默认值 |
|:----------|:---------------------------------|:--------------------|:--------------------|
| fields |传入自定义表单组件 | { [key: string]: [ISchemaFieldComponent](#ISchemaFieldComponent) } | |
| virtualFields |传入自定义虚拟组件 | { [key: string]: [ISchemaVirtualFieldComponent](#ISchemaVirtualFieldComponent) } | |
| labelCol |label布局控制 | number `or` { span: number; offset?: number } | |
| wrapperCol |FormItem布局控制 | number `or` { span: number; offset?: number } | |
| previewPlaceholder |自定义预览placeholder | string `or` ((props: [IPreviewTextProps](#IPreviewTextProps)) => string) | |
| prefix |样式前缀 | string | |
| inline |是否为内联表单 | boolean | |
| size |单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。 | 'large' `or` 'medium' `or` 'small' | |
| labelAlign |标签的位置 | 'top' `or` 'left' `or` 'inset' | |
| labelTextAlign |标签的左右对齐方式 | 'left' `or` 'right' | |
| labelCol |控制所有 Item 的 labelCol | `{}` | |
| wrapperCol |控制所有 Item 的 wrapperCol | `{}` | |
| className |扩展class | string | |
| style |自定义内联样式 | React.CSSProperties | |
| component |设置标签类型 | string `or` (() => void) | |
| value |全局value | {} | |
| defaultValue |全局defaultValue | {} | |
| initialValues |全局initialValues | {} | |
| actions |FormActions实例 | [FormActions](#FormActions) | |
| effects |IFormEffect实例 | IFormEffect<FormEffectPayload, [FormActions](#FormActions)> | |
| form |表单实例 | [IForm](#IForm) | |
| onChange |表单变化回调 | (values: {}) => void | |
| onSubmit |form内有 `htmlType="submit"` 或 actions.submit时 触发 | (values: {}) => void `or` Promise<{}> | |
| onReset |form内有 <Reset/> 或 actions.reset时 触发 | () => void | |
| onValidateFailed |校验失败时触发 | (valideted: [IFormValidateResult](#IFormValidateResult)) => void | |
| children |全局value | React.ReactElement `or` ((form: [IForm](#IForm)) => React.ReactElement) | |
| useDirty |是否使用脏检查，默认会走immer精确更新 | boolean | |
| editable |是否可编辑 | boolean `or` ((name: string) => boolean) | |
| validateFirst |是否走悲观校验，遇到第一个校验失败就停止后续校验 | boolean | |

#### `<FormItem>`

适用于纯JSX开发，开发者可以基于此进行二次封装。

> 当 `<FormItem>` 接收 `component` 字段时，`<FormItem>` 会继承对应组件的所有属性。
| 参数 | 说明 | 类型 | 默认值 |
|:----------|:---------------------------------|:--------------------|:--------------------|
| label |字段label | React.ReactNode | |
| component |表单组件 | React.ReactNode | |
| path |字段路径 | [FormPathPattern](#FormPathPattern) | |
| name |字段名 | [FormPathPattern](#FormPathPattern) | |
| dataType |数据类型(array/object) | string | |
| value |字段值 | any | |
| initialValue |初始哈字段值 | any | |
| values |字段集合, 从onChange获取的所有参数 | any | |
| triggerType | 字段触发校验类型 | 'onChange' `|` 'onBlur' | |
| getValueFromEvent | 字段变更时，从event中获取value的计算函数 | (...args: any[]) => any | |
| itemClassName | formItem类名 | string | |
| itemStyle | formItem样式控制 | { [key: string]: string `|` number } | |
| props | 字段属性 | `{}` | |
| rules | 校验规则 | [ValidatePatternRules](#ValidatePatternRules) | |
| required | 是否必填，为true会同时设置校验规则 | string[] `or` boolean | |
| editable | 字段是否可编辑 | boolean | |
| visible | 字段是否显示（伴随value的显示和隐藏） | boolean | |
| display | 字段是否显示（纯视觉，不影响value） | boolean | |
| useDirty | 是否使用脏检查 | boolean | false |
| computeState | 计算字段状态 | (draft: [IFieldState](#IFieldState), prevState: [IFieldState](#IFieldState)) => void | |
| valueName | value字段名 | string | value |
| eventName | value变更方式 | string | onChange |
| labelCol | `(next)`控制 Item 的 labelCol | `{}` | |
| wrapperCol | `(next)`控制 Item 的 wrapperCol | `{}` | |
| validateState | `(next)`校验状态，如不设置，则会根据校验规则自动生成 | 'error' `|` 'success' `|` 'loading' `|` 'warning' | |
| hasFeedback | `(next)`配合 validateState 属性使f用，是否展示 success/loading 的校验状态图标, 目前只有Input支持成 | boolean | |
| size | `(next)`单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。 | 'large' `|` 'small' `|` 'medium' | |
| labelAlign | `(next)`标签的位置 | 'top' `|` 'left' `|` 'inset' | |
| labelTextAlign | `(next)`标签的左右对齐方式 | 'left' `|` 'right' | |
| asterisk | `(next)`required 的星号是否显示 | boolean | true |
| help | `(next)`自定义提示信息，如不设置，则会根据校验规则自动生成. | React.ReactNode | |
| extra | `(next)`额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面 | React.ReactNode | |

#### `<Field/>(废弃)`

> 即将废弃，请使用[SchemaMarkupField](#SchemaMarkupField)
Expand Down

0 comments on commit aaa4742

Please sign in to comment.