diff --git a/README.md b/README.md index ea8b5c2..4da8b9b 100644 --- a/README.md +++ b/README.md @@ -214,6 +214,7 @@ yarn add react-formutil@0.4 - [The Login Form](https://codesandbox.io/s/6jqk6roxzk) - [The Signup Form](https://codesandbox.io/s/yw0w8zkl69) - [Nexted/Complex Form](https://codesandbox.io/s/oxxq7wnkw9) +- [The Field List/Array](https://codesandbox.io/s/3yzr3r9qkq) - [Form Adaptor](https://codesandbox.io/s/14lr59rmlj) - And more... @@ -984,13 +985,15 @@ class MyField extends Component {} 在该模式下,你需要传递一个`render props`形式的`children`,该函数中所渲染的表单将会被作为数组的值: +> **[查看在线示例](https://codesandbox.io/s/3yzr3r9qkq)** + ```typescript {($listutil: $Listutil) => { return ( <>
- + diff --git a/index.d.ts b/index.d.ts index fb43eb7..bfaf954 100644 --- a/index.d.ts +++ b/index.d.ts @@ -461,11 +461,17 @@ export interface $Listutil callback?: ($formutil: S) => void ): Promise; $insert>( - position?: number, + position: number, + callback?: ($formutil: S) => void + ): Promise; + $insert>( + callback?: ($formutil: S) => void + ): Promise; + $remove>( + position: number, callback?: ($formutil: S) => void ): Promise; $remove>( - position?: number, callback?: ($formutil: S) => void ): Promise; $push>(callback?: ($formutil: S) => void): Promise; @@ -477,8 +483,8 @@ export interface $Listutil callback?: ($formutil: S) => void ): Promise; - $isFisrt(): boolean; - $isLatst(): boolean; + $isFirst(): boolean; + $isLast(): boolean; } export interface BaseFormComponentProps { diff --git a/lib/EasyField/List.js b/lib/EasyField/List.js index 37267cb..7e14bca 100644 --- a/lib/EasyField/List.js +++ b/lib/EasyField/List.js @@ -101,7 +101,9 @@ var EasyFieldList = (_temp = _class = function (_Component) { _this.$setState = function (updater, callback) { return new Promise(function (resolve) { return _this.setState(updater, function () { - return resolve(runCallback(callback, _this.$formutil)); + return _this.$formutil.$onValidates(function ($formutil) { + return resolve(runCallback(callback, $formutil)); + }); }); }); }; @@ -157,17 +159,17 @@ var EasyFieldList = (_temp = _class = function (_Component) { $insert: this.insert, $remove: this.remove, $swap: this.swap, - $push: function $push() { - return _this3.insert(); + $push: function $push(callback) { + return _this3.insert(callback); }, - $pop: function $pop() { - return _this3.remove(); + $pop: function $pop(callback) { + return _this3.remove(callback); }, - $shift: function $shift() { - return _this3.remove(0); + $shift: function $shift(callback) { + return _this3.remove(0, callback); }, - $unshift: function $unshift() { - return _this3.insert(0); + $unshift: function $unshift(callback) { + return _this3.insert(0, callback); }, onFocus: onFocus, onBlur: onBlur diff --git a/package.json b/package.json index 98e80a4..e1b3cb2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-formutil", - "version": "0.5.5", + "version": "0.5.6-beta.0", "description": "Happy to build the forms in React ^_^", "main": "lib/index.js", "directories": { diff --git a/src/EasyField/List.js b/src/EasyField/List.js index f07f5c3..7cf634c 100644 --- a/src/EasyField/List.js +++ b/src/EasyField/List.js @@ -108,7 +108,11 @@ class EasyFieldList extends Component { }; $setState = (updater, callback) => - new Promise(resolve => this.setState(updater, () => resolve(runCallback(callback, this.$formutil)))); + new Promise(resolve => + this.setState(updater, () => + this.$formutil.$onValidates($formutil => resolve(runCallback(callback, $formutil))) + ) + ); render() { const { children, onFocus, onBlur, value } = this.props; @@ -122,10 +126,10 @@ class EasyFieldList extends Component { $insert: this.insert, $remove: this.remove, $swap: this.swap, - $push: () => this.insert(), - $pop: () => this.remove(), - $shift: () => this.remove(0), - $unshift: () => this.insert(0), + $push: callback => this.insert(callback), + $pop: callback => this.remove(callback), + $shift: callback => this.remove(0, callback), + $unshift: callback => this.insert(0, callback), onFocus, onBlur };