@danderson00/react-forms 0.0.43 → 0.0.44

package/dist/input.js

@@ -97,14 +97,16 @@ var _default = function _default(render) {
         getFieldValue = props.getFieldValue,
         getFieldValues = props.getFieldValues;
       var element = document.querySelector("#".concat(id));
-      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);
+      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

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","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    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  }, [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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"}
+{"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.43",
+  "version": "0.0.44",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/input.js

@@ -55,18 +55,20 @@ export default (render, options = {}) => function Input(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)
+    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