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

Comparing version 1.0.25 to 1.1.0

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

@@ -90,2 +90,3 @@ 'use strict';
     submitParser: submitParser,
+    parentKey: '',
     value: field.value,
@@ -162,5 +163,9 @@ hasChange: field.value !== localInitialValue,
 
-var generateField = function generateField(fieldConfig, prevState, setState) {
+var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
   var _prevState$fieldConfi;
 
+  if (parentKey === void 0) {
+    parentKey = '';
+  }
+
   var computeErrorMessage = function computeErrorMessage(field, value, forceCheck) {
@@ -195,2 +200,3 @@ if (forceCheck === void 0) {
     isPristine: true,
+    parentKey: parentKey,
     isRequired: fieldConfig.isRequired || false,
@@ -313,4 +319,41 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
-  var form = _extends({}, injectedForm, innerForm);
+  var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
+    var field = _ref2[1];
+    var fieldKeys = field.parentKey.split('.').filter(Boolean);
 
+    if (fieldKeys.length > 0) {
+      var mappedField = fieldKeys.reduce(function (localAcc, localKey, index) {
+        var _localAcc$localKey, _extends3;
+
+        return _extends({}, acc, localAcc, (_extends3 = {}, _extends3[localKey] = _extends({}, acc[localKey], localAcc[localKey] || {}, index === fieldKeys.length - 1 ? {
+          children: [].concat(((_localAcc$localKey = localAcc[localKey]) == null ? void 0 : _localAcc$localKey.children) || [], [field])
+        } : {}), _extends3));
+      }, {});
+      var removeEmptyObjects = Object.keys(mappedField).filter(function (key) {
+        return Object.keys(mappedField[key]).length;
+      }).reduce(function (acc, key) {
+        var _extends4;
+
+        return _extends({}, acc, (_extends4 = {}, _extends4[key] = mappedField[key], _extends4));
+      }, {});
+      return _extends({}, acc, removeEmptyObjects);
+    }
+
+    return _extends({}, acc, {
+      field: field
+    });
+  }, {}));
+
+  var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+    var _ref3;
+
+    if (field.children) {
+      return field.children.reduce(function (acc, child) {
+        return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+      }, {});
+    }
+
+    return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+  };
+
   return {
@@ -351,12 +394,10 @@ form: form,
         return _extends({}, prevState, fields.reduce(function (acc, item) {
-          var _extends3;
-
-          return _extends({}, acc, (_extends3 = {}, _extends3[item.key] = generateField(item, prevState, setInnerForm), _extends3));
+          return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
         }, {}));
       });
     },
-    removeFields: function removeFields(fields) {
+    removeFieldIds: function removeFieldIds(fields) {
       return setInnerForm(function (prevState) {
         return Object.keys(prevState).reduce(function (acc, key) {
-          var _extends4;
+          var _extends5;
 
@@ -367,3 +408,3 @@ if (fields.includes(key)) {
 
-          return _extends({}, acc, (_extends4 = {}, _extends4[key] = prevState[key], _extends4));
+          return _extends({}, acc, (_extends5 = {}, _extends5[key] = prevState[key], _extends5));
         }, {});
@@ -385,8 +426,8 @@ });
         return Boolean(field.errorMessage);
-      }).reduce(function (acc, _ref2) {
-        var _extends5;
+      }).reduce(function (acc, _ref4) {
+        var _extends6;
 
-        var key = _ref2.key,
-            errorMessage = _ref2.errorMessage;
-        return _extends({}, acc, (_extends5 = {}, _extends5[key] = errorMessage, _extends5));
+        var key = _ref4.key,
+            errorMessage = _ref4.errorMessage;
+        return _extends({}, acc, (_extends6 = {}, _extends6[key] = errorMessage, _extends6));
       }, {});
@@ -401,9 +442,9 @@ var hasErrors = Object.values(errors).length > 0;
 
-      var parsedForm = Object.values(form).reduce(function (acc, _ref3) {
-        var _extends6;
+      var parsedForm = Object.values(form).reduce(function (acc, _ref5) {
+        var _extends7;
 
-        var key = _ref3.key,
-            value = _ref3.value,
-            submitParser = _ref3.submitParser;
-        return _extends({}, acc, (_extends6 = {}, _extends6[key] = submitParser ? submitParser(value) : value, _extends6));
+        var key = _ref5.key,
+            value = _ref5.value,
+            submitParser = _ref5.submitParser;
+        return _extends({}, acc, (_extends7 = {}, _extends7[key] = submitParser ? submitParser(value) : value, _extends7));
       }, {});
@@ -410,0 +451,0 @@ callbacks.onSuccess(parsedForm);

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

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

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

@@ -86,2 +86,3 @@ import { useState } from 'react';
     submitParser: submitParser,
+    parentKey: '',
     value: field.value,
@@ -158,5 +159,9 @@ hasChange: field.value !== localInitialValue,
 
-var generateField = function generateField(fieldConfig, prevState, setState) {
+var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
   var _prevState$fieldConfi;
 
+  if (parentKey === void 0) {
+    parentKey = '';
+  }
+
   var computeErrorMessage = function computeErrorMessage(field, value, forceCheck) {
@@ -191,2 +196,3 @@ if (forceCheck === void 0) {
     isPristine: true,
+    parentKey: parentKey,
     isRequired: fieldConfig.isRequired || false,
@@ -309,4 +315,41 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
-  var form = _extends({}, injectedForm, innerForm);
+  var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
+    var field = _ref2[1];
+    var fieldKeys = field.parentKey.split('.').filter(Boolean);
 
+    if (fieldKeys.length > 0) {
+      var mappedField = fieldKeys.reduce(function (localAcc, localKey, index) {
+        var _localAcc$localKey, _extends3;
+
+        return _extends({}, acc, localAcc, (_extends3 = {}, _extends3[localKey] = _extends({}, acc[localKey], localAcc[localKey] || {}, index === fieldKeys.length - 1 ? {
+          children: [].concat(((_localAcc$localKey = localAcc[localKey]) == null ? void 0 : _localAcc$localKey.children) || [], [field])
+        } : {}), _extends3));
+      }, {});
+      var removeEmptyObjects = Object.keys(mappedField).filter(function (key) {
+        return Object.keys(mappedField[key]).length;
+      }).reduce(function (acc, key) {
+        var _extends4;
+
+        return _extends({}, acc, (_extends4 = {}, _extends4[key] = mappedField[key], _extends4));
+      }, {});
+      return _extends({}, acc, removeEmptyObjects);
+    }
+
+    return _extends({}, acc, {
+      field: field
+    });
+  }, {}));
+
+  var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+    var _ref3;
+
+    if (field.children) {
+      return field.children.reduce(function (acc, child) {
+        return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+      }, {});
+    }
+
+    return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+  };
+
   return {
@@ -347,12 +390,10 @@ form: form,
         return _extends({}, prevState, fields.reduce(function (acc, item) {
-          var _extends3;
-
-          return _extends({}, acc, (_extends3 = {}, _extends3[item.key] = generateField(item, prevState, setInnerForm), _extends3));
+          return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
         }, {}));
       });
     },
-    removeFields: function removeFields(fields) {
+    removeFieldIds: function removeFieldIds(fields) {
       return setInnerForm(function (prevState) {
         return Object.keys(prevState).reduce(function (acc, key) {
-          var _extends4;
+          var _extends5;
 
@@ -363,3 +404,3 @@ if (fields.includes(key)) {
 
-          return _extends({}, acc, (_extends4 = {}, _extends4[key] = prevState[key], _extends4));
+          return _extends({}, acc, (_extends5 = {}, _extends5[key] = prevState[key], _extends5));
         }, {});
@@ -381,8 +422,8 @@ });
         return Boolean(field.errorMessage);
-      }).reduce(function (acc, _ref2) {
-        var _extends5;
+      }).reduce(function (acc, _ref4) {
+        var _extends6;
 
-        var key = _ref2.key,
-            errorMessage = _ref2.errorMessage;
-        return _extends({}, acc, (_extends5 = {}, _extends5[key] = errorMessage, _extends5));
+        var key = _ref4.key,
+            errorMessage = _ref4.errorMessage;
+        return _extends({}, acc, (_extends6 = {}, _extends6[key] = errorMessage, _extends6));
       }, {});
@@ -397,9 +438,9 @@ var hasErrors = Object.values(errors).length > 0;
 
-      var parsedForm = Object.values(form).reduce(function (acc, _ref3) {
-        var _extends6;
+      var parsedForm = Object.values(form).reduce(function (acc, _ref5) {
+        var _extends7;
 
-        var key = _ref3.key,
-            value = _ref3.value,
-            submitParser = _ref3.submitParser;
-        return _extends({}, acc, (_extends6 = {}, _extends6[key] = submitParser ? submitParser(value) : value, _extends6));
+        var key = _ref5.key,
+            value = _ref5.value,
+            submitParser = _ref5.submitParser;
+        return _extends({}, acc, (_extends7 = {}, _extends7[key] = submitParser ? submitParser(value) : value, _extends7));
       }, {});
@@ -406,0 +447,0 @@ callbacks.onSuccess(parsedForm);

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

@@ -89,2 +89,3 @@ (function (global, factory) {
       submitParser: submitParser,
+      parentKey: '',
       value: field.value,
@@ -161,5 +162,9 @@ hasChange: field.value !== localInitialValue,
 
-  var generateField = function generateField(fieldConfig, prevState, setState) {
+  var generateField = function generateField(fieldConfig, prevState, setState, parentKey) {
     var _prevState$fieldConfi;
 
+    if (parentKey === void 0) {
+      parentKey = '';
+    }
+
     var computeErrorMessage = function computeErrorMessage(field, value, forceCheck) {
@@ -194,2 +199,3 @@ if (forceCheck === void 0) {
       isPristine: true,
+      parentKey: parentKey,
       isRequired: fieldConfig.isRequired || false,
@@ -312,4 +318,41 @@ validateOnBlur: fieldConfig.validateOnBlur || false,
 
-    var form = _extends({}, injectedForm, innerForm);
+    var form = _extends({}, injectedForm, Object.entries(innerForm).reduce(function (acc, _ref2) {
+      var field = _ref2[1];
+      var fieldKeys = field.parentKey.split('.').filter(Boolean);
 
+      if (fieldKeys.length > 0) {
+        var mappedField = fieldKeys.reduce(function (localAcc, localKey, index) {
+          var _localAcc$localKey, _extends3;
+
+          return _extends({}, acc, localAcc, (_extends3 = {}, _extends3[localKey] = _extends({}, acc[localKey], localAcc[localKey] || {}, index === fieldKeys.length - 1 ? {
+            children: [].concat(((_localAcc$localKey = localAcc[localKey]) == null ? void 0 : _localAcc$localKey.children) || [], [field])
+          } : {}), _extends3));
+        }, {});
+        var removeEmptyObjects = Object.keys(mappedField).filter(function (key) {
+          return Object.keys(mappedField[key]).length;
+        }).reduce(function (acc, key) {
+          var _extends4;
+
+          return _extends({}, acc, (_extends4 = {}, _extends4[key] = mappedField[key], _extends4));
+        }, {});
+        return _extends({}, acc, removeEmptyObjects);
+      }
+
+      return _extends({}, acc, {
+        field: field
+      });
+    }, {}));
+
+    var addFieldsRecurrence = function addFieldsRecurrence(field, prevState, parentKey) {
+      var _ref3;
+
+      if (field.children) {
+        return field.children.reduce(function (acc, child) {
+          return _extends({}, acc, addFieldsRecurrence(child, prevState, parentKey + "." + field.key));
+        }, {});
+      }
+
+      return _ref3 = {}, _ref3[field.key] = generateField(field, prevState, setInnerForm, parentKey), _ref3;
+    };
+
     return {
@@ -350,12 +393,10 @@ form: form,
           return _extends({}, prevState, fields.reduce(function (acc, item) {
-            var _extends3;
-
-            return _extends({}, acc, (_extends3 = {}, _extends3[item.key] = generateField(item, prevState, setInnerForm), _extends3));
+            return _extends({}, acc, addFieldsRecurrence(item, prevState, ''));
           }, {}));
         });
       },
-      removeFields: function removeFields(fields) {
+      removeFieldIds: function removeFieldIds(fields) {
         return setInnerForm(function (prevState) {
           return Object.keys(prevState).reduce(function (acc, key) {
-            var _extends4;
+            var _extends5;
 
@@ -366,3 +407,3 @@ if (fields.includes(key)) {
 
-            return _extends({}, acc, (_extends4 = {}, _extends4[key] = prevState[key], _extends4));
+            return _extends({}, acc, (_extends5 = {}, _extends5[key] = prevState[key], _extends5));
           }, {});
@@ -384,8 +425,8 @@ });
           return Boolean(field.errorMessage);
-        }).reduce(function (acc, _ref2) {
-          var _extends5;
+        }).reduce(function (acc, _ref4) {
+          var _extends6;
 
-          var key = _ref2.key,
-              errorMessage = _ref2.errorMessage;
-          return _extends({}, acc, (_extends5 = {}, _extends5[key] = errorMessage, _extends5));
+          var key = _ref4.key,
+              errorMessage = _ref4.errorMessage;
+          return _extends({}, acc, (_extends6 = {}, _extends6[key] = errorMessage, _extends6));
         }, {});
@@ -400,9 +441,9 @@ var hasErrors = Object.values(errors).length > 0;
 
-        var parsedForm = Object.values(form).reduce(function (acc, _ref3) {
-          var _extends6;
+        var parsedForm = Object.values(form).reduce(function (acc, _ref5) {
+          var _extends7;
 
-          var key = _ref3.key,
-              value = _ref3.value,
-              submitParser = _ref3.submitParser;
-          return _extends({}, acc, (_extends6 = {}, _extends6[key] = submitParser ? submitParser(value) : value, _extends6));
+          var key = _ref5.key,
+              value = _ref5.value,
+              submitParser = _ref5.submitParser;
+          return _extends({}, acc, (_extends7 = {}, _extends7[key] = submitParser ? submitParser(value) : value, _extends7));
         }, {});
@@ -409,0 +450,0 @@ callbacks.onSuccess(parsedForm);

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

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

index.d.ts

@@ -50,3 +50,3 @@ type VoidFunction = () => void
     addFields(fields: Array<Field>): void,
-    removeFields(fields: Array<string>)
+    removeFieldIds(fields: Array<string>)
 }
@@ -53,0 +53,0 @@

package.json

@@ -6,3 +6,3 @@ {
     "typings": "index.d.ts",
-    "version": "1.0.25",
+    "version": "1.1.0",
     "main": "dist/index.js",
@@ -16,3 +16,3 @@ "scripts": {
     "peerDependencies": {
-        "react": "^17.0.0",
+        "react": "18.x.x",
         "ramda": "^0.28.0"
@@ -19,0 +19,0 @@ },

src/main/generateField.ts

@@ -9,3 +9,4 @@ import React from 'react'
     prevState: InnerForm<T>,
-    setState: React.Dispatch<React.SetStateAction<InnerForm<T>>>
+    setState: React.Dispatch<React.SetStateAction<InnerForm<T>>>,
+    parentKey: string = ''
 ): ExtendedConfig<T> => {
@@ -42,2 +43,3 @@ const computeErrorMessage = (field: ExtendedConfig<T>, value?: T, forceCheck: boolean = false) => {
         isPristine: true,
+        parentKey,
         isRequired: fieldConfig.isRequired || false,
@@ -44,0 +46,0 @@ validateOnBlur: fieldConfig.validateOnBlur || false,

src/main/types.ts

@@ -22,2 +22,3 @@ import { VoidFunction } from 'lib/types'
     validationRules?: Array<ValidationRule<T>>,
+    children: Array<FieldConfig<T>>,
     liveParser?(value: T): T,
@@ -43,2 +44,3 @@ submitParser?(value: T): T
     validate: VoidFunction,
+    parentKey: string,
     validateOnSubmit(): string,
@@ -45,0 +47,0 @@ onChangeValue(newValue: T): void,

src/main/useField.ts

@@ -55,2 +55,3 @@ import { useState } from 'react'
         submitParser,
+        parentKey: '',
         value: field.value,
@@ -57,0 +58,0 @@ hasChange: field.value !== localInitialValue,

src/main/useForm.ts

@@ -27,5 +27,59 @@ import { useState } from 'react'
         ...injectedForm,
-        ...innerForm
+        ...Object
+            .entries<GateField<any>>(innerForm)
+            .reduce((acc, [_, field]) => {
+                const fieldKeys = field.parentKey
+                    .split('.')
+                    .filter(Boolean)
+
+                if (fieldKeys.length > 0) {
+                    const mappedField = fieldKeys
+                        .reduce((localAcc, localKey, index) => ({
+                            ...acc,
+                            ...localAcc,
+                            [localKey]: {
+                                ...acc[localKey],
+                                ...(localAcc[localKey] || {}),
+                                ...(index === fieldKeys.length - 1 ? {
+                                    children: [
+                                        ...(localAcc[localKey]?.children || []),
+                                        field
+                                    ]
+                                } : {})
+                            }
+                        }), {})
+                    const removeEmptyObjects = Object
+                        .keys(mappedField)
+                        .filter(key => Object.keys(mappedField[key]).length)
+                        .reduce((acc, key) => ({
+                            ...acc,
+                            [key]: mappedField[key]
+                        }), {})
+
+                    return {
+                        ...acc,
+                        ...removeEmptyObjects
+                    }
+                }
+
+                return {
+                    ...acc,
+                    field
+                }
+            }, {})
     }
 
+    const addFieldsRecurrence = (field: FieldConfig<any>, prevState: any, parentKey: string): any => {
+        if (field.children) {
+            return field.children.reduce((acc, child) => ({
+                ...acc,
+                ...addFieldsRecurrence(child, prevState, `${parentKey}.${field.key}`)
+            }), {})
+        }
+
+        return {
+            [field.key]: generateField(field, prevState, setInnerForm, parentKey)
+        }
+    }
+
     return {
@@ -62,6 +116,6 @@ form,
                 ...acc,
-                [item.key]: generateField(item, prevState, setInnerForm)
+                ...addFieldsRecurrence(item, prevState, '')
             }), {})
         })),
-        removeFields: (fields: Array<string>) => setInnerForm(prevState => Object
+        removeFieldIds: (fields: Array<string>) => setInnerForm(prevState => Object
             .keys(prevState)
@@ -68,0 +122,0 @@ .reduce((acc, key) => {

No alert changes

Improved metrics

Total package byte prevSize

203547

increased by14.35%

Lines of code

1791

increased by9.94%

No dependency changes