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

Comparing version 1.0.20 to 1.0.21

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

@@ -46,2 +46,3 @@ 'use strict';
       submitParser = _ref.submitParser;
+  var stateRef = react.useRef({});
 
@@ -60,6 +61,6 @@ var _useState = react.useState(initialValue),
 
-  var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
-    if (forceCheck === void 0) {
-      forceCheck = false;
-    }
+  var computeErrorMessage = function computeErrorMessage(_ref2) {
+    var value = _ref2.value,
+        _ref2$forceCheck = _ref2.forceCheck,
+        forceCheck = _ref2$forceCheck === void 0 ? false : _ref2$forceCheck;
 
@@ -81,3 +82,3 @@ if (!forceCheck && field.isPristine || !validationRules) {
     var firstError = validationRules.find(function (rule) {
-      return !rule.validate(val);
+      return !rule.validate(val, stateRef.current);
     });
@@ -100,3 +101,6 @@ return firstError ? firstError.errorMessage : '';
           isPristine: false,
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: computeErrorMessage({
+            value: undefined,
+            forceCheck: true
+          })
         });
@@ -110,3 +114,5 @@ });
           isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-          errorMessage: computeErrorMessage(newValue)
+          errorMessage: computeErrorMessage({
+            value: newValue
+          })
         });
@@ -127,3 +133,6 @@ });
     validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(undefined, true);
+      var errorMessage = computeErrorMessage({
+        value: undefined,
+        forceCheck: true
+      });
 
@@ -160,5 +169,11 @@ if (errorMessage) {
         return _extends({}, prevState, {
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: computeErrorMessage({
+            value: undefined,
+            forceCheck: true
+          })
         });
       });
+    },
+    setRef: function setRef(state) {
+      return stateRef.current = state;
     }
@@ -192,2 +207,8 @@ };
 
+  react.useEffect(function () {
+    Object.keys(form) // @ts-ignore
+    .forEach(function (field) {
+      return form[field].setRef(form);
+    });
+  }, [form]);
   return {
@@ -194,0 +215,0 @@ form: form,

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},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,l=u.isRequired,c=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(l&&r.isEmpty(u))return s[0].errorMessage;if(!l&&!Boolean(u))return"";var i=s.find((function(e){return!e.validate(u)}));return i?i.errorMessage:""};return{key:i,label:a,isRequired:l,placeholder:c,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()}))}}};
+"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 a=u.key,i=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.useRef({}),b=e.useState(o),m=b[0],M=b[1],O=e.useState({value:m,isPristine:!0,errorMessage:""}),p=O[0],y=O[1],E=function(e){var n=e.value,u=e.forceCheck;if((void 0===u||!u)&&p.isPristine||!s)return"";var a=t(n)?n:p.value;if(c&&r.isEmpty(a))return s[0].errorMessage;if(!c&&!Boolean(a))return"";var i=s.find((function(e){return!e.validate(a,h.current)}));return i?i.errorMessage:""};return{key:a,label:i,isRequired:c,placeholder:l,submitParser:g,value:p.value,hasChange:p.value!==m,errorMessage:p.errorMessage,onBlur:function(){return v&&y((function(e){return n({},e,{isPristine:!1,errorMessage:E({value:void 0,forceCheck:!0})})}))},onChangeValue:function(e){return y((function(r){return n({},r,{value:d?d(e):e,isPristine:r.isPristine?v:r.isPristine,errorMessage:E({value:e})})}))},onChangeInitialValue:function(e){p.value===m&&y((function(r){return n({},r,{value:e})})),M(e)},validateOnSubmit:function(){var e=E({value:void 0,forceCheck:!0});return e?(y((function(r){return n({},r,{errorMessage:e})})),e):""},setError:function(e){return y((function(r){return n({},r,{errorMessage:e})}))},resetState:function(){return y((function(e){return n({},e,{isPristine:!0,errorMessage:"",value:o})}))},validate:function(){return y((function(e){return n({},e,{errorMessage:E({value:void 0,forceCheck:!0})})}))},setRef:function(e){return h.current=e}}},exports.useForm=function(t,a){var i=Object.entries(t).reduce((function(e,r){var t;return n({},e,((t={})[r[0]]=r[1],t))}),{}),o=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(t)).hasError;return e.useEffect((function(){Object.keys(i).forEach((function(e){return i[e].setRef(i)}))}),[i]),{form:i,hasError:o,formHasChanges:function(){return Object.values(i).some((function(e){return e.hasChange}))},setError:function(e,r){i[e].setError(r),u(a.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(a.onError,(function(r){return r(e)}));var r=Object.values(i).reduce((function(e,r){var t,u=r.value,a=r.submitParser;return n({},e,((t={})[r.key]=a?a(u):u,t))}),{});a.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 { useRef, useState, useEffect } from 'react';
 import { isEmpty } from 'ramda';
@@ -42,2 +42,3 @@
       submitParser = _ref.submitParser;
+  var stateRef = useRef({});
 
@@ -56,6 +57,6 @@ var _useState = useState(initialValue),
 
-  var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
-    if (forceCheck === void 0) {
-      forceCheck = false;
-    }
+  var computeErrorMessage = function computeErrorMessage(_ref2) {
+    var value = _ref2.value,
+        _ref2$forceCheck = _ref2.forceCheck,
+        forceCheck = _ref2$forceCheck === void 0 ? false : _ref2$forceCheck;
 
@@ -77,3 +78,3 @@ if (!forceCheck && field.isPristine || !validationRules) {
     var firstError = validationRules.find(function (rule) {
-      return !rule.validate(val);
+      return !rule.validate(val, stateRef.current);
     });
@@ -96,3 +97,6 @@ return firstError ? firstError.errorMessage : '';
           isPristine: false,
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: computeErrorMessage({
+            value: undefined,
+            forceCheck: true
+          })
         });
@@ -106,3 +110,5 @@ });
           isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-          errorMessage: computeErrorMessage(newValue)
+          errorMessage: computeErrorMessage({
+            value: newValue
+          })
         });
@@ -123,3 +129,6 @@ });
     validateOnSubmit: function validateOnSubmit() {
-      var errorMessage = computeErrorMessage(undefined, true);
+      var errorMessage = computeErrorMessage({
+        value: undefined,
+        forceCheck: true
+      });
 
@@ -156,5 +165,11 @@ if (errorMessage) {
         return _extends({}, prevState, {
-          errorMessage: computeErrorMessage(undefined, true)
+          errorMessage: computeErrorMessage({
+            value: undefined,
+            forceCheck: true
+          })
         });
       });
+    },
+    setRef: function setRef(state) {
+      return stateRef.current = state;
     }
@@ -188,2 +203,8 @@ };
 
+  useEffect(function () {
+    Object.keys(form) // @ts-ignore
+    .forEach(function (field) {
+      return form[field].setRef(form);
+    });
+  }, [form]);
   return {
@@ -190,0 +211,0 @@ form: form,

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

@@ -45,2 +45,3 @@ (function (global, factory) {
         submitParser = _ref.submitParser;
+    var stateRef = react.useRef({});
 
@@ -59,6 +60,6 @@ var _useState = react.useState(initialValue),
 
-    var computeErrorMessage = function computeErrorMessage(value, forceCheck) {
-      if (forceCheck === void 0) {
-        forceCheck = false;
-      }
+    var computeErrorMessage = function computeErrorMessage(_ref2) {
+      var value = _ref2.value,
+          _ref2$forceCheck = _ref2.forceCheck,
+          forceCheck = _ref2$forceCheck === void 0 ? false : _ref2$forceCheck;
 
@@ -80,3 +81,3 @@ if (!forceCheck && field.isPristine || !validationRules) {
       var firstError = validationRules.find(function (rule) {
-        return !rule.validate(val);
+        return !rule.validate(val, stateRef.current);
       });
@@ -99,3 +100,6 @@ return firstError ? firstError.errorMessage : '';
             isPristine: false,
-            errorMessage: computeErrorMessage(undefined, true)
+            errorMessage: computeErrorMessage({
+              value: undefined,
+              forceCheck: true
+            })
           });
@@ -109,3 +113,5 @@ });
             isPristine: prevState.isPristine ? validateOnBlur : prevState.isPristine,
-            errorMessage: computeErrorMessage(newValue)
+            errorMessage: computeErrorMessage({
+              value: newValue
+            })
           });
@@ -126,3 +132,6 @@ });
       validateOnSubmit: function validateOnSubmit() {
-        var errorMessage = computeErrorMessage(undefined, true);
+        var errorMessage = computeErrorMessage({
+          value: undefined,
+          forceCheck: true
+        });
 
@@ -159,5 +168,11 @@ if (errorMessage) {
           return _extends({}, prevState, {
-            errorMessage: computeErrorMessage(undefined, true)
+            errorMessage: computeErrorMessage({
+              value: undefined,
+              forceCheck: true
+            })
           });
         });
+      },
+      setRef: function setRef(state) {
+        return stateRef.current = state;
       }
@@ -191,2 +206,8 @@ };
 
+    react.useEffect(function () {
+      Object.keys(form) // @ts-ignore
+      .forEach(function (field) {
+        return form[field].setRef(form);
+      });
+    }, [form]);
     return {
@@ -193,0 +214,0 @@ form: form,

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

@@ -0,1 +1,3 @@
+import { GateField } from './src/main/types'
+
 type VoidFunction = () => void
@@ -5,3 +7,3 @@
     errorMessage: string,
-    validate(value: T): boolean
+    validate(value: T, state: Record<keyof T, GateField<any>>): boolean
 }
@@ -8,0 +10,0 @@

package.json

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

src/main/types.ts

@@ -0,1 +1,2 @@
+import React from 'react'
 import { VoidFunction } from 'lib/types'
@@ -5,3 +6,3 @@
     errorMessage: string,
-    validate(value: T): boolean
+    validate(value: T, state: Record<keyof T, GateField<any>>): boolean
 }
@@ -22,2 +23,3 @@
     validateOnBlur?: boolean,
+    stateRef: React.RefObject<Record<keyof T, GateField<any>>>
     validationRules?: Array<ValidationRule<T>>,
@@ -49,3 +51,4 @@ liveParser?(value: T): T,
     resetState(): void,
-    setError(errorMessage: string): void
+    setError(errorMessage: string): void,
+    setRef(state: Record<keyof T, GateField<any>>): void
 }
@@ -52,0 +55,0 @@

src/main/useField.ts

@@ -1,2 +0,2 @@
-import { useEffect, useState } from 'react'
+import { useRef, useState } from 'react'
 import { isEmpty } from 'ramda'
@@ -6,2 +6,7 @@ import { R } from 'lib/utils'
 
+type ComputerErrorMessage<T> = {
+    value?: T,
+    forceCheck?: boolean
+}
+
 export function useField<T>({
@@ -18,2 +23,3 @@ key,
 }: FieldConfig<T>): GateField<T> {
+    const stateRef = useRef<Record<keyof T, GateField<any>>>({} as Record<keyof T, GateField<any>>)
     const [localInitialValue, setLocalInitialValue] = useState(initialValue)
@@ -26,3 +32,3 @@ const [field, setField] = useState<GateFieldState<T>>({
 
-    const computeErrorMessage = (value?: T, forceCheck: boolean = false) => {
+    const computeErrorMessage = ({ value, forceCheck = false }: ComputerErrorMessage<T>) => {
         if ((!forceCheck && field.isPristine) || !validationRules) {
@@ -45,3 +51,3 @@ return ''
         const firstError = validationRules
-            .find(rule => !rule.validate(val))
+            .find(rule => !rule.validate(val, stateRef.current))
 
@@ -65,3 +71,6 @@ return firstError
             isPristine: false,
-            errorMessage: computeErrorMessage(undefined, true)
+            errorMessage: computeErrorMessage({
+                value: undefined,
+                forceCheck: true
+            })
         })),
@@ -76,3 +85,5 @@ onChangeValue: (newValue: T) => setField(prevState => ({
                 : prevState.isPristine,
-            errorMessage: computeErrorMessage(newValue)
+            errorMessage: computeErrorMessage({
+                value: newValue
+            })
         })),
@@ -90,3 +101,6 @@ onChangeInitialValue: (value: T) => {
         validateOnSubmit: () => {
-            const errorMessage = computeErrorMessage(undefined, true)
+            const errorMessage = computeErrorMessage({
+                value: undefined,
+                forceCheck: true
+            })
 
@@ -116,5 +130,9 @@ if (errorMessage) {
             ...prevState,
-            errorMessage: computeErrorMessage(undefined, true)
-        }))
+            errorMessage: computeErrorMessage({
+                value: undefined,
+                forceCheck: true
+            })
+        })),
+        setRef: (state: Record<keyof T, GateField<any>>) => stateRef.current = state
     }
 }

src/main/useForm.ts

@@ -0,1 +1,2 @@
+import { useEffect } from 'react'
 import { R } from 'lib/utils'
@@ -23,2 +24,9 @@ import { GateField } from './types'
 
+    useEffect(() => {
+        Object
+            .keys(form)
+            // @ts-ignore
+            .forEach(field => form[field as keyof T].setRef(form))
+    }, [form])
+
     return {
@@ -25,0 +33,0 @@ form,

No alert changes

Improved metrics

Total package byte prevSize

111295

increased by9.26%

Lines of code

1136

increased by8.92%

No dependency changes