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

Comparing version 1.0.17 to 1.0.18

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

@@ -47,9 +47,13 @@ 'use strict';
 
-  var _useState = react.useState({
-    value: initialValue,
+  var _useState = react.useState(initialValue),
+      localInitialValue = _useState[0],
+      setLocalInitialValue = _useState[1];
+
+  var _useState2 = react.useState({
+    value: localInitialValue,
     isPristine: true,
     errorMessage: ''
   }),
-      field = _useState[0],
-      setField = _useState[1];
+      field = _useState2[0],
+      setField = _useState2[1];
 
@@ -81,2 +85,5 @@ var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
 
+  react.useEffect(function () {
+    setLocalInitialValue(initialValue);
+  }, [initialValue]);
   return {
@@ -89,3 +96,3 @@ key: key,
     value: field.value,
-    hasChange: field.value !== initialValue,
+    hasChange: field.value !== localInitialValue,
     errorMessage: field.errorMessage,
@@ -109,2 +116,13 @@ onBlur: function onBlur() {
     },
+    onChangeInitialValue: function onChangeInitialValue(value) {
+      if (field.value === localInitialValue) {
+        setField(function (prevState) {
+          return _extends({}, prevState, {
+            value: value
+          });
+        });
+      }
+
+      setLocalInitialValue(value);
+    },
     validateOnSubmit: function validateOnSubmit() {
@@ -193,2 +211,5 @@ var errorMessage = computeErrorMessage(undefined, true);
     },
+    setFieldInitialValue: function setFieldInitialValue(field, value) {
+      form[field].onChangeInitialValue(value);
+    },
     resetForm: function resetForm() {
@@ -195,0 +216,0 @@ return Object.keys(form).forEach(function (key) {

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 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},u=function(r,e){return t(r)&&e(r)};exports.useField=function(u){var i=u.key,a=u.label,o=u.initialValue,s=u.validationRules,c=u.isRequired,l=u.placeholder,f=u.validateOnBlur,v=void 0!==f&&f,d=u.liveParser,g=u.submitParser,b=r.useState({value:o,isPristine:!0,errorMessage:""}),h=b[0],m=b[1],M=function(r,n){if(void 0===n&&(n=!1),!n&&h.isPristine||!s)return"";var u=t(r)?r:h.value;if(c&&e.isEmpty(u))return s[0].errorMessage;if(!c&&!Boolean(u))return"";var i=s.find((function(r){return!r.validate(u)}));return i?i.errorMessage:""};return{key:i,label:a,isRequired:c,placeholder:l,submitParser:g,value:h.value,hasChange:h.value!==o,errorMessage:h.errorMessage,onBlur:function(){return v&&m((function(r){return n({},r,{isPristine:!1,errorMessage:M(void 0,!0)})}))},onChangeValue:function(r){return m((function(e){return n({},e,{value:d?d(r):r,isPristine:e.isPristine?v:e.isPristine,errorMessage:M(r)})}))},validateOnSubmit:function(){var r=M(void 0,!0);return r?(m((function(e){return n({},e,{errorMessage:r})})),r):""},setError:function(r){return m((function(e){return n({},e,{errorMessage:r})}))},resetState:function(){return m((function(r){return n({},r,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return m((function(r){return n({},r,{errorMessage:M(void 0,!0)})}))}}},exports.useForm=function(r,t){var i=Object.entries(r).reduce((function(r,e){var t;return n({},r,((t={})[e[0]]=e[1],t))}),{}),a=function(r){var n=r.some((function(r){return r.isRequired&&Boolean(r.value)}));return{hasError:r.some((function(r){return!e.isEmpty(r.errorMessage)}))||n}}(Object.values(r));return{form:i,hasError:a.hasError,formHasChanges:function(){return Object.values(i).some((function(r){return r.hasChange}))},setError:function(r,e){i[r].setError(e),u(t.onError,(function(n){var t;return n(((t={})[r]=e,t))}))},setFieldValue:function(r,e){i[r].onChangeValue(e)},resetForm:function(){return Object.keys(i).forEach((function(r){return i[r].resetState()}))},submit:function(){var r=Object.values(i).map((function(r){return{key:r.key,errorMessage:r.validateOnSubmit()}})).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 u(t.onError,(function(e){return e(r)}));var e=Object.values(i).reduce((function(r,e){var t,u=e.value,i=e.submitParser;return n({},r,((t={})[e.key]=i?i(u):u,t))}),{});t.onSuccess(e)},validateAll:function(){return Object.values(i).forEach((function(r){return r.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},u=function(e,r){return t(e)&&r(e)};exports.useField=function(u){var i=u.key,a=u.label,o=u.initialValue,s=u.validationRules,c=u.isRequired,l=u.placeholder,f=u.validateOnBlur,v=void 0!==f&&f,d=u.liveParser,g=u.submitParser,h=e.useState(o),b=h[0],m=h[1],M=e.useState({value:b,isPristine:!0,errorMessage:""}),O=M[0],p=M[1],y=function(e,n){if(void 0===n&&(n=!1),!n&&O.isPristine||!s)return"";var u=t(e)?e:O.value;if(c&&r.isEmpty(u))return s[0].errorMessage;if(!c&&!Boolean(u))return"";var i=s.find((function(e){return!e.validate(u)}));return i?i.errorMessage:""};return e.useEffect((function(){m(o)}),[o]),{key:i,label:a,isRequired:c,placeholder:l,submitParser:g,value:O.value,hasChange:O.value!==b,errorMessage:O.errorMessage,onBlur:function(){return v&&p((function(e){return n({},e,{isPristine:!1,errorMessage:y(void 0,!0)})}))},onChangeValue:function(e){return p((function(r){return n({},r,{value:d?d(e):e,isPristine:r.isPristine?v:r.isPristine,errorMessage:y(e)})}))},onChangeInitialValue:function(e){O.value===b&&p((function(r){return n({},r,{value:e})})),m(e)},validateOnSubmit:function(){var e=y(void 0,!0);return e?(p((function(r){return n({},r,{errorMessage:e})})),e):""},setError:function(e){return p((function(r){return n({},r,{errorMessage:e})}))},resetState:function(){return p((function(e){return n({},e,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return p((function(e){return n({},e,{errorMessage:y(void 0,!0)})}))}}},exports.useForm=function(e,t){var i=Object.entries(e).reduce((function(e,r){var t;return n({},e,((t={})[r[0]]=r[1],t))}),{}),a=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(e));return{form:i,hasError:a.hasError,formHasChanges:function(){return Object.values(i).some((function(e){return e.hasChange}))},setError:function(e,r){i[e].setError(r),u(t.onError,(function(n){var t;return n(((t={})[e]=r,t))}))},setFieldValue:function(e,r){i[e].onChangeValue(r)},setFieldInitialValue:function(e,r){i[e].onChangeInitialValue(r)},resetForm:function(){return Object.keys(i).forEach((function(e){return i[e].resetState()}))},submit:function(){var e=Object.values(i).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 u(t.onError,(function(r){return r(e)}));var r=Object.values(i).reduce((function(e,r){var t,u=r.value,i=r.submitParser;return n({},e,((t={})[r.key]=i?i(u):u,t))}),{});t.onSuccess(r)},validateAll:function(){return Object.values(i).forEach((function(e){return e.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, useEffect } from 'react';
 import { isEmpty } from 'ramda';
@@ -43,9 +43,13 @@
 
-  var _useState = useState({
-    value: initialValue,
+  var _useState = useState(initialValue),
+      localInitialValue = _useState[0],
+      setLocalInitialValue = _useState[1];
+
+  var _useState2 = useState({
+    value: localInitialValue,
     isPristine: true,
     errorMessage: ''
   }),
-      field = _useState[0],
-      setField = _useState[1];
+      field = _useState2[0],
+      setField = _useState2[1];
 
@@ -77,2 +81,5 @@ var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
 
+  useEffect(function () {
+    setLocalInitialValue(initialValue);
+  }, [initialValue]);
   return {
@@ -85,3 +92,3 @@ key: key,
     value: field.value,
-    hasChange: field.value !== initialValue,
+    hasChange: field.value !== localInitialValue,
     errorMessage: field.errorMessage,
@@ -105,2 +112,13 @@ onBlur: function onBlur() {
     },
+    onChangeInitialValue: function onChangeInitialValue(value) {
+      if (field.value === localInitialValue) {
+        setField(function (prevState) {
+          return _extends({}, prevState, {
+            value: value
+          });
+        });
+      }
+
+      setLocalInitialValue(value);
+    },
     validateOnSubmit: function validateOnSubmit() {
@@ -189,2 +207,5 @@ var errorMessage = computeErrorMessage(undefined, true);
     },
+    setFieldInitialValue: function setFieldInitialValue(field, value) {
+      form[field].onChangeInitialValue(value);
+    },
     resetForm: function resetForm() {
@@ -191,0 +212,0 @@ return Object.keys(form).forEach(function (key) {

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

@@ -46,9 +46,13 @@ (function (global, factory) {
 
-    var _useState = react.useState({
-      value: initialValue,
+    var _useState = react.useState(initialValue),
+        localInitialValue = _useState[0],
+        setLocalInitialValue = _useState[1];
+
+    var _useState2 = react.useState({
+      value: localInitialValue,
       isPristine: true,
       errorMessage: ''
     }),
-        field = _useState[0],
-        setField = _useState[1];
+        field = _useState2[0],
+        setField = _useState2[1];
 
@@ -80,2 +84,5 @@ var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
 
+    react.useEffect(function () {
+      setLocalInitialValue(initialValue);
+    }, [initialValue]);
     return {
@@ -88,3 +95,3 @@ key: key,
       value: field.value,
-      hasChange: field.value !== initialValue,
+      hasChange: field.value !== localInitialValue,
       errorMessage: field.errorMessage,
@@ -108,2 +115,13 @@ onBlur: function onBlur() {
       },
+      onChangeInitialValue: function onChangeInitialValue(value) {
+        if (field.value === localInitialValue) {
+          setField(function (prevState) {
+            return _extends({}, prevState, {
+              value: value
+            });
+          });
+        }
+
+        setLocalInitialValue(value);
+      },
       validateOnSubmit: function validateOnSubmit() {
@@ -192,2 +210,5 @@ var errorMessage = computeErrorMessage(undefined, true);
       },
+      setFieldInitialValue: function setFieldInitialValue(field, value) {
+        form[field].onChangeInitialValue(value);
+      },
       resetForm: function resetForm() {
@@ -194,0 +215,0 @@ return Object.keys(form).forEach(function (key) {

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 u=function(e){return null!=e},i=function(e,r){return u(e)&&r(e)};e.useField=function(e){var i=e.key,a=e.label,o=e.initialValue,s=e.validationRules,c=e.isRequired,f=e.placeholder,l=e.validateOnBlur,v=void 0!==l&&l,d=e.liveParser,g=e.submitParser,m=r.useState({value:o,isPristine:!0,errorMessage:""}),b=m[0],h=m[1],p=function(e,r){if(void 0===r&&(r=!1),!r&&b.isPristine||!s)return"";var t=u(e)?e:b.value;if(c&&n.isEmpty(t))return s[0].errorMessage;if(!c&&!Boolean(t))return"";var i=s.find((function(e){return!e.validate(t)}));return i?i.errorMessage:""};return{key:i,label:a,isRequired:c,placeholder:f,submitParser:g,value:b.value,hasChange:b.value!==o,errorMessage:b.errorMessage,onBlur:function(){return v&&h((function(e){return t({},e,{isPristine:!1,errorMessage:p(void 0,!0)})}))},onChangeValue:function(e){return h((function(r){return t({},r,{value:d?d(e):e,isPristine:r.isPristine?v:r.isPristine,errorMessage:p(e)})}))},validateOnSubmit:function(){var e=p(void 0,!0);return e?(h((function(r){return t({},r,{errorMessage:e})})),e):""},setError:function(e){return h((function(r){return t({},r,{errorMessage:e})}))},resetState:function(){return h((function(e){return t({},e,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return h((function(e){return t({},e,{errorMessage:p(void 0,!0)})}))}}},e.useForm=function(e,r){var u=Object.entries(e).reduce((function(e,r){var n;return t({},e,((n={})[r[0]]=r[1],n))}),{}),a=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));return{form:u,hasError:a.hasError,formHasChanges:function(){return Object.values(u).some((function(e){return e.hasChange}))},setError:function(e,n){u[e].setError(n),i(r.onError,(function(r){var t;return r(((t={})[e]=n,t))}))},setFieldValue:function(e,r){u[e].onChangeValue(r)},resetForm:function(){return Object.keys(u).forEach((function(e){return u[e].resetState()}))},submit:function(){var e=Object.values(u).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 i(r.onError,(function(r){return r(e)}));var n=Object.values(u).reduce((function(e,r){var n,u=r.value,i=r.submitParser;return t({},e,((n={})[r.key]=i?i(u):u,n))}),{});r.onSuccess(n)},validateAll:function(){return Object.values(u).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 u=function(e){return null!=e},i=function(e,r){return u(e)&&r(e)};e.useField=function(e){var i=e.key,a=e.label,o=e.initialValue,s=e.validationRules,c=e.isRequired,f=e.placeholder,l=e.validateOnBlur,v=void 0!==l&&l,d=e.liveParser,g=e.submitParser,m=r.useState(o),b=m[0],h=m[1],p=r.useState({value:b,isPristine:!0,errorMessage:""}),y=p[0],M=p[1],O=function(e,r){if(void 0===r&&(r=!1),!r&&y.isPristine||!s)return"";var t=u(e)?e:y.value;if(c&&n.isEmpty(t))return s[0].errorMessage;if(!c&&!Boolean(t))return"";var i=s.find((function(e){return!e.validate(t)}));return i?i.errorMessage:""};return r.useEffect((function(){h(o)}),[o]),{key:i,label:a,isRequired:c,placeholder:f,submitParser:g,value:y.value,hasChange:y.value!==b,errorMessage:y.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){y.value===b&&M((function(r){return t({},r,{value:e})})),h(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,r){var u=Object.entries(e).reduce((function(e,r){var n;return t({},e,((n={})[r[0]]=r[1],n))}),{}),a=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));return{form:u,hasError:a.hasError,formHasChanges:function(){return Object.values(u).some((function(e){return e.hasChange}))},setError:function(e,n){u[e].setError(n),i(r.onError,(function(r){var t;return r(((t={})[e]=n,t))}))},setFieldValue:function(e,r){u[e].onChangeValue(r)},setFieldInitialValue:function(e,r){u[e].onChangeInitialValue(r)},resetForm:function(){return Object.keys(u).forEach((function(e){return u[e].resetState()}))},submit:function(){var e=Object.values(u).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 i(r.onError,(function(r){return r(e)}));var n=Object.values(u).reduce((function(e,r){var n,u=r.value,i=r.submitParser;return t({},e,((n={})[r.key]=i?i(u):u,n))}),{});r.onSuccess(n)},validateAll:function(){return Object.values(u).forEach((function(e){return e.validate()}))}}},Object.defineProperty(e,"__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.0.17",
+    "version": "1.0.18",
     "main": "dist/index.js",
@@ -9,0 +9,0 @@ "scripts": {

src/main/types.ts

@@ -45,2 +45,3 @@ import { VoidFunction } from 'lib/types'
     submitParser?(value: T): T,
+    onChangeInitialValue(value: T): void,
     resetState(): void,
@@ -47,0 +48,0 @@ setError(errorMessage: string): void

src/main/useField.ts

@@ -1,2 +0,2 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isEmpty } from 'ramda'
@@ -17,4 +17,5 @@ import { R } from 'lib/utils'
 }: FieldConfig<T>): GateField<T> {
+    const [localInitialValue, setLocalInitialValue] = useState(initialValue)
     const [field, setField] = useState<GateFieldState<T>>({
-        value: initialValue,
+        value: localInitialValue,
         isPristine: true,
@@ -49,2 +50,6 @@ errorMessage: ''
 
+    useEffect(() => {
+        setLocalInitialValue(initialValue)
+    }, [initialValue])
+
     return {
@@ -57,3 +62,3 @@ key,
         value: field.value,
-        hasChange: field.value !== initialValue,
+        hasChange: field.value !== localInitialValue,
         errorMessage: field.errorMessage,
@@ -75,2 +80,12 @@ onBlur: () => validateOnBlur && setField(prevState => ({
         })),
+        onChangeInitialValue: (value: T) => {
+            if (field.value === localInitialValue) {
+                setField(prevState => ({
+                    ...prevState,
+                    value
+                }))
+            }
+
+            setLocalInitialValue(value)
+        },
         validateOnSubmit: () => {
@@ -77,0 +92,0 @@ const errorMessage = computeErrorMessage(undefined, true)

src/main/useForm.ts

@@ -39,2 +39,5 @@ import { R } from 'lib/utils'
         },
+        setFieldInitialValue: (field: keyof T, value: any) => {
+            form[field].onChangeInitialValue(value)
+        },
         resetForm: () => Object
@@ -41,0 +44,0 @@ .keys(form)

No alert changes

Improved metrics

Total package byte prevSize

103169

9.3%

Lines of code

1054

7.77%

No dependency changes