Skip to content

Commit 2dc2903

Browse files
FateRiddleFateRiddle
authored
Merge pull request #19 from alibaba/dev
Dev
2 parents d25ac9f + 635dd69 commit 2dc2903

29 files changed

+951
-337
lines changed

‎.babelrc‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
{
2-
"presets": [
3-
"env",
4-
"react",
5-
"stage-0"
6-
],
2+
"presets": ["env", "react", "stage-0"],
73
"plugins": [
84
[
95
"import",

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Change Log
22

3+
### 0.2.6
4+
5+
- [+] 重磅：schema 里大部分属性现在都支持函数表达式，方便表单组件间的关联（详见文档 UISchema、PropsSchema 部分）
6+
- [+] Demo 地址等更新
7+
- [!] 依赖组件库的抽离，避免了重复下载 antd/fusion
8+
- [!] antd 组件按需加载使用 less 文件
9+
- [!] 修复了 ui:options/format 被 format 属性覆盖的问题[@ColinChen2](https://github.com/ColinChen2)
10+
311
### 0.2.5
412

513
- [+] 当 schema 为 js 对象时，支持`ui:disabled`、`ui:readonly`、`ui:hidden`和`ui:options`的值为函数表达式。用法为 `"ui:disabled": (value, rootValue, formData) => value === "a"`

‎README.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@
1313

1414
> 通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成
1515
16-
## 了解
16+
## 了解
1717

1818
- <a href="https://alibaba.github.io/form-render/" target="_blank">文档官网</a>
19-
- <a href="https://alibaba.github.io/form-render/docs/demo/index.html" target="_blank">Demo 探索</a> / <a href="https://codesandbox.io/s/form-renderjichudemo-8k1l5?fontsize=14" target="_blank">Code Sandbox</a>
19+
- <a href="https://alibaba.github.io/form-render/docs/demo/index.html" target="_blank">Playground</a> / <a href="https://codesandbox.io/s/form-renderjichudemo-8k1l5?fontsize=14" target="_blank">Code Sandbox</a>
2020
- <a href="https://alibaba.github.io/form-render/#/docs/used" target="_blank">常见场景</a>
2121
- <a href="https://alibaba.github.io/form-render/#/docs/proptypes" target="_blank">Proptypes to Json Schema</a>
2222

2323
## 优势
24+
2425
<img src="https://gw.alipayobjects.com/mdn/feizhu_pla/afts/img/A*wyH4Rq-EqwQAAAAAAAAAAABkARQnAQ?raw=true" width="700"/>
2526

2627
- 支持 Ant Design 和 Fusion Design 主流的视觉主题
@@ -115,7 +116,9 @@ ReactDOM.render(<App />, rootElement);
115116
| **`onValidate`** | `Function` | `N` | `()=>{}` | 表单输入校验回调 |
116117
| **`displayType`** | `String` | `N` | `column` | 设置表单横向排列或者纵向排序`column`/ `row` |
117118

118-
\*设置表单 `displayType` 为 row 时候，请设置 `showDescIcon` 为 `true`，隐藏说明，效果会更好
119+
**注 1：** 设置表单 `displayType` 为 row 时候，请设置 `showDescIcon` 为 `true`，隐藏说明，效果会更好
120+
**注 2：** **onChange** 方法会用于初始化表单 data，如果不写会造成没有初始值的表单元素无法渲染（出现不报错也不显示的情况）
121+
**注 3：** FormRender 默认布局会占满它的父级元素，建议用一个`div`包裹 FormRender 用于表单布局样式调整
119122

120123
### 不常用 API
121124

@@ -128,14 +131,12 @@ ReactDOM.render(<App />, rootElement);
128131
| **`mapping`** | `Object` | `N` | `{}` | 用于修改默认组件映射表 |
129132
| **`FieldUI`** | `Component` | `N` | 内置组件 | 用于自定义整个元素的样式（标签、结构等） |
130133

131-
132134
## 原理
133135

134136
FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置，并支持渲染原生的 HTML 表单，通过 UiSchema 来配置 Widget 组件，在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系，最后还可以做到无缝接入其他组件体系的好处
135137

136138
<img src="https://img.alicdn.com/tfs/TB1AoJUKNTpK1RjSZR0XXbEwXXa-1466-858.png" width="500"/>
137139

138-
139140
## 调试
140141

141142
```shell
@@ -156,6 +157,10 @@ FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置
156157

157158
想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 MR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)
158159

160+
感谢给 FormRender 贡献代码的你们！
161+
162+
<a href="https://github.com/alibaba/form-render/graphs/contributors"><img src="https://opencollective.com/form-render/contributors.svg?width=890&button=false"/></a>
163+
159164
## 协议
160165

161166
- 遵循 MIT 协议

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<link rel="icon" href="https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png" type="image/png" />
6-
<title>FormRender Demo</title><% (htmlWebpackPlugin.options.resources.css || []).forEach(function(path) { %>
6+
<title>FormRender Playground</title><% (htmlWebpackPlugin.options.resources.css || []).forEach(function(path) { %>
77
<link rel="stylesheet" href="//unpkg.com/<%=path%>" />
88
<% }) %>
99
</head>

‎demo/index2.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import FormRender from '../src/antd';
4+
// import SCHEMA from './json/simplest.json';
5+
6+
const SCHEMA = {
7+
propsSchema: {
8+
type: 'object',
9+
properties: {
10+
select: {
11+
title: '单选',
12+
type: 'string',
13+
enum: ['a', 'b', 'c'],
14+
enumNames: ['早', '中', '晚'],
15+
},
16+
multiSelect: {
17+
title: '多选',
18+
description: '下拉多选',
19+
type: 'array',
20+
items: {
21+
type: 'string',
22+
},
23+
enum: "@rootValue.select == 'a'?['A','B']:['C','D']",
24+
},
25+
string1: {
26+
title: '字符串',
27+
type: 'string',
28+
'ui:hidden': "@!rootValue.multiSelect.includes('A')",
29+
},
30+
string2: {
31+
title: '字符串2',
32+
type: 'string',
33+
'ui:hidden': "@!rootValue.multiSelect.includes('C')",
34+
},
35+
},
36+
required: [],
37+
},
38+
39+
formData: {},
40+
};
41+
42+
class Demo extends React.Component {
43+
state = { formData: SCHEMA.formData || {} };
44+
45+
onChange = formData => {
46+
this.setState({ formData });
47+
};
48+
49+
onValidate = valid => {
50+
console.log('没有通过的校验:', valid);
51+
};
52+
53+
render() {
54+
const { formData } = this.state;
55+
const { propsSchema, uiSchema } = SCHEMA;
56+
return (
57+
<div className="pa6">
58+
<FormRender
59+
propsSchema={propsSchema}
60+
uiSchema={uiSchema}
61+
formData={formData}
62+
onChange={this.onChange}
63+
onValidate={this.onValidate}
64+
/>
65+
</div>
66+
);
67+
}
68+
}
69+
70+
ReactDOM.render(<Demo />, document.getElementById('__render_content_'));

‎demo/json/date.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
"date2": {
1111
"title": "日期选择",
1212
"type": "string",
13-
"format": "date"
13+
"format": "date",
14+
"ui:options": {
15+
"format": "YY/MM/DD"
16+
}
1417
},
1518
"date3": {
1619
"title": "日期选择",

‎docs/_coverpage.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44

55
> <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成<span>
66
7-
[Demo探索](https://alibaba.github.io/form-render/docs/demo/index.html)
7+
[Playground](https://alibaba.github.io/form-render/docs/demo/index.html)
88
[快速开始](README)

‎docs/_sidebar.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- [pattern 自定义正则校验](docs/pattern)
66
- **高级配置**
77
- [样式覆盖](docs/css)
8+
- [如何联动](docs/function)
89
- [自定义组件](docs/widget)
910
- [表达式依赖决定显示表单](docs/depend)
1011
- [高度改写基础表单元素](docs/field-ui)

‎docs/demo/editor.worker.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<link rel="icon" href="https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png" type="image/png" />
6-
<title>FormRender Demo</title>
6+
<title>FormRender Playground</title>
77
<link rel="stylesheet" href="//unpkg.com/@alifd/[email protected]/dist/next.min.css" />
88

99
</head>

0 commit comments

Comments
 (0)