@danderson00/react-forms 0.0.41 → 0.0.43

package/dist/submit.js

@@ -1,69 +1,49 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _excluded = ["onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "valid", "validate", "disableInvalid", "values"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var _default = function _default(render) {
   return function Submit(props) {
     if (!props.onSubmit) throw new Error('Button components must be contained within a Form component');
-
     var onSubmit = props.onSubmit,
-        registerFieldValidator = props.registerFieldValidator,
-        setFieldValue = props.setFieldValue,
-        getFieldValue = props.getFieldValue,
-        getFieldValues = props.getFieldValues,
-        valid = props.valid,
-        validate = props.validate,
-        disableInvalid = props.disableInvalid,
-        values = props.values,
-        propsToPass = _objectWithoutProperties(props, _excluded); // TODO: set executing when form is triggered by enter key
-
-
+      registerFieldValidator = props.registerFieldValidator,
+      setFieldValue = props.setFieldValue,
+      getFieldValue = props.getFieldValue,
+      getFieldValues = props.getFieldValues,
+      valid = props.valid,
+      validate = props.validate,
+      disableInvalid = props.disableInvalid,
+      values = props.values,
+      propsToPass = _objectWithoutProperties(props, _excluded);
+
+    // TODO: set executing when form is triggered by enter key
     var _useState = (0, _react.useState)(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        executing = _useState2[0],
-        setExecuting = _useState2[1];
-
+      _useState2 = _slicedToArray(_useState, 2),
+      executing = _useState2[0],
+      setExecuting = _useState2[1];
     var onClick = function onClick(e) {
       var result = onSubmit(e, {
         validate: validate,
         additionalValues: values
       });
-
       if (result && result["finally"] && typeof result["finally"] === 'function') {
         setExecuting(true);
         result["finally"](function () {
@@ -71,15 +51,12 @@ var _default = function _default(render) {
         });
       }
     };
-
     var finalProps = _objectSpread(_objectSpread({}, propsToPass), {}, {
       onClick: onClick,
       disabled: props.disabled || executing || disableInvalid && !valid
     });
-
     return render(finalProps);
   };
 };
-
 exports["default"] = _default;
 //# sourceMappingURL=submit.js.map

package/dist/submit.js.map

@@ -1 +1 @@
-{"version":3,"file":"submit.js","names":["render","Submit","props","onSubmit","Error","registerFieldValidator","setFieldValue","getFieldValue","getFieldValues","valid","validate","disableInvalid","values","propsToPass","useState","executing","setExecuting","onClick","e","result","additionalValues","finalProps","disabled"],"sources":["../src/submit.js"],"sourcesContent":["import React, { useState } from 'react'\n\nexport default render => function Submit(props) {\n  if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')\n\n  const {\n    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,\n    valid, validate, disableInvalid, values, ...propsToPass\n  } = props\n\n  // TODO: set executing when form is triggered by enter key\n  const [executing, setExecuting] = useState(false)\n\n  const onClick = e => {\n    const result = onSubmit(e, { validate, additionalValues: values })\n    if(result && result.finally && typeof result.finally === 'function') {\n      setExecuting(true)\n      result.finally(() => setExecuting(false))\n    }\n  }\n\n  const finalProps = {\n    ...propsToPass,\n    onClick,\n    disabled: props.disabled || executing || (disableInvalid && !valid)\n  }\n\n  return render(finalProps)\n}\n"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAEe,kBAAAA,MAAM;EAAA,OAAI,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;IAC9C,IAAG,CAACA,KAAK,CAACC,QAAV,EAAoB,MAAM,IAAIC,KAAJ,CAAU,6DAAV,CAAN;;IAEpB,IACED,QADF,GAGID,KAHJ,CACEC,QADF;IAAA,IACYE,sBADZ,GAGIH,KAHJ,CACYG,sBADZ;IAAA,IACoCC,aADpC,GAGIJ,KAHJ,CACoCI,aADpC;IAAA,IACmDC,aADnD,GAGIL,KAHJ,CACmDK,aADnD;IAAA,IACkEC,cADlE,GAGIN,KAHJ,CACkEM,cADlE;IAAA,IAEEC,KAFF,GAGIP,KAHJ,CAEEO,KAFF;IAAA,IAESC,QAFT,GAGIR,KAHJ,CAESQ,QAFT;IAAA,IAEmBC,cAFnB,GAGIT,KAHJ,CAEmBS,cAFnB;IAAA,IAEmCC,MAFnC,GAGIV,KAHJ,CAEmCU,MAFnC;IAAA,IAE8CC,WAF9C,4BAGIX,KAHJ,aAH8C,CAQ9C;;;IACA,gBAAkC,IAAAY,eAAA,EAAS,KAAT,CAAlC;IAAA;IAAA,IAAOC,SAAP;IAAA,IAAkBC,YAAlB;;IAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,CAAC,EAAI;MACnB,IAAMC,MAAM,GAAGhB,QAAQ,CAACe,CAAD,EAAI;QAAER,QAAQ,EAARA,QAAF;QAAYU,gBAAgB,EAAER;MAA9B,CAAJ,CAAvB;;MACA,IAAGO,MAAM,IAAIA,MAAM,WAAhB,IAA4B,OAAOA,MAAM,WAAb,KAA0B,UAAzD,EAAqE;QACnEH,YAAY,CAAC,IAAD,CAAZ;QACAG,MAAM,WAAN,CAAe;UAAA,OAAMH,YAAY,CAAC,KAAD,CAAlB;QAAA,CAAf;MACD;IACF,CAND;;IAQA,IAAMK,UAAU,mCACXR,WADW;MAEdI,OAAO,EAAPA,OAFc;MAGdK,QAAQ,EAAEpB,KAAK,CAACoB,QAAN,IAAkBP,SAAlB,IAAgCJ,cAAc,IAAI,CAACF;IAH/C,EAAhB;;IAMA,OAAOT,MAAM,CAACqB,UAAD,CAAb;EACD,CA1BoB;AAAA,C"}
+{"version":3,"file":"submit.js","names":["render","Submit","props","onSubmit","Error","registerFieldValidator","setFieldValue","getFieldValue","getFieldValues","valid","validate","disableInvalid","values","propsToPass","useState","executing","setExecuting","onClick","e","result","additionalValues","finalProps","disabled"],"sources":["../src/submit.js"],"sourcesContent":["import React, { useState } from 'react'\n\nexport default render => function Submit(props) {\n  if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')\n\n  const {\n    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,\n    valid, validate, disableInvalid, values, ...propsToPass\n  } = props\n\n  // TODO: set executing when form is triggered by enter key\n  const [executing, setExecuting] = useState(false)\n\n  const onClick = e => {\n    const result = onSubmit(e, { validate, additionalValues: values })\n    if(result && result.finally && typeof result.finally === 'function') {\n      setExecuting(true)\n      result.finally(() => setExecuting(false))\n    }\n  }\n\n  const finalProps = {\n    ...propsToPass,\n    onClick,\n    disabled: props.disabled || executing || (disableInvalid && !valid)\n  }\n\n  return render(finalProps)\n}\n"],"mappings":";;;;;;;AAAA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAExB,kBAAAA,MAAM;EAAA,OAAI,SAASC,MAAM,CAACC,KAAK,EAAE;IAC9C,IAAG,CAACA,KAAK,CAACC,QAAQ,EAAE,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;IAElG,IACED,QAAQ,GAEND,KAAK,CAFPC,QAAQ;MAAEE,sBAAsB,GAE9BH,KAAK,CAFGG,sBAAsB;MAAEC,aAAa,GAE7CJ,KAAK,CAF2BI,aAAa;MAAEC,aAAa,GAE5DL,KAAK,CAF0CK,aAAa;MAAEC,cAAc,GAE5EN,KAAK,CAFyDM,cAAc;MAC9EC,KAAK,GACHP,KAAK,CADPO,KAAK;MAAEC,QAAQ,GACbR,KAAK,CADAQ,QAAQ;MAAEC,cAAc,GAC7BT,KAAK,CADUS,cAAc;MAAEC,MAAM,GACrCV,KAAK,CAD0BU,MAAM;MAAKC,WAAW,4BACrDX,KAAK;;IAET;IACA,gBAAkC,IAAAY,eAAQ,EAAC,KAAK,CAAC;MAAA;MAA1CC,SAAS;MAAEC,YAAY;IAE9B,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAGC,CAAC,EAAI;MACnB,IAAMC,MAAM,GAAGhB,QAAQ,CAACe,CAAC,EAAE;QAAER,QAAQ,EAARA,QAAQ;QAAEU,gBAAgB,EAAER;MAAO,CAAC,CAAC;MAClE,IAAGO,MAAM,IAAIA,MAAM,WAAQ,IAAI,OAAOA,MAAM,WAAQ,KAAK,UAAU,EAAE;QACnEH,YAAY,CAAC,IAAI,CAAC;QAClBG,MAAM,WAAQ,CAAC;UAAA,OAAMH,YAAY,CAAC,KAAK,CAAC;QAAA,EAAC;MAC3C;IACF,CAAC;IAED,IAAMK,UAAU,mCACXR,WAAW;MACdI,OAAO,EAAPA,OAAO;MACPK,QAAQ,EAAEpB,KAAK,CAACoB,QAAQ,IAAIP,SAAS,IAAKJ,cAAc,IAAI,CAACF;IAAM,EACpE;IAED,OAAOT,MAAM,CAACqB,UAAU,CAAC;EAC3B,CAAC;AAAA;AAAA"}

package/dist/throttle.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _default = function _default(target) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
   var timeout;
@@ -12,13 +11,11 @@ var _default = function _default(target) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     clearTimeout(timeout);
     timeout = setTimeout(function () {
       return target.apply(void 0, args);
     }, delay);
   };
 };
-
 exports["default"] = _default;
 //# sourceMappingURL=throttle.js.map

package/dist/throttle.js.map

@@ -1 +1 @@
-{"version":3,"file":"throttle.js","names":["target","delay","timeout","args","clearTimeout","setTimeout"],"sources":["../src/throttle.js"],"sourcesContent":["export default (target, delay = 200) => {\n  let timeout\n\n  return (...args) => {\n    clearTimeout(timeout)\n    timeout = setTimeout(\n      () => target(...args),\n      delay\n    )\n  }\n}"],"mappings":";;;;;;;eAAe,kBAACA,MAAD,EAAyB;EAAA,IAAhBC,KAAgB,uEAAR,GAAQ;EACtC,IAAIC,OAAJ;EAEA,OAAO,YAAa;IAAA,kCAATC,IAAS;MAATA,IAAS;IAAA;;IAClBC,YAAY,CAACF,OAAD,CAAZ;IACAA,OAAO,GAAGG,UAAU,CAClB;MAAA,OAAML,MAAM,MAAN,SAAUG,IAAV,CAAN;IAAA,CADkB,EAElBF,KAFkB,CAApB;EAID,CAND;AAOD,C"}
+{"version":3,"file":"throttle.js","names":["target","delay","timeout","args","clearTimeout","setTimeout"],"sources":["../src/throttle.js"],"sourcesContent":["export default (target, delay = 200) => {\n  let timeout\n\n  return (...args) => {\n    clearTimeout(timeout)\n    timeout = setTimeout(\n      () => target(...args),\n      delay\n    )\n  }\n}"],"mappings":";;;;;;eAAe,kBAACA,MAAM,EAAkB;EAAA,IAAhBC,KAAK,uEAAG,GAAG;EACjC,IAAIC,OAAO;EAEX,OAAO,YAAa;IAAA,kCAATC,IAAI;MAAJA,IAAI;IAAA;IACbC,YAAY,CAACF,OAAO,CAAC;IACrBA,OAAO,GAAGG,UAAU,CAClB;MAAA,OAAML,MAAM,eAAIG,IAAI,CAAC;IAAA,GACrBF,KAAK,CACN;EACH,CAAC;AACH,CAAC;AAAA"}

package/dist/useForm.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _default = function _default(context) {
   return function useForm() {
     var _useContext = (0, _react.useContext)(context),
-        onSubmit = _useContext.onSubmit,
-        getFieldValues = _useContext.getFieldValues;
-
+      onSubmit = _useContext.onSubmit,
+      getFieldValues = _useContext.getFieldValues;
     return {
       submit: function submit(options) {
         return onSubmit(undefined, options);
@@ -23,6 +20,5 @@ var _default = function _default(context) {
     };
   };
 };
-
 exports["default"] = _default;
 //# sourceMappingURL=useForm.js.map

package/dist/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","names":["context","useForm","useContext","onSubmit","getFieldValues","submit","options","undefined","values"],"sources":["../src/useForm.js"],"sourcesContent":["import { useContext } from 'react'\n\nexport default context => function useForm() {\n  const { onSubmit, getFieldValues } = useContext(context)\n\n  return {\n    submit: options => onSubmit(undefined, options),\n    values: () => getFieldValues()\n  }\n}"],"mappings":";;;;;;;AAAA;;eAEe,kBAAAA,OAAO;EAAA,OAAI,SAASC,OAAT,GAAmB;IAC3C,kBAAqC,IAAAC,iBAAA,EAAWF,OAAX,CAArC;IAAA,IAAQG,QAAR,eAAQA,QAAR;IAAA,IAAkBC,cAAlB,eAAkBA,cAAlB;;IAEA,OAAO;MACLC,MAAM,EAAE,gBAAAC,OAAO;QAAA,OAAIH,QAAQ,CAACI,SAAD,EAAYD,OAAZ,CAAZ;MAAA,CADV;MAELE,MAAM,EAAE;QAAA,OAAMJ,cAAc,EAApB;MAAA;IAFH,CAAP;EAID,CAPqB;AAAA,C"}
+{"version":3,"file":"useForm.js","names":["context","useForm","useContext","onSubmit","getFieldValues","submit","options","undefined","values"],"sources":["../src/useForm.js"],"sourcesContent":["import { useContext } from 'react'\n\nexport default context => function useForm() {\n  const { onSubmit, getFieldValues } = useContext(context)\n\n  return {\n    submit: options => onSubmit(undefined, options),\n    values: () => getFieldValues()\n  }\n}"],"mappings":";;;;;;AAAA;AAAkC,eAEnB,kBAAAA,OAAO;EAAA,OAAI,SAASC,OAAO,GAAG;IAC3C,kBAAqC,IAAAC,iBAAU,EAACF,OAAO,CAAC;MAAhDG,QAAQ,eAARA,QAAQ;MAAEC,cAAc,eAAdA,cAAc;IAEhC,OAAO;MACLC,MAAM,EAAE,gBAAAC,OAAO;QAAA,OAAIH,QAAQ,CAACI,SAAS,EAAED,OAAO,CAAC;MAAA;MAC/CE,MAAM,EAAE;QAAA,OAAMJ,cAAc,EAAE;MAAA;IAChC,CAAC;EACH,CAAC;AAAA;AAAA"}

package/dist/useFormValues.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _default = function _default(context) {
   return function useFormValues() {
     return (0, _react.useContext)(context).getFieldValues();
   };
 };
-
 exports["default"] = _default;
 //# sourceMappingURL=useFormValues.js.map

package/dist/useFormValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormValues.js","names":["context","useFormValues","useContext","getFieldValues"],"sources":["../src/useFormValues.js"],"sourcesContent":["import { useContext } from 'react'\n\nexport default context => function useFormValues() {\n  return useContext(context).getFieldValues()\n}"],"mappings":";;;;;;;AAAA;;eAEe,kBAAAA,OAAO;EAAA,OAAI,SAASC,aAAT,GAAyB;IACjD,OAAO,IAAAC,iBAAA,EAAWF,OAAX,EAAoBG,cAApB,EAAP;EACD,CAFqB;AAAA,C"}
+{"version":3,"file":"useFormValues.js","names":["context","useFormValues","useContext","getFieldValues"],"sources":["../src/useFormValues.js"],"sourcesContent":["import { useContext } from 'react'\n\nexport default context => function useFormValues() {\n  return useContext(context).getFieldValues()\n}"],"mappings":";;;;;;AAAA;AAAkC,eAEnB,kBAAAA,OAAO;EAAA,OAAI,SAASC,aAAa,GAAG;IACjD,OAAO,IAAAC,iBAAU,EAACF,OAAO,CAAC,CAACG,cAAc,EAAE;EAC7C,CAAC;AAAA;AAAA"}

package/dist/usePrevious.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = usePrevious;
-
 var _react = require("react");
-
 function usePrevious(value) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {

package/dist/usePrevious.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevious.js","names":["usePrevious","value","ref","useRef","useEffect","current"],"sources":["../src/usePrevious.js"],"sourcesContent":["import { useRef, useEffect } from 'react'\n\nexport default function usePrevious(value) {\n  const ref = useRef()\n  useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,WAAT,CAAqBC,KAArB,EAA4B;EACzC,IAAMC,GAAG,GAAG,IAAAC,aAAA,GAAZ;EACA,IAAAC,gBAAA,EAAU,YAAM;IACdF,GAAG,CAACG,OAAJ,GAAcJ,KAAd;EACD,CAFD;EAGA,OAAOC,GAAG,CAACG,OAAX;AACD"}
+{"version":3,"file":"usePrevious.js","names":["usePrevious","value","ref","useRef","useEffect","current"],"sources":["../src/usePrevious.js"],"sourcesContent":["import { useRef, useEffect } from 'react'\n\nexport default function usePrevious(value) {\n  const ref = useRef()\n  useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}"],"mappings":";;;;;;AAAA;AAEe,SAASA,WAAW,CAACC,KAAK,EAAE;EACzC,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAE;EACpB,IAAAC,gBAAS,EAAC,YAAM;IACdF,GAAG,CAACG,OAAO,GAAGJ,KAAK;EACrB,CAAC,CAAC;EACF,OAAOC,GAAG,CAACG,OAAO;AACpB"}

package/dist/useUpdate.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = useUpdate;
-
 var _react = require("react");
-
 function useUpdate(hook, inputs) {
   var didMountRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {

package/dist/useUpdate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpdate.js","names":["useUpdate","hook","inputs","didMountRef","useRef","useEffect","current"],"sources":["../src/useUpdate.js"],"sourcesContent":["import { useRef, useEffect } from 'react'\n\nexport default function useUpdate(hook, inputs) {\n  const didMountRef = useRef(false)\n\n  useEffect(() => {\n    if (didMountRef.current)\n      hook()\n    else\n      didMountRef.current = true\n  }, inputs)\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,SAAT,CAAmBC,IAAnB,EAAyBC,MAAzB,EAAiC;EAC9C,IAAMC,WAAW,GAAG,IAAAC,aAAA,EAAO,KAAP,CAApB;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACd,IAAIF,WAAW,CAACG,OAAhB,EACEL,IAAI,GADN,KAGEE,WAAW,CAACG,OAAZ,GAAsB,IAAtB;EACH,CALD,EAKGJ,MALH;AAMD"}
+{"version":3,"file":"useUpdate.js","names":["useUpdate","hook","inputs","didMountRef","useRef","useEffect","current"],"sources":["../src/useUpdate.js"],"sourcesContent":["import { useRef, useEffect } from 'react'\n\nexport default function useUpdate(hook, inputs) {\n  const didMountRef = useRef(false)\n\n  useEffect(() => {\n    if (didMountRef.current)\n      hook()\n    else\n      didMountRef.current = true\n  }, inputs)\n}"],"mappings":";;;;;;AAAA;AAEe,SAASA,SAAS,CAACC,IAAI,EAAEC,MAAM,EAAE;EAC9C,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAEjC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIF,WAAW,CAACG,OAAO,EACrBL,IAAI,EAAE,MAENE,WAAW,CAACG,OAAO,GAAG,IAAI;EAC9B,CAAC,EAAEJ,MAAM,CAAC;AACZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -24,8 +24,8 @@
     "babel-jest": "26.6.3",
     "enzyme": "^3.9.0",
     "jest": "26.6.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "jest": {
     "moduleNameMapper": {

package/src/Form.js

@@ -1,4 +1,4 @@
-import { createElement, createRef, useEffect, useReducer, useState } from 'react'
+import { createElement, createRef, useCallback, useEffect, useReducer, useState } from 'react'
 import { get, set } from 'object-path-immutable'
 
 const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
@@ -15,8 +15,8 @@ const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
       }
     }, [form.current])
 
-    const getFieldValue = path => get(fieldValues, path)
-    const getFieldValues = () => fieldValues
+    const getFieldValue = useCallback(path => get(fieldValues, path), [fieldValues])
+    const getFieldValues = useCallback(() => fieldValues, [fieldValues])
     const mapFieldValues = target => Object.keys(target).reduce(
       (values, name) => set(values, name, target[name]),
       {}
@@ -29,9 +29,9 @@ const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
       }
     }
 
-    const onSubmit = (e, { additionalValues, validate } = {}) => {
+    const onSubmit = useCallback((e, { additionalValues, validate } = {}) => {
       if(validate !== false) {
-        fieldValidators.forEach(setFieldValidated => setFieldValidated())
+        fieldValidators.forEach(setFieldValidated => setFieldValidated(undefined, fieldValues))
       }
 
       if((validate === false || form.current.checkValidity()) && props.onSubmit) {
@@ -73,7 +73,7 @@ const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
 
       e && e.preventDefault && e.preventDefault()
       e && e.stopPropagation && e.stopPropagation()
-    }
+    }, [props, fieldValues])
 
     const classNames = ['react-forms', props.className]
     if(row) {

package/src/input.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useCallback, useState, useEffect } from 'react'
 import usePrevious from './usePrevious'
 import useUpdate from './useUpdate'
 import types from './inputTypes'
@@ -27,8 +27,8 @@ export default (render, options = {}) => function Input(props) {
     // don't override values that were set from passing a values prop to the form
     if(getFieldValue(name) === undefined) {
       // TODO: change setter to a getter and return a private `UNSET` symbol to indicate not to call the field setter
-      // this allows us to set the default value with useState above and not have an initial render cycle without the default value
-      // BUT... to get the default value of a select list, we need to render it first? dilemma....
+      //       this allows us to set the default value with useState above and not have an initial render cycle without the default value
+      //       BUT... to get the default value of a select list, we need to render it first? dilemma....
 
       setInitialValue({
         // pass a setter function - radio buttons do not always want to set a value!
@@ -52,8 +52,25 @@ export default (render, options = {}) => function Input(props) {
     }
   }, [props])
 
+  const updateValidationState = useCallback((newValue, oldValues) => {
+    const { getValidationMessage, getFieldValue, getFieldValues } = props
+    const element = document.querySelector(`#${id}`)
+    const validationMessage = getValidationMessage && getValidationMessage(
+      newValue === undefined ? getFieldValue(name) : newValue,
+      oldValues || getFieldValues()
+    )
+    element.setCustomValidity(validationMessage || "")
+
+    setFieldValidated(true)
+    // this is a little hacky, but the simplest way I could think of to determine the
+    // validity of the actual input element. :invalid is also not supported by enzyme
+    const invalid = !!validationMessage || Boolean(document.querySelector(`#${id}:invalid`))
+    setError(invalid)
+    props.onValidated && props.onValidated(!invalid)
+  }, [props])
+
   // TODO: refactor bubbling to prop pattern
-  const onChange = (...args) => {
+  const onChange = useCallback((...args) => {
     const [event] = args
     const { setFieldValue, onChange, submitOnChange } = props
     const { valueFromEvent } = options
@@ -67,7 +84,7 @@ export default (render, options = {}) => function Input(props) {
 
     if(event && event.target && event.target.checkValidity) {
       event.target.checkValidity()
-      updateValidationState()
+      updateValidationState(applyValueTransforms(elementValue))
     }
 
     if(onChange) {
@@ -79,7 +96,7 @@ export default (render, options = {}) => function Input(props) {
       // setting state requires an additional render cycle - we need to pass in the new value so it's set correctly
       submitHandler(undefined, { additionalValues: { [name]: applyValueTransforms(elementValue) } })
     }
-  }
+  }, [props.setFieldValue, props.onChange, props.submitOnChange, props.setFieldValue, updateValidationState])
 
   const onBlur = (...args) => {
     const { submitOnBlur, onSubmit, onBlur } = props
@@ -126,21 +143,12 @@ export default (render, options = {}) => function Input(props) {
     }
   }
 
-  const updateValidationState = () => {
-    setFieldValidated(true)
-    // this is a little hacky, but the simplest way I could think of to determine the
-    // validity of the actual input element. :invalid is also not supported by enzyme
-    const invalid = Boolean(document.querySelector(`#${id}:invalid`))
-    setError(invalid)
-    props.onValidated && props.onValidated(!invalid)
-  }
-
   /* render */ {
     const { passErrorProp } = options
     const { getValueProps } = types(props, options)
 
     const {
-      type, value, checked, defaultValue, numeric,
+      type, value, checked, defaultValue, numeric, getValidationMessage,
       onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
       submitOnChange, submitOnBlur, selectOnFocus, throttle, valid, onValidated,
       ...passThroughProps