@danderson00/react-forms 0.0.48 → 0.0.49

package/src/index.js

@@ -1,41 +1,41 @@
-import { createContext, createElement } from 'react'
-import FormProvider from './Form'
-import GroupProvider from './Group'
-import ErrorMessage from './ErrorMessage'
-import submit from './submit'
-import input from './input'
-import useFormValuesImpl from './useFormValues'
-import useFormImpl from './useForm'
-import './styles'
-
-export const context = createContext({})
-
-const createConsumer = ConsumerComponent => props => createElement(
-  context.Consumer,
-  { children: context => createElement(ConsumerComponent, { ...context, ...props }) }
-)
-
-export const createRawConsumer = ConsumerComponent => (
-  props => createElement(
-    context.Consumer,
-    { children: ({ registerFieldValidator, setFieldValue, getFieldValue, ...context }) => (
-      createElement(ConsumerComponent, { ...context, ...props })
-    )}
-  )
-)
-
-export const Form = FormProvider(context.Provider, {}, ErrorMessage)
-export const Group = GroupProvider(context)
-export const Submit = createConsumer(submit(props => createElement('button', props)))
-
-export const Input = createConsumer(input(props => createElement('input', props)))
-export const Textarea = createConsumer(input(props => createElement('textarea', props)))
-export const Select = createConsumer(input(props => createElement('select', props), { type: 'select' }))
-
-export const wrapInput = (component, options) => createConsumer(input(props => createElement(component, props), options))
-export const wrapSubmit = component => createConsumer(submit(props => createElement(component, props)))
-
-export const useFormValues = useFormValuesImpl(context)
-export const useForm = useFormImpl(context)
-
+import { createContext, createElement } from 'react'
+import FormProvider from './Form'
+import GroupProvider from './Group'
+import ErrorMessage from './ErrorMessage'
+import submit from './submit'
+import input from './input'
+import useFormValuesImpl from './useFormValues'
+import useFormImpl from './useForm'
+import './styles'
+
+export const context = createContext({})
+
+const createConsumer = ConsumerComponent => props => createElement(
+  context.Consumer,
+  { children: context => createElement(ConsumerComponent, { ...context, ...props }) }
+)
+
+export const createRawConsumer = ConsumerComponent => (
+  props => createElement(
+    context.Consumer,
+    { children: ({ registerFieldValidator, setFieldValue, getFieldValue, ...context }) => (
+      createElement(ConsumerComponent, { ...context, ...props })
+    )}
+  )
+)
+
+export const Form = FormProvider(context.Provider, {}, ErrorMessage)
+export const Group = GroupProvider(context)
+export const Submit = createConsumer(submit(props => createElement('button', props)))
+
+export const Input = createConsumer(input(props => createElement('input', props)))
+export const Textarea = createConsumer(input(props => createElement('textarea', props)))
+export const Select = createConsumer(input(props => createElement('select', props), { type: 'select' }))
+
+export const wrapInput = (component, options) => createConsumer(input(props => createElement(component, props), options))
+export const wrapSubmit = component => createConsumer(submit(props => createElement(component, props)))
+
+export const useFormValues = useFormValuesImpl(context)
+export const useForm = useFormImpl(context)
+
 export { FormProvider }

package/src/injectCss.js

@@ -1,16 +1,16 @@
-export default function injectCss(id, css) {
-  if (!css || typeof document === 'undefined' || document.querySelector(`#${id}`)) return
-
-  const head = document.head || document.getElementsByTagName('head')[0]
-  const style = document.createElement('style')
-  style.id = id
-  style.type = 'text/css'
-
-  head.appendChild(style)
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css
-  } else {
-    style.appendChild(document.createTextNode(css))
-  }
+export default function injectCss(id, css) {
+  if (!css || typeof document === 'undefined' || document.querySelector(`#${id}`)) return
+
+  const head = document.head || document.getElementsByTagName('head')[0]
+  const style = document.createElement('style')
+  style.id = id
+  style.type = 'text/css'
+
+  head.appendChild(style)
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css
+  } else {
+    style.appendChild(document.createTextNode(css))
+  }
 }

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;
+}
+`)
+
+