@danderson00/react-forms 0.0.48 → 0.0.50

package/src/Form.js

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

package/src/Group.js

@@ -1,15 +1,15 @@
-import { createElement, useContext } from 'react'
-
-const Group = formContext => ({ name, ...props }) => {
-  if (!name) throw new Error("You must provide a name prop to form components")
-  const { groups = [], ...context } = useContext(formContext)
-
-  return createElement(formContext.Provider, {
-    ...props,
-    value: {
-      ...context,
-      groups: groups.concat(name)
-    }
-  })
-}
+import { createElement, useContext } from 'react'
+
+const Group = formContext => ({ name, ...props }) => {
+  if (!name) throw new Error("You must provide a name prop to form components")
+  const { groups = [], ...context } = useContext(formContext)
+
+  return createElement(formContext.Provider, {
+    ...props,
+    value: {
+      ...context,
+      groups: groups.concat(name)
+    }
+  })
+}
 export default Group

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