@danderson00/react-forms 0.0.42 → 0.0.44

package/dist/Form.js

@@ -54,12 +54,12 @@ var Form = function Form(ContextProvider) {
         setValid(form.current.checkValidity());
       }
     }, [form.current]);
-    var getFieldValue = function getFieldValue(path) {
+    var getFieldValue = (0, _react.useCallback)(function (path) {
       return (0, _objectPathImmutable.get)(fieldValues, path);
-    };
-    var getFieldValues = function getFieldValues() {
+    }, [fieldValues]);
+    var getFieldValues = (0, _react.useCallback)(function () {
       return fieldValues;
-    };
+    }, [fieldValues]);
     var mapFieldValues = function mapFieldValues(target) {
       return Object.keys(target).reduce(function (values, name) {
         return (0, _objectPathImmutable.set)(values, name, target[name]);
@@ -73,13 +73,13 @@ var Form = function Form(ContextProvider) {
         setValid(form.current.checkValidity());
       }
     };
-    var onSubmit = function onSubmit(e) {
+    var onSubmit = (0, _react.useCallback)(function (e) {
       var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
         additionalValues = _ref2.additionalValues,
         validate = _ref2.validate;
       if (validate !== false) {
         fieldValidators.forEach(function (setFieldValidated) {
-          return setFieldValidated();
+          return setFieldValidated(undefined, fieldValues);
         });
       }
       if ((validate === false || form.current.checkValidity()) && props.onSubmit) {
@@ -119,7 +119,7 @@ var Form = function Form(ContextProvider) {
       }
       e && e.preventDefault && e.preventDefault();
       e && e.stopPropagation && e.stopPropagation();
-    };
+    }, [props, fieldValues]);
     var classNames = ['react-forms', props.className];
     if (row) {
       classNames.push('react-forms-row');

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["Form","ContextProvider","additionalContext","ErrorMessage","resetOnSubmit","row","gap","props","useState","values","fieldValues","setFieldValues","useReducer","validators","validator","fieldValidators","registerFieldValidator","error","setError","valid","setValid","form","createRef","useEffect","current","checkValidity","getFieldValue","path","get","getFieldValues","mapFieldValues","target","Object","keys","reduce","name","set","setFieldValue","value","previousValues","onSubmit","e","additionalValues","validate","forEach","setFieldValidated","undefined","interactiveElements","querySelectorAll","setFormDisabled","disabled","x","reset","checkResultForError","result","success","message","then","preventDefault","stopPropagation","classNames","className","push","mergedAdditionalContext","property","createElement","join","noValidate","ref","style","children","key","type","visibility","position"],"sources":["../src/Form.js"],"sourcesContent":["import { createElement, createRef, useEffect, useReducer, useState } from 'react'\nimport { get, set } from 'object-path-immutable'\n\nconst Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (\n  ({ resetOnSubmit, row, gap, ...props }) => {\n    const [fieldValues, setFieldValues] = useState(props.values || {})\n    const [fieldValidators, registerFieldValidator] = useReducer((validators, validator) => [...validators, validator], [])\n    const [error, setError] = useState()\n    const [valid, setValid] = useState()\n    const form = createRef()\n\n    useEffect(() => {\n      if(form.current) {\n        setValid(form.current.checkValidity())\n      }\n    }, [form.current])\n\n    const getFieldValue = path => get(fieldValues, path)\n    const getFieldValues = () => fieldValues\n    const mapFieldValues = target => Object.keys(target).reduce(\n      (values, name) => set(values, name, target[name]),\n      {}\n    )\n\n    const setFieldValue = (path, value) => {\n      setFieldValues(previousValues => set(previousValues, path, value))\n      if(form.current) {\n        setValid(form.current.checkValidity())\n      }\n    }\n\n    const onSubmit = (e, { additionalValues, validate } = {}) => {\n      if(validate !== false) {\n        fieldValidators.forEach(setFieldValidated => setFieldValidated())\n      }\n\n      if((validate === false || form.current.checkValidity()) && props.onSubmit) {\n        setError(undefined)\n\n        const interactiveElements = form.current.querySelectorAll('input,button,textarea,select')\n        const setFormDisabled = disabled => interactiveElements.forEach(x => x.disabled = disabled)\n\n        const reset = () => {\n          if(resetOnSubmit) {\n            setFieldValues(props.values || {})\n          }\n        }\n\n        try {\n          const checkResultForError = result => {\n            if(result && (result.success === false || result.error)) {\n              setError(result.error || result.message || 'Form submission failed')\n            } else {\n              reset()\n            }\n            return result\n          }\n\n          const result = props.onSubmit(mapFieldValues({ ...fieldValues, ...additionalValues }))\n            if(result && typeof result.then === 'function') {\n              setFormDisabled(true)\n              result\n                .then(checkResultForError)\n                .catch(setError)\n                .finally(() => setFormDisabled(false))\n            } else {\n              reset()\n            }\n        } catch(error) {\n          setError(error)\n        }\n      }\n\n      e && e.preventDefault && e.preventDefault()\n      e && e.stopPropagation && e.stopPropagation()\n    }\n\n    const classNames = ['react-forms', props.className]\n    if(row) {\n      classNames.push('react-forms-row')\n    }\n\n    const mergedAdditionalContext = Object.keys(additionalContext).reduce(\n      (result, property) => ({ ...result, [property]: props[property] || additionalContext[property] }),\n      {}\n    )\n\n    return (\n      createElement('form', {\n        ...props,\n        className: classNames.join(' '),\n        noValidate: true,\n        onSubmit: onSubmit,\n        ref: form,\n        ...(gap && { style: { gap } }),\n        children: [\n          createElement(ContextProvider, {\n            ...props,\n            key: 'context',\n            value: {\n              registerFieldValidator,\n              setFieldValue,\n              getFieldValue,\n              getFieldValues,\n              onSubmit,\n              valid,\n              ...mergedAdditionalContext\n            }\n          }),\n          error && createElement(ErrorMessage, { key: 'error', error }),\n          createElement('input', {\n            key: 'submit',\n            type: 'submit',\n            style: {\n              visibility: 'hidden',\n              position: 'absolute'\n            }\n          }),\n        ]\n      })\n    )\n  }\n)\nexport default Form"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":["Form","ContextProvider","additionalContext","ErrorMessage","resetOnSubmit","row","gap","props","useState","values","fieldValues","setFieldValues","useReducer","validators","validator","fieldValidators","registerFieldValidator","error","setError","valid","setValid","form","createRef","useEffect","current","checkValidity","getFieldValue","useCallback","path","get","getFieldValues","mapFieldValues","target","Object","keys","reduce","name","set","setFieldValue","value","previousValues","onSubmit","e","additionalValues","validate","forEach","setFieldValidated","undefined","interactiveElements","querySelectorAll","setFormDisabled","disabled","x","reset","checkResultForError","result","success","message","then","preventDefault","stopPropagation","classNames","className","push","mergedAdditionalContext","property","createElement","join","noValidate","ref","style","children","key","type","visibility","position"],"sources":["../src/Form.js"],"sourcesContent":["import { createElement, createRef, useCallback, useEffect, useReducer, useState } from 'react'\nimport { get, set } from 'object-path-immutable'\n\nconst Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (\n  ({ resetOnSubmit, row, gap, ...props }) => {\n    const [fieldValues, setFieldValues] = useState(props.values || {})\n    const [fieldValidators, registerFieldValidator] = useReducer((validators, validator) => [...validators, validator], [])\n    const [error, setError] = useState()\n    const [valid, setValid] = useState()\n    const form = createRef()\n\n    useEffect(() => {\n      if(form.current) {\n        setValid(form.current.checkValidity())\n      }\n    }, [form.current])\n\n    const getFieldValue = useCallback(path => get(fieldValues, path), [fieldValues])\n    const getFieldValues = useCallback(() => fieldValues, [fieldValues])\n    const mapFieldValues = target => Object.keys(target).reduce(\n      (values, name) => set(values, name, target[name]),\n      {}\n    )\n\n    const setFieldValue = (path, value) => {\n      setFieldValues(previousValues => set(previousValues, path, value))\n      if(form.current) {\n        setValid(form.current.checkValidity())\n      }\n    }\n\n    const onSubmit = useCallback((e, { additionalValues, validate } = {}) => {\n      if(validate !== false) {\n        fieldValidators.forEach(setFieldValidated => setFieldValidated(undefined, fieldValues))\n      }\n\n      if((validate === false || form.current.checkValidity()) && props.onSubmit) {\n        setError(undefined)\n\n        const interactiveElements = form.current.querySelectorAll('input,button,textarea,select')\n        const setFormDisabled = disabled => interactiveElements.forEach(x => x.disabled = disabled)\n\n        const reset = () => {\n          if(resetOnSubmit) {\n            setFieldValues(props.values || {})\n          }\n        }\n\n        try {\n          const checkResultForError = result => {\n            if(result && (result.success === false || result.error)) {\n              setError(result.error || result.message || 'Form submission failed')\n            } else {\n              reset()\n            }\n            return result\n          }\n\n          const result = props.onSubmit(mapFieldValues({ ...fieldValues, ...additionalValues }))\n            if(result && typeof result.then === 'function') {\n              setFormDisabled(true)\n              result\n                .then(checkResultForError)\n                .catch(setError)\n                .finally(() => setFormDisabled(false))\n            } else {\n              reset()\n            }\n        } catch(error) {\n          setError(error)\n        }\n      }\n\n      e && e.preventDefault && e.preventDefault()\n      e && e.stopPropagation && e.stopPropagation()\n    }, [props, fieldValues])\n\n    const classNames = ['react-forms', props.className]\n    if(row) {\n      classNames.push('react-forms-row')\n    }\n\n    const mergedAdditionalContext = Object.keys(additionalContext).reduce(\n      (result, property) => ({ ...result, [property]: props[property] || additionalContext[property] }),\n      {}\n    )\n\n    return (\n      createElement('form', {\n        ...props,\n        className: classNames.join(' '),\n        noValidate: true,\n        onSubmit: onSubmit,\n        ref: form,\n        ...(gap && { style: { gap } }),\n        children: [\n          createElement(ContextProvider, {\n            ...props,\n            key: 'context',\n            value: {\n              registerFieldValidator,\n              setFieldValue,\n              getFieldValue,\n              getFieldValues,\n              onSubmit,\n              valid,\n              ...mergedAdditionalContext\n            }\n          }),\n          error && createElement(ErrorMessage, { key: 'error', error }),\n          createElement('input', {\n            key: 'submit',\n            type: 'submit',\n            style: {\n              visibility: 'hidden',\n              position: 'absolute'\n            }\n          }),\n        ]\n      })\n    )\n  }\n)\nexport default Form"],"mappings":"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"}

package/dist/input.js

@@ -9,7 +9,7 @@ var _usePrevious = _interopRequireDefault(require("./usePrevious"));
 var _useUpdate = _interopRequireDefault(require("./useUpdate"));
 var _inputTypes = _interopRequireDefault(require("./inputTypes"));
 var _throttle2 = _interopRequireDefault(require("./throttle"));
-var _excluded = ["type", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle", "valid", "onValidated"];
+var _excluded = ["type", "value", "checked", "defaultValue", "numeric", "getValidationMessage", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle", "valid", "onValidated"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -65,8 +65,8 @@ var _default = function _default(render) {
       // 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!
@@ -83,27 +83,34 @@ var _default = function _default(render) {
 
     // ensure form values are updated to reflect passed `value` prop
     // this probably introduces some redundancy with the onChange handler below
-    var type = props.type,
-      checked = props.checked,
-      value = props.value,
-      defaultValue = props.defaultValue,
-      setFieldValue = props.setFieldValue;
     (0, _useUpdate["default"])(function () {
-      var _types2 = (0, _inputTypes["default"])({
-          type: type,
-          checked: checked,
-          value: value,
-          defaultValue: defaultValue,
-          setFieldValue: setFieldValue
-        }, options),
+      var value = props.value,
+        setFieldValue = props.setFieldValue;
+      var _types2 = (0, _inputTypes["default"])(props, options),
         applyValueTransforms = _types2.applyValueTransforms;
       if (value !== previousValueProp) {
         setFieldValue(name, applyValueTransforms(value));
       }
-    }, [type, checked, value, defaultValue, setFieldValue]);
+    }, [props]);
+    var updateValidationState = (0, _react.useCallback)(function (newValue, oldValues) {
+      var getValidationMessage = props.getValidationMessage,
+        getFieldValue = props.getFieldValue,
+        getFieldValues = props.getFieldValues;
+      var element = document.querySelector("#".concat(id));
+      if (element) {
+        var 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
+        var invalid = !!validationMessage || Boolean(document.querySelector("#".concat(id, ":invalid")));
+        setError(invalid);
+        props.onValidated && props.onValidated(!invalid);
+      }
+    }, [props]);
 
     // TODO: refactor bubbling to prop pattern
-    var onChange = function onChange() {
+    var onChange = (0, _react.useCallback)(function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
@@ -121,7 +128,7 @@ var _default = function _default(render) {
       setFieldValue(name, applyValueTransforms(elementValue));
       if (event && event.target && event.target.checkValidity) {
         event.target.checkValidity();
-        updateValidationState();
+        updateValidationState(applyValueTransforms(elementValue));
       }
       if (onChange) {
         onChange.apply(event.target, args);
@@ -133,7 +140,7 @@ var _default = function _default(render) {
           additionalValues: _defineProperty({}, name, applyValueTransforms(elementValue))
         });
       }
-    };
+    }, [props.setFieldValue, props.onChange, props.submitOnChange, props.setFieldValue, updateValidationState]);
     var onBlur = function onBlur() {
       var submitOnBlur = props.submitOnBlur,
         onSubmit = props.onSubmit,
@@ -183,28 +190,21 @@ var _default = function _default(render) {
         onKeyDown.apply(element, args);
       }
     };
-    var updateValidationState = function 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
-      var invalid = Boolean(document.querySelector("#".concat(id, ":invalid")));
-      setError(invalid);
-      props.onValidated && props.onValidated(!invalid);
-    };
 
     /* render */
     {
       var passErrorProp = options.passErrorProp;
       var _types4 = (0, _inputTypes["default"])(props, options),
         getValueProps = _types4.getValueProps;
-      var _type = props.type,
-        _value = props.value,
-        _checked = props.checked,
-        _defaultValue = props.defaultValue,
+      var type = props.type,
+        value = props.value,
+        checked = props.checked,
+        defaultValue = props.defaultValue,
         numeric = props.numeric,
+        getValidationMessage = props.getValidationMessage,
         _onSubmit = props.onSubmit,
         registerFieldValidator = props.registerFieldValidator,
-        _setFieldValue = props.setFieldValue,
+        setFieldValue = props.setFieldValue,
         getFieldValue = props.getFieldValue,
         getFieldValues = props.getFieldValues,
         submitOnChange = props.submitOnChange,
@@ -220,8 +220,8 @@ var _default = function _default(render) {
       var numericProps = numeric && {
         type: 'number'
       };
-      var typeProps = _type && {
-        type: _type
+      var typeProps = type && {
+        type: type
       };
       var errorProps = passErrorProp && {
         error: error

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["nextElementId","id","render","options","Input","props","name","Error","setFieldValue","useState","fieldValidated","setFieldValidated","error","setError","previousValueProp","usePrevious","value","groups","throttle","onSubmit","map","group","submitHandler","createThrottled","isNaN","useEffect","getFieldValue","registerFieldValidator","types","setInitialValue","applyValueTransforms","undefined","set","element","document","querySelector","updateValidationState","type","checked","defaultValue","useUpdate","onChange","args","event","submitOnChange","valueFromEvent","getOutputValue","elementValue","apply","target","checkValidity","additionalValues","onBlur","submitOnBlur","onFocus","selectOnFocus","selectText","selectionStart","selectionEnd","length","setTimeout","onKeyDown","numeric","exec","key","includes","keyCode","preventDefault","invalid","Boolean","onValidated","passErrorProp","getValueProps","getFieldValues","valid","passThroughProps","valueProps","currentValue","numericProps","typeProps","errorProps","className","finalProps"],"sources":["../src/input.js"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport usePrevious from './usePrevious'\nimport useUpdate from './useUpdate'\nimport types from './inputTypes'\nimport createThrottled from './throttle'\n\nconst nextElementId = (id => () => `react-forms-${++id}`)(0)\n\nexport default (render, options = {}) => function Input(props) {\n  if (!props.name) throw new Error(\"You must provide a name prop to form components\")\n  if (!props.setFieldValue) throw new Error(\"Input components must be contained within a Form component\")\n\n  const [fieldValidated, setFieldValidated] = useState(false)\n  const [error, setError] = useState(false)\n  const [id] = useState(props.id || nextElementId())\n  const previousValueProp = usePrevious(props.value)\n\n  // this is currently broken :-\\\n  const { groups = [], throttle, onSubmit } = props\n  const name = groups.map(group => group + '.') + props.name\n  const submitHandler = (throttle && onSubmit) ? createThrottled(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit\n\n  useEffect(() => {\n    const { getFieldValue, setFieldValue, registerFieldValidator } = props\n    const { setInitialValue, applyValueTransforms } = types(props, options)\n\n    // don't override values that were set from passing a values prop to the form\n    if(getFieldValue(name) === undefined) {\n      // TODO: change setter to a getter and return a private `UNSET` symbol to indicate not to call the field setter\n      // this allows us to set the default value with useState above and not have an initial render cycle without the default value\n      // BUT... to get the default value of a select list, we need to render it first? dilemma....\n\n      setInitialValue({\n        // pass a setter function - radio buttons do not always want to set a value!\n        set: value => setFieldValue(name, applyValueTransforms(value)),\n        element: document.querySelector(`#${id}`)\n      })\n    }\n    registerFieldValidator(updateValidationState)\n\n    // TODO: need to unregister in case of dynamic form elements\n  }, [])\n\n  // ensure form values are updated to reflect passed `value` prop\n  // this probably introduces some redundancy with the onChange handler below\n  const { type, checked, value, defaultValue, setFieldValue } = props\n  useUpdate(() => {\n    const { applyValueTransforms } = types({ type, checked, value, defaultValue, setFieldValue }, options)\n\n    if(value !== previousValueProp) {\n      setFieldValue(name, applyValueTransforms(value))\n    }\n  }, [type, checked, value, defaultValue, setFieldValue])\n\n  // TODO: refactor bubbling to prop pattern\n  const onChange = (...args) => {\n    const [event] = args\n    const { setFieldValue, onChange, submitOnChange } = props\n    const { valueFromEvent } = options\n    const { getOutputValue, applyValueTransforms } = types(props, options)\n\n    const elementValue = valueFromEvent\n      ? valueFromEvent.apply(null, args)\n      : getOutputValue({ event })\n\n    setFieldValue(name, applyValueTransforms(elementValue))\n\n    if(event && event.target && event.target.checkValidity) {\n      event.target.checkValidity()\n      updateValidationState()\n    }\n\n    if(onChange) {\n      onChange.apply(event.target, args)\n    }\n\n    if(submitOnChange && submitHandler) {\n      // the setFieldValue above sets state on the Form component, used in the onSubmit handler\n      // setting state requires an additional render cycle - we need to pass in the new value so it's set correctly\n      submitHandler(undefined, { additionalValues: { [name]: applyValueTransforms(elementValue) } })\n    }\n  }\n\n  const onBlur = (...args) => {\n    const { submitOnBlur, onSubmit, onBlur } = props\n    const [event] = args\n\n    if(submitOnBlur) {\n      onSubmit()\n    }\n    if(onBlur) {\n      onBlur.apply(event.target, args)\n    }\n  }\n\n  const onFocus = (...args) => {\n    const { selectOnFocus, onFocus } = props\n    const [event] = args\n    const element = event.target\n\n    const selectText = () => {\n      element.selectionStart = 0\n      element.selectionEnd = element.value.length\n    }\n\n    if(selectOnFocus) {\n      selectText()\n      setTimeout(selectText)\n    }\n    if(onFocus) {\n      onFocus.apply(element, args)\n    }\n  }\n\n  const onKeyDown = (...args) => {\n    const { onKeyDown } = props\n    const [event] = args\n    const element = event.target\n      \n    if(props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {\n      event.preventDefault()\n    }\n\n    if(onKeyDown) {\n      onKeyDown.apply(element, args)\n    }\n  }\n\n  const updateValidationState = () => {\n    setFieldValidated(true)\n    // this is a little hacky, but the simplest way I could think of to determine the\n    // validity of the actual input element. :invalid is also not supported by enzyme\n    const invalid = Boolean(document.querySelector(`#${id}:invalid`))\n    setError(invalid)\n    props.onValidated && props.onValidated(!invalid)\n  }\n\n  /* render */ {\n    const { passErrorProp } = options\n    const { getValueProps } = types(props, options)\n\n    const {\n      type, value, checked, defaultValue, numeric,\n      onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,\n      submitOnChange, submitOnBlur, selectOnFocus, throttle, valid, onValidated,\n      ...passThroughProps\n    } = props\n    const valueProps = getValueProps({ currentValue: getFieldValue(name) })\n    const numericProps = (numeric && { type: 'number' })\n    const typeProps = (type && { type })\n    const errorProps = (passErrorProp && { error })\n    const className = ((fieldValidated ? 'validated ' : '') + (props.className || '') || undefined)\n\n    const finalProps = {\n      id, name, className,\n      ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,\n      onChange, onFocus, onBlur, onKeyDown\n    }\n\n    return render(finalProps)\n  }\n}"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["nextElementId","id","render","options","Input","props","name","Error","setFieldValue","useState","fieldValidated","setFieldValidated","error","setError","previousValueProp","usePrevious","value","groups","throttle","onSubmit","map","group","submitHandler","createThrottled","isNaN","useEffect","getFieldValue","registerFieldValidator","types","setInitialValue","applyValueTransforms","undefined","set","element","document","querySelector","updateValidationState","useUpdate","useCallback","newValue","oldValues","getValidationMessage","getFieldValues","validationMessage","setCustomValidity","invalid","Boolean","onValidated","onChange","args","event","submitOnChange","valueFromEvent","getOutputValue","elementValue","apply","target","checkValidity","additionalValues","onBlur","submitOnBlur","onFocus","selectOnFocus","selectText","selectionStart","selectionEnd","length","setTimeout","onKeyDown","numeric","exec","key","includes","keyCode","preventDefault","passErrorProp","getValueProps","type","checked","defaultValue","valid","passThroughProps","valueProps","currentValue","numericProps","typeProps","errorProps","className","finalProps"],"sources":["../src/input.js"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react'\nimport usePrevious from './usePrevious'\nimport useUpdate from './useUpdate'\nimport types from './inputTypes'\nimport createThrottled from './throttle'\n\nconst nextElementId = (id => () => `react-forms-${++id}`)(0)\n\nexport default (render, options = {}) => function Input(props) {\n  if (!props.name) throw new Error(\"You must provide a name prop to form components\")\n  if (!props.setFieldValue) throw new Error(\"Input components must be contained within a Form component\")\n\n  const [fieldValidated, setFieldValidated] = useState(false)\n  const [error, setError] = useState(false)\n  const [id] = useState(props.id || nextElementId())\n  const previousValueProp = usePrevious(props.value)\n\n  // this is currently broken :-\\\n  const { groups = [], throttle, onSubmit } = props\n  const name = groups.map(group => group + '.') + props.name\n  const submitHandler = (throttle && onSubmit) ? createThrottled(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit\n\n  useEffect(() => {\n    const { getFieldValue, setFieldValue, registerFieldValidator } = props\n    const { setInitialValue, applyValueTransforms } = types(props, options)\n\n    // don't override values that were set from passing a values prop to the form\n    if(getFieldValue(name) === undefined) {\n      // TODO: change setter to a getter and return a private `UNSET` symbol to indicate not to call the field setter\n      //       this allows us to set the default value with useState above and not have an initial render cycle without the default value\n      //       BUT... to get the default value of a select list, we need to render it first? dilemma....\n\n      setInitialValue({\n        // pass a setter function - radio buttons do not always want to set a value!\n        set: value => setFieldValue(name, applyValueTransforms(value)),\n        element: document.querySelector(`#${id}`)\n      })\n    }\n    registerFieldValidator(updateValidationState)\n\n    // TODO: need to unregister in case of dynamic form elements\n  }, [])\n\n  // ensure form values are updated to reflect passed `value` prop\n  // this probably introduces some redundancy with the onChange handler below\n  useUpdate(() => {\n    const { value, setFieldValue } = props\n    const { applyValueTransforms } = types(props, options)\n\n    if(value !== previousValueProp) {\n      setFieldValue(name, applyValueTransforms(value))\n    }\n  }, [props])\n\n  const updateValidationState = useCallback((newValue, oldValues) => {\n    const { getValidationMessage, getFieldValue, getFieldValues } = props\n    const element = document.querySelector(`#${id}`)\n    if(element) {\n      const validationMessage = getValidationMessage && getValidationMessage(\n        newValue === undefined ? getFieldValue(name) : newValue,\n        oldValues || getFieldValues()\n      )\n      element.setCustomValidity(validationMessage || \"\")\n\n      setFieldValidated(true)\n      // this is a little hacky, but the simplest way I could think of to determine the\n      // validity of the actual input element. :invalid is also not supported by enzyme\n      const invalid = !!validationMessage || Boolean(document.querySelector(`#${id}:invalid`))\n      setError(invalid)\n      props.onValidated && props.onValidated(!invalid)\n    }\n  }, [props])\n\n  // TODO: refactor bubbling to prop pattern\n  const onChange = useCallback((...args) => {\n    const [event] = args\n    const { setFieldValue, onChange, submitOnChange } = props\n    const { valueFromEvent } = options\n    const { getOutputValue, applyValueTransforms } = types(props, options)\n\n    const elementValue = valueFromEvent\n      ? valueFromEvent.apply(null, args)\n      : getOutputValue({ event })\n\n    setFieldValue(name, applyValueTransforms(elementValue))\n\n    if(event && event.target && event.target.checkValidity) {\n      event.target.checkValidity()\n      updateValidationState(applyValueTransforms(elementValue))\n    }\n\n    if(onChange) {\n      onChange.apply(event.target, args)\n    }\n\n    if(submitOnChange && submitHandler) {\n      // the setFieldValue above sets state on the Form component, used in the onSubmit handler\n      // setting state requires an additional render cycle - we need to pass in the new value so it's set correctly\n      submitHandler(undefined, { additionalValues: { [name]: applyValueTransforms(elementValue) } })\n    }\n  }, [props.setFieldValue, props.onChange, props.submitOnChange, props.setFieldValue, updateValidationState])\n\n  const onBlur = (...args) => {\n    const { submitOnBlur, onSubmit, onBlur } = props\n    const [event] = args\n\n    if(submitOnBlur) {\n      onSubmit()\n    }\n    if(onBlur) {\n      onBlur.apply(event.target, args)\n    }\n  }\n\n  const onFocus = (...args) => {\n    const { selectOnFocus, onFocus } = props\n    const [event] = args\n    const element = event.target\n\n    const selectText = () => {\n      element.selectionStart = 0\n      element.selectionEnd = element.value.length\n    }\n\n    if(selectOnFocus) {\n      selectText()\n      setTimeout(selectText)\n    }\n    if(onFocus) {\n      onFocus.apply(element, args)\n    }\n  }\n\n  const onKeyDown = (...args) => {\n    const { onKeyDown } = props\n    const [event] = args\n    const element = event.target\n      \n    if(props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {\n      event.preventDefault()\n    }\n\n    if(onKeyDown) {\n      onKeyDown.apply(element, args)\n    }\n  }\n\n  /* render */ {\n    const { passErrorProp } = options\n    const { getValueProps } = types(props, options)\n\n    const {\n      type, value, checked, defaultValue, numeric, getValidationMessage,\n      onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,\n      submitOnChange, submitOnBlur, selectOnFocus, throttle, valid, onValidated,\n      ...passThroughProps\n    } = props\n    const valueProps = getValueProps({ currentValue: getFieldValue(name) })\n    const numericProps = (numeric && { type: 'number' })\n    const typeProps = (type && { type })\n    const errorProps = (passErrorProp && { error })\n    const className = ((fieldValidated ? 'validated ' : '') + (props.className || '') || undefined)\n\n    const finalProps = {\n      id, name, className,\n      ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,\n      onChange, onFocus, onBlur, onKeyDown\n    }\n\n    return render(finalProps)\n  }\n}"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "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!
@@ -43,17 +43,36 @@ export default (render, options = {}) => function Input(props) {
 
   // ensure form values are updated to reflect passed `value` prop
   // this probably introduces some redundancy with the onChange handler below
-  const { type, checked, value, defaultValue, setFieldValue } = props
   useUpdate(() => {
-    const { applyValueTransforms } = types({ type, checked, value, defaultValue, setFieldValue }, options)
+    const { value, setFieldValue } = props
+    const { applyValueTransforms } = types(props, options)
 
     if(value !== previousValueProp) {
       setFieldValue(name, applyValueTransforms(value))
     }
-  }, [type, checked, value, defaultValue, setFieldValue])
+  }, [props])
+
+  const updateValidationState = useCallback((newValue, oldValues) => {
+    const { getValidationMessage, getFieldValue, getFieldValues } = props
+    const element = document.querySelector(`#${id}`)
+    if(element) {
+      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 +86,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 +98,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 +145,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

package/dist/fields.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = exports.RadioButton = exports.Radio = exports.Checkbox = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("./index");
-
-var _excluded = ["label", "className"],
-    _excluded2 = ["values", "labels"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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 base = function base(type, render) {
-  return function (_ref) {
-    var label = _ref.label,
-        className = _ref.className,
-        inputProps = _objectWithoutProperties(_ref, _excluded);
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(type, " ").concat(className)
-    }, /*#__PURE__*/_react["default"].createElement("label", null, label), render(inputProps));
-  };
-};
-
-var Text = base('Text', function (props) {
-  return props.multiline ? /*#__PURE__*/_react["default"].createElement(_index.Textarea, props) : /*#__PURE__*/_react["default"].createElement(_index.Input, props);
-});
-exports.Text = Text;
-var Checkbox = base('Checkbox', function (props) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Input, _extends({}, props, {
-    type: "checkbox"
-  }));
-});
-exports.Checkbox = Checkbox;
-var RadioButton = base('RadioButton', function (props) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Input, _extends({}, props, {
-    type: "radio"
-  }));
-});
-exports.RadioButton = RadioButton;
-var Radio = base('Radio', function (_ref2) {
-  var values = _ref2.values,
-      labels = _ref2.labels,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return values.map(function (value, index) {
-    return /*#__PURE__*/_react["default"].createElement(RadioButton, _extends({}, props, {
-      value: value,
-      label: labels && labels[index] || value
-    }));
-  });
-}); //
-// export const Select = base('Select', ({ values, labels, ...props }) =>
-//   <Select {...props}>
-//     {values.map((value, index) => <option value={value}>{(labels && labels[index]) || value}</option>)}
-//   </Select>
-// )
-//
-
-exports.Radio = Radio;