React Conf Form

集成了antd的配置化表单(思路来源于jsonschema form) 不同的是，简化了配置的书写以及数据的提取

继承了控件Input, Button, Select, Upload等常用控件，可自定义扩展控件

自带校验规则，可扩展校验规则

表单数据自动提取

安装install

yarn add react-conf-form 
or 
npm install react-conf-form

使用usage

import * as React from 'react'
import Form from 'react-conf-form'
import 'react-conf-form/dist/index.css' // import once

export default class FormDemo extends React.Component {
    onSubmit = (data) => { console.log(data) }
    
    render() {
      return (
        <Form
          fields={FIELDS_CONF}
          dataSource={DATA_SOURCE}
          onSubmit={this.onSubmit}
        />
      )
    }
}

参数 props

| 参数 | 类型 | 默认值 | 描述 | | ----------------- | -------------------------- | ------------- | ----------------------- | | spinning? | boolean | false | 是否显示加载状态 | | validateOnChange? | boolean | true | 是否在onChange自动进行校验 | | labelDirection? | 'vertical' | 'horizontal' | horizontal | label位置 | | labelWidth? | number | 120 | label的宽度 | | fields | Array<...> | - | fields | | dataSource? | Object | - | 初始值对象（对应fields的key相应的属性值) | | onSubmit? | (data) => void | - | 提交(data为最新的值) | | onChange? | (key, value, data) => void | - | 任意表单项修改触发 | | onReset? | () => void | - | 重置触发 | | extendFields? | Array | - | 扩展表单控件 | | extendValidators? | Array | - | 扩展校验规则 |

onSubmit = (data) => console.log(data)

onChange = (name, value, data) => console.log(name, value, data)

onReset = () => {}

render() {
  const FIELDS = [...]

  return (
    <Form
      spinning={false}
      validateOnChange={true}
      labelDirection="horizontal"
      labelWidth={120}
      fields={FIELDS}
      dataSource={{}}
      onSubmit={this.onSubmit}
      onChange={this.onChange}
      onReset={this.onReset}
      extendFields={[]}
      extendValidators={[]}
    />
  )
}

配置

行 Row

| 参数 | 类型 | 默认值 | 描述 | | ---------- | ----------------------- | ------------- | ------------------------ | | span? | number | 8 | 行内单元格所占珊格，最大24 | | gutter? | number | 16(px) | 间隔 | | type? | 'FormButtons' | string | - | 按钮行 / 常规控件行 | | style? | object | - | 自定义样式 | | className? | string | - | 自定义样式class | | display? | string | true | 是否显示 | | fields | array | | 单元格配置 | | align? | center | left | right | - | 适用于按钮行(FormButtons), 按钮的对齐方式 |

const FIELDS = [
  { // row 
    span: 8,
    gutter: 16,
    display: true,
    type: 'fields',
    fields: [...], // field's cols
  }
]

列 (fields: [field, ...])

| 参数 | 类型 | 默认值 | 描述 | | ---------- | ----------------------------------------- | ------------- | ------------------------------------ | | key | string(唯一) | - | field & data对应的key | | span? | number(1~24) | 继承row | 栅格宽度 | | offset? | number(1~24) | 0 | 偏移栅格 | | label | string | - | | | type | string | - | input, render, timepicker... | | display? | boolean | true | 是否展示 | | readOnly? | boolean | false | 是否只读 | | className? | string | - | css class | | props | | | 控件内部的参数 | | | className? | - | css class | | | rules: Array | [] | rules for validation | | | onChange?: (name, value) => void | - | | | | beforeChange?: (name, value) => new value | - | onChange触发前调用，用于覆盖处理onChange的值 | | | onClick?: (data) => any | | 当type="button"，点击回调 | | | render?: string | Node | (data) => any | | 当type="render"，render方法/对象 | | | addon?: string | Node | (data) => any | | 额外的render | | | ...others | | |