提交 3a4414a6 编写于 作者: T tw93

Merge branch 'master' of github.com:alibaba/form-render

......@@ -51,8 +51,8 @@ export default defineConfig({
path: '/tools',
children: [
{ title: 'Schema 编辑器', path: '/tools/generator' },
{ title: 'VSCode 插件', path: '/tools/vscode' },
{ title: 'PropToSchema', path: '/tools/proptypes' },
{ title: 'VSCode 插件', path: '/tools/vscode' },
],
},
{
......
......@@ -42,12 +42,14 @@ npm publish
```sh
# 进入
cd packages/form-render
# 换版本号、打tag
npm version 1.1.0
# 换版本号、打tag。注意tag要打,便于release note的维护
yarn version --new-version 1.1.0
# 发布
npm publish
```
发布后记得到 [releases 页](https://github.com/alibaba/x-render/releases/) 补上最新的 release 信息
6. 分支管理
外部同学请 fork,内部同学请在 dev 分支开发,然后都发 pull-request 到 master 分支,由负责同学审核后合并,master 分支请勿人为去动
......@@ -32,7 +32,7 @@
## 变化
- FormRender 已升级到 XRender 1.0 版本,并提供开箱即用的 Form/Table/Chart 解决方案,原版本可见<a href="http://x-components.gitee.io/form-render/" target="_blank_"> **旧文档** </a>
- FormRender 已升级到 XRender 1.0 版本,并提供开箱即用的 Form/Table/Chart 解决方案,原版本可见<a style="font-weight: 500;" href="http://x-components.gitee.io/form-render/" target="_blank_">旧文档</a>
- FormRender 0.x 版本直接升级到 1.0 需修改 API 才能正常运行,可见 [0.x 到 1.x](https://x-render.gitee.io/form-render/migrate),很推荐升级。
## 谁在使用?
......@@ -125,7 +125,7 @@
## 贡献
想贡献代码、解 BUG 或者提高文档可读性?非常欢迎一起参与进来,在提交 MR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)
想贡献代码、解 BUG 或者提高文档可读性?非常欢迎一起参与进来,在提交 PR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)
感谢给 XRender 贡献代码的你们:
......
```jsx
import React, { useEffect } from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
const schema = {
displayType: 'row',
type: 'object',
properties: {
input1: {
title: '简单输入框简单输入框',
description: 'sdfdsgfshfghfgdh',
type: 'string',
required: true,
rules: [
{
required: true,
message: 'ete',
},
],
},
input2: {
title: '简单输入框2',
type: 'boolean',
},
input3: {
title: '简单输入框3',
type: 'string',
required: true,
},
image: {
title: '图片展示',
type: 'string',
format: 'image',
},
checkboxes: {
title: '多选',
description: '下拉多选',
type: 'array',
items: {
type: 'string',
},
enum: ['A', 'B', 'C', 'D'],
enumNames: ['杭州', '武汉', '湖州', '贵阳'],
widget: 'checkboxes',
default: null,
},
multiSelect: {
title: '多选',
description: '下拉多选',
type: 'array',
items: {
type: 'string',
},
enum: ['A', 'B', 'C', 'D'],
enumNames: ['杭州', '武汉', '湖州', '贵阳'],
widget: 'multiSelect',
default: null,
},
},
};
const Demo = () => {
const form = useForm();
useEffect(() => {
form.setValues({ a: 1, b: 2, c: { x: { y: [{ z: 'sdf' }] } } });
}, []);
const onFinish = (formData, errorFields) => {
if (errorFields.length > 0) {
alert(
'errorFields:' +
JSON.stringify(errorFields) +
'\nformData:' +
JSON.stringify(formData, null, 2)
);
} else {
alert('formData:' + JSON.stringify(formData, null, 2));
}
};
return (
<div>
<FormRender
// debugCss
validateMessages={{ required: '213' }}
form={form}
schema={schema}
onFinish={onFinish}
/>
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;
```
label, descIcon
入参
随便传入什么值,都会透传,不会被 schema 截取
null 值在多选里的展示
title 的布局需要重新写一下
```jsx
import React, { useState } from 'react';
import { Button, Modal, Switch } from 'antd';
import FormRender, { useForm } from 'form-render';
const Demo = () => {
const [show, set1] = useState(false);
const form = useForm();
const openModal = () => {
form.setValues({ input1: 'haha' });
set1(true);
};
return (
<div>
<Modal
destroyOnClose
visible={show}
onOk={form.submit}
onCancel={() => {
set1(false);
}}
></Modal>
<FormRender
displayType="row"
// debugCss
// mapping={{ '' }}
form={form}
schema={schema}
widgets={{ mymy: Switch }}
/>
<Button type="primary" onClick={openModal}>
打开form
</Button>
<Button type="primary" onClick={form.resetFields}>
reset
</Button>
</div>
);
};
export default Demo;
var schema = {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
input2: {
title: '简单输入框2',
type: 'boolean',
valuePropsName: 'checked',
widget: 'mymy',
},
listName: {
// widget: 'list1',
props: {
hideTitle: true,
},
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
items: {
type: 'object',
properties: {
multiSelect: {
title: '多选',
description: '下拉多选',
type: 'array',
items: {
type: 'string',
},
enum: ['A', 'B', 'C'],
enumNames: ['杭州', '武汉', '湖州'],
widget: 'multiSelect',
},
radioName: {
title: '单选select',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
widget: 'select',
required: true,
},
inputName2: {
title: '复杂输入框',
description: '英文或数字组合',
type: 'string',
min: 4,
max: 20,
rules: [
{
pattern: '^[A-Za-z0-9]+$',
message: '请输入正确格式',
},
],
},
},
},
},
},
};
```
```jsx
import React, { useEffect } from 'react';
import { Button, Modal } from 'antd';
import FormRender, { useForm } from 'form-render';
const delay = ms => new Promise(res => setTimeout(res, ms));
const schema = {
type: 'object',
properties: {
inputName: {
bind: 'ttt',
title: '简单输入框',
type: 'string',
format: 'image',
},
listName: {
bind: 'a.x',
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
items: {
type: 'object',
properties: {
inputName2: {
title: '复杂输入框',
description: '英文或数字组合',
type: 'string',
},
selectName: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
widget: 'radio',
},
},
},
},
},
};
const Demo = () => {
const form = useForm();
useEffect(() => {
form.setValues({ ttt: '234', a: { x: [{ inputName2: 'hello' }] } });
}, []);
const onFinish = (formData, errorFields) => {
if (errorFields.length > 0) {
alert('errorFields:' + JSON.stringify(errorFields));
} else {
alert('formData:' + JSON.stringify(formData, null, 2));
}
};
return (
<div>
<FormRender form={form} schema={schema} onFinish={onFinish} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;
```
import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
const schema = {
type: 'object',
properties: {
listName2: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
widget: 'list2',
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
},
},
},
},
listName3: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
widget: 'list3',
props: {
hideTitle: true,
},
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
},
},
},
},
listName1: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
widget: 'list1',
props: {
hideTitle: true,
},
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
},
},
},
},
listName: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
props: {
hideTitle: true,
buttons: [
{
html: 'sdf',
callback: 'someCallback',
},
],
},
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['', '', ''],
},
},
},
},
},
};
const Demo = () => {
const form = useForm();
const onFinish = (formData, errorFields) => {
if (errorFields.length > 0) {
alert('errorFields:' + JSON.stringify(errorFields));
} else {
alert('formData:' + JSON.stringify(formData, null, 2));
}
};
return (
<div>
<FormRender debug form={form} schema={schema} onFinish={onFinish} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;
<code src='./test-list.jsx' />
```jsx
import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
const schema = {
displayType: 'row',
labelWidth: 120,
type: 'object',
properties: {
input1: {
title: '简单输入框',
description:
'sdfasdgdsgfdsgfsdfgssdgdsgfdsgfsdfgssdgdsgfdsgfsdfgsdfgsdfgfghfghfghfgh',
type: 'string',
required: true,
},
input2: {
title: '简单输入框2',
type: 'boolean',
},
daaa: {
title: 'daa',
type: 'string',
format: 'date',
props: {
showTime: true,
format: 'dateTime',
},
},
daaa2: {
title: 'daa2',
type: 'string',
format: 'time',
},
daaa3: {
title: 'daa3',
type: 'range',
format: 'date',
},
input3: {
title: '图片',
type: 'string',
format: 'image',
required: true,
},
input4: {
title: 'url',
type: 'string',
format: 'url',
required: true,
},
},
};
const Demo = () => {
const form = useForm();
const onFinish = (formData, errorFields) => {
if (errorFields.length > 0) {
alert(
'errorFields:' +
JSON.stringify(errorFields) +
'\nformData:' +
JSON.stringify(formData, null, 2)
);
} else {
alert('formData:' + JSON.stringify(formData, null, 2));
}
};
return (
<div>
<FormRender
debugCss={false}
form={form}
schema={schema}
onFinish={onFinish}
/>
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;
```
......@@ -5,7 +5,7 @@ import FormRender, { useForm } from 'form-render';
const schema = {
type: 'object',
// displayType: 'row',
displayType: 'row',
properties: {
listName2: {
title: '对象数组',
......@@ -20,7 +20,7 @@ const schema = {
type: 'string',
required: true,
},
selet1: {
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
......
---
order: 5
group:
order: 3
title: 高级用法
toc: false
---
# 表单校验
......@@ -205,7 +205,7 @@ const schema = {
type: 'string',
required: true,
},
selet1: {
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
......@@ -220,7 +220,7 @@ const schema = {