窗体构建器
这个项目正在进展中。 所有的API是考虑 无法。 一切都可以改变。 新造型/BUG FIXS 可以花很长时间来实施.
此组件允许构建 数据驱动窗体 通过 DnD 特性的窗体.
目录
安装
npm install --save @data-driven-forms/form-builder
或者说
yarn add @data-driven-forms/form-builder
发展
所需资源
- UNIX 类似系统( Linux, MacOS)
- 节点12+
用纱线安装
yarn
开始操场
yarn start
运行中 http://localhost:8080/
林特
yarn lint
自动固定: yarn lint --fix
测试
yarn test
查看更改时 : yarn test --watchAll
构建
yarn build
要清理已建文件 : yarn clean-build。此操作在 build。 。 。 .
使用量
导入窗体构建器 :
import FormBuilder from '@data-driven-forms/form-builder/form-builder';
并且使部件具有下列道具:
道具
生育或子女
({组件 Picker,属性编辑器, DropTarget, 是Valid, getSchema, children}}} } } 反应 元素
使用孩子或渲染功能来制作整个编辑器.
马普
对象
数据驱动格式组件映射器。 见 这里。 。 。 .
建构器 Mapper
对象
一组创建窗体构建器的组件.
import { builderComponentTypes } from '../src/constants';
const builderMapper = {
FieldLayout,
PropertiesEditor,
FormContainer,
[builderComponentTypes.BUILDER_FIELD]: builderField,
BuilderColumn,
PropertyGroup,
DragHandle,
EmptyTarget
}
战地拉尤特
({儿童,禁用 Drag,拖放,所选 }} } 反应 元素
单字段的包装器 = BUILDER FORM + DragHandle.
属性编辑器
({ 儿童, 儿童, 添加变量, (中文(简体) ), 可用变量, (中文(简体) ), 关闭, (中文(简体) ), 手柄删除, (中文(简体) ), 有财产错误 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 反应 元素
一个编辑.
窗体连接器
({孩子,正在拖过>) 反应 元素
在表单栏中将窗体包裹一圈.
BUILDER 财务
({ 内置方案 : {隐藏字段,快照}, 构成部分, (中文(简体) ), 属性Name, (中文(简体) ), 字段编号, (中文(简体) ), 属性, (中文(简体) ), 有财产错误, (中文(简体) ), ...道具 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 反应 元素
围地打包.
构建库
({孩子,正在拖过>) 反应 元素
专栏.
属性组
({班名,孩子,标题,手柄Delete}}} { } 反应 元素
在属性编辑器 > 校验中围绕单个属性组的包裹.
拖动手
({拖曳HandleProps, hasPropertyError, 禁用Drag }} } } { { 反应 元素
一个拖把 小时候被传到菲尔德拉尤特.
空目标
(单位:千美元) 反应 元素
没有创建字段时显示空目标 .
产品
对象
每个组件的可编辑属性映射器。 属性是具有下列属性的对象:
属性
可编辑组件的属性 .
属性Name
字符串
相当于计划中的一个属性.
标签
字符串
在编辑器中显示属性的标签 .
组件
字符串
属性映射器中对应密钥的组件 .
禁用变量
禁用在 PropertiesEditor。 。 。 .
未在窗体状态下注册的字段中自动禁用 .
禁用初始值
禁用初始值字段 PropertiesEditor。 。 。 .
未在窗体状态下注册的字段中自动禁用 .
示例
const LABEL = {
propertyName: 'label',
label: 'Label',
component: 'input'
}
const componentProperties = {
[componentTypes.TEXT_FIELD]: {
attributes: [LABEL, IS_REQUIRED]
},
[componentTypes.PLAIN_TEXT]: {
attributes: [LABEL],
disableValidators: true,
disableInitialValue: true
}
}
拾取器 Mapper
对象
编辑器中可用的组件映射器 .
const pickerMapper = {
[componentTypes.TEXT_FIELD]: ({ component }) => <div>{component}</div>
}
属性 Mapper
对象
组件属性中可用的组件映射器 .
const propertiesMapper = {
input: ({ label, value, fieldId, innerProps: { propertyValidation }, ...rest }) => <input {...rest} />
}
模式
“ subset ” 的一个“ 默认 ” 选项
如果“ subset ” , 选项只能编辑到一定程度 。 见"通鉴".
计划
对象 选项
数据驱动的表格方案。 见 这里。 。 。 .
模式
对象 选项
创建子集的原始计划 。 如果未指定, 将从方案创建可编辑边界 .
正在复制时复制
布尔 选项
组件列表中的组件被拖取时被克隆.
调试
布尔 选项
打开调试模式 。 将以 JSON 对象显示当前字段 .
打开编辑器
布尔 选项
打开挂载上的第一个字段.
已禁用添加
布尔 选项
禁用添加新字段 .
禁用 Drag
布尔 选项
禁用拖曳 .
地图员
窗体构建器包含两个组件的映射器: 模式4 财务报告和审定财务报表 材料界面 各个版本.
材料界面
import {
pickerMapper,
propertiesMapper,
builderMapper,
BuilderTemplate,
fieldProperties
} from '@data-driven-forms/form-builder/mui-builder-mappers';
版本5
MUI-BUILDER使用第5版的MUI. 要使用版本4(@material-ui/core),请使用版本的构建器 0.0.12-rc1。 。 。 .
模式4
import {
pickerMapper,
propertiesMapper,
builderMapper,
BuilderTemplate,
fieldProperties
} from '@data-driven-forms/form-builder/pf4-builder-mappers';
示例
render={({ isValid, getSchema, ...props }) => (
<BuilderTemplate {...props} className={classes.builderWrapper}>
<CodeEditor value={JSON.stringify(getSchema(), null, 2)} />
</BuilderTemplate>
)}