feat(*): field and validate npm packages

- replace field with @alifd/field and add React support
- replace validate with @alifd/validate

Author: jdkahn

docs/field/demo/topath.md

@@ -44,7 +44,11 @@ class App extends React.Component {
                 b: 'b',
                 c: 'c'
             },
-            arr: ['first', 'second']
+            arr: ['first', 'second'],
+            objWithDefaults: {
+                a: 100,
+                b: 200
+            }
         });
     }
 

docs/field/demo/useField.md

@@ -0,0 +1,52 @@
+# 带有反应挂钩的功能组件
+
+- order: 12
+
+`Field` 将反应挂钩 `useField` 公开为静态方法。接受与 `new Field(...)` 一起使用的 `options` 参数。
+
+:::lang=en-us
+# Functional Component with React Hooks
+
+- order: 12
+
+`Field` exposes a React Hook `useField` as a static method. Takes in the `options` parameter used with `new Field(...)`. 
+
+
+:::
+---
+
+
+
+
+````jsx
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Input, Button, Field } from '@alifd/next';
+
+ 
+function NewApp() {
+    const field = Field.useField({ values: { input: 'abc' }});
+
+    const { init, setValue, reset } = field;
+
+    function onGetValue() {
+        console.log(field.getValue('input'));
+    }
+
+    function onSetValue() {
+        field.setValue('input', 'xyz');
+    }
+
+    return (
+        <div className="demo">
+            <Input {...init('input', {initValue: 'test'})} />
+            <Button onClick={onSetValue}> setValue </Button>
+            <Button onClick={onGetValue}> getValue </Button>
+            <br/><br/>
+        </div>);
+ }
+ 
+ 
+ReactDOM.render(<NewApp/>, mountNode);
+ 
+ ````

docs/field/demo/validator.md

@@ -6,12 +6,14 @@
 
 `注意`：Form 和 Field 做了深度结合，在 Form 中使用Field，错误信息不需`getError`获取会自动展现。
 
+请参见 “验证方承诺” 演示，以使用承诺而不是回调。
+
 :::lang=en-us
 # validate
 
 - order: 4
 
-you can easily use validate in `Form`, or you can use `getError` to set errors where you want to put
+you can easily use validate in `Form`, or you can use `getError` to set errors where you want to put. See `validatorPromise` demo to use promises instead of callbacks.
 :::
 ---
 

docs/field/demo/validatorPromise.md

@@ -0,0 +1,172 @@
+# 验证承诺
+
+- order: 4
+
+验证表单值，并在承诺中返回错误。也支持回调。如果回调返回承诺，承诺的结果将在 “验证” 函数的承诺中返回。
+
+:::lang=en-us
+# validate Promise
+
+- order: 4
+
+validate form values with errors returned wrapped in a promise. Also supports callbacks. If the callback returns a promise, the results of the promise will be returned in a promise from the `validate` function.
+
+:::
+---
+
+````jsx
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Input, Button, Checkbox } from '@alifd/next';
+import Field from '@alifd/field';
+
+
+
+const CheckboxGroup = Checkbox.Group;
+
+const list = [
+    {
+        value: 'apple',
+        label: 'apple'
+    }, {
+        value: 'pear',
+        label: 'pear'
+    }, {
+        value: 'orange',
+        label: 'orange'
+    }
+];
+
+class App extends React.Component {
+    state = {
+        checkboxStatus: true
+    }
+    field = new Field(this, {scrollToFirstError: -10});
+
+    isChecked(rule, value) {
+        if (!value) {
+            return Promise.reject('consent agreement not checked ')
+        } else {
+            return Promise.resolve(null);
+        }
+    }
+
+    userName(rule, value) {
+        if (value === 'frank') {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => resolve('name existed'), 200);
+            })
+        } else {
+            return new Promise((resolve) => {
+                setTimeout(() => resolve(null), 200);
+            })
+        }
+    }
+
+    render() {
+        const init = this.field.init;
+
+        return (<div className="demo">
+            <Input {...init('input', {initValue: 'delete all', rules: {required: true}})} />
+            {this.field.getError('input') ?
+                <span style={{color: 'red'}}>{this.field.getError('input').join(',')}</span> : ''}
+
+            <br/>
+            <br/>
+
+            <Input placeholder="try onBlur" {...init('input1', {
+                rules: [{
+                    required: true,
+                    message: 'can not be empty',
+                    trigger: ['onBlur', 'onChange']
+                }]
+            })} />
+            {this.field.getError('input1') ?
+                <span style={{color: 'red'}}>{this.field.getError('input1').join(',')}</span> : ''}
+
+            <br/>
+            <br/>
+
+            <Input defaultValue="" placeholder="try frank" {...init('username', {
+                rules: [{
+                    validator: this.userName,
+                    trigger: ['onBlur', 'onChange']
+                }]
+            })} />
+            {this.field.getState('username') === 'loading' ? 'validating...' : ''}
+            {this.field.getError('username') ?
+                <span style={{color: 'red'}}>{this.field.getError('username').join(',')}</span> : ''}
+
+            <br/>
+            <br/>
+
+            agreement:
+            <Checkbox {...init('checkbox', {
+                valueName: 'checked',
+                rules: [{validator: this.isChecked}]
+            })} />
+            {this.field.getError('checkbox') ?
+                <span style={{color: 'red'}}>{this.field.getError('checkbox').join(',')}</span> : ''}
+
+            <br/>
+            <br/>
+
+            <Input.TextArea placeholder=">3 and <10" {...init('textarea', {
+                rules: [{
+                    required: true,
+                    minLength: 3,
+                    maxLength: 10
+                }]
+            })} />
+            {this.field.getError('textarea') ?
+                <span style={{color: 'red'}}>{this.field.getError('textarea').join(',')}</span> : ''}
+
+            <br/>
+            <br/>
+
+            {this.state.checkboxStatus ? <div>
+                Array validate：
+                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {
+                    rules: [{
+                        required: true,
+                        type: 'array',
+                        message: 'choose one please'
+                    }]
+                })} style={{marginBottom: 10}}/>
+                {this.field.getError('checkboxgroup') ?
+                    <span style={{color: 'red'}}>{this.field.getError('checkboxgroup').join(',')}</span> : ''}
+            </div> : null}
+
+            <br/>
+            <br/>
+
+            <Button type="primary" onClick={() => {
+                this.field.validatePromise().then(({errors, values}) => {
+                    console.log(errors, values);
+                });
+            }}>validate</Button>
+            <Button onClick={() => {
+                this.field.reset();
+            }}>reset</Button>
+
+            <Button onClick={() => {
+                if (this.state.checkboxStatus) {
+                    this.setState({checkboxStatus: false});
+                    this.field.remove('checkboxgroup');
+                } else {
+                    this.setState({checkboxStatus: true});
+                }
+
+            }}>{this.state.checkboxStatus ? 'delete' : 'restore'}</Button>
+        </div>);
+    }
+}
+
+ReactDOM.render(<App/>, mountNode);
+````
+
+````css
+.demo .next-btn {
+    margin-right: 5px;
+}
+````

package.json

@@ -72,6 +72,8 @@
     ]
   },
   "dependencies": {
+    "@alifd/field": "^1.1.6",
+    "@alifd/validate": "^1.1.3",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.3",
     "hoist-non-react-statics": "^2.1.0",