v1.6.0

1. 细节调整 2. 新增getInitialFormValue,getInitialValue方法
react-widget · Nov 13, 2019 · bf29ae4 · bf29ae4
1 parent 58f5ec3
commit bf29ae4
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -201,7 +201,9 @@ export default function NativeInput(props) {
 ```ts
 {
     getValue(name: string): any;
+    getInitialFormValue(): {};
     reset(cb: () => void): void;
+    getInitialValue(name: string): any;
     resetField(cb: () => void): void;
     setValue(
        name: string,
@@ -238,6 +240,7 @@ export default function NativeInput(props) {
 {
     getDOM(): any;
     getForm(): Form;
+    getInitialValue(): any;
     reset(cb: () => void): void;
     getValue(): any;
     setValue(value: any, callback: (formValue: {}) => void): void;

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.d7a93482.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.d7a93482.chunk.js"></script></body></html>
+<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.7ab493ed.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.7ab493ed.chunk.js"></script></body></html>
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -1,6 +1,6 @@
 {
-  "index.css": "static/css/index.d7a93482.chunk.css",
-  "index.js": "static/js/index.d7a93482.chunk.js",
+  "index.css": "static/css/index.7ab493ed.chunk.css",
+  "index.js": "static/js/index.7ab493ed.chunk.js",
   "runtime~index.js": "static/js/runtime~index.f795885b.js",
   "static/css/2.71a0092d.chunk.css": "static/css/2.71a0092d.chunk.css",
   "static/js/2.71a0092d.chunk.js": "static/js/2.71a0092d.chunk.js",

diff --git a/docs/static/css/index.d7a93482.chunk.css → docs/static/css/index.7ab493ed.chunk.css b/docs/static/css/index.d7a93482.chunk.css → docs/static/css/index.7ab493ed.chunk.css
diff --git a/docs/static/js/index.7ab493ed.chunk.js b/docs/static/js/index.7ab493ed.chunk.js
diff --git a/docs/static/js/index.d7a93482.chunk.js b/docs/static/js/index.d7a93482.chunk.js
diff --git a/esm/Form.js b/esm/Form.js
@@ -74,11 +74,16 @@ function (_React$Component) {
     }
   };
 
-  _proto.reset = function reset(cb) {
+  _proto.getInitialFormValue = function getInitialFormValue() {
     var initialFormValue = {};
     this.fields.forEach(function (field) {
       initialFormValue[field.props.name] = field._initialValue;
     });
+    return initialFormValue;
+  };
+
+  _proto.reset = function reset(cb) {
+    var initialFormValue = this.getInitialFormValue();
     this.fieldLocks = {};
     this.formLockId = 1; // eslint-disable-next-line
 
@@ -96,14 +101,19 @@ function (_React$Component) {
     this.setValues({}, cb);
   };
 
-  _proto.resetField = function resetField(name, cb) {
-    this.cleanError(name);
+  _proto.getInitialValue = function getInitialValue(name) {
     var initialValue;
     this.fields.forEach(function (field) {
       if (field.props.name === name) {
         initialValue = field._initialValue;
       }
     });
+    return initialValue;
+  };
+
+  _proto.resetField = function resetField(name, cb) {
+    this.cleanError(name);
+    var initialValue = this.getInitialValue(name);
     this.fieldLocks[name] = 1; // eslint-disable-next-line
 
     this.state.validatingFields[name] = false; // eslint-disable-next-line
@@ -130,9 +140,8 @@ function (_React$Component) {
         path2obj = _this$props.path2obj,
         onChange = _this$props.onChange;
     var formValue = this.state.formValue;
-
-    var nextFormValue = _extends({}, formValue);
-
+    var isControlled = "formValue" in this.props;
+    var nextFormValue = formValue;
     Object.keys(obj).forEach(function (name) {
       var value = obj[name];
 
@@ -143,7 +152,7 @@ function (_React$Component) {
       }
     });
 
-    if (!("formValue" in this.props)) {
+    if (!isControlled) {
       this.setState({
         formValue: nextFormValue
       });
@@ -174,17 +183,17 @@ function (_React$Component) {
     var _this$props2 = this.props,
         path2obj = _this$props2.path2obj,
         onChange = _this$props2.onChange;
-    var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
-
-    var nextFormValue = _extends({}, formValue);
+    var formValue = this.state.formValue;
+    var isControlled = "formValue" in this.props;
+    var nextFormValue = formValue;
 
     if (path2obj) {
       set(nextFormValue, name, value);
     } else {
       nextFormValue[name] = value;
     }
 
-    if (!("formValue" in this.props)) {
+    if (!isControlled) {
       this.setState({
         formValue: nextFormValue
       });

diff --git a/esm/FormItem.js b/esm/FormItem.js
@@ -30,16 +30,14 @@ function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "_validateTimer", null);
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (value, callback) {
-      var name = _this.props.name;
+      var oldValue = _this.getValue(); //是否有必要检测？
 
-      var oldValue = _this.getValue();
+
+      if (value === oldValue) {
+        return;
+      }
 
       _this.setValue(value, function (formValue) {
-        if (formValue[name]
-        /*newValue*/
-        === oldValue
-        /*oldValue*/
-        ) return;
         callback && callback();
 
         if (_this.hasValidateTrigger("change")) {
@@ -106,6 +104,12 @@ function (_React$Component) {
     return "validateDelay" in props ? props.validateDelay : validateDelay;
   };
 
+  _proto.getInitialValue = function getInitialValue() {
+    var name = this.props.name;
+    var form = this.getForm();
+    return form.getInitialValue(name);
+  };
+
   _proto.reset = function reset(cb) {
     var form = this.getForm();
     var name = this.props.name;
@@ -199,7 +203,7 @@ function (_React$Component) {
     var getInputProps = this.getFormProp("getInputProps", function () {
       return {};
     });
-    var customProps = getInputProps(this); //valueTrigger 	收集子节点的值的时机 待开发...
+    var customProps = getInputProps(this); //valueTrigger 	收集子节点的值的时机，暂不开发...
 
     return _extends({
       value: this.getValue()

diff --git a/esm/index.d.ts b/esm/index.d.ts
@@ -114,7 +114,9 @@ declare namespace ReactWidgetForm {
             value: any,
             callback: (formValue: {}) => void
         ): void;
+        getInitialFormValue(): {};
         reset(cb: () => void): void;
+        getInitialValue(name: string): any;
         resetField(cb: () => void): void;
         hasError(name: string): boolean;
         getError(name: string): any;
@@ -153,6 +155,7 @@ declare namespace ReactWidgetForm {
     export class FormItem extends React.Component<FormItemProps, {}> {
         getDOM(): any;
         getForm(): Form;
+        getInitialValue(): any;
         reset(cb: () => void): void;
         getValue(): any;
         setValue(value: any, callback: (formValue: {}) => void): void;

diff --git a/lib/Form.js b/lib/Form.js
@@ -86,11 +86,16 @@ function (_React$Component) {
     }
   };
 
-  _proto.reset = function reset(cb) {
+  _proto.getInitialFormValue = function getInitialFormValue() {
     var initialFormValue = {};
     this.fields.forEach(function (field) {
       initialFormValue[field.props.name] = field._initialValue;
     });
+    return initialFormValue;
+  };
+
+  _proto.reset = function reset(cb) {
+    var initialFormValue = this.getInitialFormValue();
     this.fieldLocks = {};
     this.formLockId = 1; // eslint-disable-next-line
 
@@ -108,14 +113,19 @@ function (_React$Component) {
     this.setValues({}, cb);
   };
 
-  _proto.resetField = function resetField(name, cb) {
-    this.cleanError(name);
+  _proto.getInitialValue = function getInitialValue(name) {
     var initialValue;
     this.fields.forEach(function (field) {
       if (field.props.name === name) {
         initialValue = field._initialValue;
       }
     });
+    return initialValue;
+  };
+
+  _proto.resetField = function resetField(name, cb) {
+    this.cleanError(name);
+    var initialValue = this.getInitialValue(name);
     this.fieldLocks[name] = 1; // eslint-disable-next-line
 
     this.state.validatingFields[name] = false; // eslint-disable-next-line
@@ -142,7 +152,8 @@ function (_React$Component) {
         path2obj = _this$props.path2obj,
         onChange = _this$props.onChange;
     var formValue = this.state.formValue;
-    var nextFormValue = (0, _extends7.default)({}, formValue);
+    var isControlled = "formValue" in this.props;
+    var nextFormValue = formValue;
     Object.keys(obj).forEach(function (name) {
       var value = obj[name];
 
@@ -153,7 +164,7 @@ function (_React$Component) {
       }
     });
 
-    if (!("formValue" in this.props)) {
+    if (!isControlled) {
       this.setState({
         formValue: nextFormValue
       });
@@ -184,17 +195,17 @@ function (_React$Component) {
     var _this$props2 = this.props,
         path2obj = _this$props2.path2obj,
         onChange = _this$props2.onChange;
-    var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
-
-    var nextFormValue = (0, _extends7.default)({}, formValue);
+    var formValue = this.state.formValue;
+    var isControlled = "formValue" in this.props;
+    var nextFormValue = formValue;
 
     if (path2obj) {
       (0, _set.default)(nextFormValue, name, value);
     } else {
       nextFormValue[name] = value;
     }
 
-    if (!("formValue" in this.props)) {
+    if (!isControlled) {
       this.setState({
         formValue: nextFormValue
       });

diff --git a/lib/FormItem.js b/lib/FormItem.js
@@ -44,16 +44,14 @@ function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_validateTimer", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (value, callback) {
-      var name = _this.props.name;
+      var oldValue = _this.getValue(); //是否有必要检测？
 
-      var oldValue = _this.getValue();
+
+      if (value === oldValue) {
+        return;
+      }
 
       _this.setValue(value, function (formValue) {
-        if (formValue[name]
-        /*newValue*/
-        === oldValue
-        /*oldValue*/
-        ) return;
         callback && callback();
 
         if (_this.hasValidateTrigger("change")) {
@@ -118,6 +116,12 @@ function (_React$Component) {
     return "validateDelay" in props ? props.validateDelay : validateDelay;
   };
 
+  _proto.getInitialValue = function getInitialValue() {
+    var name = this.props.name;
+    var form = this.getForm();
+    return form.getInitialValue(name);
+  };
+
   _proto.reset = function reset(cb) {
     var form = this.getForm();
     var name = this.props.name;
@@ -211,7 +215,7 @@ function (_React$Component) {
     var getInputProps = this.getFormProp("getInputProps", function () {
       return {};
     });
-    var customProps = getInputProps(this); //valueTrigger 	收集子节点的值的时机 待开发...
+    var customProps = getInputProps(this); //valueTrigger 	收集子节点的值的时机，暂不开发...
 
     return (0, _extends2.default)({
       value: this.getValue()

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -114,7 +114,9 @@ declare namespace ReactWidgetForm {
             value: any,
             callback: (formValue: {}) => void
         ): void;
+        getInitialFormValue(): {};
         reset(cb: () => void): void;
+        getInitialValue(name: string): any;
         resetField(cb: () => void): void;
         hasError(name: string): boolean;
         getError(name: string): any;
@@ -153,6 +155,7 @@ declare namespace ReactWidgetForm {
     export class FormItem extends React.Component<FormItemProps, {}> {
         getDOM(): any;
         getForm(): Form;
+        getInitialValue(): any;
         reset(cb: () => void): void;
         getValue(): any;
         setValue(value: any, callback: (formValue: {}) => void): void;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-widget-form",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "description": "",
     "main": "lib/index.js",
     "module": "esm/index.js",