@codegateinc/react-form-builder-v2 - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

dist/react-form-builder-v2.cjs.development.js

@@ -85,3 +85,3 @@ 'use strict';
 
-    if (!isRequired && !Boolean(val)) {
+    if (!isRequired && !Boolean(val) && !validationRules) {
       return {
@@ -200,4 +200,4 @@ errorMessage: '',
 
-var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
-  var _prevState$fieldConfi, _prevState$fieldConfi2;
+var generateField = function generateField(fieldConfig, prevStateRef, setState, parentKey) {
+  var _prevStateRef$current, _prevStateRef$current2, _prevStateRef$current3, _prevStateRef$current4;
 
@@ -231,3 +231,3 @@ if (parentKey === void 0) {
 
-    if (!field.isRequired && !Boolean(val)) {
+    if (!field.isRequired && !Boolean(val) && !field.validationRules) {
       return {
@@ -253,15 +253,15 @@ errorMessage: '',
     parentKey: parentKey,
-    hasError: (_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.hasError,
+    hasError: (_prevStateRef$current = prevStateRef.current) == null ? void 0 : (_prevStateRef$current2 = _prevStateRef$current[fieldConfig.key]) == null ? void 0 : _prevStateRef$current2.hasError,
     isRequired: fieldConfig.isRequired || false,
     validateOnBlur: fieldConfig.validateOnBlur || false,
     localInitialValue: fieldConfig.initialValue || '',
-    errorMessage: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi2.errorMessage,
+    errorMessage: (_prevStateRef$current3 = prevStateRef.current) == null ? void 0 : (_prevStateRef$current4 = _prevStateRef$current3[fieldConfig.key]) == null ? void 0 : _prevStateRef$current4.errorMessage,
     onChangeValue: function onChangeValue(value) {
       return setState(function (prevState) {
-        var _prevState$fieldConfi3, _prevState$fieldConfi4, _extends2;
+        var _prevState$fieldConfi, _prevState$fieldConfi2, _extends2;
 
         var changedField = _extends({}, prevState[fieldConfig.key], {
           value: fieldConfig.liveParser ? fieldConfig.liveParser(value) : value,
-          hasChange: value !== ((_prevState$fieldConfi3 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi3.localInitialValue),
-          isPristine: (_prevState$fieldConfi4 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi4.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
+          hasChange: value !== ((_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.localInitialValue),
+          isPristine: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi2.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
         });
@@ -281,3 +281,5 @@
       if (fieldConfig.validateOnBlur) {
-        var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+        var _prevStateRef$current5;
+
+        var _computeErrorMessage2 = computeErrorMessage((_prevStateRef$current5 = prevStateRef.current) == null ? void 0 : _prevStateRef$current5[fieldConfig.key], undefined, true),
             errorMessage = _computeErrorMessage2.errorMessage,
@@ -298,3 +300,5 @@ hasError = _computeErrorMessage2.hasError;
     validateOnSubmit: function validateOnSubmit() {
-      var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+      var _prevStateRef$current6;
+
+      var _computeErrorMessage3 = computeErrorMessage((_prevStateRef$current6 = prevStateRef.current) == null ? void 0 : _prevStateRef$current6[fieldConfig.key], undefined, true),
           errorMessage = _computeErrorMessage3.errorMessage,
@@ -317,3 +321,5 @@ hasError = _computeErrorMessage3.hasError;
     onChangeInitialValue: function onChangeInitialValue(value) {
-      if (prevState.value === prevState.localInitialValue) {
+      var _prevStateRef$current7, _prevStateRef$current8;
+
+      if (((_prevStateRef$current7 = prevStateRef.current) == null ? void 0 : _prevStateRef$current7.value) === ((_prevStateRef$current8 = prevStateRef.current) == null ? void 0 : _prevStateRef$current8.localInitialValue)) {
         setState(function (prevState) {
@@ -350,3 +356,5 @@ var _extends5;
     validate: function validate() {
-      var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+      var _prevStateRef$current9;
+
+      var _computeErrorMessage4 = computeErrorMessage((_prevStateRef$current9 = prevStateRef.current) == null ? void 0 : _prevStateRef$current9[fieldConfig.key], undefined, true),
           hasError = _computeErrorMessage4.hasError,
@@ -380,2 +388,4 @@ errorMessage = _computeErrorMessage4.errorMessage;
 
+  var innerFormRef = react.useRef(innerForm);
+
   var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -415,3 +425,3 @@ var _extends5;
 
-  var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+  var addFieldsRecurrence = function addFieldsRecurrence(field, parentKey) {
     var _ref3;
@@ -421,9 +431,12 @@
       return field.children.reduce(function (acc, child) {
-        return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+        return _extends({}, acc, addFieldsRecurrence(child, parentKey + "." + field.key));
       }, {});
     }
 
-    return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+    return _ref3 = {}, _ref3[field.key] = generateField(field, innerFormRef, setInnerForm, parentKey), _ref3;
   };
 
+  react.useEffect(function () {
+    innerFormRef.current = innerForm;
+  }, [innerForm]);
   return {
@@ -459,3 +472,3 @@ form: form,
         return _extends({}, prevState, fields.reduce(function (acc, item) {
-          return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
+          return _extends({}, acc, addFieldsRecurrence(item, ''));
         }, {}));
@@ -462,0 +475,0 @@ });

dist/react-form-builder-v2.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),e=require("ramda");function n(){return(n=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r}).apply(this,arguments)}var a=function(r){return null!=r},t=function(r,e){return a(r)&&e(r)};exports.useField=function(t){var i=t.key,u=t.label,s=t.initialValue,o=t.validationRules,l=void 0===o?[]:o,c=t.isRequired,v=void 0!==c&&c,f=t.placeholder,d=t.validateOnBlur,h=void 0!==d&&d,g=t.liveParser,M=t.submitParser,y=r.useState(s),E=y[0],k=y[1],b=r.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],P=b[1],m=function(r,n){if(void 0===n&&(n=!1),!n&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var t,i=a(r)?r:O.value;if(v&&e.isEmpty(i))return{errorMessage:null==(t=l[0])?void 0:t.errorMessage,hasError:!0};if(!v&&!Boolean(i))return{errorMessage:"",hasError:!1};var u=l.find((function(r){return!r.validate(i)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return{key:i,label:u,isRequired:v,placeholder:f,submitParser:M,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=m(void 0,!0),e=r.errorMessage,a=r.hasError;P((function(r){return n({},r,{isPristine:!1,errorMessage:e,hasError:a})}))}},onChangeValue:function(r){var e=m(r,!h),a=e.hasError,t=e.errorMessage;P((function(e){return n({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:t,hasError:a})}))},onChangeInitialValue:function(r){O.value===E&&P((function(e){return n({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=m(void 0,!0),e=r.hasError,a=r.errorMessage;return P((function(r){return n({},r,{errorMessage:a,hasError:e})})),{hasError:e,errorMessage:a}},setError:function(r){return P((function(e){return n({},e,{errorMessage:r})}))},resetState:function(){return P((function(r){return n({},r,{isPristine:!0,errorMessage:"",value:s||""})}))},validate:function(){var r=m(void 0,!0),e=r.hasError,a=r.errorMessage;P((function(r){return n({},r,{errorMessage:a,hasError:e})}))}}},exports.useForm=function(i,u){var s=Object.entries(i).reduce((function(r,e){var a;return n({},r,((a={})[e[0]]=e[1],a))}),{}),o=r.useState({}),l=o[1],c=n({},s,Object.entries(o[0]).reduce((function(r,e){var a,t=e[0],i=e[1],u=i.parentKey.split(".").filter(Boolean);if(u.length>0){var s=u.reduce((function(e,a,t){var s,o;return n({},r,e,((o={})[a]=n({},r[a],e[a]||{},t===u.length-1?{children:[].concat((null==(s=e[a])?void 0:s.children)||[],[i])}:{}),o))}),{}),o=Object.keys(s).filter((function(r){return Object.keys(s[r]).length})).reduce((function(r,e){var a;return n({},r,((a={})[e]=s[e],a))}),{});return n({},r,o)}return n({},r,((a={})[t]=i,a))}),{})),v=Object.values(c).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return{form:c,hasError:v,isFilled:Object.values(c).filter((function(r){return r.isRequired})).every((function(r){return!e.isEmpty(r.value)})),formHasChanges:function(){return Object.values(c).some((function(r){return r.hasChange}))},setError:function(r,e){c[r].setError(e),t(u.onError,(function(n){var a;return n(((a={})[r]=e,a))}))},setFieldValue:function(r,e){c[r].onChangeValue(e)},setFieldInitialValue:function(r,e){c[r].onChangeInitialValue(e)},addFields:function(r){return l((function(t){return n({},t,r.reduce((function(r,i){return n({},r,function r(t,i,u){var s;return t.children?t.children.reduce((function(e,a){return n({},e,r(a,i,u+"."+t.key))}),{}):((s={})[t.key]=function(r,t,i,u){var s,o;void 0===u&&(u="");var l=function(r,n,t){if(void 0===t&&(t=!1),!t&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,u=a(n)?n:r.value;if(r.isRequired&&e.isEmpty(u))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(u))return{errorMessage:"",hasError:!1};var s=r.validationRules.find((function(r){return!r.validate(u)}));return{errorMessage:s?s.errorMessage:"",hasError:Boolean(null==s?void 0:s.errorMessage)}};return n({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:u,hasError:null==(s=t[r.key])?void 0:s.hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(o=t[r.key])?void 0:o.errorMessage,onChangeValue:function(e){return i((function(a){var t,i,u,s=n({},a[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(t=a[r.key])?void 0:t.localInitialValue),isPristine:null!=(i=a[r.key])&&i.isPristine?r.validateOnBlur||!1:a[r.key].isPristine}),o=l(s,e);return n({},a,((u={})[r.key]=n({},s,{errorMessage:o.errorMessage,hasError:o.hasError}),u))}))},onBlur:function(){if(r.validateOnBlur){var e=l(t[r.key],void 0,!0),a=e.errorMessage,u=e.hasError;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{isPristine:!1,errorMessage:a,hasError:u}),t))}))}},validateOnSubmit:function(){var e=l(t[r.key],void 0,!0),a=e.errorMessage,u=e.hasError;return i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:a,hasError:u}),t))})),{errorMessage:a,hasError:u}},onChangeInitialValue:function(e){t.value===t.localInitialValue&&i((function(a){var t;return n({},a,((t={})[r.key]=n({},a[r.key],{value:e,localInitialValue:e}),t))}))},setError:function(e){return i((function(a){var t;return n({},a,((t={})[r.key]=n({},a[r.key],{errorMessage:e}),t))}))},resetState:function(){return i((function(e){var a;return n({},e,((a={})[r.key]=n({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),a))}))},validate:function(){var e=l(t[r.key],void 0,!0),a=e.hasError,u=e.errorMessage;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:u,hasError:a}),t))}))}})}(t,i,l,u),s)}(i,t,""))}),{}))}))},removeFieldIds:function(r){return l((function(e){return Object.keys(e).reduce((function(a,t){var i;return r.includes(t)?a:n({},a,((i={})[t]=e[t],i))}),{})}))},resetForm:function(){return Object.keys(c).forEach((function(r){return c[r].resetState()}))},submit:function(){var r=Object.values(c).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var a;return n({},r,((a={})[e.key]=e.errorMessage,a))}),{});if(Object.values(r).length>0)return t(u.onError,(function(e){return e(r)}));var e=Object.values(c).reduce((function(r,e){var a,t=e.value,i=e.submitParser;return n({},r,((a={})[e.key]=i?i(t):t,a))}),{});u.onSuccess(e)},validateAll:function(){return Object.values(c).forEach((function(r){return r.validate()}))}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),e=require("ramda");function n(){return(n=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}var t=function(r){return null!=r},a=function(r,e){return t(r)&&e(r)};exports.useField=function(a){var i=a.key,u=a.label,o=a.initialValue,s=a.validationRules,l=void 0===s?[]:s,c=a.isRequired,v=void 0!==c&&c,f=a.placeholder,d=a.validateOnBlur,h=void 0!==d&&d,g=a.liveParser,M=a.submitParser,y=r.useState(o),E=y[0],k=y[1],b=r.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],P=b[1],m=function(r,n){if(void 0===n&&(n=!1),!n&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var a,i=t(r)?r:O.value;if(v&&e.isEmpty(i))return{errorMessage:null==(a=l[0])?void 0:a.errorMessage,hasError:!0};if(!v&&!Boolean(i)&&!l)return{errorMessage:"",hasError:!1};var u=l.find((function(r){return!r.validate(i)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return{key:i,label:u,isRequired:v,placeholder:f,submitParser:M,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=m(void 0,!0),e=r.errorMessage,t=r.hasError;P((function(r){return n({},r,{isPristine:!1,errorMessage:e,hasError:t})}))}},onChangeValue:function(r){var e=m(r,!h),t=e.hasError,a=e.errorMessage;P((function(e){return n({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:a,hasError:t})}))},onChangeInitialValue:function(r){O.value===E&&P((function(e){return n({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=m(void 0,!0),e=r.hasError,t=r.errorMessage;return P((function(r){return n({},r,{errorMessage:t,hasError:e})})),{hasError:e,errorMessage:t}},setError:function(r){return P((function(e){return n({},e,{errorMessage:r})}))},resetState:function(){return P((function(r){return n({},r,{isPristine:!0,errorMessage:"",value:o||""})}))},validate:function(){var r=m(void 0,!0),e=r.hasError,t=r.errorMessage;P((function(r){return n({},r,{errorMessage:t,hasError:e})}))}}},exports.useForm=function(i,u){var o=Object.entries(i).reduce((function(r,e){var t;return n({},r,((t={})[e[0]]=e[1],t))}),{}),s=r.useState({}),l=s[0],c=s[1],v=r.useRef(l),f=n({},o,Object.entries(l).reduce((function(r,e){var t,a=e[0],i=e[1],u=i.parentKey.split(".").filter(Boolean);if(u.length>0){var o=u.reduce((function(e,t,a){var o,s;return n({},r,e,((s={})[t]=n({},r[t],e[t]||{},a===u.length-1?{children:[].concat((null==(o=e[t])?void 0:o.children)||[],[i])}:{}),s))}),{}),s=Object.keys(o).filter((function(r){return Object.keys(o[r]).length})).reduce((function(r,e){var t;return n({},r,((t={})[e]=o[e],t))}),{});return n({},r,s)}return n({},r,((t={})[a]=i,t))}),{})),d=Object.values(f).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return r.useEffect((function(){v.current=l}),[l]),{form:f,hasError:d,isFilled:Object.values(f).filter((function(r){return r.isRequired})).every((function(r){return!e.isEmpty(r.value)})),formHasChanges:function(){return Object.values(f).some((function(r){return r.hasChange}))},setError:function(r,e){f[r].setError(e),a(u.onError,(function(n){var t;return n(((t={})[r]=e,t))}))},setFieldValue:function(r,e){f[r].onChangeValue(e)},setFieldInitialValue:function(r,e){f[r].onChangeInitialValue(e)},addFields:function(r){return c((function(a){return n({},a,r.reduce((function(r,a){return n({},r,function r(a,i){var u;return a.children?a.children.reduce((function(e,t){return n({},e,r(t,i+"."+a.key))}),{}):((u={})[a.key]=function(r,a,i,u){var o,s,l,c;void 0===u&&(u="");var v=function(r,n,a){if(void 0===a&&(a=!1),!a&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,u=t(n)?n:r.value;if(r.isRequired&&e.isEmpty(u))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(u)&&!r.validationRules)return{errorMessage:"",hasError:!1};var o=r.validationRules.find((function(r){return!r.validate(u)}));return{errorMessage:o?o.errorMessage:"",hasError:Boolean(null==o?void 0:o.errorMessage)}};return n({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:u,hasError:null==(o=a.current)||null==(s=o[r.key])?void 0:s.hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(l=a.current)||null==(c=l[r.key])?void 0:c.errorMessage,onChangeValue:function(e){return i((function(t){var a,i,u,o=n({},t[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(a=t[r.key])?void 0:a.localInitialValue),isPristine:null!=(i=t[r.key])&&i.isPristine?r.validateOnBlur||!1:t[r.key].isPristine}),s=v(o,e);return n({},t,((u={})[r.key]=n({},o,{errorMessage:s.errorMessage,hasError:s.hasError}),u))}))},onBlur:function(){if(r.validateOnBlur){var e,t=v(null==(e=a.current)?void 0:e[r.key],void 0,!0),u=t.errorMessage,o=t.hasError;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{isPristine:!1,errorMessage:u,hasError:o}),t))}))}},validateOnSubmit:function(){var e,t=v(null==(e=a.current)?void 0:e[r.key],void 0,!0),u=t.errorMessage,o=t.hasError;return i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:u,hasError:o}),t))})),{errorMessage:u,hasError:o}},onChangeInitialValue:function(e){var t,u;(null==(t=a.current)?void 0:t.value)===(null==(u=a.current)?void 0:u.localInitialValue)&&i((function(t){var a;return n({},t,((a={})[r.key]=n({},t[r.key],{value:e,localInitialValue:e}),a))}))},setError:function(e){return i((function(t){var a;return n({},t,((a={})[r.key]=n({},t[r.key],{errorMessage:e}),a))}))},resetState:function(){return i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),t))}))},validate:function(){var e,t=v(null==(e=a.current)?void 0:e[r.key],void 0,!0),u=t.hasError,o=t.errorMessage;i((function(e){var t;return n({},e,((t={})[r.key]=n({},e[r.key],{errorMessage:o,hasError:u}),t))}))}})}(a,v,c,i),u)}(a,""))}),{}))}))},removeFieldIds:function(r){return c((function(e){return Object.keys(e).reduce((function(t,a){var i;return r.includes(a)?t:n({},t,((i={})[a]=e[a],i))}),{})}))},resetForm:function(){return Object.keys(f).forEach((function(r){return f[r].resetState()}))},submit:function(){var r=Object.values(f).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var t;return n({},r,((t={})[e.key]=e.errorMessage,t))}),{});if(Object.values(r).length>0)return a(u.onError,(function(e){return e(r)}));var e=Object.values(f).reduce((function(r,e){var t,a=e.value,i=e.submitParser;return n({},r,((t={})[e.key]=i?i(a):a,t))}),{});u.onSuccess(e)},validateAll:function(){return Object.values(f).forEach((function(r){return r.validate()}))}}};
 //# sourceMappingURL=react-form-builder-v2.cjs.production.min.js.map

dist/react-form-builder-v2.esm.js

@@ -1,2 +0,2 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { isEmpty } from 'ramda';
@@ -81,3 +81,3 @@
 
-    if (!isRequired && !Boolean(val)) {
+    if (!isRequired && !Boolean(val) && !validationRules) {
       return {
@@ -196,4 +196,4 @@ errorMessage: '',
 
-var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
-  var _prevState$fieldConfi, _prevState$fieldConfi2;
+var generateField = function generateField(fieldConfig, prevStateRef, setState, parentKey) {
+  var _prevStateRef$current, _prevStateRef$current2, _prevStateRef$current3, _prevStateRef$current4;
 
@@ -227,3 +227,3 @@ if (parentKey === void 0) {
 
-    if (!field.isRequired && !Boolean(val)) {
+    if (!field.isRequired && !Boolean(val) && !field.validationRules) {
       return {
@@ -249,15 +249,15 @@ errorMessage: '',
     parentKey: parentKey,
-    hasError: (_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.hasError,
+    hasError: (_prevStateRef$current = prevStateRef.current) == null ? void 0 : (_prevStateRef$current2 = _prevStateRef$current[fieldConfig.key]) == null ? void 0 : _prevStateRef$current2.hasError,
     isRequired: fieldConfig.isRequired || false,
     validateOnBlur: fieldConfig.validateOnBlur || false,
     localInitialValue: fieldConfig.initialValue || '',
-    errorMessage: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi2.errorMessage,
+    errorMessage: (_prevStateRef$current3 = prevStateRef.current) == null ? void 0 : (_prevStateRef$current4 = _prevStateRef$current3[fieldConfig.key]) == null ? void 0 : _prevStateRef$current4.errorMessage,
     onChangeValue: function onChangeValue(value) {
       return setState(function (prevState) {
-        var _prevState$fieldConfi3, _prevState$fieldConfi4, _extends2;
+        var _prevState$fieldConfi, _prevState$fieldConfi2, _extends2;
 
         var changedField = _extends({}, prevState[fieldConfig.key], {
           value: fieldConfig.liveParser ? fieldConfig.liveParser(value) : value,
-          hasChange: value !== ((_prevState$fieldConfi3 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi3.localInitialValue),
-          isPristine: (_prevState$fieldConfi4 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi4.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
+          hasChange: value !== ((_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.localInitialValue),
+          isPristine: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi2.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
         });
@@ -277,3 +277,5 @@
       if (fieldConfig.validateOnBlur) {
-        var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+        var _prevStateRef$current5;
+
+        var _computeErrorMessage2 = computeErrorMessage((_prevStateRef$current5 = prevStateRef.current) == null ? void 0 : _prevStateRef$current5[fieldConfig.key], undefined, true),
             errorMessage = _computeErrorMessage2.errorMessage,
@@ -294,3 +296,5 @@ hasError = _computeErrorMessage2.hasError;
     validateOnSubmit: function validateOnSubmit() {
-      var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+      var _prevStateRef$current6;
+
+      var _computeErrorMessage3 = computeErrorMessage((_prevStateRef$current6 = prevStateRef.current) == null ? void 0 : _prevStateRef$current6[fieldConfig.key], undefined, true),
           errorMessage = _computeErrorMessage3.errorMessage,
@@ -313,3 +317,5 @@ hasError = _computeErrorMessage3.hasError;
     onChangeInitialValue: function onChangeInitialValue(value) {
-      if (prevState.value === prevState.localInitialValue) {
+      var _prevStateRef$current7, _prevStateRef$current8;
+
+      if (((_prevStateRef$current7 = prevStateRef.current) == null ? void 0 : _prevStateRef$current7.value) === ((_prevStateRef$current8 = prevStateRef.current) == null ? void 0 : _prevStateRef$current8.localInitialValue)) {
         setState(function (prevState) {
@@ -346,3 +352,5 @@ var _extends5;
     validate: function validate() {
-      var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+      var _prevStateRef$current9;
+
+      var _computeErrorMessage4 = computeErrorMessage((_prevStateRef$current9 = prevStateRef.current) == null ? void 0 : _prevStateRef$current9[fieldConfig.key], undefined, true),
           hasError = _computeErrorMessage4.hasError,
@@ -376,2 +384,4 @@ errorMessage = _computeErrorMessage4.errorMessage;
 
+  var innerFormRef = useRef(innerForm);
+
   var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -411,3 +421,3 @@ var _extends5;
 
-  var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+  var addFieldsRecurrence = function addFieldsRecurrence(field, parentKey) {
     var _ref3;
@@ -417,9 +427,12 @@
       return field.children.reduce(function (acc, child) {
-        return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+        return _extends({}, acc, addFieldsRecurrence(child, parentKey + "." + field.key));
       }, {});
     }
 
-    return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+    return _ref3 = {}, _ref3[field.key] = generateField(field, innerFormRef, setInnerForm, parentKey), _ref3;
   };
 
+  useEffect(function () {
+    innerFormRef.current = innerForm;
+  }, [innerForm]);
   return {
@@ -455,3 +468,3 @@ form: form,
         return _extends({}, prevState, fields.reduce(function (acc, item) {
-          return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
+          return _extends({}, acc, addFieldsRecurrence(item, ''));
         }, {}));
@@ -458,0 +471,0 @@ });

dist/react-form-builder-v2.umd.development.js

@@ -84,3 +84,3 @@ (function (global, factory) {
 
-      if (!isRequired && !Boolean(val)) {
+      if (!isRequired && !Boolean(val) && !validationRules) {
         return {
@@ -199,4 +199,4 @@ errorMessage: '',
 
-  var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
-    var _prevState$fieldConfi, _prevState$fieldConfi2;
+  var generateField = function generateField(fieldConfig, prevStateRef, setState, parentKey) {
+    var _prevStateRef$current, _prevStateRef$current2, _prevStateRef$current3, _prevStateRef$current4;
 
@@ -230,3 +230,3 @@ if (parentKey === void 0) {
 
-      if (!field.isRequired && !Boolean(val)) {
+      if (!field.isRequired && !Boolean(val) && !field.validationRules) {
         return {
@@ -252,15 +252,15 @@ errorMessage: '',
       parentKey: parentKey,
-      hasError: (_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.hasError,
+      hasError: (_prevStateRef$current = prevStateRef.current) == null ? void 0 : (_prevStateRef$current2 = _prevStateRef$current[fieldConfig.key]) == null ? void 0 : _prevStateRef$current2.hasError,
       isRequired: fieldConfig.isRequired || false,
       validateOnBlur: fieldConfig.validateOnBlur || false,
       localInitialValue: fieldConfig.initialValue || '',
-      errorMessage: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi2.errorMessage,
+      errorMessage: (_prevStateRef$current3 = prevStateRef.current) == null ? void 0 : (_prevStateRef$current4 = _prevStateRef$current3[fieldConfig.key]) == null ? void 0 : _prevStateRef$current4.errorMessage,
       onChangeValue: function onChangeValue(value) {
         return setState(function (prevState) {
-          var _prevState$fieldConfi3, _prevState$fieldConfi4, _extends2;
+          var _prevState$fieldConfi, _prevState$fieldConfi2, _extends2;
 
           var changedField = _extends({}, prevState[fieldConfig.key], {
             value: fieldConfig.liveParser ? fieldConfig.liveParser(value) : value,
-            hasChange: value !== ((_prevState$fieldConfi3 = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi3.localInitialValue),
-            isPristine: (_prevState$fieldConfi4 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi4.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
+            hasChange: value !== ((_prevState$fieldConfi = prevState[fieldConfig.key]) == null ? void 0 : _prevState$fieldConfi.localInitialValue),
+            isPristine: (_prevState$fieldConfi2 = prevState[fieldConfig.key]) != null && _prevState$fieldConfi2.isPristine ? fieldConfig.validateOnBlur || false : prevState[fieldConfig.key].isPristine
           });
@@ -280,3 +280,5 @@
         if (fieldConfig.validateOnBlur) {
-          var _computeErrorMessage2 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+          var _prevStateRef$current5;
+
+          var _computeErrorMessage2 = computeErrorMessage((_prevStateRef$current5 = prevStateRef.current) == null ? void 0 : _prevStateRef$current5[fieldConfig.key], undefined, true),
               errorMessage = _computeErrorMessage2.errorMessage,
@@ -297,3 +299,5 @@ hasError = _computeErrorMessage2.hasError;
       validateOnSubmit: function validateOnSubmit() {
-        var _computeErrorMessage3 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+        var _prevStateRef$current6;
+
+        var _computeErrorMessage3 = computeErrorMessage((_prevStateRef$current6 = prevStateRef.current) == null ? void 0 : _prevStateRef$current6[fieldConfig.key], undefined, true),
             errorMessage = _computeErrorMessage3.errorMessage,
@@ -316,3 +320,5 @@ hasError = _computeErrorMessage3.hasError;
       onChangeInitialValue: function onChangeInitialValue(value) {
-        if (prevState.value === prevState.localInitialValue) {
+        var _prevStateRef$current7, _prevStateRef$current8;
+
+        if (((_prevStateRef$current7 = prevStateRef.current) == null ? void 0 : _prevStateRef$current7.value) === ((_prevStateRef$current8 = prevStateRef.current) == null ? void 0 : _prevStateRef$current8.localInitialValue)) {
           setState(function (prevState) {
@@ -349,3 +355,5 @@ var _extends5;
       validate: function validate() {
-        var _computeErrorMessage4 = computeErrorMessage(prevState[fieldConfig.key], undefined, true),
+        var _prevStateRef$current9;
+
+        var _computeErrorMessage4 = computeErrorMessage((_prevStateRef$current9 = prevStateRef.current) == null ? void 0 : _prevStateRef$current9[fieldConfig.key], undefined, true),
             hasError = _computeErrorMessage4.hasError,
@@ -379,2 +387,4 @@ errorMessage = _computeErrorMessage4.errorMessage;
 
+    var innerFormRef = react.useRef(innerForm);
+
     var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
@@ -414,3 +424,3 @@ var _extends5;
 
-    var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+    var addFieldsRecurrence = function addFieldsRecurrence(field, parentKey) {
       var _ref3;
@@ -420,9 +430,12 @@
         return field.children.reduce(function (acc, child) {
-          return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+          return _extends({}, acc, addFieldsRecurrence(child, parentKey + "." + field.key));
         }, {});
       }
 
-      return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+      return _ref3 = {}, _ref3[field.key] = generateField(field, innerFormRef, setInnerForm, parentKey), _ref3;
     };
 
+    react.useEffect(function () {
+      innerFormRef.current = innerForm;
+    }, [innerForm]);
     return {
@@ -458,3 +471,3 @@ form: form,
           return _extends({}, prevState, fields.reduce(function (acc, item) {
-            return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
+            return _extends({}, acc, addFieldsRecurrence(item, ''));
           }, {}));
@@ -461,0 +474,0 @@ });

dist/react-form-builder-v2.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("ramda")):"function"==typeof define&&define.amd?define(["exports","react","ramda"],e):e((r=r||self)["@codegateinc/react-form-builder-v2"]={},r.React,r.ramda)}(this,(function(r,e,n){"use strict";function a(){return(a=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r}).apply(this,arguments)}var t=function(r){return null!=r},i=function(r,e){return t(r)&&e(r)};r.useField=function(r){var i=r.key,u=r.label,o=r.initialValue,s=r.validationRules,l=void 0===s?[]:s,c=r.isRequired,f=void 0!==c&&c,v=r.placeholder,d=r.validateOnBlur,h=void 0!==d&&d,g=r.liveParser,y=r.submitParser,M=e.useState(o),E=M[0],k=M[1],b=e.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],m=b[1],p=function(r,e){if(void 0===e&&(e=!1),!e&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var a,i=t(r)?r:O.value;if(f&&n.isEmpty(i))return{errorMessage:null==(a=l[0])?void 0:a.errorMessage,hasError:!0};if(!f&&!Boolean(i))return{errorMessage:"",hasError:!1};var u=l.find((function(r){return!r.validate(i)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return{key:i,label:u,isRequired:f,placeholder:v,submitParser:y,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=p(void 0,!0),e=r.errorMessage,n=r.hasError;m((function(r){return a({},r,{isPristine:!1,errorMessage:e,hasError:n})}))}},onChangeValue:function(r){var e=p(r,!h),n=e.hasError,t=e.errorMessage;m((function(e){return a({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:t,hasError:n})}))},onChangeInitialValue:function(r){O.value===E&&m((function(e){return a({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=p(void 0,!0),e=r.hasError,n=r.errorMessage;return m((function(r){return a({},r,{errorMessage:n,hasError:e})})),{hasError:e,errorMessage:n}},setError:function(r){return m((function(e){return a({},e,{errorMessage:r})}))},resetState:function(){return m((function(r){return a({},r,{isPristine:!0,errorMessage:"",value:o||""})}))},validate:function(){var r=p(void 0,!0),e=r.hasError,n=r.errorMessage;m((function(r){return a({},r,{errorMessage:n,hasError:e})}))}}},r.useForm=function(r,u){var o=Object.entries(r).reduce((function(r,e){var n;return a({},r,((n={})[e[0]]=e[1],n))}),{}),s=e.useState({}),l=s[1],c=a({},o,Object.entries(s[0]).reduce((function(r,e){var n,t=e[0],i=e[1],u=i.parentKey.split(".").filter(Boolean);if(u.length>0){var o=u.reduce((function(e,n,t){var o,s;return a({},r,e,((s={})[n]=a({},r[n],e[n]||{},t===u.length-1?{children:[].concat((null==(o=e[n])?void 0:o.children)||[],[i])}:{}),s))}),{}),s=Object.keys(o).filter((function(r){return Object.keys(o[r]).length})).reduce((function(r,e){var n;return a({},r,((n={})[e]=o[e],n))}),{});return a({},r,s)}return a({},r,((n={})[t]=i,n))}),{})),f=Object.values(c).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return{form:c,hasError:f,isFilled:Object.values(c).filter((function(r){return r.isRequired})).every((function(r){return!n.isEmpty(r.value)})),formHasChanges:function(){return Object.values(c).some((function(r){return r.hasChange}))},setError:function(r,e){c[r].setError(e),i(u.onError,(function(n){var a;return n(((a={})[r]=e,a))}))},setFieldValue:function(r,e){c[r].onChangeValue(e)},setFieldInitialValue:function(r,e){c[r].onChangeInitialValue(e)},addFields:function(r){return l((function(e){return a({},e,r.reduce((function(r,i){return a({},r,function r(e,i,u){var o;return e.children?e.children.reduce((function(n,t){return a({},n,r(t,i,u+"."+e.key))}),{}):((o={})[e.key]=function(r,e,i,u){var o,s;void 0===u&&(u="");var l=function(r,e,a){if(void 0===a&&(a=!1),!a&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,u=t(e)?e:r.value;if(r.isRequired&&n.isEmpty(u))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(u))return{errorMessage:"",hasError:!1};var o=r.validationRules.find((function(r){return!r.validate(u)}));return{errorMessage:o?o.errorMessage:"",hasError:Boolean(null==o?void 0:o.errorMessage)}};return a({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:u,hasError:null==(o=e[r.key])?void 0:o.hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(s=e[r.key])?void 0:s.errorMessage,onChangeValue:function(e){return i((function(n){var t,i,u,o=a({},n[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(t=n[r.key])?void 0:t.localInitialValue),isPristine:null!=(i=n[r.key])&&i.isPristine?r.validateOnBlur||!1:n[r.key].isPristine}),s=l(o,e);return a({},n,((u={})[r.key]=a({},o,{errorMessage:s.errorMessage,hasError:s.hasError}),u))}))},onBlur:function(){if(r.validateOnBlur){var n=l(e[r.key],void 0,!0),t=n.errorMessage,u=n.hasError;i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{isPristine:!1,errorMessage:t,hasError:u}),n))}))}},validateOnSubmit:function(){var n=l(e[r.key],void 0,!0),t=n.errorMessage,u=n.hasError;return i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{errorMessage:t,hasError:u}),n))})),{errorMessage:t,hasError:u}},onChangeInitialValue:function(n){e.value===e.localInitialValue&&i((function(e){var t;return a({},e,((t={})[r.key]=a({},e[r.key],{value:n,localInitialValue:n}),t))}))},setError:function(e){return i((function(n){var t;return a({},n,((t={})[r.key]=a({},n[r.key],{errorMessage:e}),t))}))},resetState:function(){return i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),n))}))},validate:function(){var n=l(e[r.key],void 0,!0),t=n.hasError,u=n.errorMessage;i((function(e){var n;return a({},e,((n={})[r.key]=a({},e[r.key],{errorMessage:u,hasError:t}),n))}))}})}(e,i,l,u),o)}(i,e,""))}),{}))}))},removeFieldIds:function(r){return l((function(e){return Object.keys(e).reduce((function(n,t){var i;return r.includes(t)?n:a({},n,((i={})[t]=e[t],i))}),{})}))},resetForm:function(){return Object.keys(c).forEach((function(r){return c[r].resetState()}))},submit:function(){var r=Object.values(c).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var n;return a({},r,((n={})[e.key]=e.errorMessage,n))}),{});if(Object.values(r).length>0)return i(u.onError,(function(e){return e(r)}));var e=Object.values(c).reduce((function(r,e){var n,t=e.value,i=e.submitParser;return a({},r,((n={})[e.key]=i?i(t):t,n))}),{});u.onSuccess(e)},validateAll:function(){return Object.values(c).forEach((function(r){return r.validate()}))}}},Object.defineProperty(r,"__esModule",{value:!0})}));
+!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("ramda")):"function"==typeof define&&define.amd?define(["exports","react","ramda"],e):e((r=r||self)["@codegateinc/react-form-builder-v2"]={},r.React,r.ramda)}(this,(function(r,e,n){"use strict";function t(){return(t=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}var a=function(r){return null!=r},i=function(r,e){return a(r)&&e(r)};r.useField=function(r){var i=r.key,u=r.label,o=r.initialValue,s=r.validationRules,l=void 0===s?[]:s,c=r.isRequired,v=void 0!==c&&c,f=r.placeholder,d=r.validateOnBlur,h=void 0!==d&&d,g=r.liveParser,y=r.submitParser,M=e.useState(o),E=M[0],k=M[1],b=e.useState({value:E||"",isPristine:!0,errorMessage:"",hasError:!1}),O=b[0],m=b[1],p=function(r,e){if(void 0===e&&(e=!1),!e&&O.isPristine||!l)return{errorMessage:"",hasError:!1};var t,i=a(r)?r:O.value;if(v&&n.isEmpty(i))return{errorMessage:null==(t=l[0])?void 0:t.errorMessage,hasError:!0};if(!v&&!Boolean(i)&&!l)return{errorMessage:"",hasError:!1};var u=l.find((function(r){return!r.validate(i)}));return{errorMessage:u?u.errorMessage:"",hasError:Boolean(null==u?void 0:u.errorMessage)}};return{key:i,label:u,isRequired:v,placeholder:f,submitParser:y,parentKey:"",hasError:O.hasError,value:O.value,hasChange:O.value!==E,errorMessage:O.errorMessage,onBlur:function(){if(h){var r=p(void 0,!0),e=r.errorMessage,n=r.hasError;m((function(r){return t({},r,{isPristine:!1,errorMessage:e,hasError:n})}))}},onChangeValue:function(r){var e=p(r,!h),n=e.hasError,a=e.errorMessage;m((function(e){return t({},e,{value:g?g(r):r,isPristine:e.isPristine?h:e.isPristine,errorMessage:a,hasError:n})}))},onChangeInitialValue:function(r){O.value===E&&m((function(e){return t({},e,{value:r})})),k(r)},validateOnSubmit:function(){var r=p(void 0,!0),e=r.hasError,n=r.errorMessage;return m((function(r){return t({},r,{errorMessage:n,hasError:e})})),{hasError:e,errorMessage:n}},setError:function(r){return m((function(e){return t({},e,{errorMessage:r})}))},resetState:function(){return m((function(r){return t({},r,{isPristine:!0,errorMessage:"",value:o||""})}))},validate:function(){var r=p(void 0,!0),e=r.hasError,n=r.errorMessage;m((function(r){return t({},r,{errorMessage:n,hasError:e})}))}}},r.useForm=function(r,u){var o=Object.entries(r).reduce((function(r,e){var n;return t({},r,((n={})[e[0]]=e[1],n))}),{}),s=e.useState({}),l=s[0],c=s[1],v=e.useRef(l),f=t({},o,Object.entries(l).reduce((function(r,e){var n,a=e[0],i=e[1],u=i.parentKey.split(".").filter(Boolean);if(u.length>0){var o=u.reduce((function(e,n,a){var o,s;return t({},r,e,((s={})[n]=t({},r[n],e[n]||{},a===u.length-1?{children:[].concat((null==(o=e[n])?void 0:o.children)||[],[i])}:{}),s))}),{}),s=Object.keys(o).filter((function(r){return Object.keys(o[r]).length})).reduce((function(r,e){var n;return t({},r,((n={})[e]=o[e],n))}),{});return t({},r,s)}return t({},r,((n={})[a]=i,n))}),{})),d=Object.values(f).filter((function(r){return r.isRequired})).some((function(r){return Boolean(r.errorMessage)}));return e.useEffect((function(){v.current=l}),[l]),{form:f,hasError:d,isFilled:Object.values(f).filter((function(r){return r.isRequired})).every((function(r){return!n.isEmpty(r.value)})),formHasChanges:function(){return Object.values(f).some((function(r){return r.hasChange}))},setError:function(r,e){f[r].setError(e),i(u.onError,(function(n){var t;return n(((t={})[r]=e,t))}))},setFieldValue:function(r,e){f[r].onChangeValue(e)},setFieldInitialValue:function(r,e){f[r].onChangeInitialValue(e)},addFields:function(r){return c((function(e){return t({},e,r.reduce((function(r,e){return t({},r,function r(e,i){var u;return e.children?e.children.reduce((function(n,a){return t({},n,r(a,i+"."+e.key))}),{}):((u={})[e.key]=function(r,e,i,u){var o,s,l,c;void 0===u&&(u="");var v=function(r,e,t){if(void 0===t&&(t=!1),!t&&r.isPristine||!r.validationRules)return{errorMessage:"",hasError:!1};var i,u=a(e)?e:r.value;if(r.isRequired&&n.isEmpty(u))return{errorMessage:null==(i=r.validationRules[0])?void 0:i.errorMessage,hasError:!0};if(!r.isRequired&&!Boolean(u)&&!r.validationRules)return{errorMessage:"",hasError:!1};var o=r.validationRules.find((function(r){return!r.validate(u)}));return{errorMessage:o?o.errorMessage:"",hasError:Boolean(null==o?void 0:o.errorMessage)}};return t({},r,{value:"",hasChange:!1,isPristine:!0,parentKey:u,hasError:null==(o=e.current)||null==(s=o[r.key])?void 0:s.hasError,isRequired:r.isRequired||!1,validateOnBlur:r.validateOnBlur||!1,localInitialValue:r.initialValue||"",errorMessage:null==(l=e.current)||null==(c=l[r.key])?void 0:c.errorMessage,onChangeValue:function(e){return i((function(n){var a,i,u,o=t({},n[r.key],{value:r.liveParser?r.liveParser(e):e,hasChange:e!==(null==(a=n[r.key])?void 0:a.localInitialValue),isPristine:null!=(i=n[r.key])&&i.isPristine?r.validateOnBlur||!1:n[r.key].isPristine}),s=v(o,e);return t({},n,((u={})[r.key]=t({},o,{errorMessage:s.errorMessage,hasError:s.hasError}),u))}))},onBlur:function(){if(r.validateOnBlur){var n,a=v(null==(n=e.current)?void 0:n[r.key],void 0,!0),u=a.errorMessage,o=a.hasError;i((function(e){var n;return t({},e,((n={})[r.key]=t({},e[r.key],{isPristine:!1,errorMessage:u,hasError:o}),n))}))}},validateOnSubmit:function(){var n,a=v(null==(n=e.current)?void 0:n[r.key],void 0,!0),u=a.errorMessage,o=a.hasError;return i((function(e){var n;return t({},e,((n={})[r.key]=t({},e[r.key],{errorMessage:u,hasError:o}),n))})),{errorMessage:u,hasError:o}},onChangeInitialValue:function(n){var a,u;(null==(a=e.current)?void 0:a.value)===(null==(u=e.current)?void 0:u.localInitialValue)&&i((function(e){var a;return t({},e,((a={})[r.key]=t({},e[r.key],{value:n,localInitialValue:n}),a))}))},setError:function(e){return i((function(n){var a;return t({},n,((a={})[r.key]=t({},n[r.key],{errorMessage:e}),a))}))},resetState:function(){return i((function(e){var n;return t({},e,((n={})[r.key]=t({},e[r.key],{isPristine:!0,errorMessage:"",value:r.initialValue||""}),n))}))},validate:function(){var n,a=v(null==(n=e.current)?void 0:n[r.key],void 0,!0),u=a.hasError,o=a.errorMessage;i((function(e){var n;return t({},e,((n={})[r.key]=t({},e[r.key],{errorMessage:o,hasError:u}),n))}))}})}(e,v,c,i),u)}(e,""))}),{}))}))},removeFieldIds:function(r){return c((function(e){return Object.keys(e).reduce((function(n,a){var i;return r.includes(a)?n:t({},n,((i={})[a]=e[a],i))}),{})}))},resetForm:function(){return Object.keys(f).forEach((function(r){return f[r].resetState()}))},submit:function(){var r=Object.values(f).map((function(r){var e=r.validateOnSubmit();return{key:r.key,errorMessage:e.errorMessage||(e.hasError?"This field is required":"")}})).filter((function(r){return Boolean(r.errorMessage)})).reduce((function(r,e){var n;return t({},r,((n={})[e.key]=e.errorMessage,n))}),{});if(Object.values(r).length>0)return i(u.onError,(function(e){return e(r)}));var e=Object.values(f).reduce((function(r,e){var n,a=e.value,i=e.submitParser;return t({},r,((n={})[e.key]=i?i(a):a,n))}),{});u.onSuccess(e)},validateAll:function(){return Object.values(f).forEach((function(r){return r.validate()}))}}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-form-builder-v2.umd.production.min.js.map

package.json

@@ -6,3 +6,3 @@ {
     "typings": "index.d.ts",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "main": "dist/index.js",
@@ -9,0 +9,0 @@ "scripts": {

src/main/generateField.ts

@@ -8,3 +8,3 @@ import React from 'react'
     fieldConfig: FieldConfig<T>,
-    prevState: InnerForm<T>,
+    prevStateRef: React.RefObject<InnerForm<T>>,
     setState: React.Dispatch<React.SetStateAction<InnerForm<T>>>,
@@ -32,3 +32,3 @@ parentKey: string = ''
 
-        if (!field.isRequired && !Boolean(val)) {
+        if (!field.isRequired && !Boolean(val) && !field.validationRules) {
             return {
@@ -57,7 +57,7 @@ errorMessage: '',
         parentKey,
-        hasError: prevState[fieldConfig.key]?.hasError,
+        hasError: prevStateRef.current?.[fieldConfig.key]?.hasError,
         isRequired: fieldConfig.isRequired || false,
         validateOnBlur: fieldConfig.validateOnBlur || false,
         localInitialValue: (fieldConfig.initialValue || '') as T,
-        errorMessage: prevState[fieldConfig.key]?.errorMessage,
+        errorMessage: prevStateRef.current?.[fieldConfig.key]?.errorMessage,
         onChangeValue: (value: T) => setState(prevState => {
@@ -88,3 +88,3 @@ const changedField = {
             if (fieldConfig.validateOnBlur) {
-                const { errorMessage, hasError } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+                const { errorMessage, hasError } = computeErrorMessage(prevStateRef.current?.[fieldConfig.key] as ExtendedConfig<T>, undefined, true)
 
@@ -103,3 +103,3 @@ setState(prevState => ({
         validateOnSubmit: () => {
-            const { errorMessage, hasError } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+            const { errorMessage, hasError } = computeErrorMessage(prevStateRef.current?.[fieldConfig.key] as ExtendedConfig<T>, undefined, true)
 
@@ -121,3 +121,3 @@ setState(prevState => ({
         onChangeInitialValue: (value: T) => {
-            if (prevState.value === prevState.localInitialValue) {
+            if (prevStateRef.current?.value === prevStateRef.current?.localInitialValue) {
                 setState(prevState => ({
@@ -150,3 +150,3 @@ ...prevState,
         validate: () => {
-            const { hasError, errorMessage } = computeErrorMessage(prevState[fieldConfig.key], undefined, true)
+            const { hasError, errorMessage } = computeErrorMessage(prevStateRef.current?.[fieldConfig.key] as ExtendedConfig<T>, undefined, true)
 
@@ -153,0 +153,0 @@ setState(prevState => ({

src/main/useField.ts

@@ -44,3 +44,3 @@ import { useState } from 'react'
 
-        if (!isRequired && !Boolean(val)) {
+        if (!isRequired && !Boolean(val) && !validationRules) {
             return {
@@ -47,0 +47,0 @@ errorMessage: '',

src/main/useForm.ts

@@ -1,2 +0,2 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { isEmpty } from 'ramda'
@@ -23,2 +23,3 @@ import { R } from 'lib/utils'
     const [innerForm, setInnerForm] = useState<InnerForm<T>>({} as InnerForm<T>)
+    const innerFormRef = useRef(innerForm)
     const form = {
@@ -75,7 +76,7 @@ ...injectedForm,
 
-    const addFieldsRecurrence = (field: FieldConfig<any>, prevState: any, parentKey: string): any => {
+    const addFieldsRecurrence = (field: FieldConfig<any>, parentKey: string): any => {
         if (field.children) {
             return field.children.reduce((acc, child) => ({
                 ...acc,
-                ...addFieldsRecurrence(child, prevState, `${parentKey}.${field.key}`)
+                ...addFieldsRecurrence(child, `${parentKey}.${field.key}`)
             }), {})
@@ -85,6 +86,10 @@ }
         return {
-            [field.key]: generateField(field, prevState, setInnerForm, parentKey)
+            [field.key]: generateField(field, innerFormRef, setInnerForm, parentKey)
         }
     }
 
+    useEffect(() => {
+        innerFormRef.current = innerForm
+    }, [innerForm])
+
     return {
@@ -117,3 +122,3 @@ form,
                 ...acc,
-                ...addFieldsRecurrence(item, prevState, '')
+                ...addFieldsRecurrence(item, '')
             }), {})
@@ -120,0 +125,0 @@ })),

No alert changes

Improved metrics

Total package byte prevSize

242003

increased by3.11%

Lines of code

2045

increased by1.54%

No dependency changes