Merge pull request #6 from qiqiboy/next

fix(FieldList): fix definition types
qiqiboy · Apr 3, 2019 · c36955b · c36955b
2 parents 43025e6 + e10b9af
commit c36955b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 32 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
@@ -59,12 +59,14 @@ var EasyFieldList = (_temp = _class = function (_Component) {
         };
 
         _this.insert = function (m, callback) {
-            if (isUndefined(m)) {
-                callback = m;
+            if (isFunction(m)) {
+                var _ref3 = [callback, m];
+                m = _ref3[0];
+                callback = _ref3[1];
             }
 
-            return _this.$setState(function (_ref3) {
-                var items = _ref3.items;
+            return _this.$setState(function (_ref4) {
+                var items = _ref4.items;
 
                 if (isUndefined(m)) {
                     items.push(_this.getId());
@@ -77,12 +79,14 @@ var EasyFieldList = (_temp = _class = function (_Component) {
         };
 
         _this.remove = function (m, callback) {
-            if (isUndefined(m)) {
-                callback = m;
+            if (isFunction(m)) {
+                var _ref5 = [callback, m];
+                m = _ref5[0];
+                callback = _ref5[1];
             }
 
-            return _this.$setState(function (_ref4) {
-                var items = _ref4.items;
+            return _this.$setState(function (_ref6) {
+                var items = _ref6.items;
 
                 if (isUndefined(m)) {
                     items.pop();
@@ -101,7 +105,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 +163,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.1",
   "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
@@ -72,8 +72,8 @@ class EasyFieldList extends Component {
         }, callback);
 
     insert = (m, callback) => {
-        if (isUndefined(m)) {
-            callback = m;
+        if (isFunction(m)) {
+            [m, callback] = [callback, m];
         }
 
         return this.$setState(({ items }) => {
@@ -88,8 +88,8 @@ class EasyFieldList extends Component {
     };
 
     remove = (m, callback) => {
-        if (isUndefined(m)) {
-            callback = m;
+        if (isFunction(m)) {
+            [m, callback] = [callback, m];
         }
 
         return this.$setState(({ items }) => {
@@ -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
         };