add Promise support async

Author: MinJieLiu

.babelrc

@@ -3,8 +3,5 @@
     "es2015",
     "stage-0",
     "react"
-  ],
-  "plugins": [
-    "transform-object-assign"
   ]
 }

README-zh_CN.md

@@ -60,6 +60,9 @@ const methods = {
     const otherField = this.fields[param];
     return this.required(field) || (otherField.result && this.required(otherField));
   },
+  async validateFromServer(field, param) {
+    return await doServerAPI();
+  },
 };
 ```
 
@@ -104,6 +107,7 @@ export default formConnect(schemas, methods)(BasicForm);
 
  * `values` 的值类似于 { email: '', hobby: ['2'] }
  * `classNames` 和 `values` 也可以在 `BasicForm` 中使用 `init` 方法初始化
+ * `delay` 防抖
 
 基础验证方法可以参考 [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)
 
@@ -152,18 +156,19 @@ return (
 
 #### Form params
 
-| 名称 | 类型 | 默认值 | setState | 描述 |
+| 名称 | 类型 | 返回值 | setState | 描述 |
 | :--- | :--- | :--- | :--- | :--- |
 | fields | Object | | | `fields` 集合 |
 | isAllValid | Boolean | | | 全局验证状态 |
 | formValues | Object | | | 表单值的列表 |
-| init | function | | false | 初始化表单值和类 |
+| init | function | this | false | 初始化表单值和类 |
+| initClassNames | function | this | false | 初始化类 |
 | onFormChange | function | | true | 表单更改事件监听方法 |
-| changeValues | function | | true | 自定义改变表单方法 |
-| validate | function | | true | 验证所有字段 |
-| validateByNames | function | | true | 通过 `name` 验证组件 |
-| addValues | function | | true | 添加一个或多个值 |
-| removeValues | function | | true | 删除一个或多个值 |
-| addSchemas | function | | false | 添加一个或多个验证规则 |
-| removeSchemas | function | | true | 删除一个或多个验证规则 |
+| changeValues | function | this | true | 自定义改变表单方法 |
+| validate | function | Promise => Boolean | true | 验证所有字段 |
+| validateByNames | function | Promise => Boolean | true | 通过 `name` 验证组件 |
+| addValues | function | this | true | 添加一个或多个值 |
+| removeValues | function | this | true | 删除一个或多个值 |
+| addSchemas | function | this | false | 添加一个或多个验证规则 |
+| removeSchemas | function | Promise => this | true | 删除一个或多个验证规则 |
 | formDidChange | function | | | 回调函数 |

README.md

@@ -54,6 +54,9 @@ const methods = {
     const otherField = this.fields[param];
     return this.required(field) || (otherField.result && this.required(otherField));
   },
+  async validateFromServer(field, param) {
+    return await doServerAPI();
+  },
 };
 ```
 
@@ -90,10 +93,12 @@ Finally, sets the initialized value:
   delay={100}
 />
 
-// The values like this { email: '', hobby: ['2'] }
-// classNames and values can be initialized in `BasicForm` use `init`
 ```
 
+ * The values like this { email: '', hobby: ['2'] }
+ * classNames and values can be initialized in `BasicForm` use `init`
+ * `delay` debounce
+
 Validate methods can refer to [validate-framework-utils](https://github.com/MinJieLiu/validate-framework-utils)
 
 ### Form components
@@ -137,24 +142,25 @@ return (
 | :--- | :--- | :--- | :--- | :--- |
 | values | Object | false | | Key-value pairs for `name` and` value` |
 | classNames | Object | false | {} | Its `key` value contains` static`, `success`,` error` |
-| delay | number | false | | delay |
+| delay | number | false | | debounce |
 
 #### Form params
 
-| name | type | default | setState | description |
+| name | type | return | setState | description |
 | :--- | :--- | :--- | :--- | :--- |
 | fields | Object | | | The collection of fields |
 | isAllValid | Boolean | | | Gets the global validation status |
 | formValues | Object | | | Gets a list of form values |
-| init | function | | false | Initializes the form value and classes |
+| init | function | | this | Initializes the form value and classes |
+| initClassNames | function | this | false | Initializes classes |
 | onFormChange | function | | true | Form change event listener |
-| changeValues | function | | true | Customize to change the values |
-| validate | function | | true | Validate all fields |
-| validateByNames | function | | true | Validate the component through names |
-| addValues | function | | true | Add one or more value |
-| removeValues | function | | true | Remove one or more value |
-| addSchemas | function | | false | Add one or more validation rules |
-| removeSchemas | function | | true | Remove one or more validation rules |
+| changeValues | function | this | true | Customize to change the values |
+| validate | function | Promise => Boolean | true | Validate all fields |
+| validateByNames | function | Promise => Boolean | true | Validate the component through names |
+| addValues | function | this | true | Add one or more value |
+| removeValues | function | this | true | Remove one or more value |
+| addSchemas | function | this | false | Add one or more validation rules |
+| removeSchemas | function | Promise => this | true | Remove one or more validation rules |
 | formDidChange | function | | | Callback |
 
 You can either pass in `values` as an argument, or call the `init` method when the form is initialized.

config/webpack.config.js

@@ -12,6 +12,7 @@ export default {
         'webpack/hot/dev-server',
         'webpack-hot-middleware/client',
       ] : [],
+    'babel-polyfill',
     path.resolve('./example/index'),
   ],
   output: {

example/App.jsx

@@ -16,8 +16,8 @@ export default class extends Component {
   };
 
   // Validate the BasicForm
-  handleValidateBasicForm = () => {
-    const isAllValid = this.basicForm.validate();
+  handleValidateBasicForm = async () => {
+    const isAllValid = await this.basicForm.validate();
     this.setState({
       isAllValid,
     });

example/BasicForm.jsx

@@ -2,7 +2,8 @@
  * Created by MingYi on 2016/12/23.
  */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import formConnect, {
   Checkbox,
@@ -55,14 +56,18 @@ const schemas = {
   },
 };
 
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
 // Custom methods
 const methods = {
   // Rely on other fields
   requiredField(field, param) {
     const otherField = this.fields[param];
     return this.required(field) || (otherField.result && this.required(otherField));
   },
-  selectLimit(field, param) {
+  async selectLimit(field, param) {
+    // Simulation
+    await sleep(1000);
     if (Array.isArray(field.value)) {
       return field.value.length >= param;
     }
@@ -77,9 +82,8 @@ class BasicForm extends Component {
   };
 
   handleSubmitClick = () => {
-    const { formControl } = this.props;
-    // @return {Boolean}
-    formControl.validate();
+    // @return {Promise}
+    this.props.formControl.validate();
   };
 
   render() {

example/ChildForm.jsx

@@ -2,7 +2,8 @@
  * Created by MingYi on 2016/12/23.
  */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
   Text,
   Message,
@@ -36,11 +37,9 @@ class ChildForm extends Component {
     });
   };
 
-  handleDeleteFriend = () => {
+  handleDeleteFriend = async () => {
     const { formControl } = this.props;
-    formControl
-      .removeSchemas('friend')
-      .removeValues('friend');
+    (await formControl.removeSchemas('friend')).removeValues('friend');
   };
 
   render() {
@@ -73,19 +72,18 @@ class ChildForm extends Component {
           </button>
         </div>
         {
-          fields.friend
-            ? (
-              <div className="form-group">
-                <label htmlFor="friend">Name:</label>
-                <Text
-                  id="friend"
-                  name="friend"
-                  type="text"
-                  placeholder="Please enter a name"
-                />
-                <Message className="valid-error-message" name="friend" />
-              </div>
-            ) : null
+          fields.friend ? (
+            <div className="form-group">
+              <label htmlFor="friend">Name:</label>
+              <Text
+                id="friend"
+                name="friend"
+                type="text"
+                placeholder="Please enter a name"
+              />
+              <Message className="valid-error-message" name="friend" />
+            </div>
+          ) : null
         }
         <div className="form-group">
           {/* The unencapsulated form components */}