@danderson00/react-forms 0.0.48 → 0.0.50

package/src/input.js

@@ -1,175 +1,187 @@
-import { useCallback, useState, useEffect } from 'react'
-import { get } from 'object-path-immutable'
-import usePrevious from './usePrevious'
-import useUpdate from './useUpdate'
-import types from './inputTypes'
-import createThrottled from './throttle'
-
-const nextElementId = (id => () => `react-forms-${++id}`)(0)
-
-export default (render, options = {}) => function Input(props) {
-  if (!props.name) throw new Error("You must provide a name prop to form components")
-  if (!props.setFieldValue) throw new Error("Input components must be contained within a Form component")
-
-  const [fieldValidated, setFieldValidated] = useState(false)
-  const [error, setError] = useState(false)
-  const [id] = useState(props.id || nextElementId())
-  const previousValueProp = usePrevious(props.value)
-
-  // this is currently broken :-\
-  const { groups = [], throttle, onSubmit } = props
-  const name = groups.map(group => group + '.') + props.name
-  const submitHandler = (throttle && onSubmit) ? createThrottled(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit
-
-  useEffect(() => {
-    const { getFieldValue, setFieldValue, registerFieldValidator } = props
-    const { setInitialValue, applyValueTransforms } = types(props, options)
-
-    // 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....
-
-      setInitialValue({
-        // pass a setter function - radio buttons do not always want to set a value!
-        set: value => setFieldValue(name, applyValueTransforms(value)),
-        element: document.querySelector(`#${id}`)
-      })
-    }
-    registerFieldValidator(updateValidationState)
-
-    // TODO: need to unregister in case of dynamic form elements
-  }, [])
-
-  // ensure form values are updated to reflect passed `value` prop
-  // this probably introduces some redundancy with the onChange handler below
-  useUpdate(() => {
-    const { value, setFieldValue } = props
-    const { applyValueTransforms } = types(props, options)
-
-    if(value !== previousValueProp) {
-      setFieldValue(name, applyValueTransforms(value))
-    }
-  }, [props])
-
-  // when clicking submit, getFieldValue(s) return undefined due to an issue with closures I can't figure out
-  // the form component passes in its copy of field values as the oldValues parameter for this case
-  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) || get(oldValues, 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 = useCallback((...args) => {
-    const [event] = args
-    const { setFieldValue, onChange, submitOnChange } = props
-    const { valueFromEvent } = options
-    const { getOutputValue, applyValueTransforms } = types(props, options)
-
-    const elementValue = valueFromEvent
-      ? valueFromEvent.apply(null, args)
-      : getOutputValue({ event })
-
-    setFieldValue(name, applyValueTransforms(elementValue))
-
-    if(event && event.target && event.target.checkValidity) {
-      event.target.checkValidity()
-      updateValidationState(applyValueTransforms(elementValue))
-    }
-
-    if(onChange) {
-      onChange.apply(event.target, args)
-    }
-
-    if(submitOnChange && submitHandler) {
-      // the setFieldValue above sets state on the Form component, used in the onSubmit handler
-      // 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
-    const [event] = args
-
-    if(submitOnBlur) {
-      onSubmit()
-    }
-    if(onBlur) {
-      onBlur.apply(event.target, args)
-    }
-  }
-
-  const onFocus = (...args) => {
-    const { selectOnFocus, onFocus } = props
-    const [event] = args
-    const element = event.target
-
-    const selectText = () => {
-      element.selectionStart = 0
-      element.selectionEnd = element.value.length
-    }
-
-    if(selectOnFocus) {
-      selectText()
-      setTimeout(selectText)
-    }
-    if(onFocus) {
-      onFocus.apply(element, args)
-    }
-  }
-
-  const onKeyDown = (...args) => {
-    const { onKeyDown } = props
-    const [event] = args
-    const element = event.target
-      
-    if(props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {
-      event.preventDefault()
-    }
-
-    if(onKeyDown) {
-      onKeyDown.apply(element, args)
-    }
-  }
-
-  /* render */ {
-    const { passErrorProp } = options
-    const { getValueProps } = types(props, options)
-
-    const {
-      type, value, checked, defaultValue, numeric, getValidationMessage,
-      onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
-      submitOnChange, submitOnBlur, selectOnFocus, throttle, valid, onValidated,
-      ...passThroughProps
-    } = props
-    const valueProps = getValueProps({ currentValue: getFieldValue(name) })
-    const numericProps = (numeric && { type: 'number' })
-    const typeProps = (type && { type })
-    const errorProps = (passErrorProp && { error })
-    const className = ((fieldValidated ? 'validated ' : '') + (props.className || '') || undefined)
-
-    const finalProps = {
-      id, name, className,
-      ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,
-      onChange, onFocus, onBlur, onKeyDown
-    }
-
-    return render(finalProps)
-  }
+import { useCallback, useState, useEffect } from 'react'
+import { get } from 'object-path-immutable'
+import usePrevious from './usePrevious'
+import useUpdate from './useUpdate'
+import types from './inputTypes'
+import createThrottled from './throttle'
+
+const nextElementId = (id => () => `react-forms-${++id}`)(0)
+
+export default (render, options = {}) => function Input(props) {
+  if (!props.name) throw new Error("You must provide a name prop to form components")
+  if (!props.setFieldValue) throw new Error("Input components must be contained within a Form component")
+
+  const [fieldValidated, setFieldValidated] = useState(false)
+  const [error, setError] = useState(false)
+  const [active, setActive] = useState(false)
+  const [id] = useState(props.id || nextElementId())
+  const previousValueProp = usePrevious(props.value)
+
+  // this is currently broken :-\
+  const { groups = [], throttle, onSubmit } = props
+  const name = groups.map(group => group + '.') + props.name
+  const submitHandler = (throttle && onSubmit) ? createThrottled(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit
+
+  useEffect(() => {
+    const { getFieldValue, setFieldValue, registerFieldValidator } = props
+    const { setInitialValue, applyValueTransforms } = types(props, options)
+
+    // 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....
+
+      setInitialValue({
+        // pass a setter function - radio buttons do not always want to set a value!
+        set: value => setFieldValue(name, applyValueTransforms(value)),
+        element: document.querySelector(`#${id}`)
+      })
+    }
+    registerFieldValidator(updateValidationState)
+
+    // TODO: need to unregister in case of dynamic form elements
+  }, [])
+
+  // ensure form values are updated to reflect passed `value` prop
+  // this probably introduces some redundancy with the onChange handler below
+  useUpdate(() => {
+    const { value, setFieldValue } = props
+    const { applyValueTransforms } = types(props, options)
+
+    if(value !== previousValueProp) {
+      setFieldValue(name, applyValueTransforms(value))
+    }
+  }, [props])
+
+  // when clicking submit, getFieldValue(s) return undefined due to an issue with closures I can't figure out
+  // the form component passes in its copy of field values as the oldValues parameter for this case
+  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) || get(oldValues, 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 = useCallback((...args) => {
+    const [event] = args
+    const { setFieldValue, onChange, submitOnChange } = props
+    const { valueFromEvent } = options
+    const { getOutputValue, applyValueTransforms } = types(props, options)
+
+    const elementValue = valueFromEvent
+      ? valueFromEvent.apply(null, args)
+      : getOutputValue({ event })
+
+    setFieldValue(name, applyValueTransforms(elementValue))
+
+    if(event && event.target && event.target.checkValidity) {
+      event.target.checkValidity()
+      updateValidationState(applyValueTransforms(elementValue))
+    }
+
+    if(onChange) {
+      onChange.apply(event.target, args)
+    }
+
+    if(submitOnChange && submitHandler) {
+      // the setFieldValue above sets state on the Form component, used in the onSubmit handler
+      // 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
+    const [event] = args
+
+    setActive(false)
+
+    if(submitOnBlur) {
+      onSubmit()
+    }
+    if(onBlur) {
+      onBlur.apply(event.target, args)
+    }
+  }
+
+  const onFocus = (...args) => {
+    const { selectOnFocus, onFocus } = props
+    const [event] = args
+    const element = event.target
+
+    setActive(true)
+
+    const selectText = () => {
+      element.selectionStart = 0
+      element.selectionEnd = element.value.length
+    }
+
+    if(selectOnFocus) {
+      selectText()
+      setTimeout(selectText)
+    }
+    if(onFocus) {
+      onFocus.apply(element, args)
+    }
+  }
+
+  const onKeyDown = (...args) => {
+    const { onKeyDown } = props
+    const [event] = args
+    const element = event.target
+      
+    if(props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {
+      event.preventDefault()
+    }
+
+    if(onKeyDown) {
+      onKeyDown.apply(element, args)
+    }
+  }
+
+  /* render */ {
+    const { passErrorProp } = options
+    const { getValueProps } = types(props, options)
+
+    const {
+      type, value, checked, defaultValue, numeric, getValidationMessage,
+      onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
+      submitOnChange, submitOnBlur, selectOnFocus, throttle, valid, onValidated,
+      ...passThroughProps
+    } = props
+    const valueProps = getValueProps({ currentValue: getFieldValue(name) })
+    const numericProps = (numeric && { type: 'number' })
+    const typeProps = (type && { type })
+    const errorProps = (passErrorProp && { error })
+    const className = (
+      (
+        (fieldValidated ? 'validated ' : '')
+        + (active ? 'active ' : '')
+        + (props.className || '')
+      )
+      || undefined
+    )
+
+    const finalProps = {
+      id, name, className,
+      ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,
+      onChange, onFocus, onBlur, onKeyDown
+    }
+
+    return render(finalProps)
+  }
 }

package/src/inputTypes.js

@@ -1,63 +1,63 @@
-const resolveValue = (value, args) => typeof value === 'function' ? value.apply(null, args) : value
-
-export default (props, options) => {
-  const { type, checked, value, defaultValue } = props
-
-  const applyValueTransforms = value => ((props.type === 'number' || props.numeric) && !isNaN(+value) && value !== '') ? +value : value
-
-  const defaultType = {
-    setInitialValue: ({ set }) => {
-      if(value !== undefined) {
-        set(value)
-      } else if (defaultValue !== undefined) {
-        set(defaultValue)
-      } else if (options.defaultValue !== undefined) {
-        set(resolveValue(options.defaultValue, [props]))
-      } else {
-        set(undefined)
-      }
-    },
-    getOutputValue: ({ event }) => {
-      if (event.target && event.target.value !== undefined) {
-        return event.target.value
-      } else if (event.value !== undefined) {
-        return event.value
-      } else {
-        throw new Error("Unable to determine input value from event")
-      }
-    },
-    getValueProps: ({ currentValue }) => ({
-      value: currentValue === undefined ? '' : currentValue
-    })
-  }
-
-  const checkboxValue = (checked, value) => (value === undefined
-      ? Boolean(checked)
-      : checked ? value : undefined
-  )
-
-  const types = {
-    text: defaultType,
-    radio: {
-      setInitialValue: ({ set }) => checked && set(value),
-      getOutputValue: () => value,
-      getValueProps: ({ currentValue }) => ({ checked: applyValueTransforms(value) === currentValue })
-    },
-    checkbox: {
-      setInitialValue: ({ set }) => set(checkboxValue(checked, value)),
-      getOutputValue: ({ event }) => checkboxValue(event.target.checked, value),
-      getValueProps: ({ currentValue }) => ({ checked: Boolean(currentValue) })
-    },
-    select: {
-      ...defaultType,
-      setInitialValue: ({ set, element }) => {
-        set(value || defaultValue ||
-          (props.options && props.options.length > 0 && props.options[0]) || // this probably should come out - is it the right behavior for all browsers? it's here to keep 1 unit test happy?
-          element && element.value || '' // this *should* work in all browsers (except jsdom)...
-        )
-      }
-    }
-  }
-
-  return { ...(types[options.type || type] || types.text), applyValueTransforms }
-}
+const resolveValue = (value, args) => typeof value === 'function' ? value.apply(null, args) : value
+
+export default (props, options) => {
+  const { type, checked, value, defaultValue } = props
+
+  const applyValueTransforms = value => ((props.type === 'number' || props.numeric) && !isNaN(+value) && value !== '') ? +value : value
+
+  const defaultType = {
+    setInitialValue: ({ set }) => {
+      if(value !== undefined) {
+        set(value)
+      } else if (defaultValue !== undefined) {
+        set(defaultValue)
+      } else if (options.defaultValue !== undefined) {
+        set(resolveValue(options.defaultValue, [props]))
+      } else {
+        set(undefined)
+      }
+    },
+    getOutputValue: ({ event }) => {
+      if (event.target && event.target.value !== undefined) {
+        return event.target.value
+      } else if (event.value !== undefined) {
+        return event.value
+      } else {
+        throw new Error("Unable to determine input value from event")
+      }
+    },
+    getValueProps: ({ currentValue }) => ({
+      value: currentValue === undefined ? '' : currentValue
+    })
+  }
+
+  const checkboxValue = (checked, value) => (value === undefined
+      ? Boolean(checked)
+      : checked ? value : undefined
+  )
+
+  const types = {
+    text: defaultType,
+    radio: {
+      setInitialValue: ({ set }) => checked && set(value),
+      getOutputValue: () => value,
+      getValueProps: ({ currentValue }) => ({ checked: applyValueTransforms(value) === currentValue })
+    },
+    checkbox: {
+      setInitialValue: ({ set }) => set(checkboxValue(checked, value)),
+      getOutputValue: ({ event }) => checkboxValue(event.target.checked, value),
+      getValueProps: ({ currentValue }) => ({ checked: Boolean(currentValue) })
+    },
+    select: {
+      ...defaultType,
+      setInitialValue: ({ set, element }) => {
+        set(value || defaultValue ||
+          (props.options && props.options.length > 0 && props.options[0]) || // this probably should come out - is it the right behavior for all browsers? it's here to keep 1 unit test happy?
+          element && element.value || '' // this *should* work in all browsers (except jsdom)...
+        )
+      }
+    }
+  }
+
+  return { ...(types[options.type || type] || types.text), applyValueTransforms }
+}

package/src/styles.js

@@ -1,20 +1,20 @@
-import injectCss from './injectCss'
-
-injectCss('react-forms-styles', `
-.react-forms {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.react-forms-row {
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-.react-forms-error {
-  color: #f44336;
-}
-`)
-
-
+import injectCss from './injectCss'
+
+injectCss('react-forms-styles', `
+.react-forms {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.react-forms-row {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.react-forms-error {
+  color: #f44336;
+}
+`)
+
+

package/src/submit.js

@@ -1,29 +1,29 @@
-import React, { useState } from 'react'
-
-export default render => function Submit(props) {
-  if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')
-
-  const {
-    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
-    valid, validate, disableInvalid, values, ...propsToPass
-  } = props
-
-  // TODO: set executing when form is triggered by enter key
-  const [executing, setExecuting] = useState(false)
-
-  const onClick = e => {
-    const result = onSubmit(e, { validate, additionalValues: values })
-    if(result && result.finally && typeof result.finally === 'function') {
-      setExecuting(true)
-      result.finally(() => setExecuting(false))
-    }
-  }
-
-  const finalProps = {
-    ...propsToPass,
-    onClick,
-    disabled: props.disabled || executing || (disableInvalid && !valid)
-  }
-
-  return render(finalProps)
-}
+import React, { useState } from 'react'
+
+export default render => function Submit(props) {
+  if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')
+
+  const {
+    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
+    valid, validate, disableInvalid, values, ...propsToPass
+  } = props
+
+  // TODO: set executing when form is triggered by enter key
+  const [executing, setExecuting] = useState(false)
+
+  const onClick = e => {
+    const result = onSubmit(e, { validate, additionalValues: values })
+    if(result && result.finally && typeof result.finally === 'function') {
+      setExecuting(true)
+      result.finally(() => setExecuting(false))
+    }
+  }
+
+  const finalProps = {
+    ...propsToPass,
+    onClick,
+    disabled: props.disabled || executing || (disableInvalid && !valid)
+  }
+
+  return render(finalProps)
+}

package/src/throttle.js

@@ -1,11 +1,11 @@
-export default (target, delay = 200) => {
-  let timeout
-
-  return (...args) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(
-      () => target(...args),
-      delay
-    )
-  }
+export default (target, delay = 200) => {
+  let timeout
+
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(
+      () => target(...args),
+      delay
+    )
+  }
 }

package/src/useForm.js

@@ -1,11 +1,16 @@
-import { useContext } from 'react'
-
-export default context => function useForm() {
-  const { onSubmit, getFieldValues, setFieldValue } = useContext(context)
-
-  return {
-    submit: options => onSubmit(undefined, options),
-    values: () => getFieldValues(),
-    setFieldValue
-  }
+import { useCallback, useContext } from 'react'
+
+export default context => function useForm() {
+  const { onSubmit, getFieldValues, setFieldValue } = useContext(context)
+
+  const submit = useCallback(
+    options => onSubmit(undefined, options),
+    [onSubmit]
+  )
+
+  return {
+    submit,
+    values: () => getFieldValues(),
+    setFieldValue
+  }
 }