Skip to content

Commit

Permalink
Merge pull request #5 from qiqiboy/next
Browse files Browse the repository at this point in the history 
release v0.5.5
  • Loading branch information
@qiqiboy
qiqiboy authored Apr 3, 2019
2 parents a43c26b + 01300bd commit 958aa85
Show file tree
Hide file tree
Showing 21 changed files with 860 additions and 172 deletions.
99 changes: 99 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ Happy to build the forms in React ^\_^
* [`checkbox/radio group`](#checkboxradio-group)
+ [`渲染自定义组件`](#渲染自定义组件)
* [`原生表单控件`](#原生表单控件)
* [`列表数组`](#列表数组)
- [`$listutil`](#listutil)
* [`第三方组件`](#第三方组件)
+ [`name`](#name-1)
+ [`$defaultValue`](#defaultvalue-1)
Expand Down Expand Up @@ -962,6 +964,103 @@ class MyField extends Component {}
</EasyField>
```
##### `列表数组`
从`0.5.5`起，`EasyField`新增支持`type="list"`，可以用来方便的实现列表数组表单，即将一组表单以数组形式组合渲染：
```javascript
[
{
username: 'xx',
age: 18
},
{
username: 'xx',
age: 22
}
// ...
];
```
在该模式下，你需要传递一个`render props`形式的`children`，该函数中所渲染的表单将会被作为数组的值：
```typescript
<EasyField name="relationships">
{($listutil: $Listutil) => {
return (
<>
<div className="relationship-item">
<EasyField name="relation">
<option value="">select</option>
<option value="0">Father</option>
<option value="1">Mother</option>
</EasyField>
<EasyField name="name" placeholder="The name" />
<button onClick={() => $listutil.$remove($listutil.$index)}>Delete</button>
</div>
{$listutil.$isLast() && (
<div className="relationship-toolbar">
<button onClick={() => $listutil.$push()}>Add new</button>
</div>
)}
</>
);
}}
</EasyField>
```
如上示例，你将会得到一个可以自由增删的列表形式表单，它将会渲染下面结构的`$params`：
```javascript
// $params =
{
relationships: [
{
relation: '0',
name: 'John'
},
{
relation: '1',
name: 'Clare'
}
];
}
```
###### `$listutil`
当你传递一个`render props`函数时，它将会接受两个参数：
- `$listutil` 为每个数组子表单的`$formutil`对象，另外扩展了一些其它用于列表渲染的方法
- `$formutil` 为整个数组表单的`$formutil`对象
```javascript
// $listutil =
{
...$formutil, // 包含当前数组表单项的$formutil

$length, // 数组表单项数量
$index, // 当前表单的次序
$insert(pos?: number), // 在pos位置新增，如果pos不指定，则为在当前列表末尾新增
$remove(pos?: number), // 删除pos位置项，如果pos不指定，则为删除当前列表最后一项
$push(), // 在列表尾部新增
$pop(), // 删除列表最后一项
$shift(), // 删除列表第一项
$unshift() // 在列表前面增加

$isLast(), // 是否最后一项
$isFirst(), // 是否第一项

onFocus(), // $fieldHandler的onFocus回调，可以传递给渲染的Field组件，用来同步`$focused` `$touched`等状态
onBlur() // $fieldHandler的onBlur回调，可以传递给渲染的Field组件，用来同步`$focused` `$touched`等状态
}
```
你可以使用`$listutil`提供的方法，来渲染一些控制按钮，以控制列表项。但是需要注意以下几点：
* 列表数组无法删除为`0`，如果你尝试删除最后一项，那么会删除后自动创建一个新的项。
* `children`方法会随着列表数组的数量渲染`n`次，你可以通过`$isFirst()` `$isLast()`方法判断是否是`第一项` `末项`，来控制一些不希望被多次重复渲染的内容：比如新增按钮
##### `第三方组件`
我们只需要通过 `children | render | component` 三个属性，来支持根据传递的`$fieldHandler`来渲染以及更新值就可以了。
Expand Down
82 changes: 82 additions & 0 deletions docs/app/modules/LoginForm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,88 @@ class LoginForm extends Component {
)}
</div>

<div className="form-group">
<label className="control-label">列表组</label>
<EasyField
type="list"
name="EasyField.list"
required
$defaultValue={[{ A: '0', B: '14000000897' }, { A: '1', B: '010-66666888' }]}
validMessage={{ required: '请选择' }}>
{$listutil => (
<div className="row">
<div className="form-group form-group-sm col-sm-5">
<EasyField type="select" className="form-control" name="A" required>
<option value="" disabled>
选择类型
</option>
<option value="0">个人</option>
<option value="1">办公</option>
</EasyField>
</div>
<div className="form-group form-group-sm col-sm-5">
<EasyField className="form-control" name="B" placeholer="电话号码" />
</div>
<div className="col-sm-2">
<button
disabled={$listutil.$length === 1}
type="button"
className="btn btn-danger btn-sm"
onClick={() => $listutil.$remove($listutil.$index)}>
删除
</button>
</div>
{$listutil.$isLast() && (
<div className="col-sm-12 btn-toolbar">
<button
type="button"
disabled={$listutil.$length >= 5}
className="btn btn-primary"
onClick={() => $listutil.$unshift()}>
前面增加一项
</button>
<button
type="button"
className="btn btn-danger"
disabled={$listutil.$length === 1}
onClick={() => $listutil.$shift()}>
前面删除一项
</button>
<button
type="button"
disabled={$listutil.$length >= 5}
className="btn btn-primary"
onClick={() => $listutil.$push()}>
后面增加一项
</button>
<button
type="button"
className="btn btn-danger"
disabled={$listutil.$length === 1}
onClick={() => $listutil.$pop()}>
后面删除一项
</button>
<button
type="button"
className="btn btn-danger"
disabled={$listutil.$length < 2}
onClick={() => $listutil.$swap(0, 1)}>
交换前两项
</button>
</div>
)}
</div>
)}
</EasyField>
{$errors.EasyField &&
$errors.EasyField.list &&
$dirts.EasyField.list && (
<span className="help-block bg-danger">
{Object.values($errors.EasyField.list)[0]}
</span>
)}
</div>

<div className="form-group">
<label className="control-label">
工作城市（多级联动）{' '}
Expand Down
2 changes: 1 addition & 1 deletion docs/demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.c88111a4.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.9dcd2fd3.js"></script><script type="text/javascript" src="./static/js/index.c88111a4.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.98c70503.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.30e8ec54.js"></script><script type="text/javascript" src="./static/js/index.98c70503.js"></script></body></html>
2 changes: 1 addition & 1 deletion docs/demo/service-worker.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions docs/demo/static/js/index.98c70503.js
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions docs/demo/static/js/index.c88111a4.js
View file

This file was deleted.

0 docs/demo/static/js/vendor.9dcd2fd3.js → docs/demo/static/js/vendor.30e8ec54.js
View file
File renamed without changes.
Loading

0 comments on commit 958aa85

Please sign in to comment.