schema-form
给开发者用的表单工具（基于 Ant Design React）
基于 Ant Design React 而开发的适配组件，尽量应用数据来代替元素标签。
装置
npm i @dawdler/schema-form
文档
开发者文档+在线 Demo
应用
SchemaForm：type:row | custom 2 种布局形式
import SchemaForm from '@dawdler/schema-form';/** row */<SchemaForm type="row" gutter={16} span={12} options={[ { label: '输入框', type: 'input', }, ]}/>/** custom */<SchemaForm type="custom" options={[ { label: '输入框', type: 'input', }, ]}/>
也能够独自应用的元素组件
import { Element } from '@dawdler/schema-form';<Element type="input" value="123" onChange={(str) => console.log(str)} />
参考
SchemaForm type:row
SchemaForm type:custom
element mode: 'edit' | 'read'
整体结构图
graph TB SchemaForm(SchemaForm) --> Element[Element适配层,依据type匹配组件类型] SchemaForm --> CustomRender[Custom Render 自定义渲染组件]
Element 作为元素组件的适配层而存在，也能够独自引入应用
graph TB Element(Element适配层,反对的类型) --> type[type] type --> |text| Text[Text] type --> |input| InputWrap[InputWrap:减少了Input的过滤空格性能] type --> |list-wrap| ListWrap[ListWrap] type --> |other| Ant的类型推导,详见:```API:Element.type```
API:SchemaForm 包裹 Form 的组件
| 参数 | 形容 | 类型 | 默认值 |
|---|
| type | 设置布局款式。row：应用 Row 包裹。custom: 间接渲染。 | row | custom |
| disabled | 是否禁用，如果 item 有，以 item 的为后果 | boolean | - |
| options | 渲染列表 | IFormItem[] | - |
| form | 内部传入的：Form.useForm() | FormInstance | - |
| initialValues | form.initialValues 透传 | Record<string, any> | - |
API: SchemaForm.type=row 类型为 row 时的参数
| 参数 | 形容 | 类型 | 默认值 |
|---|
| gutter | Row 的 gutter | number | 16 |
| span | Row 的 span | number | 6 |
API: SchemaForm.options 渲染列表，包裹 Form.Item 的数组
| 参数 | 形容 | 类型 | 默认值 |
|---|
| disabled | 以后这一条 item 内容是否禁用 | boolean | - |
| render | 只有 custom 类型 才有的渲染 children 办法 | (props: ISchemaChildrenProps) => React.ReactNode | - |
| fieldProps | 透传组件参数。 | 以 type 主动推动组件类型 | - |
| col | type:row类型时，col 的占位,如果 item 有。以 item 为后果 | number | - |
| width | 铺满 item 宽度。默认：宽度 100%。auto: 应用默认组件宽度 | string | - |
| type | 联结类型，详见：API:SchemaForm.options.type | IUnionType | - |
| other | Ant 的 FormItemProps 参数 | FormItemProps | - |
API:Element.type Element 组件的 type 枚举
| 反对的 type | 形容（Ant 的类型推导简直都是组件的小驼峰拼写：TimePicker.RangePicker -> timeRangePicker） |
|---|
| text | 只读文本。设置宽度之后反对超长暗藏 |
| input | 包裹 Ant 的 Input，减少了默认参数。详见: API:Input |
| list-wrap | 列表组件，通过 mode 能够批改为只读、编辑状态 |
| input-group | Input.Group |
| textarea | Input.TextArea |
| search | Input.Search |
| password | Input.Password |
| input-number | InputNumber |
| select | Select |
| datepicker | DatePicker（单个日期） |
| rangepicker | DatePicker.RangePicker（日期区间） |
| timePicker | TimePicker（单个工夫） |
| timeRangePicker | TimePicker.RangePicker（工夫区间） |
| checkbox | Checkbox |
| checkbox-group | Checkbox.Group |
| radio-group | Radio.Group |
| rate | Rate |
| slider | Slider |
| switch | Switch |
| upload | Upload |
| avatar | Avatar |
| image | Image |
| tag | Tag |
| progress | Progress |
| tree-select | TreeSelect |
| cascader | Cascader |
| 谬误类型会抛出谬误 | 没有找到对应的 type 类型 |
API:SchemaForm.options.type SchemaForm 组件的 Item.type 枚举
| 反对的 type | 形容 | 类型 | 默认值 |
|---|
| Element.type | 反对所有的 Element.type 类型 | EnumElementType | - |
| group | 将 Item 作为一个组包裹 | string | - |
| custom | 自定义渲染组件 | (props: ISchemaChildrenProps) => React.ReactNode | - |
逐步完善的单页测试