可参看 antd 官方文档

额外提供

FormArea

  import { FormArea } from '@swiftcrab/crab'
  import { IFormItem, IForm } from '@swiftcrab/crab/es/form-area/type'
  import { useForm } from '@swiftcrab/crab/es/hooks'

  const initialValues = {}

  const form = useForm<typeof initialValues>(initialValues)
  const { values, set, ValidateTooltip, setFieldProps } = form

  const item = useMemo((): Array<IFormItem<Init>> => [
    {
      label: '输入框',
      dataKey: '输入框',
      dataType: 'Input',
      rules: [{ required: true, message: '必填' }],
      onChange: (values, form, e) => {
        form.set({ ...values, 输入框: e.target.value })
      }
    },
    {
      label: '多选框',
      dataKey: '多选框',
      dataType: 'Checkbox',
      dataProps: {
        options: [
          { value: 1, label: '打球' },
          { value: 2, label: '跑步' },
          { value: 3, label: '敲代码' }
        ]
      }
    },
    {
      label: '日期选择框',
      dataKey: '日期选择框',
      dataType: 'DateRangePicker',
      dataProps: {
        className: 'w'
      },
      hidden: data => data['单选框'] === 1
    },
  ], [])

  <FormArea
    item={item}
    form={form}
    initialValues={initialValues}
    colon={false}
    buttonLocation="nextLast"
    hasResetBtn={true}
    hiddenField={true}
    onSubmit={async (value: Init) => {}}
  />

| 参数    |   说明   |   类型    |   默认值  |
| ------ | ------- | -------- | ------- |
| initialValues        | 初始值   | `Record<string, any>` | -    | 
| item                 | 表单元素    | `Array<FormItem<any>>` | -    | 
| form                 | useForm 返回结果。表单数据和操作的集合 | `IFormState<any>`   | -   | 
| colon                | 所有 label 后面是否带冒号 | `boolean`  | `false`   | 
| allLabelClassName    | 所有 label 的 className | `string`  | -  | 
| allLabelStyle        | 所有 label 的 style  | `CSSProperties` | -  |
| onSubmit             | 点击提交按钮触发事件 | - | `(values, form) => void` |
| onReset              | 点击重置按钮触发事件 | `() => void` | -  |
| hasSubmitBtn         | 是否有提交按钮 | `boolean` | `true`|
| hasResetBtn          | 是否有重置按钮 | `boolean` | `true`  |
| submitProps          | 自定义提交按钮属性 | `ButtonProps & { text: string }`  | - |
| resetProps           | 自定义重置按钮属性 | `ButtonProps & { text: string }` | -  |
| columnGapWidth       | 每列之间的间距 | `number` | `16`  |
| rowGapWidth          | 每行之间的间距 | `number` | `0`  |
| numberOfInline       | 一行元素显示个数 | `number`  | `4`  |
| buttonLocation       | 提交，重置按钮的位置 | `'first', 'last', 'next', 'nextLast'`| `nextLast`|
| buttonWrapExtra      | 提交，重置按钮后追加内容| `ReactNode` | - |
| formClassName        | Form 的 className | `string` | -  |
| formStyle            | Form 的 style | `CSSProperties` | -   |
| buttonWrapClassName  | 提交，重置按钮区域的 className  | `string`  | -  |
| buttonWrapStyle      | 提交，重置按钮区域的 style | `CSSProperties` | -  |
| labelWrap            | 所有元素 label 是否换行 | `boolean` | `true` |
| layout               | 所有元素布局 | `'horizontal', 'vertical'` | `horizontal` |
| hiddenField         | 提交表单是否过滤隐藏元素数据 | `boolean` | `true`  |

## FormArea.Item
| 参数               | 说明     | 类型    | 默认值  |
| ----------------- | ---------------- | ---------------- | ------- |
| dataKey           | 值的键  | `string` | -  |
| dataType          | 表单元素类型 | `string`, `(values, form, name) => void`, `ReactNode` | - |
| label             | 标签名称 | `string`, `ReactNode`| -  |
| colon             | label 后面是否带冒号 | `boolean`| `false` | 
| labelClassName    | label 的 className | `string`  | -   | 
| labelStyle        | label 的 style  | `CSSProperties` | -   | 
| dataProps         | 元素类型的属性 |  `{}` 或 `(value, form) => boolean`   | -       | 
| rules             | 元素类型的校验规则  | `Rule[]` 或 `(value, form) => Rule[]`  | -   | 
| hidden            | 元素类型是否展示  | `boolean` 或 `(value, form) => boolean`   | `true`  | 
| disabled          | 元素类型是否禁用 | `boolean` 或 `(value, form) => boolean` | `false` |
| tooltip           | label 后的问号提示 | `ReactNode`  | -   |
| extraLayout       | 元素右侧和下侧额外内容 | `{ bottom?: ReactNode, right?: ReactNode }`  | - |
| occupyColumns     | 元素类型跨占列数，不能大于 numberOfInline  | `number`  | `1`     | 
| validateStatus    | 元素类型校验状态  | `’success‘, ’warning‘, ’error‘, ’validating‘`  | - | 
| required          | 元素是否显示必填 \* 号  | `boolean` | `true`  |
| onChange          | 元素的 change 事件，args 表单元素 onChange 事件的参数 | `(values, form, ...args) => void` | - |

## useForm
| 参数              | 说明           |
| ----------------- | -------------- |
| `values`          | 当前表单值     |
| `set`             | 修改表单值     |
| `reset`           | 重置表单值     |
| `validateFields`  | 校验当前表单    |
| `setFieldProps`   | 设置目标字段其他属性    |
| `ValidateTooltip` | 使用Tooltip组件展示错误信息 |
| `其他属性` | [useForm](https://ant-design.antgroup.com/components/form-cn#forminstance) |

## dataKey
| 类型              | 说明           |
| ----------------- | -------------- |
| `Input`           | 普通输入框     |
| `InputPassword`   | 密码输入框     |
| `TextArea`        | 多行输入框     |
| `InputNumber`     | 数字输入框     |
| `AutoComplete`    | 自动完成输入框 |
| `Mentions`        | 提及输入框     |
| `Select`          | 选择器         |
| `MultiSelect`     | 多选选择器     |
| `TreeSelect`      | 树形选择器     |
| `Cascader`        | 级联选择器     |
| `DatePicker`      | 日期选择器     |
| `DateRangePicker` | 日期范围选择器 |
| `TimePicker`      | 时间选择器     |
| `Radio`           | 单选按钮       |
| `Checkbox`        | 多选按钮       |
| `Slider`          | 滑动输入条     |
| `Switch`          | 开关           |
| `Upload`          | 上传           |
| `Transfer`        | 穿梭框         |
| `FormList`        | 可增删表单项   |