乐趣区

关于javascript:schemaform给开发者用的表单工具

jiezi

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 –

逐步完善的单页测试

退出移动版