fix(FieldList): fix definition types

qiqiboy · Apr 3, 2019 · fe2a206 · fe2a206
1 parent 43025e6
commit fe2a206
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git 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
 <EasyField name="relationships" type="list">
     {($listutil: $Listutil) => {
         return (
             <>
                 <div className="relationship-item">
-                    <EasyField name="relation">
+                    <EasyField name="relation" type="select">
                         <option value="">select</option>
                         <option value="0">Father</option>
                         <option value="1">Mother</option>

diff --git a/index.d.ts b/index.d.ts
@@ -461,11 +461,17 @@ export interface $Listutil<Fields = {}, Validators = {}, WeakFields = Fields>
         callback?: ($formutil: S) => void
     ): Promise<S>;
     $insert<S = $Formutil<{ list: Fields[] }, { required: boolean }, any>>(
-        position?: number,
+        position: number,
+        callback?: ($formutil: S) => void
+    ): Promise<S>;
+    $insert<S = $Formutil<{ list: Fields[] }, { required: boolean }, any>>(
+        callback?: ($formutil: S) => void
+    ): Promise<S>;
+    $remove<S = $Formutil<{ list: Fields[] }, { required: boolean }, any>>(
+        position: number,
         callback?: ($formutil: S) => void
     ): Promise<S>;
     $remove<S = $Formutil<{ list: Fields[] }, { required: boolean }, any>>(
-        position?: number,
         callback?: ($formutil: S) => void
     ): Promise<S>;
     $push<S = $Formutil<{ list: Fields[] }, { required: boolean }, any>>(callback?: ($formutil: S) => void): Promise<S>;
@@ -477,8 +483,8 @@ export interface $Listutil<Fields = {}, Validators = {}, WeakFields = Fields>
         callback?: ($formutil: S) => void
     ): Promise<S>;
 
-    $isFisrt(): boolean;
-    $isLatst(): boolean;
+    $isFirst(): boolean;
+    $isLast(): boolean;
 }
 
 export interface BaseFormComponentProps<Fields = {}, Validators = {}, WeakFields = Fields> {

diff --git 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
@@ -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
@@ -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
         };