From b45428feef499b6af056b8852f35cc3d3cc31c27 Mon Sep 17 00:00:00 2001 From: qiqiboy Date: Mon, 4 Sep 2023 12:26:02 +0800 Subject: [PATCH] fix: fix duplicated field $state --- dist/react-formutil.cjs.development.js | 12 ++++-------- dist/react-formutil.cjs.production.js | 2 +- dist/react-formutil.esm.development.js | 12 ++++-------- dist/react-formutil.esm.production.js | 2 +- dist/react-formutil.umd.development.js | 12 ++++-------- dist/react-formutil.umd.production.js | 2 +- package.json | 4 ++-- src/Field.js | 4 +--- src/Form.js | 2 ++ src/fieldHelper.js | 2 -- src/hooks/useField.js | 10 +++------- tsconfig.json | 1 - 12 files changed, 23 insertions(+), 42 deletions(-) diff --git a/dist/react-formutil.cjs.development.js b/dist/react-formutil.cjs.development.js index 2902580..3dd66fb 100644 --- a/dist/react-formutil.cjs.development.js +++ b/dist/react-formutil.cjs.development.js @@ -674,6 +674,7 @@ var Form = /*#__PURE__*/function (_Component) { warning__default['default']($curRegistered.$$reserved, "The Field with a name '".concat(name, "' has been registered!")); $handler.$$reset($curRegistered.$getState()); hasDup = delete $$regDuplications[name]; + _this.$$formShouldUpdateFields[name] = true; }); if (hasDup) { _this.$render(); @@ -1526,7 +1527,6 @@ function renderField($fieldutil, props) { function createHandler($this, owner) { var $fieldHandler = { $$FIELD_UUID: $this.$$FIELD_UUID, - $name: $this.props.name, $$reset: $$reset, $$merge: $$merge, $$detectChange: $$detectChange, @@ -1909,8 +1909,7 @@ var Field = /*#__PURE__*/function (_Component) { } _this2.$registered = (_this2.$formContext.$$registers || {})[_this2.$fieldHandler.$name] || _this2.$fieldHandler; if (shouldInitial) { - var initialState = _this2.$registered.$getState(); - _this2.$fieldHandler.$$reset(initialState); + _this2.$fieldHandler.$$reset(); _this2.$fieldHandler.$validate(); } return _this2._render(); @@ -2818,17 +2817,14 @@ function useField(name) { var _useState = useState(function () { $this.$$FIELD_UUID = GET_FIELD_UUID(); $this.$fieldHandler = $registered = createHandler($this); + $this.$fieldHandler.$$reset(); + $this.$fieldHandler.$validate(); }), _useState2 = _slicedToArray(_useState, 2), setState = _useState2[1]; if (!$registered) { $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler; } - useState(function () { - var initialState = $registered.$getState(); - $this.$fieldHandler.$$reset(initialState); - $this.$fieldHandler.$validate(); - }); _useEffect(function () { var $state = $this.$state; if ($this.isMounting) { diff --git a/dist/react-formutil.cjs.production.js b/dist/react-formutil.cjs.production.js index a67decd..ea582a4 100644 --- a/dist/react-formutil.cjs.production.js +++ b/dist/react-formutil.cjs.production.js @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var t=require("warning");var r=require("react-dom");var n=require("react-is");var a=require("hoist-non-react-statics");var i=require("react-fast-compare");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var u=o(e);var s=o(t);var l=o(n);var f=o(a);var c=o(i);function $(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}function d(e,t){return t={exports:{}},e(t,t.exports),t.exports}var p=d((function(e){function t(r){"@babel/helpers - typeof";return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=true,e.exports["default"]=e.exports,t(r)}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(p);var v=d((function(e){var t=p["default"];function r(e,r){if(t(e)!=="object"||e===null)return e;var n=e[Symbol.toPrimitive];if(n!==undefined){var a=n.call(e,r||"default");if(t(a)!=="object")return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(v);var h=d((function(e){var t=p["default"];function r(e){var r=v(e,"string");return t(r)==="symbol"?r:String(r)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(h);var m=d((function(e){function t(e,t,r){t=h(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var g=$(m);var y=d((function(e){function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(e){for(var r=1;re.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),a=1;a-1}var fe=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,J)}catch(e){return t}};function ce(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(l[v])?V(l[v]):b({},l[v]);break;default:l[v]=i;break}}}}catch(e){s["default"](false,"The name '%s' of Field seems is not a legal expression.",a)}if(t.length>2){return n}}function $e(e,t){var r=t.split(W).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,a=r.length;n should always return None(null,undefined) or an object contains error message of Field.");return t.$render(r)}return t.$$setStates(e||{},(function(e,t){var r=t.$getState(),n=r.$error,a=n===void 0?{}:n;if(e){return{$error:b(b({},a),{},g({},xe,e))}}if(a[xe]){delete a[xe];return{$error:a}}}),r,true)};t.$getField=function(e){var r=t.$$getRegister(e);s["default"](!e||r,"$getField('".concat(e,"') fail to find the matched Field. Maybe it has been unmounted."));s["default"](e,"You should pass a name of the mounted Field to $getField().");if(r){var n;return(n=r.$new)===null||n===void 0?void 0:n.call(r)}};t.$$onChange=function(e,r,n){return t.$setStates(g({},e,r),n)};t.$$setStates=function(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var n=arguments.length>1?arguments[1]:undefined;var a=arguments.length>2?arguments[2]:undefined;var i=arguments.length>3?arguments[3]:undefined;var o=t.$$deepParseObject(e);var u=[];he(t.$$registers,(function(e,r){var a=$e(o,r);if(i||a){var s=e.$getState();var l=n(a&&a.data,e);if(l){var f=e.$$merge(l),c=f.$value;u.push([e,l]);if("$value"in l||"$viewValue"in l){var $=pe(t.$$fieldChangedQueue,(function(e){return e.name===r}));if($){if(!("$prevValue"in $)){$.$dirty=true;$.$prevValue=$.$newValue}$.$newValue=c}else{t.$$fieldChangedQueue.push({name:r,$newValue:c,$prevValue:s.$value})}}t.$$formShouldUpdateFields[r]=true}}}));return r.unstable_batchedUpdates((function(){u.forEach((function(e){var t=j(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(a)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(oe(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),a=0;a1&&arguments[1]!==undefined?arguments[1]:{};he(t,(function(e,t){return ce(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){de(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){de(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){de(this.props.$ref,null)}},{key:"_render",value:function t(){var r=this.$formutil;var n=this.props,a=n.children,i=n.render,o=n.component;if(o){return e.createElement(o,{$formutil:r})}if(Z(i)){return i(r)}if(Z(a)){return a(r)}return e.Children.map(a,(function(t){return t&&ae(t.type)?e.cloneElement(t,{$formutil:r}):t}))}},{key:"render",value:function e(){var t=this;var r=this.props.$processer;var n=Object.keys(this.$$registers).map((function(e){return{path:e,$state:t.$$registers[e].$getState()}}));var a=this.$$formShouldUpdateAll;var i=this.$formutil||{};var o=n.some((function(e){var t=e.$state;return t.$invalid}));var s=n.some((function(e){var t=e.$state;return t.$dirty}));var l=n.some((function(e){var t=e.$state;return t.$touched}));var f=n.some((function(e){var t=e.$state;return t.$focused}));var c=this.$$formPending||n.some((function(e){var t=e.$state;return t.$pending}));var $=a?{}:b({},i.$pureParams);var d=a?{}:b({},i.$states);var p=a?{}:b({},i.$errors);var v=a?{}:b({},i.$dirts);var h=a?{}:b({},i.$touches);var m=a?{}:b({},i.$focuses);var g=a?{}:b({},i.$pendings);var y=a?{}:b({},i.$weakStates);var x=a?{}:b({},i.$weakParams);var w=a?{}:b({},i.$weakErrors);var _=a?{}:b({},i.$weakDirts);var F=a?{}:b({},i.$weakFocuses);var C=a?{}:b({},i.$weakTouches);var P=a?{}:b({},i.$weakPendings);for(var V=0,S=n.length;V=0)continue;r[a]=e[a]}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(Ce);var Pe=d((function(e){function t(e,t){if(e==null)return{};var r=Ce(e,t);var n,a;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var Ve=$(Pe);var Se=["__forwardRef__"],ke=["component"];var Oe=["render","component","children","$defaultValues","$defaultStates","$onFormChange","$validator","$processer","$ref"];function Ee(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(e){H(a,e);var n=Q(a);function a(){var e;A(this,a);for(var r=arguments.length,i=new Array(r),o=0;o1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var a=Object.assign({},(Ae(e.$state.$error),e.$state.$error));if(Ne(r)){a[t]=r||t;Ue(r,t,e.props.name)}else{delete a[t]}return v(a,n)}function m(t,r){return e.$setState({$pending:t},r)}function g(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function y(t){var r=Object.assign({},(Ae(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,a=n.$parser,i=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var o=function e(t){return r.$viewValue=t};r.$value=a?a(r.$viewValue,o):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=i?i(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=b(b({},e.$state),r);return s()}return r}var Be=function(e){H(r,e);var t=Q(r);function r(){var e;A(this,r);for(var n=arguments.length,a=new Array(n),i=0;i with the name '".concat(t,"' must be used underneath a
component or withForm() HOC, otherwise it's isolated."));s["default"](t,"You should assign a name to , otherwise it will be isolated!");if(r.$$register){r.$$register(t,this.$fieldHandler)}this.$prevState=this.$state;de(this.props.$ref,this.$fieldutil)}},{key:"componentWillUnmount",value:function e(){if(this.$formContext.$$unregister){this.$formContext.$$unregister(this.props.name,this.$fieldHandler,this.props.$reserveOnUnmount)}this.isMounting=false;de(this.props.$ref,null)}},{key:"componentDidUpdate",value:function e(t){var r=this.props.name;if(r!==t.name){if(this.$formContext.$$register){this.$formContext.$$register(r,this.$fieldHandler,t.name)}}de(this.props.$ref,this.$fieldutil);if(this.$state.$value!==this.$prevState.$value){if(!(r in(this.$formContext.$$registers||{}))){this.$registered.$$triggerChange({$newValue:this.$state.$value,$prevValue:this.$prevState.$value})}}this.$prevState=this.$state}},{key:"shouldComponentUpdate",value:function e(t){var r=t.$memo;return!r||!be(this.$registered.$getState(),this.$prevState)||!(Array.isArray(r)?c["default"](r,this.props.$memo):c["default"](this.props,t))}},{key:"_render",value:function e(){var t=this.$fieldutil=b(b(b({$name:this.props.name},this.$registered.$getState()),this.$registered),{},{$$formutil:this.$formContext.$formutil});return He(t,this.props)}},{key:"render",value:function e(){var t=this;this.shouldRendered=true;return u["default"].createElement(G.Consumer,null,(function(e){var r=!t.$formContext;t.$formContext=e();if(!t.$fieldHandler){t.$fieldHandler=Le(t,t)}t.$registered=(t.$formContext.$$registers||{})[t.$fieldHandler.$name]||t.$fieldHandler;if(r){var n=t.$registered.$getState();t.$fieldHandler.$$reset(n);t.$fieldHandler.$validate()}return t._render()}))}}]);return r}(e.Component);Be.displayName=Te;var qe=["__forwardRef__"],Ye=["component"];var Qe=["name","$defaultValue","$defaultState","$onFieldChange","$validators","$asyncValidators","$validateLazy","$memo","$reserveOnUnmount","$ref","$parser","$formatter","render","component","children"];function Ge(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(e){H(a,e);var n=Q(a);function a(){var e;A(this,a);for(var r=arguments.length,i=new Array(r),o=0;o.")}},{key:"render",value:function e(){var t=this.props,r=t.$value,n=t.onChange,a=t.onFocus,i=t.onBlur,o=Ve(t,Je);return u["default"].createElement(et,null,(function(e){var t=e();var s=t.type,l=t.name;var f=s==="radio"?{checked:t.value===r,onChange:function e(a){t.onChange(r,a);n&&n(a)}}:s==="checkbox"?{checked:t.value.indexOf(r)>-1,onChange:function e(a){t.onChange(a.target.checked?t.value.concat(r):t.value.filter((function(e){return e!==r})),a);n&&n(a)}}:{value:t.value,onChange:function e(r){t.onChange(r);n&&n(r)}};return u["default"].createElement("input",Object.assign({name:l},o,f,{type:s,onFocus:function e(r){t.onFocus(r);a&&a(r)},onBlur:function e(r){t.onBlur(r);i&&i(r)}}))}))}}]);return r}(e.Component);rt.displayName="React.Formutil.EasyField.Group.Option";var nt=function(e){H(r,e);var t=Q(r);function r(){A(this,r);return t.apply(this,arguments)}D(r,[{key:"componentDidMount",value:function e(){s["default"](false,'The "Field" property in EasyField\'s children-props has been deprecated. Please use "GroupOption" instead.')}},{key:"render",value:function e(){return u["default"].createElement(rt,this.props)}}]);return r}(e.Component);nt.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var at=u["default"].Frament||"div";var it=function(e){H(r,e);var t=Q(r);function r(e){var n;A(this,r);n=t.call(this,e);n.id=0;n.latestValue=n.props.value;n.$formutil=void 0;n.FieldValidators={required:function e(t){return t!==null}};n.$onFormChange=function(e){e.$onValidates((function(e){var t=e.$invalid,r=e.$params;if(t){if(n.props.value.length){n.props.onChange(n.latestValue=[])}}else if(!c["default"](n.props.value,r.list)){n.props.onChange(n.latestValue=r.list)}}))};n.swap=function(e,t,r){return n.$setState((function(r){var n=r.items;var a=[n[e],n[t]];n[t]=a[0];n[e]=a[1];return n}),r)};n.insert=function(){var e,t,r;for(var a=arguments.length,i=new Array(a),o=0;o=t*1}],["max",function(e,t){return ee(e)||e*1<=t*1}],["min",function(e,t){return ee(e)||e*1>=t*1}],["pattern",function(e,t){return ee(e)||t.test(e)}],["enum",function(e,t){return ee(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=j(t,2),n=r[0],a=r[1];e[n]=function e(t,r,i){var o=i.validMessage,u=o===void 0?{}:o;return a.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var ft="React.Formutil.EasyField";var ct={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function $t(e,t,r){var n;var a=t.valuePropName,i=t.changePropName,o=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,l=t.passUtil;var f=function e(t){return t&&t.target?t.target[a]:t};var c=b(b({},r),{},(n={},g(n,a,e.$viewValue),g(n,i,(function(r){var n;for(var a=arguments.length,o=new Array(a>1?a-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var e=u["default"].useContext;var t=e(G);return t()}function gt(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!u["default"].useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var r=u["default"].useState,n=u["default"].useLayoutEffect,a=u["default"].useEffect,i=u["default"].useRef;var o=typeof window==="undefined"?a:n;var l;if(e){if(typeof e==="string"){l=e;t.name=l}else{t=e;l=t.name}}var f=mt();var c=i({}).current;var $=i([]);var d;c.$formContext=f;c.props=t;c.$setState=m;c.shouldRendered=true;var p=r((function(){c.$$FIELD_UUID=Ie();c.$fieldHandler=d=Le(c)})),v=j(p,2),h=v[1];if(!d){d=(f.$$registers||{})[c.$fieldHandler.$name]||c.$fieldHandler}r((function(){var e=d.$getState();c.$fieldHandler.$$reset(e);c.$fieldHandler.$validate()}));o((function(){var e=c.$state;if(c.isMounting){if(!(l in(f.$$registers||{}))){d.$$triggerChange({$newValue:e.$value,$prevValue:c.$prevState.$value})}}c.$prevState=e}),[c.$state.$value]);o((function(){c.isMounting=true;s["default"](!l||f.$formutil,"You should enusre that the useField() with the name '".concat(l,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));s["default"](l,"You should pass a name argument to useField(), otherwise it will be isolated!");return function(){c.isMounting=false;de(t.$ref,null)}}),[]);o((function(){if(f.$$register){f.$$register(l,c.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(l,c.$fieldHandler,!c.isMounting&&t.$reserveOnUnmount)}}}),[l]);o((function(){de(t.$ref,c.$fieldutil)}));o((function(){if($.current.length>0){var e=V($.current);$.current.length=0;while(e.length){e.pop()(c.$fieldutil)}}}));function m(e,t){return new Promise((function(r){var n=function e(){return r(oe(t,c.$fieldutil))};if(c.isMounting){if(l in(f.$$registers||{})){c.shouldRendered=false;f.$$onChange(l,e,n);if(!c.shouldRendered){h({})}}else{d.$$merge(e);d.$$detectChange(e);h({});$.current.push(n)}}else{d.$$merge(e);n()}}))}return c.$fieldutil=b(b(b({$name:l},d.$getState()),d),{},{$$formutil:f.$formutil})}function yt(){var e=mt(),t=e.$formutil;return t}function bt(e){e=b(b(b({},ct),e),{},{children:null});var t=dt(e),r=t.fieldProps,n=t.childProps;var a=gt(r);return $t(a,r,n)}exports.EasyField=vt;exports.Field=Be;exports.Form=Fe;exports.connect=ht;exports.formContext=G;exports.useField=gt;exports.useForm=yt;exports.useHandler=bt;exports.withField=ze;exports.withForm=je; +"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var t=require("warning");var r=require("react-dom");var n=require("react-is");var a=require("hoist-non-react-statics");var i=require("react-fast-compare");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var u=o(e);var s=o(t);var l=o(n);var f=o(a);var c=o(i);function $(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}function d(e,t){return t={exports:{}},e(t,t.exports),t.exports}var p=d((function(e){function t(r){"@babel/helpers - typeof";return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=true,e.exports["default"]=e.exports,t(r)}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(p);var v=d((function(e){var t=p["default"];function r(e,r){if(t(e)!=="object"||e===null)return e;var n=e[Symbol.toPrimitive];if(n!==undefined){var a=n.call(e,r||"default");if(t(a)!=="object")return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(v);var h=d((function(e){var t=p["default"];function r(e){var r=v(e,"string");return t(r)==="symbol"?r:String(r)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(h);var m=d((function(e){function t(e,t,r){t=h(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var g=$(m);var y=d((function(e){function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(e){for(var r=1;re.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),a=1;a-1}var fe=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,J)}catch(e){return t}};function ce(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(l[v])?V(l[v]):b({},l[v]);break;default:l[v]=i;break}}}}catch(e){s["default"](false,"The name '%s' of Field seems is not a legal expression.",a)}if(t.length>2){return n}}function $e(e,t){var r=t.split(W).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,a=r.length;n should always return None(null,undefined) or an object contains error message of Field.");return t.$render(r)}return t.$$setStates(e||{},(function(e,t){var r=t.$getState(),n=r.$error,a=n===void 0?{}:n;if(e){return{$error:b(b({},a),{},g({},xe,e))}}if(a[xe]){delete a[xe];return{$error:a}}}),r,true)};t.$getField=function(e){var r=t.$$getRegister(e);s["default"](!e||r,"$getField('".concat(e,"') fail to find the matched Field. Maybe it has been unmounted."));s["default"](e,"You should pass a name of the mounted Field to $getField().");if(r){var n;return(n=r.$new)===null||n===void 0?void 0:n.call(r)}};t.$$onChange=function(e,r,n){return t.$setStates(g({},e,r),n)};t.$$setStates=function(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var n=arguments.length>1?arguments[1]:undefined;var a=arguments.length>2?arguments[2]:undefined;var i=arguments.length>3?arguments[3]:undefined;var o=t.$$deepParseObject(e);var u=[];he(t.$$registers,(function(e,r){var a=$e(o,r);if(i||a){var s=e.$getState();var l=n(a&&a.data,e);if(l){var f=e.$$merge(l),c=f.$value;u.push([e,l]);if("$value"in l||"$viewValue"in l){var $=pe(t.$$fieldChangedQueue,(function(e){return e.name===r}));if($){if(!("$prevValue"in $)){$.$dirty=true;$.$prevValue=$.$newValue}$.$newValue=c}else{t.$$fieldChangedQueue.push({name:r,$newValue:c,$prevValue:s.$value})}}t.$$formShouldUpdateFields[r]=true}}}));return r.unstable_batchedUpdates((function(){u.forEach((function(e){var t=j(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(a)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(oe(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),a=0;a1&&arguments[1]!==undefined?arguments[1]:{};he(t,(function(e,t){return ce(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){de(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){de(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){de(this.props.$ref,null)}},{key:"_render",value:function t(){var r=this.$formutil;var n=this.props,a=n.children,i=n.render,o=n.component;if(o){return e.createElement(o,{$formutil:r})}if(Z(i)){return i(r)}if(Z(a)){return a(r)}return e.Children.map(a,(function(t){return t&&ae(t.type)?e.cloneElement(t,{$formutil:r}):t}))}},{key:"render",value:function e(){var t=this;var r=this.props.$processer;var n=Object.keys(this.$$registers).map((function(e){return{path:e,$state:t.$$registers[e].$getState()}}));var a=this.$$formShouldUpdateAll;var i=this.$formutil||{};var o=n.some((function(e){var t=e.$state;return t.$invalid}));var s=n.some((function(e){var t=e.$state;return t.$dirty}));var l=n.some((function(e){var t=e.$state;return t.$touched}));var f=n.some((function(e){var t=e.$state;return t.$focused}));var c=this.$$formPending||n.some((function(e){var t=e.$state;return t.$pending}));var $=a?{}:b({},i.$pureParams);var d=a?{}:b({},i.$states);var p=a?{}:b({},i.$errors);var v=a?{}:b({},i.$dirts);var h=a?{}:b({},i.$touches);var m=a?{}:b({},i.$focuses);var g=a?{}:b({},i.$pendings);var y=a?{}:b({},i.$weakStates);var x=a?{}:b({},i.$weakParams);var w=a?{}:b({},i.$weakErrors);var _=a?{}:b({},i.$weakDirts);var F=a?{}:b({},i.$weakFocuses);var C=a?{}:b({},i.$weakTouches);var P=a?{}:b({},i.$weakPendings);for(var V=0,S=n.length;V=0)continue;r[a]=e[a]}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));$(Ce);var Pe=d((function(e){function t(e,t){if(e==null)return{};var r=Ce(e,t);var n,a;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var Ve=$(Pe);var Se=["__forwardRef__"],ke=["component"];var Oe=["render","component","children","$defaultValues","$defaultStates","$onFormChange","$validator","$processer","$ref"];function Ee(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(e){H(a,e);var n=Q(a);function a(){var e;A(this,a);for(var r=arguments.length,i=new Array(r),o=0;o1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var a=Object.assign({},(Ae(e.$state.$error),e.$state.$error));if(Ne(r)){a[t]=r||t;Ue(r,t,e.props.name)}else{delete a[t]}return v(a,n)}function m(t,r){return e.$setState({$pending:t},r)}function g(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function y(t){var r=Object.assign({},(Ae(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,a=n.$parser,i=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var o=function e(t){return r.$viewValue=t};r.$value=a?a(r.$viewValue,o):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=i?i(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=b(b({},e.$state),r);return s()}return r}var Be=function(e){H(r,e);var t=Q(r);function r(){var e;A(this,r);for(var n=arguments.length,a=new Array(n),i=0;i with the name '".concat(t,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));s["default"](t,"You should assign a name to , otherwise it will be isolated!");if(r.$$register){r.$$register(t,this.$fieldHandler)}this.$prevState=this.$state;de(this.props.$ref,this.$fieldutil)}},{key:"componentWillUnmount",value:function e(){if(this.$formContext.$$unregister){this.$formContext.$$unregister(this.props.name,this.$fieldHandler,this.props.$reserveOnUnmount)}this.isMounting=false;de(this.props.$ref,null)}},{key:"componentDidUpdate",value:function e(t){var r=this.props.name;if(r!==t.name){if(this.$formContext.$$register){this.$formContext.$$register(r,this.$fieldHandler,t.name)}}de(this.props.$ref,this.$fieldutil);if(this.$state.$value!==this.$prevState.$value){if(!(r in(this.$formContext.$$registers||{}))){this.$registered.$$triggerChange({$newValue:this.$state.$value,$prevValue:this.$prevState.$value})}}this.$prevState=this.$state}},{key:"shouldComponentUpdate",value:function e(t){var r=t.$memo;return!r||!be(this.$registered.$getState(),this.$prevState)||!(Array.isArray(r)?c["default"](r,this.props.$memo):c["default"](this.props,t))}},{key:"_render",value:function e(){var t=this.$fieldutil=b(b(b({$name:this.props.name},this.$registered.$getState()),this.$registered),{},{$$formutil:this.$formContext.$formutil});return He(t,this.props)}},{key:"render",value:function e(){var t=this;this.shouldRendered=true;return u["default"].createElement(G.Consumer,null,(function(e){var r=!t.$formContext;t.$formContext=e();if(!t.$fieldHandler){t.$fieldHandler=Le(t,t)}t.$registered=(t.$formContext.$$registers||{})[t.$fieldHandler.$name]||t.$fieldHandler;if(r){t.$fieldHandler.$$reset();t.$fieldHandler.$validate()}return t._render()}))}}]);return r}(e.Component);Be.displayName=Te;var qe=["__forwardRef__"],Ye=["component"];var Qe=["name","$defaultValue","$defaultState","$onFieldChange","$validators","$asyncValidators","$validateLazy","$memo","$reserveOnUnmount","$ref","$parser","$formatter","render","component","children"];function Ge(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(e){H(a,e);var n=Q(a);function a(){var e;A(this,a);for(var r=arguments.length,i=new Array(r),o=0;o.")}},{key:"render",value:function e(){var t=this.props,r=t.$value,n=t.onChange,a=t.onFocus,i=t.onBlur,o=Ve(t,Je);return u["default"].createElement(et,null,(function(e){var t=e();var s=t.type,l=t.name;var f=s==="radio"?{checked:t.value===r,onChange:function e(a){t.onChange(r,a);n&&n(a)}}:s==="checkbox"?{checked:t.value.indexOf(r)>-1,onChange:function e(a){t.onChange(a.target.checked?t.value.concat(r):t.value.filter((function(e){return e!==r})),a);n&&n(a)}}:{value:t.value,onChange:function e(r){t.onChange(r);n&&n(r)}};return u["default"].createElement("input",Object.assign({name:l},o,f,{type:s,onFocus:function e(r){t.onFocus(r);a&&a(r)},onBlur:function e(r){t.onBlur(r);i&&i(r)}}))}))}}]);return r}(e.Component);rt.displayName="React.Formutil.EasyField.Group.Option";var nt=function(e){H(r,e);var t=Q(r);function r(){A(this,r);return t.apply(this,arguments)}D(r,[{key:"componentDidMount",value:function e(){s["default"](false,'The "Field" property in EasyField\'s children-props has been deprecated. Please use "GroupOption" instead.')}},{key:"render",value:function e(){return u["default"].createElement(rt,this.props)}}]);return r}(e.Component);nt.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var at=u["default"].Frament||"div";var it=function(e){H(r,e);var t=Q(r);function r(e){var n;A(this,r);n=t.call(this,e);n.id=0;n.latestValue=n.props.value;n.$formutil=void 0;n.FieldValidators={required:function e(t){return t!==null}};n.$onFormChange=function(e){e.$onValidates((function(e){var t=e.$invalid,r=e.$params;if(t){if(n.props.value.length){n.props.onChange(n.latestValue=[])}}else if(!c["default"](n.props.value,r.list)){n.props.onChange(n.latestValue=r.list)}}))};n.swap=function(e,t,r){return n.$setState((function(r){var n=r.items;var a=[n[e],n[t]];n[t]=a[0];n[e]=a[1];return n}),r)};n.insert=function(){var e,t,r;for(var a=arguments.length,i=new Array(a),o=0;o=t*1}],["max",function(e,t){return ee(e)||e*1<=t*1}],["min",function(e,t){return ee(e)||e*1>=t*1}],["pattern",function(e,t){return ee(e)||t.test(e)}],["enum",function(e,t){return ee(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=j(t,2),n=r[0],a=r[1];e[n]=function e(t,r,i){var o=i.validMessage,u=o===void 0?{}:o;return a.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var ft="React.Formutil.EasyField";var ct={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function $t(e,t,r){var n;var a=t.valuePropName,i=t.changePropName,o=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,l=t.passUtil;var f=function e(t){return t&&t.target?t.target[a]:t};var c=b(b({},r),{},(n={},g(n,a,e.$viewValue),g(n,i,(function(r){var n;for(var a=arguments.length,o=new Array(a>1?a-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var e=u["default"].useContext;var t=e(G);return t()}function gt(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!u["default"].useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var r=u["default"].useState,n=u["default"].useLayoutEffect,a=u["default"].useEffect,i=u["default"].useRef;var o=typeof window==="undefined"?a:n;var l;if(e){if(typeof e==="string"){l=e;t.name=l}else{t=e;l=t.name}}var f=mt();var c=i({}).current;var $=i([]);var d;c.$formContext=f;c.props=t;c.$setState=m;c.shouldRendered=true;var p=r((function(){c.$$FIELD_UUID=Ie();c.$fieldHandler=d=Le(c);c.$fieldHandler.$$reset();c.$fieldHandler.$validate()})),v=j(p,2),h=v[1];if(!d){d=(f.$$registers||{})[c.$fieldHandler.$name]||c.$fieldHandler}o((function(){var e=c.$state;if(c.isMounting){if(!(l in(f.$$registers||{}))){d.$$triggerChange({$newValue:e.$value,$prevValue:c.$prevState.$value})}}c.$prevState=e}),[c.$state.$value]);o((function(){c.isMounting=true;s["default"](!l||f.$formutil,"You should enusre that the useField() with the name '".concat(l,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));s["default"](l,"You should pass a name argument to useField(), otherwise it will be isolated!");return function(){c.isMounting=false;de(t.$ref,null)}}),[]);o((function(){if(f.$$register){f.$$register(l,c.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(l,c.$fieldHandler,!c.isMounting&&t.$reserveOnUnmount)}}}),[l]);o((function(){de(t.$ref,c.$fieldutil)}));o((function(){if($.current.length>0){var e=V($.current);$.current.length=0;while(e.length){e.pop()(c.$fieldutil)}}}));function m(e,t){return new Promise((function(r){var n=function e(){return r(oe(t,c.$fieldutil))};if(c.isMounting){if(l in(f.$$registers||{})){c.shouldRendered=false;f.$$onChange(l,e,n);if(!c.shouldRendered){h({})}}else{d.$$merge(e);d.$$detectChange(e);h({});$.current.push(n)}}else{d.$$merge(e);n()}}))}return c.$fieldutil=b(b(b({$name:l},d.$getState()),d),{},{$$formutil:f.$formutil})}function yt(){var e=mt(),t=e.$formutil;return t}function bt(e){e=b(b(b({},ct),e),{},{children:null});var t=dt(e),r=t.fieldProps,n=t.childProps;var a=gt(r);return $t(a,r,n)}exports.EasyField=vt;exports.Field=Be;exports.Form=Fe;exports.connect=ht;exports.formContext=G;exports.useField=gt;exports.useForm=yt;exports.useHandler=bt;exports.withField=ze;exports.withForm=je; diff --git a/dist/react-formutil.esm.development.js b/dist/react-formutil.esm.development.js index 4bc0e24..b78f718 100644 --- a/dist/react-formutil.esm.development.js +++ b/dist/react-formutil.esm.development.js @@ -528,6 +528,7 @@ var Form = /*#__PURE__*/function (_Component) { warning($curRegistered.$$reserved, "The Field with a name '".concat(name, "' has been registered!")); $handler.$$reset($curRegistered.$getState()); hasDup = delete $$regDuplications[name]; + _this.$$formShouldUpdateFields[name] = true; }); if (hasDup) { _this.$render(); @@ -1365,7 +1366,6 @@ function renderField($fieldutil, props) { function createHandler($this, owner) { var $fieldHandler = { $$FIELD_UUID: $this.$$FIELD_UUID, - $name: $this.props.name, $$reset: $$reset, $$merge: $$merge, $$detectChange: $$detectChange, @@ -1748,8 +1748,7 @@ var Field = /*#__PURE__*/function (_Component) { } _this2.$registered = (_this2.$formContext.$$registers || {})[_this2.$fieldHandler.$name] || _this2.$fieldHandler; if (shouldInitial) { - var initialState = _this2.$registered.$getState(); - _this2.$fieldHandler.$$reset(initialState); + _this2.$fieldHandler.$$reset(); _this2.$fieldHandler.$validate(); } return _this2._render(); @@ -2657,17 +2656,14 @@ function useField(name) { var _useState = useState(function () { $this.$$FIELD_UUID = GET_FIELD_UUID(); $this.$fieldHandler = $registered = createHandler($this); + $this.$fieldHandler.$$reset(); + $this.$fieldHandler.$validate(); }), _useState2 = _slicedToArray(_useState, 2), setState = _useState2[1]; if (!$registered) { $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler; } - useState(function () { - var initialState = $registered.$getState(); - $this.$fieldHandler.$$reset(initialState); - $this.$fieldHandler.$validate(); - }); _useEffect(function () { var $state = $this.$state; if ($this.isMounting) { diff --git a/dist/react-formutil.esm.production.js b/dist/react-formutil.esm.production.js index 1764a1f..65b6542 100644 --- a/dist/react-formutil.esm.production.js +++ b/dist/react-formutil.esm.production.js @@ -1 +1 @@ -import e,{createContext as t,createElement as r,Children as n,cloneElement as i,Component as a,forwardRef as o}from"react";import u from"warning";import{unstable_batchedUpdates as s}from"react-dom";import l from"react-is";import f from"hoist-non-react-statics";import $ from"react-fast-compare";function c(e){"@babel/helpers - typeof";return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function d(e,t){if(c(e)!=="object"||e===null)return e;var r=e[Symbol.toPrimitive];if(r!==undefined){var n=r.call(e,t||"default");if(c(n)!=="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function v(e){var t=d(e,"string");return c(t)==="symbol"?t:String(t)}function p(e,t,r){t=v(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function m(e){for(var t=1;te.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),i=1;i-1}var te=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,L)}catch(e){return t}};function re(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(l[p])?P(l[p]):m({},l[p]);break;default:l[p]=a;break}}}}catch(e){u(false,"The name '%s' of Field seems is not a legal expression.",i)}if(t.length>2){return n}}function ne(e,t){var r=t.split(M).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,i=r.length;n should always return None(null,undefined) or an object contains error message of Field.");return t.$render(r)}return t.$$setStates(e||{},(function(e,t){var r=t.$getState(),n=r.$error,i=n===void 0?{}:n;if(e){return{$error:m(m({},i),{},p({},ce,e))}}if(i[ce]){delete i[ce];return{$error:i}}}),r,true)};t.$getField=function(e){var r=t.$$getRegister(e);u(!e||r,"$getField('".concat(e,"') fail to find the matched Field. Maybe it has been unmounted."));u(e,"You should pass a name of the mounted Field to $getField().");if(r){var n;return(n=r.$new)===null||n===void 0?void 0:n.call(r)}};t.$$onChange=function(e,r,n){return t.$setStates(p({},e,r),n)};t.$$setStates=function(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var r=arguments.length>1?arguments[1]:undefined;var n=arguments.length>2?arguments[2]:undefined;var i=arguments.length>3?arguments[3]:undefined;var a=t.$$deepParseObject(e);var o=[];ue(t.$$registers,(function(e,n){var u=ne(a,n);if(i||u){var s=e.$getState();var l=r(u&&u.data,e);if(l){var f=e.$$merge(l),$=f.$value;o.push([e,l]);if("$value"in l||"$viewValue"in l){var c=ae(t.$$fieldChangedQueue,(function(e){return e.name===n}));if(c){if(!("$prevValue"in c)){c.$dirty=true;c.$prevValue=c.$newValue}c.$newValue=$}else{t.$$fieldChangedQueue.push({name:n,$newValue:$,$prevValue:s.$value})}}t.$$formShouldUpdateFields[n]=true}}}));return s((function(){o.forEach((function(e){var t=C(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(n)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(J(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),i=0;i1&&arguments[1]!==undefined?arguments[1]:{};ue(t,(function(e,t){return re(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){ie(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){ie(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){ie(this.props.$ref,null)}},{key:"_render",value:function e(){var t=this.$formutil;var a=this.props,o=a.children,u=a.render,s=a.component;if(s){return r(s,{$formutil:t})}if(Y(u)){return u(t)}if(Y(o)){return o(t)}return n.map(o,(function(e){return e&&K(e.type)?i(e,{$formutil:t}):e}))}},{key:"render",value:function t(){var r=this;var n=this.props.$processer;var i=Object.keys(this.$$registers).map((function(e){return{path:e,$state:r.$$registers[e].$getState()}}));var a=this.$$formShouldUpdateAll;var o=this.$formutil||{};var u=i.some((function(e){var t=e.$state;return t.$invalid}));var s=i.some((function(e){var t=e.$state;return t.$dirty}));var l=i.some((function(e){var t=e.$state;return t.$touched}));var f=i.some((function(e){var t=e.$state;return t.$focused}));var $=this.$$formPending||i.some((function(e){var t=e.$state;return t.$pending}));var c=a?{}:m({},o.$pureParams);var d=a?{}:m({},o.$states);var v=a?{}:m({},o.$errors);var p=a?{}:m({},o.$dirts);var h=a?{}:m({},o.$touches);var g=a?{}:m({},o.$focuses);var y=a?{}:m({},o.$pendings);var b=a?{}:m({},o.$weakStates);var w=a?{}:m({},o.$weakParams);var F=a?{}:m({},o.$weakErrors);var P=a?{}:m({},o.$weakDirts);var V=a?{}:m({},o.$weakFocuses);var S=a?{}:m({},o.$weakTouches);var k=a?{}:m({},o.$weakPendings);for(var C=0,O=i.length;C=0)continue;r[i]=e[i]}return r}function me(e,t){if(e==null)return{};var r=he(e,t);var n,i;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}var ge=["__forwardRef__"],ye=["component"];var be=["render","component","children","$defaultValues","$defaultStates","$onFormChange","$validator","$processer","$ref"];function we(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(n){R(a,n);var i=U(a);function a(){var r;O(this,a);for(var n=arguments.length,o=new Array(n),u=0;u1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var i=Object.assign({},(Pe(e.$state.$error),e.$state.$error));if(ke(r)){i[t]=r||t;Ce(r,t,e.props.name)}else{delete i[t]}return p(i,n)}function g(t,r){return e.$setState({$pending:t},r)}function y(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function b(t){var r=Object.assign({},(Pe(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,i=n.$parser,a=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var o=function e(t){return r.$viewValue=t};r.$value=i?i(r.$viewValue,o):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=a?a(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=m(m({},e.$state),r);return s()}return r}var Ae=function(t){R(n,t);var r=U(n);function n(){var e;O(this,n);for(var t=arguments.length,i=new Array(t),a=0;a with the name '".concat(t,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));u(t,"You should assign a name to , otherwise it will be isolated!");if(r.$$register){r.$$register(t,this.$fieldHandler)}this.$prevState=this.$state;ie(this.props.$ref,this.$fieldutil)}},{key:"componentWillUnmount",value:function e(){if(this.$formContext.$$unregister){this.$formContext.$$unregister(this.props.name,this.$fieldHandler,this.props.$reserveOnUnmount)}this.isMounting=false;ie(this.props.$ref,null)}},{key:"componentDidUpdate",value:function e(t){var r=this.props.name;if(r!==t.name){if(this.$formContext.$$register){this.$formContext.$$register(r,this.$fieldHandler,t.name)}}ie(this.props.$ref,this.$fieldutil);if(this.$state.$value!==this.$prevState.$value){if(!(r in(this.$formContext.$$registers||{}))){this.$registered.$$triggerChange({$newValue:this.$state.$value,$prevValue:this.$prevState.$value})}}this.$prevState=this.$state}},{key:"shouldComponentUpdate",value:function e(t){var r=t.$memo;return!r||!$e(this.$registered.$getState(),this.$prevState)||!(Array.isArray(r)?$(r,this.props.$memo):$(this.props,t))}},{key:"_render",value:function e(){var t=this.$fieldutil=m(m(m({$name:this.props.name},this.$registered.$getState()),this.$registered),{},{$$formutil:this.$formContext.$formutil});return _e(t,this.props)}},{key:"render",value:function t(){var r=this;this.shouldRendered=true;return e.createElement(T.Consumer,null,(function(e){var t=!r.$formContext;r.$formContext=e();if(!r.$fieldHandler){r.$fieldHandler=je(r,r)}r.$registered=(r.$formContext.$$registers||{})[r.$fieldHandler.$name]||r.$fieldHandler;if(t){var n=r.$registered.$getState();r.$fieldHandler.$$reset(n);r.$fieldHandler.$validate()}return r._render()}))}}]);return n}(a);Ae.displayName=Oe;var Re=["__forwardRef__"],De=["component"];var xe=["name","$defaultValue","$defaultState","$onFieldChange","$validators","$asyncValidators","$validateLazy","$memo","$reserveOnUnmount","$ref","$parser","$formatter","render","component","children"];function Ne(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(n){R(a,n);var i=U(a);function a(){var r;O(this,a);for(var n=arguments.length,o=new Array(n),u=0;u.")}},{key:"render",value:function t(){var r=this.props,n=r.$value,i=r.onChange,a=r.onFocus,o=r.onBlur,u=me(r,He);return e.createElement(Be,null,(function(t){var r=t();var s=r.type,l=r.name;var f=s==="radio"?{checked:r.value===n,onChange:function e(t){r.onChange(n,t);i&&i(t)}}:s==="checkbox"?{checked:r.value.indexOf(n)>-1,onChange:function e(t){r.onChange(t.target.checked?r.value.concat(n):r.value.filter((function(e){return e!==n})),t);i&&i(t)}}:{value:r.value,onChange:function e(t){r.onChange(t);i&&i(t)}};return e.createElement("input",Object.assign({name:l},u,f,{type:s,onFocus:function e(t){r.onFocus(t);a&&a(t)},onBlur:function e(t){r.onBlur(t);o&&o(t)}}))}))}}]);return n}(a);Qe.displayName="React.Formutil.EasyField.Group.Option";var Ge=function(t){R(n,t);var r=U(n);function n(){O(this,n);return r.apply(this,arguments)}_(n,[{key:"componentDidMount",value:function e(){u(false,'The "Field" property in EasyField\'s children-props has been deprecated. Please use "GroupOption" instead.')}},{key:"render",value:function t(){return e.createElement(Qe,this.props)}}]);return n}(a);Ge.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var ze=e.Frament||"div";var qe=function(t){R(n,t);var r=U(n);function n(e){var t;O(this,n);t=r.call(this,e);t.id=0;t.latestValue=t.props.value;t.$formutil=void 0;t.FieldValidators={required:function e(t){return t!==null}};t.$onFormChange=function(e){e.$onValidates((function(e){var r=e.$invalid,n=e.$params;if(r){if(t.props.value.length){t.props.onChange(t.latestValue=[])}}else if(!$(t.props.value,n.list)){t.props.onChange(t.latestValue=n.list)}}))};t.swap=function(e,r,n){return t.$setState((function(t){var n=t.items;var i=[n[e],n[r]];n[r]=i[0];n[e]=i[1];return n}),n)};t.insert=function(){var e,r,n;for(var i=arguments.length,a=new Array(i),o=0;o=t*1}],["max",function(e,t){return Q(e)||e*1<=t*1}],["min",function(e,t){return Q(e)||e*1>=t*1}],["pattern",function(e,t){return Q(e)||t.test(e)}],["enum",function(e,t){return Q(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=C(t,2),n=r[0],i=r[1];e[n]=function e(t,r,a){var o=a.validMessage,u=o===void 0?{}:o;return i.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var Ze="React.Formutil.EasyField";var et={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function tt(e,t,r){var n;var i=t.valuePropName,a=t.changePropName,o=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,l=t.passUtil;var f=function e(t){return t&&t.target?t.target[i]:t};var $=m(m({},r),{},(n={},p(n,i,e.$viewValue),p(n,a,(function(r){var n;for(var i=arguments.length,o=new Array(i>1?i-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var t=e.useContext;var r=t(T);return r()}function ut(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!e.useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var n=e.useState,i=e.useLayoutEffect,a=e.useEffect,o=e.useRef;var s=typeof window==="undefined"?a:i;var l;if(t){if(typeof t==="string"){l=t;r.name=l}else{r=t;l=r.name}}var f=ot();var $=o({}).current;var c=o([]);var d;$.$formContext=f;$.props=r;$.$setState=g;$.shouldRendered=true;var v=n((function(){$.$$FIELD_UUID=Ee();$.$fieldHandler=d=je($)})),p=C(v,2),h=p[1];if(!d){d=(f.$$registers||{})[$.$fieldHandler.$name]||$.$fieldHandler}n((function(){var e=d.$getState();$.$fieldHandler.$$reset(e);$.$fieldHandler.$validate()}));s((function(){var e=$.$state;if($.isMounting){if(!(l in(f.$$registers||{}))){d.$$triggerChange({$newValue:e.$value,$prevValue:$.$prevState.$value})}}$.$prevState=e}),[$.$state.$value]);s((function(){$.isMounting=true;u(!l||f.$formutil,"You should enusre that the useField() with the name '".concat(l,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));u(l,"You should pass a name argument to useField(), otherwise it will be isolated!");return function(){$.isMounting=false;ie(r.$ref,null)}}),[]);s((function(){if(f.$$register){f.$$register(l,$.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(l,$.$fieldHandler,!$.isMounting&&r.$reserveOnUnmount)}}}),[l]);s((function(){ie(r.$ref,$.$fieldutil)}));s((function(){if(c.current.length>0){var e=P(c.current);c.current.length=0;while(e.length){e.pop()($.$fieldutil)}}}));function g(e,t){return new Promise((function(r){var n=function e(){return r(J(t,$.$fieldutil))};if($.isMounting){if(l in(f.$$registers||{})){$.shouldRendered=false;f.$$onChange(l,e,n);if(!$.shouldRendered){h({})}}else{d.$$merge(e);d.$$detectChange(e);h({});c.current.push(n)}}else{d.$$merge(e);n()}}))}return $.$fieldutil=m(m(m({$name:l},d.$getState()),d),{},{$$formutil:f.$formutil})}function st(){var e=ot(),t=e.$formutil;return t}function lt(e){e=m(m(m({},et),e),{},{children:null});var t=rt(e),r=t.fieldProps,n=t.childProps;var i=ut(r);return tt(i,r,n)}export{it as EasyField,Ae as Field,pe as Form,at as connect,T as formContext,ut as useField,st as useForm,lt as useHandler,Ue as withField,Fe as withForm}; +import e,{createContext as t,createElement as r,Children as n,cloneElement as i,Component as a,forwardRef as o}from"react";import u from"warning";import{unstable_batchedUpdates as s}from"react-dom";import l from"react-is";import f from"hoist-non-react-statics";import $ from"react-fast-compare";function c(e){"@babel/helpers - typeof";return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function d(e,t){if(c(e)!=="object"||e===null)return e;var r=e[Symbol.toPrimitive];if(r!==undefined){var n=r.call(e,t||"default");if(c(n)!=="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(e)}function v(e){var t=d(e,"string");return c(t)==="symbol"?t:String(t)}function p(e,t,r){t=v(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function m(e){for(var t=1;te.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),i=1;i-1}var te=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,L)}catch(e){return t}};function re(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(l[p])?P(l[p]):m({},l[p]);break;default:l[p]=a;break}}}}catch(e){u(false,"The name '%s' of Field seems is not a legal expression.",i)}if(t.length>2){return n}}function ne(e,t){var r=t.split(M).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,i=r.length;n should always return None(null,undefined) or an object contains error message of Field.");return t.$render(r)}return t.$$setStates(e||{},(function(e,t){var r=t.$getState(),n=r.$error,i=n===void 0?{}:n;if(e){return{$error:m(m({},i),{},p({},ce,e))}}if(i[ce]){delete i[ce];return{$error:i}}}),r,true)};t.$getField=function(e){var r=t.$$getRegister(e);u(!e||r,"$getField('".concat(e,"') fail to find the matched Field. Maybe it has been unmounted."));u(e,"You should pass a name of the mounted Field to $getField().");if(r){var n;return(n=r.$new)===null||n===void 0?void 0:n.call(r)}};t.$$onChange=function(e,r,n){return t.$setStates(p({},e,r),n)};t.$$setStates=function(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var r=arguments.length>1?arguments[1]:undefined;var n=arguments.length>2?arguments[2]:undefined;var i=arguments.length>3?arguments[3]:undefined;var a=t.$$deepParseObject(e);var o=[];ue(t.$$registers,(function(e,n){var u=ne(a,n);if(i||u){var s=e.$getState();var l=r(u&&u.data,e);if(l){var f=e.$$merge(l),$=f.$value;o.push([e,l]);if("$value"in l||"$viewValue"in l){var c=ae(t.$$fieldChangedQueue,(function(e){return e.name===n}));if(c){if(!("$prevValue"in c)){c.$dirty=true;c.$prevValue=c.$newValue}c.$newValue=$}else{t.$$fieldChangedQueue.push({name:n,$newValue:$,$prevValue:s.$value})}}t.$$formShouldUpdateFields[n]=true}}}));return s((function(){o.forEach((function(e){var t=C(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(n)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(J(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),i=0;i1&&arguments[1]!==undefined?arguments[1]:{};ue(t,(function(e,t){return re(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){ie(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){ie(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){ie(this.props.$ref,null)}},{key:"_render",value:function e(){var t=this.$formutil;var a=this.props,o=a.children,u=a.render,s=a.component;if(s){return r(s,{$formutil:t})}if(Y(u)){return u(t)}if(Y(o)){return o(t)}return n.map(o,(function(e){return e&&K(e.type)?i(e,{$formutil:t}):e}))}},{key:"render",value:function t(){var r=this;var n=this.props.$processer;var i=Object.keys(this.$$registers).map((function(e){return{path:e,$state:r.$$registers[e].$getState()}}));var a=this.$$formShouldUpdateAll;var o=this.$formutil||{};var u=i.some((function(e){var t=e.$state;return t.$invalid}));var s=i.some((function(e){var t=e.$state;return t.$dirty}));var l=i.some((function(e){var t=e.$state;return t.$touched}));var f=i.some((function(e){var t=e.$state;return t.$focused}));var $=this.$$formPending||i.some((function(e){var t=e.$state;return t.$pending}));var c=a?{}:m({},o.$pureParams);var d=a?{}:m({},o.$states);var v=a?{}:m({},o.$errors);var p=a?{}:m({},o.$dirts);var h=a?{}:m({},o.$touches);var g=a?{}:m({},o.$focuses);var y=a?{}:m({},o.$pendings);var b=a?{}:m({},o.$weakStates);var w=a?{}:m({},o.$weakParams);var F=a?{}:m({},o.$weakErrors);var P=a?{}:m({},o.$weakDirts);var V=a?{}:m({},o.$weakFocuses);var S=a?{}:m({},o.$weakTouches);var k=a?{}:m({},o.$weakPendings);for(var C=0,O=i.length;C=0)continue;r[i]=e[i]}return r}function me(e,t){if(e==null)return{};var r=he(e,t);var n,i;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}var ge=["__forwardRef__"],ye=["component"];var be=["render","component","children","$defaultValues","$defaultStates","$onFormChange","$validator","$processer","$ref"];function we(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(n){R(a,n);var i=U(a);function a(){var r;O(this,a);for(var n=arguments.length,o=new Array(n),u=0;u1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var i=Object.assign({},(Pe(e.$state.$error),e.$state.$error));if(ke(r)){i[t]=r||t;Ce(r,t,e.props.name)}else{delete i[t]}return p(i,n)}function g(t,r){return e.$setState({$pending:t},r)}function y(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function b(t){var r=Object.assign({},(Pe(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,i=n.$parser,a=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var o=function e(t){return r.$viewValue=t};r.$value=i?i(r.$viewValue,o):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=a?a(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=m(m({},e.$state),r);return s()}return r}var Ae=function(t){R(n,t);var r=U(n);function n(){var e;O(this,n);for(var t=arguments.length,i=new Array(t),a=0;a with the name '".concat(t,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));u(t,"You should assign a name to , otherwise it will be isolated!");if(r.$$register){r.$$register(t,this.$fieldHandler)}this.$prevState=this.$state;ie(this.props.$ref,this.$fieldutil)}},{key:"componentWillUnmount",value:function e(){if(this.$formContext.$$unregister){this.$formContext.$$unregister(this.props.name,this.$fieldHandler,this.props.$reserveOnUnmount)}this.isMounting=false;ie(this.props.$ref,null)}},{key:"componentDidUpdate",value:function e(t){var r=this.props.name;if(r!==t.name){if(this.$formContext.$$register){this.$formContext.$$register(r,this.$fieldHandler,t.name)}}ie(this.props.$ref,this.$fieldutil);if(this.$state.$value!==this.$prevState.$value){if(!(r in(this.$formContext.$$registers||{}))){this.$registered.$$triggerChange({$newValue:this.$state.$value,$prevValue:this.$prevState.$value})}}this.$prevState=this.$state}},{key:"shouldComponentUpdate",value:function e(t){var r=t.$memo;return!r||!$e(this.$registered.$getState(),this.$prevState)||!(Array.isArray(r)?$(r,this.props.$memo):$(this.props,t))}},{key:"_render",value:function e(){var t=this.$fieldutil=m(m(m({$name:this.props.name},this.$registered.$getState()),this.$registered),{},{$$formutil:this.$formContext.$formutil});return _e(t,this.props)}},{key:"render",value:function t(){var r=this;this.shouldRendered=true;return e.createElement(T.Consumer,null,(function(e){var t=!r.$formContext;r.$formContext=e();if(!r.$fieldHandler){r.$fieldHandler=je(r,r)}r.$registered=(r.$formContext.$$registers||{})[r.$fieldHandler.$name]||r.$fieldHandler;if(t){r.$fieldHandler.$$reset();r.$fieldHandler.$validate()}return r._render()}))}}]);return n}(a);Ae.displayName=Oe;var Re=["__forwardRef__"],De=["component"];var xe=["name","$defaultValue","$defaultState","$onFieldChange","$validators","$asyncValidators","$validateLazy","$memo","$reserveOnUnmount","$ref","$parser","$formatter","render","component","children"];function Ne(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var n=function(n){R(a,n);var i=U(a);function a(){var r;O(this,a);for(var n=arguments.length,o=new Array(n),u=0;u.")}},{key:"render",value:function t(){var r=this.props,n=r.$value,i=r.onChange,a=r.onFocus,o=r.onBlur,u=me(r,He);return e.createElement(Be,null,(function(t){var r=t();var s=r.type,l=r.name;var f=s==="radio"?{checked:r.value===n,onChange:function e(t){r.onChange(n,t);i&&i(t)}}:s==="checkbox"?{checked:r.value.indexOf(n)>-1,onChange:function e(t){r.onChange(t.target.checked?r.value.concat(n):r.value.filter((function(e){return e!==n})),t);i&&i(t)}}:{value:r.value,onChange:function e(t){r.onChange(t);i&&i(t)}};return e.createElement("input",Object.assign({name:l},u,f,{type:s,onFocus:function e(t){r.onFocus(t);a&&a(t)},onBlur:function e(t){r.onBlur(t);o&&o(t)}}))}))}}]);return n}(a);Qe.displayName="React.Formutil.EasyField.Group.Option";var Ge=function(t){R(n,t);var r=U(n);function n(){O(this,n);return r.apply(this,arguments)}_(n,[{key:"componentDidMount",value:function e(){u(false,'The "Field" property in EasyField\'s children-props has been deprecated. Please use "GroupOption" instead.')}},{key:"render",value:function t(){return e.createElement(Qe,this.props)}}]);return n}(a);Ge.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var ze=e.Frament||"div";var qe=function(t){R(n,t);var r=U(n);function n(e){var t;O(this,n);t=r.call(this,e);t.id=0;t.latestValue=t.props.value;t.$formutil=void 0;t.FieldValidators={required:function e(t){return t!==null}};t.$onFormChange=function(e){e.$onValidates((function(e){var r=e.$invalid,n=e.$params;if(r){if(t.props.value.length){t.props.onChange(t.latestValue=[])}}else if(!$(t.props.value,n.list)){t.props.onChange(t.latestValue=n.list)}}))};t.swap=function(e,r,n){return t.$setState((function(t){var n=t.items;var i=[n[e],n[r]];n[r]=i[0];n[e]=i[1];return n}),n)};t.insert=function(){var e,r,n;for(var i=arguments.length,a=new Array(i),o=0;o=t*1}],["max",function(e,t){return Q(e)||e*1<=t*1}],["min",function(e,t){return Q(e)||e*1>=t*1}],["pattern",function(e,t){return Q(e)||t.test(e)}],["enum",function(e,t){return Q(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=C(t,2),n=r[0],i=r[1];e[n]=function e(t,r,a){var o=a.validMessage,u=o===void 0?{}:o;return i.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var Ze="React.Formutil.EasyField";var et={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function tt(e,t,r){var n;var i=t.valuePropName,a=t.changePropName,o=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,l=t.passUtil;var f=function e(t){return t&&t.target?t.target[i]:t};var $=m(m({},r),{},(n={},p(n,i,e.$viewValue),p(n,a,(function(r){var n;for(var i=arguments.length,o=new Array(i>1?i-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var t=e.useContext;var r=t(T);return r()}function ut(t){var r=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!e.useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var n=e.useState,i=e.useLayoutEffect,a=e.useEffect,o=e.useRef;var s=typeof window==="undefined"?a:i;var l;if(t){if(typeof t==="string"){l=t;r.name=l}else{r=t;l=r.name}}var f=ot();var $=o({}).current;var c=o([]);var d;$.$formContext=f;$.props=r;$.$setState=g;$.shouldRendered=true;var v=n((function(){$.$$FIELD_UUID=Ee();$.$fieldHandler=d=je($);$.$fieldHandler.$$reset();$.$fieldHandler.$validate()})),p=C(v,2),h=p[1];if(!d){d=(f.$$registers||{})[$.$fieldHandler.$name]||$.$fieldHandler}s((function(){var e=$.$state;if($.isMounting){if(!(l in(f.$$registers||{}))){d.$$triggerChange({$newValue:e.$value,$prevValue:$.$prevState.$value})}}$.$prevState=e}),[$.$state.$value]);s((function(){$.isMounting=true;u(!l||f.$formutil,"You should enusre that the useField() with the name '".concat(l,"' must be used underneath a component or withForm() HOC, otherwise it's isolated."));u(l,"You should pass a name argument to useField(), otherwise it will be isolated!");return function(){$.isMounting=false;ie(r.$ref,null)}}),[]);s((function(){if(f.$$register){f.$$register(l,$.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(l,$.$fieldHandler,!$.isMounting&&r.$reserveOnUnmount)}}}),[l]);s((function(){ie(r.$ref,$.$fieldutil)}));s((function(){if(c.current.length>0){var e=P(c.current);c.current.length=0;while(e.length){e.pop()($.$fieldutil)}}}));function g(e,t){return new Promise((function(r){var n=function e(){return r(J(t,$.$fieldutil))};if($.isMounting){if(l in(f.$$registers||{})){$.shouldRendered=false;f.$$onChange(l,e,n);if(!$.shouldRendered){h({})}}else{d.$$merge(e);d.$$detectChange(e);h({});c.current.push(n)}}else{d.$$merge(e);n()}}))}return $.$fieldutil=m(m(m({$name:l},d.$getState()),d),{},{$$formutil:f.$formutil})}function st(){var e=ot(),t=e.$formutil;return t}function lt(e){e=m(m(m({},et),e),{},{children:null});var t=rt(e),r=t.fieldProps,n=t.childProps;var i=ut(r);return tt(i,r,n)}export{it as EasyField,Ae as Field,pe as Form,at as connect,T as formContext,ut as useField,st as useForm,lt as useHandler,Ue as withField,Fe as withForm}; diff --git a/dist/react-formutil.umd.development.js b/dist/react-formutil.umd.development.js index d5ca1f2..97745c7 100644 --- a/dist/react-formutil.umd.development.js +++ b/dist/react-formutil.umd.development.js @@ -967,6 +967,7 @@ warning_1($curRegistered.$$reserved, "The Field with a name '".concat(name, "' has been registered!")); $handler.$$reset($curRegistered.$getState()); hasDup = delete $$regDuplications[name]; + _this.$$formShouldUpdateFields[name] = true; }); if (hasDup) { _this.$render(); @@ -2267,7 +2268,6 @@ function createHandler($this, owner) { var $fieldHandler = { $$FIELD_UUID: $this.$$FIELD_UUID, - $name: $this.props.name, $$reset: $$reset, $$merge: $$merge, $$detectChange: $$detectChange, @@ -2650,8 +2650,7 @@ } _this2.$registered = (_this2.$formContext.$$registers || {})[_this2.$fieldHandler.$name] || _this2.$fieldHandler; if (shouldInitial) { - var initialState = _this2.$registered.$getState(); - _this2.$fieldHandler.$$reset(initialState); + _this2.$fieldHandler.$$reset(); _this2.$fieldHandler.$validate(); } return _this2._render(); @@ -3559,17 +3558,14 @@ var _useState = useState(function () { $this.$$FIELD_UUID = GET_FIELD_UUID(); $this.$fieldHandler = $registered = createHandler($this); + $this.$fieldHandler.$$reset(); + $this.$fieldHandler.$validate(); }), _useState2 = _slicedToArray(_useState, 2), setState = _useState2[1]; if (!$registered) { $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler; } - useState(function () { - var initialState = $registered.$getState(); - $this.$fieldHandler.$$reset(initialState); - $this.$fieldHandler.$validate(); - }); _useEffect(function () { var $state = $this.$state; if ($this.isMounting) { diff --git a/dist/react-formutil.umd.production.js b/dist/react-formutil.umd.production.js index 9124ae3..6fa4f72 100644 --- a/dist/react-formutil.umd.production.js +++ b/dist/react-formutil.umd.production.js @@ -1 +1 @@ -(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?t(exports,require("react"),require("react-dom")):typeof define==="function"&&define.amd?define(["exports","react","react-dom"],t):(e=typeof globalThis!=="undefined"?globalThis:e||self,t(e.ReactFormutil={},e.React,e.ReactDOM))})(this,(function(e,t,r){"use strict";function n(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var a=n(t);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}function i(e,t){return t={exports:{}},e(t,t.exports),t.exports}var u=i((function(e){function t(r){"@babel/helpers - typeof";return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=true,e.exports["default"]=e.exports,t(r)}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(u);var s=i((function(e){var t=u["default"];function r(e,r){if(t(e)!=="object"||e===null)return e;var n=e[Symbol.toPrimitive];if(n!==undefined){var a=n.call(e,r||"default");if(t(a)!=="object")return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(s);var f=i((function(e){var t=u["default"];function r(e){var r=s(e,"string");return t(r)==="symbol"?r:String(r)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(f);var l=i((function(e){function t(e,t,r){t=f(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var c=o(l);var $=i((function(e){function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(e){for(var r=1;re.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),a=1;a-1}var st=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,Ye)}catch(e){return t}};function ft(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(s[v])?b(s[v]):d({},s[v]);break;default:s[v]=o;break}}}}catch(e){}if(t.length>2){return n}}function lt(e,t){var r=t.split(Ke).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,a=r.length;n0&&arguments[0]!==undefined?arguments[0]:{};var n=arguments.length>1?arguments[1]:undefined;var a=arguments.length>2?arguments[2]:undefined;var o=arguments.length>3?arguments[3]:undefined;var i=t.$$deepParseObject(e);var u=[];pt(t.$$registers,(function(e,r){var a=lt(i,r);if(o||a){var s=e.$getState();var f=n(a&&a.data,e);if(f){var l=e.$$merge(f),c=l.$value;u.push([e,f]);if("$value"in f||"$viewValue"in f){var $=$t(t.$$fieldChangedQueue,(function(e){return e.name===r}));if($){if(!("$prevValue"in $)){$.$dirty=true;$.$prevValue=$.$newValue}$.$newValue=c}else{t.$$fieldChangedQueue.push({name:r,$newValue:c,$prevValue:s.$value})}}t.$$formShouldUpdateFields[r]=true}}}));return r.unstable_batchedUpdates((function(){u.forEach((function(e){var t=P(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(a)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(at(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),a=0;a1&&arguments[1]!==undefined?arguments[1]:{};pt(t,(function(e,t){return ft(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){ct(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){ct(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){ct(this.props.$ref,null)}},{key:"_render",value:function e(){var r=this.$formutil;var n=this.props,a=n.children,o=n.render,i=n.component;if(i){return t.createElement(i,{$formutil:r})}if(Je(o)){return o(r)}if(Je(a)){return a(r)}return t.Children.map(a,(function(e){return e&&rt(e.type)?t.cloneElement(e,{$formutil:r}):e}))}},{key:"render",value:function e(){var t=this;var r=this.props.$processer;var n=Object.keys(this.$$registers).map((function(e){return{path:e,$state:t.$$registers[e].$getState()}}));var o=this.$$formShouldUpdateAll;var i=this.$formutil||{};var u=n.some((function(e){var t=e.$state;return t.$invalid}));var s=n.some((function(e){var t=e.$state;return t.$dirty}));var f=n.some((function(e){var t=e.$state;return t.$touched}));var l=n.some((function(e){var t=e.$state;return t.$focused}));var c=this.$$formPending||n.some((function(e){var t=e.$state;return t.$pending}));var $=o?{}:d({},i.$pureParams);var p=o?{}:d({},i.$states);var v=o?{}:d({},i.$errors);var h=o?{}:d({},i.$dirts);var m=o?{}:d({},i.$touches);var y=o?{}:d({},i.$focuses);var g=o?{}:d({},i.$pendings);var b=o?{}:d({},i.$weakStates);var x=o?{}:d({},i.$weakParams);var w=o?{}:d({},i.$weakErrors);var _=o?{}:d({},i.$weakDirts);var S=o?{}:d({},i.$weakFocuses);var P=o?{}:d({},i.$weakTouches);var C=o?{}:d({},i.$weakPendings);for(var F=0,O=n.length;F=0)continue;r[a]=e[a]}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(_t);var St=i((function(e){function t(e,t){if(e==null)return{};var r=_t(e,t);var n,a;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var Pt=o(St);var Ct="function"===typeof Symbol&&Symbol.for,Ft=Ct?Symbol.for("react.element"):60103,Ot=Ct?Symbol.for("react.portal"):60106,Vt=Ct?Symbol.for("react.fragment"):60107,kt=Ct?Symbol.for("react.strict_mode"):60108,Et=Ct?Symbol.for("react.profiler"):60114,jt=Ct?Symbol.for("react.provider"):60109,Mt=Ct?Symbol.for("react.context"):60110,Rt=Ct?Symbol.for("react.async_mode"):60111,At=Ct?Symbol.for("react.concurrent_mode"):60111,Dt=Ct?Symbol.for("react.forward_ref"):60112,Nt=Ct?Symbol.for("react.suspense"):60113,Ut=Ct?Symbol.for("react.suspense_list"):60120,Tt=Ct?Symbol.for("react.memo"):60115,It=Ct?Symbol.for("react.lazy"):60116,Lt=Ct?Symbol.for("react.block"):60121,Ht=Ct?Symbol.for("react.fundamental"):60117,zt=Ct?Symbol.for("react.responder"):60118,Bt=Ct?Symbol.for("react.scope"):60119;function Qt(e){if("object"===typeof e&&null!==e){var t=e.$$typeof;switch(t){case Ft:switch(e=e.type,e){case Rt:case At:case Vt:case Et:case kt:case Nt:return e;default:switch(e=e&&e.$$typeof,e){case Mt:case Dt:case It:case Tt:case jt:return e;default:return t}}case Ot:return t}}}function qt(e){return Qt(e)===At}var Gt=Rt;var Kt=At;var Yt=Mt;var Wt=jt;var Jt=Ft;var Xt=Dt;var Zt=Vt;var er=It;var tr=Tt;var rr=Ot;var nr=Et;var ar=kt;var or=Nt;var ir=function(e){return qt(e)||Qt(e)===Rt};var ur=qt;var sr=function(e){return Qt(e)===Mt};var fr=function(e){return Qt(e)===jt};var lr=function(e){return"object"===typeof e&&null!==e&&e.$$typeof===Ft};var cr=function(e){return Qt(e)===Dt};var $r=function(e){return Qt(e)===Vt};var dr=function(e){return Qt(e)===It};var pr=function(e){return Qt(e)===Tt};var vr=function(e){return Qt(e)===Ot};var hr=function(e){return Qt(e)===Et};var mr=function(e){return Qt(e)===kt};var yr=function(e){return Qt(e)===Nt};var gr=function(e){return"string"===typeof e||"function"===typeof e||e===Vt||e===At||e===Et||e===kt||e===Nt||e===Ut||"object"===typeof e&&null!==e&&(e.$$typeof===It||e.$$typeof===Tt||e.$$typeof===jt||e.$$typeof===Mt||e.$$typeof===Dt||e.$$typeof===Ht||e.$$typeof===zt||e.$$typeof===Bt||e.$$typeof===Lt)};var br=Qt;var xr={AsyncMode:Gt,ConcurrentMode:Kt,ContextConsumer:Yt,ContextProvider:Wt,Element:Jt,ForwardRef:Xt,Fragment:Zt,Lazy:er,Memo:tr,Portal:rr,Profiler:nr,StrictMode:ar,Suspense:or,isAsyncMode:ir,isConcurrentMode:ur,isContextConsumer:sr,isContextProvider:fr,isElement:lr,isForwardRef:cr,isFragment:$r,isLazy:dr,isMemo:pr,isPortal:vr,isProfiler:hr,isStrictMode:mr,isSuspense:yr,isValidElementType:gr,typeOf:br};var wr=i((function(e){{e.exports=xr}}));var _r={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true};var Sr={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true};var Pr={$$typeof:true,render:true,defaultProps:true,displayName:true,propTypes:true};var Cr={$$typeof:true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true};var Fr={};Fr[wr.ForwardRef]=Pr;Fr[wr.Memo]=Cr;function Or(e){if(wr.isMemo(e)){return Cr}return Fr[e["$$typeof"]]||_r}var Vr=Object.defineProperty;var kr=Object.getOwnPropertyNames;var Er=Object.getOwnPropertySymbols;var jr=Object.getOwnPropertyDescriptor;var Mr=Object.getPrototypeOf;var Rr=Object.prototype;function Ar(e,t,r){if(typeof t!=="string"){if(Rr){var n=Mr(t);if(n&&n!==Rr){Ar(e,n,r)}}var a=kr(t);if(Er){a=a.concat(Er(t))}var o=Or(e);var i=Or(t);for(var u=0;u1&&arguments[1]!==undefined?arguments[1]:{};var n=function(t){R(o,t);var n=T(o);function o(){var t;F(this,o);for(var r=arguments.length,i=new Array(r),u=0;u1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var a=Object.assign({},(Yr(e.$state.$error),e.$state.$error));if(Xr(r)){a[t]=r||t;Zr(r,t,e.props.name)}else{delete a[t]}return h(a,n)}function y(t,r){return e.$setState({$pending:t},r)}function g(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function b(t){var r=Object.assign({},(Yr(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,a=n.$parser,o=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var i=function e(t){return r.$viewValue=t};r.$value=a?a(r.$viewValue,i):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=o?o(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=d(d({},e.$state),r);return s()}return r}var an=function(e){R(r,e);var t=T(r);function r(){var e;F(this,r);for(var n=arguments.length,a=new Array(n),o=0;o1&&arguments[1]!==undefined?arguments[1]:{};var n=function(t){R(o,t);var n=T(o);function o(){var t;F(this,o);for(var r=arguments.length,i=new Array(r),u=0;u-1,onChange:function e(a){t.onChange(a.target.checked?t.value.concat(r):t.value.filter((function(e){return e!==r})),a);n&&n(a)}}:{value:t.value,onChange:function e(r){t.onChange(r);n&&n(r)}};return a["default"].createElement("input",Object.assign({name:f},u,l,{type:s,onFocus:function e(r){t.onFocus(r);o&&o(r)},onBlur:function e(r){t.onBlur(r);i&&i(r)}}))}))}}]);return r}(t.Component);yn.displayName="React.Formutil.EasyField.Group.Option";var gn=function(e){R(r,e);var t=T(r);function r(){F(this,r);return t.apply(this,arguments)}V(r,[{key:"componentDidMount",value:function e(){}},{key:"render",value:function e(){return a["default"].createElement(yn,this.props)}}]);return r}(t.Component);gn.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var bn=a["default"].Frament||"div";var xn=function(e){R(r,e);var t=T(r);function r(e){var n;F(this,r);n=t.call(this,e);n.id=0;n.latestValue=n.props.value;n.$formutil=void 0;n.FieldValidators={required:function e(t){return t!==null}};n.$onFormChange=function(e){e.$onValidates((function(e){var t=e.$invalid,r=e.$params;if(t){if(n.props.value.length){n.props.onChange(n.latestValue=[])}}else if(!Gr(n.props.value,r.list)){n.props.onChange(n.latestValue=r.list)}}))};n.swap=function(e,t,r){return n.$setState((function(r){var n=r.items;var a=[n[e],n[t]];n[t]=a[0];n[e]=a[1];return n}),r)};n.insert=function(){var e,t,r;for(var a=arguments.length,o=new Array(a),i=0;i=t*1}],["max",function(e,t){return Xe(e)||e*1<=t*1}],["min",function(e,t){return Xe(e)||e*1>=t*1}],["pattern",function(e,t){return Xe(e)||t.test(e)}],["enum",function(e,t){return Xe(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=P(t,2),n=r[0],a=r[1];e[n]=function e(t,r,o){var i=o.validMessage,u=i===void 0?{}:i;return a.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var Cn="React.Formutil.EasyField";var Fn={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function On(e,t,r){var n;var a=t.valuePropName,o=t.changePropName,i=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,f=t.passUtil;var l=function e(t){return t&&t.target?t.target[a]:t};var $=d(d({},r),{},(n={},c(n,a,e.$viewValue),c(n,o,(function(r){var n;for(var a=arguments.length,i=new Array(a>1?a-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var e=a["default"].useContext;var t=e(H);return t()}function Rn(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!a["default"].useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var r=a["default"].useState,n=a["default"].useLayoutEffect,o=a["default"].useEffect,i=a["default"].useRef;var u=typeof window==="undefined"?o:n;var s;if(e){if(typeof e==="string"){s=e;t.name=s}else{t=e;s=t.name}}var f=Mn();var l=i({}).current;var c=i([]);var $;l.$formContext=f;l.props=t;l.$setState=m;l.shouldRendered=true;var p=r((function(){l.$$FIELD_UUID=tn();l.$fieldHandler=$=nn(l)})),v=P(p,2),h=v[1];if(!$){$=(f.$$registers||{})[l.$fieldHandler.$name]||l.$fieldHandler}r((function(){var e=$.$getState();l.$fieldHandler.$$reset(e);l.$fieldHandler.$validate()}));u((function(){var e=l.$state;if(l.isMounting){if(!(s in(f.$$registers||{}))){$.$$triggerChange({$newValue:e.$value,$prevValue:l.$prevState.$value})}}l.$prevState=e}),[l.$state.$value]);u((function(){l.isMounting=true;L(!s||f.$formutil);return function(){l.isMounting=false;ct(t.$ref,null)}}),[]);u((function(){if(f.$$register){f.$$register(s,l.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(s,l.$fieldHandler,!l.isMounting&&t.$reserveOnUnmount)}}}),[s]);u((function(){ct(t.$ref,l.$fieldutil)}));u((function(){if(c.current.length>0){var e=b(c.current);c.current.length=0;while(e.length){e.pop()(l.$fieldutil)}}}));function m(e,t){return new Promise((function(r){var n=function e(){return r(at(t,l.$fieldutil))};if(l.isMounting){if(s in(f.$$registers||{})){l.shouldRendered=false;f.$$onChange(s,e,n);if(!l.shouldRendered){h({})}}else{$.$$merge(e);$.$$detectChange(e);h({});c.current.push(n)}}else{$.$$merge(e);n()}}))}return l.$fieldutil=d(d(d({$name:s},$.$getState()),$),{},{$$formutil:f.$formutil})}function An(){var e=Mn(),t=e.$formutil;return t}function Dn(e){e=d(d(d({},Fn),e),{},{children:null});var t=Vn(e),r=t.fieldProps,n=t.childProps;var a=Rn(r);return On(a,r,n)}e.EasyField=En;e.Field=an;e.Form=wt;e.connect=jn;e.formContext=H;e.useField=Rn;e.useForm=An;e.useHandler=Dn;e.withField=ln;e.withForm=Lr;Object.defineProperty(e,"__esModule",{value:true})})); +(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?t(exports,require("react"),require("react-dom")):typeof define==="function"&&define.amd?define(["exports","react","react-dom"],t):(e=typeof globalThis!=="undefined"?globalThis:e||self,t(e.ReactFormutil={},e.React,e.ReactDOM))})(this,(function(e,t,r){"use strict";function n(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var a=n(t);function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}function i(e,t){return t={exports:{}},e(t,t.exports),t.exports}var u=i((function(e){function t(r){"@babel/helpers - typeof";return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=true,e.exports["default"]=e.exports,t(r)}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(u);var s=i((function(e){var t=u["default"];function r(e,r){if(t(e)!=="object"||e===null)return e;var n=e[Symbol.toPrimitive];if(n!==undefined){var a=n.call(e,r||"default");if(t(a)!=="object")return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(s);var f=i((function(e){var t=u["default"];function r(e){var r=s(e,"string");return t(r)==="symbol"?r:String(r)}e.exports=r,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(f);var l=i((function(e){function t(e,t,r){t=f(t);if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var c=o(l);var $=i((function(e){function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(e){for(var r=1;re.length)t=e.length;for(var r=0,n=new Array(t);r1?r-1:0),a=1;a-1}var st=function e(t){try{var r=new Function("origin","global","return typeof ".concat(t," === 'number' || (typeof ").concat(t," !== 'undefined' && !(origin in global)) ? ").concat(t," : origin"));return r(t,Ye)}catch(e){return t}};function ft(){for(var e=arguments.length,t=new Array(e),r=0;r=0?[]:{}:Array.isArray(s[v])?b(s[v]):d({},s[v]);break;default:s[v]=o;break}}}}catch(e){}if(t.length>2){return n}}function lt(e,t){var r=t.split(Ke).map((function(e){return e.trim()})).filter((function(e){return e!==""}));for(var n=0,a=r.length;n0&&arguments[0]!==undefined?arguments[0]:{};var n=arguments.length>1?arguments[1]:undefined;var a=arguments.length>2?arguments[2]:undefined;var o=arguments.length>3?arguments[3]:undefined;var i=t.$$deepParseObject(e);var u=[];pt(t.$$registers,(function(e,r){var a=lt(i,r);if(o||a){var s=e.$getState();var f=n(a&&a.data,e);if(f){var l=e.$$merge(f),c=l.$value;u.push([e,f]);if("$value"in f||"$viewValue"in f){var $=$t(t.$$fieldChangedQueue,(function(e){return e.name===r}));if($){if(!("$prevValue"in $)){$.$dirty=true;$.$prevValue=$.$newValue}$.$newValue=c}else{t.$$fieldChangedQueue.push({name:r,$newValue:c,$prevValue:s.$value})}}t.$$formShouldUpdateFields[r]=true}}}));return r.unstable_batchedUpdates((function(){u.forEach((function(e){var t=P(e,2),r=t[0],n=t[1];return r.$$detectChange(n)}));return t.$render(a)}))};t.$render=function(e){return new Promise((function(r){return t.forceUpdate((function(){return r(at(e,t.$formutil))}))}))};t.$validates=function(){var e;for(var r=arguments.length,n=new Array(r),a=0;a1&&arguments[1]!==undefined?arguments[1]:{};pt(t,(function(e,t){return ft(r,t,e)}));return r}},{key:"$$resetFormUpdateFields",value:function e(){this.$$formShouldUpdateFields={};this.$$formShouldUpdateAll=false}},{key:"componentDidMount",value:function e(){ct(this.props.$ref,this.$formutil)}},{key:"componentDidUpdate",value:function e(t){ct(this.props.$ref,this.$formutil);this.$$triggerFormChange()}},{key:"componentWillUnmount",value:function e(){ct(this.props.$ref,null)}},{key:"_render",value:function e(){var r=this.$formutil;var n=this.props,a=n.children,o=n.render,i=n.component;if(i){return t.createElement(i,{$formutil:r})}if(Je(o)){return o(r)}if(Je(a)){return a(r)}return t.Children.map(a,(function(e){return e&&rt(e.type)?t.cloneElement(e,{$formutil:r}):e}))}},{key:"render",value:function e(){var t=this;var r=this.props.$processer;var n=Object.keys(this.$$registers).map((function(e){return{path:e,$state:t.$$registers[e].$getState()}}));var o=this.$$formShouldUpdateAll;var i=this.$formutil||{};var u=n.some((function(e){var t=e.$state;return t.$invalid}));var s=n.some((function(e){var t=e.$state;return t.$dirty}));var f=n.some((function(e){var t=e.$state;return t.$touched}));var l=n.some((function(e){var t=e.$state;return t.$focused}));var c=this.$$formPending||n.some((function(e){var t=e.$state;return t.$pending}));var $=o?{}:d({},i.$pureParams);var p=o?{}:d({},i.$states);var v=o?{}:d({},i.$errors);var h=o?{}:d({},i.$dirts);var m=o?{}:d({},i.$touches);var y=o?{}:d({},i.$focuses);var g=o?{}:d({},i.$pendings);var b=o?{}:d({},i.$weakStates);var x=o?{}:d({},i.$weakParams);var w=o?{}:d({},i.$weakErrors);var _=o?{}:d({},i.$weakDirts);var S=o?{}:d({},i.$weakFocuses);var P=o?{}:d({},i.$weakTouches);var C=o?{}:d({},i.$weakPendings);for(var F=0,O=n.length;F=0)continue;r[a]=e[a]}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));o(_t);var St=i((function(e){function t(e,t){if(e==null)return{};var r=_t(e,t);var n,a;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}e.exports=t,e.exports.__esModule=true,e.exports["default"]=e.exports}));var Pt=o(St);var Ct="function"===typeof Symbol&&Symbol.for,Ft=Ct?Symbol.for("react.element"):60103,Ot=Ct?Symbol.for("react.portal"):60106,Vt=Ct?Symbol.for("react.fragment"):60107,kt=Ct?Symbol.for("react.strict_mode"):60108,Et=Ct?Symbol.for("react.profiler"):60114,jt=Ct?Symbol.for("react.provider"):60109,Mt=Ct?Symbol.for("react.context"):60110,Rt=Ct?Symbol.for("react.async_mode"):60111,At=Ct?Symbol.for("react.concurrent_mode"):60111,Dt=Ct?Symbol.for("react.forward_ref"):60112,Nt=Ct?Symbol.for("react.suspense"):60113,Ut=Ct?Symbol.for("react.suspense_list"):60120,Tt=Ct?Symbol.for("react.memo"):60115,It=Ct?Symbol.for("react.lazy"):60116,Lt=Ct?Symbol.for("react.block"):60121,Ht=Ct?Symbol.for("react.fundamental"):60117,zt=Ct?Symbol.for("react.responder"):60118,Bt=Ct?Symbol.for("react.scope"):60119;function Qt(e){if("object"===typeof e&&null!==e){var t=e.$$typeof;switch(t){case Ft:switch(e=e.type,e){case Rt:case At:case Vt:case Et:case kt:case Nt:return e;default:switch(e=e&&e.$$typeof,e){case Mt:case Dt:case It:case Tt:case jt:return e;default:return t}}case Ot:return t}}}function qt(e){return Qt(e)===At}var Gt=Rt;var Kt=At;var Yt=Mt;var Wt=jt;var Jt=Ft;var Xt=Dt;var Zt=Vt;var er=It;var tr=Tt;var rr=Ot;var nr=Et;var ar=kt;var or=Nt;var ir=function(e){return qt(e)||Qt(e)===Rt};var ur=qt;var sr=function(e){return Qt(e)===Mt};var fr=function(e){return Qt(e)===jt};var lr=function(e){return"object"===typeof e&&null!==e&&e.$$typeof===Ft};var cr=function(e){return Qt(e)===Dt};var $r=function(e){return Qt(e)===Vt};var dr=function(e){return Qt(e)===It};var pr=function(e){return Qt(e)===Tt};var vr=function(e){return Qt(e)===Ot};var hr=function(e){return Qt(e)===Et};var mr=function(e){return Qt(e)===kt};var yr=function(e){return Qt(e)===Nt};var gr=function(e){return"string"===typeof e||"function"===typeof e||e===Vt||e===At||e===Et||e===kt||e===Nt||e===Ut||"object"===typeof e&&null!==e&&(e.$$typeof===It||e.$$typeof===Tt||e.$$typeof===jt||e.$$typeof===Mt||e.$$typeof===Dt||e.$$typeof===Ht||e.$$typeof===zt||e.$$typeof===Bt||e.$$typeof===Lt)};var br=Qt;var xr={AsyncMode:Gt,ConcurrentMode:Kt,ContextConsumer:Yt,ContextProvider:Wt,Element:Jt,ForwardRef:Xt,Fragment:Zt,Lazy:er,Memo:tr,Portal:rr,Profiler:nr,StrictMode:ar,Suspense:or,isAsyncMode:ir,isConcurrentMode:ur,isContextConsumer:sr,isContextProvider:fr,isElement:lr,isForwardRef:cr,isFragment:$r,isLazy:dr,isMemo:pr,isPortal:vr,isProfiler:hr,isStrictMode:mr,isSuspense:yr,isValidElementType:gr,typeOf:br};var wr=i((function(e){{e.exports=xr}}));var _r={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true};var Sr={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true};var Pr={$$typeof:true,render:true,defaultProps:true,displayName:true,propTypes:true};var Cr={$$typeof:true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true};var Fr={};Fr[wr.ForwardRef]=Pr;Fr[wr.Memo]=Cr;function Or(e){if(wr.isMemo(e)){return Cr}return Fr[e["$$typeof"]]||_r}var Vr=Object.defineProperty;var kr=Object.getOwnPropertyNames;var Er=Object.getOwnPropertySymbols;var jr=Object.getOwnPropertyDescriptor;var Mr=Object.getPrototypeOf;var Rr=Object.prototype;function Ar(e,t,r){if(typeof t!=="string"){if(Rr){var n=Mr(t);if(n&&n!==Rr){Ar(e,n,r)}}var a=kr(t);if(Er){a=a.concat(Er(t))}var o=Or(e);var i=Or(t);for(var u=0;u1&&arguments[1]!==undefined?arguments[1]:{};var n=function(t){R(o,t);var n=T(o);function o(){var t;F(this,o);for(var r=arguments.length,i=new Array(r),u=0;u1&&arguments[1]!==undefined?arguments[1]:true;var n=arguments.length>2?arguments[2]:undefined;var a=Object.assign({},(Yr(e.$state.$error),e.$state.$error));if(Xr(r)){a[t]=r||t;Zr(r,t,e.props.name)}else{delete a[t]}return h(a,n)}function y(t,r){return e.$setState({$pending:t},r)}function g(){var t=e.$state.$error,r=t===void 0?{}:t;for(var n in r){if(r.hasOwnProperty(n)){return r[n]instanceof Error?r[n].message:r[n]}}}function b(t){var r=Object.assign({},(Yr(t),t));if("$error"in r){if(!r.$error){r.$error={}}r.$valid=Object.keys(r.$error).length===0}var n=e.props,a=n.$parser,o=n.$formatter;if("$viewValue"in r&&!("$value"in r)){var i=function e(t){return r.$viewValue=t};r.$value=a?a(r.$viewValue,i):r.$viewValue}else if("$value"in r&&!("$viewValue"in r)){var u=function e(t){return r.$value=t};r.$viewValue=o?o(r.$value,u):r.$value}if("$valid"in r){r.$invalid=!r.$valid}else if("$invalid"in r){r.$valid=!r.$invalid}if("$dirty"in r){r.$pristine=!r.$dirty}else if("$pristine"in r){r.$dirty=!r.$pristine}if("$touched"in r){r.$untouched=!r.$touched}else if("$untouched"in r){r.$touched=!r.$untouched}e.$state=d(d({},e.$state),r);return s()}return r}var an=function(e){R(r,e);var t=T(r);function r(){var e;F(this,r);for(var n=arguments.length,a=new Array(n),o=0;o1&&arguments[1]!==undefined?arguments[1]:{};var n=function(t){R(o,t);var n=T(o);function o(){var t;F(this,o);for(var r=arguments.length,i=new Array(r),u=0;u-1,onChange:function e(a){t.onChange(a.target.checked?t.value.concat(r):t.value.filter((function(e){return e!==r})),a);n&&n(a)}}:{value:t.value,onChange:function e(r){t.onChange(r);n&&n(r)}};return a["default"].createElement("input",Object.assign({name:f},u,l,{type:s,onFocus:function e(r){t.onFocus(r);o&&o(r)},onBlur:function e(r){t.onBlur(r);i&&i(r)}}))}))}}]);return r}(t.Component);yn.displayName="React.Formutil.EasyField.Group.Option";var gn=function(e){R(r,e);var t=T(r);function r(){F(this,r);return t.apply(this,arguments)}V(r,[{key:"componentDidMount",value:function e(){}},{key:"render",value:function e(){return a["default"].createElement(yn,this.props)}}]);return r}(t.Component);gn.displayName="React.Formutil.EasyField.Group.Option.Deprecated";var bn=a["default"].Frament||"div";var xn=function(e){R(r,e);var t=T(r);function r(e){var n;F(this,r);n=t.call(this,e);n.id=0;n.latestValue=n.props.value;n.$formutil=void 0;n.FieldValidators={required:function e(t){return t!==null}};n.$onFormChange=function(e){e.$onValidates((function(e){var t=e.$invalid,r=e.$params;if(t){if(n.props.value.length){n.props.onChange(n.latestValue=[])}}else if(!Gr(n.props.value,r.list)){n.props.onChange(n.latestValue=r.list)}}))};n.swap=function(e,t,r){return n.$setState((function(r){var n=r.items;var a=[n[e],n[t]];n[t]=a[0];n[e]=a[1];return n}),r)};n.insert=function(){var e,t,r;for(var a=arguments.length,o=new Array(a),i=0;i=t*1}],["max",function(e,t){return Xe(e)||e*1<=t*1}],["min",function(e,t){return Xe(e)||e*1>=t*1}],["pattern",function(e,t){return Xe(e)||t.test(e)}],["enum",function(e,t){return Xe(e)||t.indexOf(e)>-1}],["checker",function(e,t,r){return t(e,r)}]].reduce((function(e,t){var r=P(t,2),n=r[0],a=r[1];e[n]=function e(t,r,o){var i=o.validMessage,u=i===void 0?{}:i;return a.apply(void 0,arguments)||u[n]||"Error input: ".concat(n)};return e}),{});var Cn="React.Formutil.EasyField";var Fn={validMessage:{},valuePropName:"value",changePropName:"onChange",focusPropName:"onFocus",blurPropName:"onBlur",$parser:function e(t){return typeof t==="string"?t.trim():t}};function On(e,t,r){var n;var a=t.valuePropName,o=t.changePropName,i=t.focusPropName,u=t.blurPropName,s=t.getValueFromEvent,f=t.passUtil;var l=function e(t){return t&&t.target?t.target[a]:t};var $=d(d({},r),{},(n={},c(n,a,e.$viewValue),c(n,o,(function(r){var n;for(var a=arguments.length,i=new Array(a>1?a-1:0),u=1;u=16.8, Please upgrade your reactjs.")}var e=a["default"].useContext;var t=e(H);return t()}function Rn(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(!a["default"].useState){throw new Error("Hooks api need react@>=16.8, Please upgrade your reactjs.")}var r=a["default"].useState,n=a["default"].useLayoutEffect,o=a["default"].useEffect,i=a["default"].useRef;var u=typeof window==="undefined"?o:n;var s;if(e){if(typeof e==="string"){s=e;t.name=s}else{t=e;s=t.name}}var f=Mn();var l=i({}).current;var c=i([]);var $;l.$formContext=f;l.props=t;l.$setState=m;l.shouldRendered=true;var p=r((function(){l.$$FIELD_UUID=tn();l.$fieldHandler=$=nn(l);l.$fieldHandler.$$reset();l.$fieldHandler.$validate()})),v=P(p,2),h=v[1];if(!$){$=(f.$$registers||{})[l.$fieldHandler.$name]||l.$fieldHandler}u((function(){var e=l.$state;if(l.isMounting){if(!(s in(f.$$registers||{}))){$.$$triggerChange({$newValue:e.$value,$prevValue:l.$prevState.$value})}}l.$prevState=e}),[l.$state.$value]);u((function(){l.isMounting=true;L(!s||f.$formutil);return function(){l.isMounting=false;ct(t.$ref,null)}}),[]);u((function(){if(f.$$register){f.$$register(s,l.$fieldHandler)}return function(){if(f.$$unregister){f.$$unregister(s,l.$fieldHandler,!l.isMounting&&t.$reserveOnUnmount)}}}),[s]);u((function(){ct(t.$ref,l.$fieldutil)}));u((function(){if(c.current.length>0){var e=b(c.current);c.current.length=0;while(e.length){e.pop()(l.$fieldutil)}}}));function m(e,t){return new Promise((function(r){var n=function e(){return r(at(t,l.$fieldutil))};if(l.isMounting){if(s in(f.$$registers||{})){l.shouldRendered=false;f.$$onChange(s,e,n);if(!l.shouldRendered){h({})}}else{$.$$merge(e);$.$$detectChange(e);h({});c.current.push(n)}}else{$.$$merge(e);n()}}))}return l.$fieldutil=d(d(d({$name:s},$.$getState()),$),{},{$$formutil:f.$formutil})}function An(){var e=Mn(),t=e.$formutil;return t}function Dn(e){e=d(d(d({},Fn),e),{},{children:null});var t=Vn(e),r=t.fieldProps,n=t.childProps;var a=Rn(r);return On(a,r,n)}e.EasyField=En;e.Field=an;e.Form=wt;e.connect=jn;e.formContext=H;e.useField=Rn;e.useForm=An;e.useHandler=Dn;e.withField=ln;e.withForm=Lr;Object.defineProperty(e,"__esModule",{value:true})})); diff --git a/package.json b/package.json index 086bccf..727e1b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-formutil", - "version": "1.1.7", + "version": "1.1.8", "description": "Happy to build the forms in React ^_^", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", @@ -116,7 +116,7 @@ "rollup-plugin-filesize": "9.0.2", "rollup-plugin-sass": "1.2.2", "rollup-plugin-terser": "7.0.2", - "typescript": "4.0.5" + "typescript": "5.2.2" }, "dependencies": { "hoist-non-react-statics": "^3.3.2", diff --git a/src/Field.js b/src/Field.js index 6b846d8..1e938c5 100644 --- a/src/Field.js +++ b/src/Field.js @@ -148,9 +148,7 @@ class Field extends Component { (this.$formContext.$$registers || {})[this.$fieldHandler.$name] || this.$fieldHandler; if (shouldInitial) { - const initialState = this.$registered.$getState(); - - this.$fieldHandler.$$reset(initialState); + this.$fieldHandler.$$reset(); this.$fieldHandler.$validate(); } diff --git a/src/Form.js b/src/Form.js index e19130b..60b34b8 100644 --- a/src/Form.js +++ b/src/Form.js @@ -83,6 +83,8 @@ class Form extends Component { $handler.$$reset($curRegistered.$getState()); hasDup = delete $$regDuplications[name]; + + this.$$formShouldUpdateFields[name] = true; }); if (hasDup) { diff --git a/src/fieldHelper.js b/src/fieldHelper.js index 80758dd..16e7def 100644 --- a/src/fieldHelper.js +++ b/src/fieldHelper.js @@ -105,8 +105,6 @@ export function createHandler($this, owner) { const $fieldHandler = { $$FIELD_UUID: $this.$$FIELD_UUID, - $name: $this.props.name, - $$reset, $$merge, $$detectChange, diff --git a/src/hooks/useField.js b/src/hooks/useField.js index 2103a53..79a94fb 100644 --- a/src/hooks/useField.js +++ b/src/hooks/useField.js @@ -52,19 +52,15 @@ function useField(name, props = {}) { const [, setState] = useState(() => { $this.$$FIELD_UUID = GET_FIELD_UUID(); $this.$fieldHandler = $registered = createHandler($this); + + $this.$fieldHandler.$$reset(); + $this.$fieldHandler.$validate(); }); if (!$registered) { $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler; } - useState(() => { - const initialState = $registered.$getState(); - - $this.$fieldHandler.$$reset(initialState); - $this.$fieldHandler.$validate(); - }); - _useEffect(() => { const { $state } = $this; diff --git a/tsconfig.json b/tsconfig.json index 6c95cc3..50f4041 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,6 @@ "noImplicitThis": true, "noImplicitAny": false, "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "importHelpers": true },