README

Formor

简介

Formor 是一个基于 JSON Schema 的配置表单生成器，目前只发布到了厂内。 Formor 具备一个可灵活扩展的结构，可方便的扩展并集成到项目中。

安装

npm install formor --save

使用

import { Form } from 'formor';

function App() {

  return (<Form 
    //描述数据的 Schema （Root 需是为一个对象）
    schema={schema}  
    //数据 （Root 需是为一个对象）
    value={data}  
    //数据发生改变
    onChange={console.log}  
    //验证被触发
    onValidate={console.log}
  />);

}

属性说明

schema: 表单的 JSON Schema 描述
value: 传递给表单的数据
onChange: 在数据发生变化时的事件
onValidate: 在验证被触发发时的事件，（参数格式 Array{state:bool,message:string}）

适配组件库

除了继承 Renderer 基类实现自定义的组件，还可以实现 6 个方法，将内建的 Renderer 适配到任意的组件库。

import { Renderer, notification } from "formor"

//下方仅是适配示例，
//适配到目标组件库时，需要注意将参数中的 prop 赋值到组件库正确的 prop 上
//其中，onChange 事件方法的 event 需转换为 event.target.value 取值的形式
//适配时不要示实现所有方法，视需要覆盖即可

Renderer.renderTooltip = props => {
  return <Tooltip {...props}>?</Tooltip>;
}

Renderer.renderSelect = props => {
  return <Select {...props} />;
}

Renderer.renderInput = props => {
  return <Input {...props} />;
}

Renderer.renderButton = props => {
  const { children, ...others } = props;
  return <Button {...others}>{children}</Button>;
}

Renderer.renderDialog = props => {
  const { children, ...others } = props;
  return <Dialog {...others}>{children}</Dialog>;
}

Renderer.renderEmpty = message => {
  return <Empty message={message}/>;
}

//也可不实现 notification.confirm
//实现了 renderDialog 会影响 confirm
notification.confirm = async message => {
  return window.confirm(message)
}

Usage no npm install needed!

README

Formor

简介

安装

使用

适配组件库