diff --git a/README.md b/README.md index ce48a25..611075e 100644 --- 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 index 9277247..b52944d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Layout
\ No newline at end of file +Layout
\ No newline at end of file diff --git a/docs/manifest.json b/docs/manifest.json index 047fba8..0f54de4 100644 --- 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 b/docs/static/css/index.7ab493ed.chunk.css similarity index 100% rename from docs/static/css/index.d7a93482.chunk.css rename to 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 new file mode 100644 index 0000000..1b58ed6 --- /dev/null +++ b/docs/static/js/index.7ab493ed.chunk.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{102:function(e,t,n){},103:function(e,t,n){},104:function(e,t,n){},150:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),i=n(57),o=n.n(i),l=(n(99),n(100),n(101),n(102),n(103),n(104),n(1)),s=n.n(l),u=n(9),c=n.n(u),f=n(31),m=n.n(f),p=n(58),h=n.n(p),d=a.a.createContext({});function g(){return(g=Object.assign||function(e){for(var t=1;t0?(this._validateTimer&&clearTimeout(this._validateTimer),this._validateTimer=setTimeout((function(){t.validate(null,e)}),n)):this.validate(null,e)},i.normalizeChildrenProps=function(){var e=this,t=this.props,n=t.normalize,r=t.name,a=t.onChange,i=t.onFocus,o=t.onBlur,l=this.getForm(),s=this.getFormProp("normalizeFieldValue");s&&!n&&(n=s.bind(null,r));var u=this.getFormProp("getInputProps",(function(){return{}}))(this);return C({value:this.getValue()},u,{onChange:function(t){var r=l.getFormValue(),i=e.getValue();n&&(t=n(t,i,r)),e.handleChange(t,(function(){a&&a(t),u.onChange&&u.onChange(t)}))},onFocus:function(t){e.handleFocus((function(){i&&i(t),u.onFocus&&u.onFocus(t)}))},onBlur:function(t){e.handleBlur((function(){o&&o(t),u.onBlur&&u.onBlur(t)}))}})},i.normalizeChildren=function(){return a.a.cloneElement(a.a.Children.only(this.props.children),this.normalizeChildrenProps())},i.getFormProp=function(e,t){return this.getForm().props[e]||t},i.getProp=function(e,t){var n=this.getForm().props,r=this.props;return e in r?r[e]:n[e]||t},i.getFormItemContext=function(){return{formItem:this}},i.render=function(){var e,t,n=this,r=this.props,i=(r.name,r.label),o=r.showRequiredMark,l=r.required,s=r.className,u=r.prefixCls,f=r.style,m=r.renderExtra,p=r.children,h=this.getProp("inline"),d=this.getProp("labelPosition"),g=this.getProp("labelAlign"),v=this.getFormProp("renderControlExtra"),b=this.hasError(),E=this.isValidating(),y="function"===typeof p?p(this.normalizeChildrenProps(),this):this.normalizeChildren();return a.a.createElement(F.Provider,{value:this.getFormItemContext()},a.a.createElement("div",{style:f,ref:this.saveDOM,className:c()(u,(e={},e[u+"-inline"]=h,e[u+"-"+d]=d,e["has-error"]=b,e["is-validating"]=E,e["is-required"]=l||o,e[""+s]=s,e))},i&&a.a.createElement("label",{htmlFor:this.getProp("labelFor"),className:c()((t={},t[u+"-label"]=!0,t[u+"-label-left"]="left"===g&&"left"===d,t),this.getProp("labelClassName")),style:C({width:this.getProp("labelWidth")},this.getProp("labelStyle",{}))},i),a.a.createElement("div",{className:c()(u+"-control",this.getProp("controlClassName")),style:this.getProp("controlStyle",{})},y,m?m(n):v?v(n):null)))},r}(a.a.Component);P(w,"contextType",d),w.propTypes={children:s.a.oneOfType([s.a.func,s.a.node]).isRequired,name:s.a.string,style:s.a.object,className:s.a.string,label:s.a.node,labelFor:s.a.oneOfType([s.a.string,s.a.number]),labelWidth:s.a.oneOfType([s.a.string,s.a.number]),labelStyle:s.a.object,labelClassName:s.a.string,labelPosition:s.a.oneOf(["top","left"]),labelAlign:s.a.oneOf(["left","right"]),controlStyle:s.a.object,controlClassName:s.a.string,validator:s.a.oneOfType([s.a.func,s.a.array]),showRequiredMark:s.a.bool,required:s.a.bool,requiredMessage:s.a.string,clearErrorOnFocus:s.a.bool,normalize:s.a.func,renderExtra:s.a.func,validateDelay:s.a.number,validateTrigger:s.a.oneOf(["blur","change"]),inline:s.a.bool},w.defaultProps={prefixCls:"nex-form-item",showRequiredMark:!1};var _=w;function j(){return(j=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["component","value","inputRef","onChange"]);return a.a.createElement(n,j({ref:i,onChange:function(e){var t=e.target.value;o&&o(t,e)},value:r},l))}V.Item=_,V.NativeInput=T,V.Context=d,V.ItemContext=F;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(){return(D=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["type","component","children"]);return a.a.createElement(_,D({},l,{style:{marginBottom:24}}),a.a.createElement(T,{component:i,type:n,children:o}))}function A(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function N(){return(N=Object.assign||function(e){for(var t=1;t0?(this._validateTimer&&clearTimeout(this._validateTimer),this._validateTimer=setTimeout((function(){t.validate(null,e)}),n)):this.validate(null,e)},i.normalizeChildrenProps=function(){var e=this,t=this.props,n=t.normalize,r=t.name,a=t.onChange,i=t.onFocus,o=t.onBlur,l=this.getForm(),s=this.getFormProp("normalizeFieldValue");s&&!n&&(n=s.bind(null,r));var u=this.getFormProp("getInputProps",(function(){return{}}))(this);return C({value:this.getValue()},u,{onChange:function(t){var r=l.getFormValue(),i=e.getValue();n&&(t=n(t,i,r)),e.handleChange(t,(function(){a&&a(t),u.onChange&&u.onChange(t)}))},onFocus:function(t){e.handleFocus((function(){i&&i(t),u.onFocus&&u.onFocus(t)}))},onBlur:function(t){e.handleBlur((function(){o&&o(t),u.onBlur&&u.onBlur(t)}))}})},i.normalizeChildren=function(){return a.a.cloneElement(a.a.Children.only(this.props.children),this.normalizeChildrenProps())},i.getFormProp=function(e,t){return this.getForm().props[e]||t},i.getProp=function(e,t){var n=this.getForm().props,r=this.props;return e in r?r[e]:n[e]||t},i.getFormItemContext=function(){return{formItem:this}},i.render=function(){var e,t,n=this,r=this.props,i=(r.name,r.label),o=r.showRequiredMark,l=r.required,s=r.className,u=r.prefixCls,f=r.style,m=r.renderExtra,p=r.children,h=this.getProp("inline"),d=this.getProp("labelPosition"),v=this.getProp("labelAlign"),g=this.getFormProp("renderControlExtra"),b=this.hasError(),E=this.isValidating(),y="function"===typeof p?p(this.normalizeChildrenProps(),this):this.normalizeChildren();return a.a.createElement(F.Provider,{value:this.getFormItemContext()},a.a.createElement("div",{style:f,ref:this.saveDOM,className:c()(u,(e={},e[u+"-inline"]=h,e[u+"-"+d]=d,e["has-error"]=b,e["is-validating"]=E,e["is-required"]=l||o,e[""+s]=s,e))},i&&a.a.createElement("label",{htmlFor:this.getProp("labelFor"),className:c()((t={},t[u+"-label"]=!0,t[u+"-label-left"]="left"===v&&"left"===d,t),this.getProp("labelClassName")),style:C({width:this.getProp("labelWidth")},this.getProp("labelStyle",{}))},i),a.a.createElement("div",{className:c()(u+"-control",this.getProp("controlClassName")),style:this.getProp("controlStyle",{})},y,m?m(n):g?g(n):null)))},r}(a.a.Component);P(w,"contextType",d),w.propTypes={children:s.a.oneOfType([s.a.func,s.a.node]).isRequired,name:s.a.string,style:s.a.object,className:s.a.string,label:s.a.node,labelFor:s.a.oneOfType([s.a.string,s.a.number]),labelWidth:s.a.oneOfType([s.a.string,s.a.number]),labelStyle:s.a.object,labelClassName:s.a.string,labelPosition:s.a.oneOf(["top","left"]),labelAlign:s.a.oneOf(["left","right"]),controlStyle:s.a.object,controlClassName:s.a.string,validator:s.a.oneOfType([s.a.func,s.a.array]),showRequiredMark:s.a.bool,required:s.a.bool,requiredMessage:s.a.string,clearErrorOnFocus:s.a.bool,normalize:s.a.func,renderExtra:s.a.func,validateDelay:s.a.number,validateTrigger:s.a.oneOf(["blur","change"]),inline:s.a.bool},w.defaultProps={prefixCls:"nex-form-item",showRequiredMark:!1};var _=w;function j(){return(j=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["component","value","inputRef","onChange"]);return a.a.createElement(n,j({ref:i,onChange:function(e){var t=e.target.value;o&&o(t,e)},value:r},l))}V.Item=_,V.NativeInput=T,V.Context=d,V.ItemContext=F;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function D(){return(D=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,["type","component","children"]);return a.a.createElement(_,D({},l,{style:{marginBottom:24}}),a.a.createElement(T,{component:i,type:n,children:o}))}function A(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function N(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function q(){return(q=Object.assign||function(e){for(var t=1;t 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 { 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 index 42f688c..0dac69e 100644 --- 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,9 +195,9 @@ 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); @@ -194,7 +205,7 @@ function (_React$Component) { nextFormValue[name] = value; } - if (!("formValue" in this.props)) { + if (!isControlled) { this.setState({ formValue: nextFormValue }); diff --git a/lib/FormItem.js b/lib/FormItem.js index 45ee37a..ca58b62 100644 --- 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 index 2372a45..a0e9a18 100644 --- 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 { 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 index f98ab5a..85eaa71 100644 --- 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", diff --git a/src/Form.js b/src/Form.js index 12a636b..a8ac7f5 100644 --- a/src/Form.js +++ b/src/Form.js @@ -46,13 +46,19 @@ class Form extends React.Component { } } - reset(cb) { + getInitialFormValue() { const initialFormValue = {}; this.fields.forEach(field => { initialFormValue[field.props.name] = field._initialValue; }); + return initialFormValue; + } + + reset(cb) { + const initialFormValue = this.getInitialFormValue(); + this.fieldLocks = {}; this.formLockId = 1; // eslint-disable-next-line @@ -72,9 +78,7 @@ class Form extends React.Component { this.setValues({}, cb); } - resetField(name, cb) { - this.cleanError(name); - + getInitialValue(name) { let initialValue; this.fields.forEach(field => { @@ -83,6 +87,14 @@ class Form extends React.Component { } }); + return initialValue; + } + + resetField(name, cb) { + this.cleanError(name); + + let initialValue = this.getInitialValue(name); + this.fieldLocks[name] = 1; // eslint-disable-next-line this.state.validatingFields[name] = false; @@ -105,9 +117,9 @@ class Form extends React.Component { const { path2obj, onChange } = this.props; const formValue = this.state.formValue; - const nextFormValue = { - ...formValue - }; + const isControlled = "formValue" in this.props; + + const nextFormValue = formValue; Object.keys(obj).forEach(name => { const value = obj[name]; @@ -118,7 +130,7 @@ class Form extends React.Component { } }); - if (!("formValue" in this.props)) { + if (!isControlled) { this.setState({ formValue: nextFormValue }); @@ -153,10 +165,9 @@ class Form extends React.Component { const { path2obj, onChange } = this.props; const formValue = this.state.formValue; - // TODO: 后面再考虑下特殊场景 - const nextFormValue = { - ...formValue - }; + const isControlled = "formValue" in this.props; + + const nextFormValue = formValue; if (path2obj) { set(nextFormValue, name, value); @@ -164,7 +175,7 @@ class Form extends React.Component { nextFormValue[name] = value; } - if (!("formValue" in this.props)) { + if (!isControlled) { this.setState({ formValue: nextFormValue }); diff --git a/src/FormItem.js b/src/FormItem.js index 62b186d..bf23e53 100644 --- a/src/FormItem.js +++ b/src/FormItem.js @@ -49,6 +49,13 @@ class FormItem extends React.Component { return "validateDelay" in props ? props.validateDelay : validateDelay; } + getInitialValue() { + const { name } = this.props; + const form = this.getForm(); + + return form.getInitialValue(name); + } + reset(cb) { const form = this.getForm(); const { name } = this.props; @@ -125,12 +132,14 @@ class FormItem extends React.Component { } handleChange = (value, callback) => { - const { name } = this.props; const oldValue = this.getValue(); - this.setValue(value, formValue => { - if (formValue[name] /*newValue*/ === oldValue /*oldValue*/) return; + //是否有必要检测？ + if (value === oldValue) { + return; + } + this.setValue(value, formValue => { callback && callback(); if (this.hasValidateTrigger("change")) { @@ -170,7 +179,7 @@ class FormItem extends React.Component { const getInputProps = this.getFormProp("getInputProps", () => ({})); const customProps = getInputProps(this); - //valueTrigger 收集子节点的值的时机 待开发... + //valueTrigger 收集子节点的值的时机，暂不开发... return { value: this.getValue(), ...customProps, diff --git a/src/index.d.ts b/src/index.d.ts index 2372a45..a0e9a18 100644 --- a/src/index.d.ts +++ b/src/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 { getDOM(): any; getForm(): Form; + getInitialValue(): any; reset(cb: () => void): void; getValue(): any; setValue(value: any, callback: (formValue: {}) => void): void;