Update dependencies

.prettierignore

@@ -1,2 +1,3 @@
 dist
 node_modules
+coverage

.travis.yml

@@ -2,8 +2,8 @@ language: node_js
 sudo: false
 
 node_js:
-  - "8"
-  - "10"
-  - "12"
+  - '10'
+  - '12'
+  - '14'
 
 after_success: npm run coveralls

examples/babel-preset.js

@@ -8,10 +8,10 @@ Babel.registerPreset('babel-sucks', {
           react: 'React',
           'react-dom': 'ReactDOM',
           'prop-types': 'PropTypes',
-          'react-form-validation': 'ReactFormValidation'
-        }
-      }
-    ]
+          'react-form-validation': 'ReactFormValidation',
+        },
+      },
+    ],
   ],
-  moduleId: 'main'
+  moduleId: 'main',
 })

examples/index.js

@@ -91,7 +91,7 @@ render(
               blur
               recheck
               other="same-as"
-              validation={input =>
+              validation={(input) =>
                 input.value === 'Homer' ? new Error('no homers allowed') : null
               }
             >
@@ -119,7 +119,7 @@ render(
               blur
               recheck
               validation={(input, fields) => {
-                const other = fields.find(x => x.id === 'name')
+                const other = fields.find((x) => x.id === 'name')
                 if (!other || other.value !== input.value)
                   throw new Error('must match')
               }}

package.json

@@ -9,7 +9,7 @@
     "prebuild": "rimraf dist",
     "build": "rollup -c",
     "coveralls": "nyc report --reporter=text-lcov | coveralls",
-    "lint": "eslint src",
+    "lint": "prettier --write . && eslint **/*.js",
     "prepublishOnly": "npm test && cross-env NODE_ENV=production npm run build",
     "start": "cross-env NODE_ENV=development npm run build -- -w",
     "pretest": "rimraf coverage",
@@ -28,35 +28,35 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/register": "^7.7.4",
-    "babel-eslint": "^10.0.3",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/register": "^7.9.0",
+    "babel-eslint": "^10.1.0",
     "bootstrap": "^4.4.1",
-    "coveralls": "^3.0.9",
-    "cross-env": "^6.0.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "jsdom": "^15.2.1",
-    "mocha": "^6.2.2",
-    "nyc": "^14.1.1",
-    "prettier": "^1.19.1",
+    "coveralls": "^3.1.0",
+    "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "jsdom": "^16.2.2",
+    "mocha": "^7.1.1",
+    "nyc": "^15.0.1",
+    "prettier": "^2.0.5",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.27.9",
-    "rollup-plugin-babel": "^4.3.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.7.2",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.1.2",
-    "sinon": "^7.5.0"
+    "rollup-plugin-terser": "^5.3.0",
+    "sinon": "^9.0.2"
   },
   "babel": {
     "presets": [

readme.md

@@ -157,7 +157,7 @@ const FormGroup = ({ id, label, ...rest }) => {
 
 const LoginForm = () => {
   return (
-    <Form onSubmit={e => e.preventDefault()}>
+    <Form onSubmit={(e) => e.preventDefault()}>
       <FormGroup id="user-name" name="user-name" label="User Name" required />
       <FormGroup
         id="password"
@@ -198,27 +198,27 @@ const MyForm = () => {
 
   const validation = useMemo(
     () => [
-      async input => {
+      async (input) => {
         setLoading(true)
         try {
           await UserService.checkIfAlreadyExists(input.value)
         } finally {
           setLoading(false)
         }
-      }
+      },
     ],
     []
   )
 
-  const handleSubmit = useCallback(async e => {
+  const handleSubmit = useCallback(async (e) => {
     e.preventDefault()
     try {
       const res = await fetch('/api', {
         method: 'POST',
         body: new FormData(e.target),
         headers: {
-          Accept: 'application/json'
-        }
+          Accept: 'application/json',
+        },
       })
       const data = await res.json()
       if (res.ok) return setResponse(data)

rollup.config.js

@@ -14,8 +14,8 @@ const config = (format, file, minify, server = false) => ({
     globals: {
       react: 'React',
       'react-dom': 'ReactDOM',
-      'prop-types': 'PropTypes'
-    }
+      'prop-types': 'PropTypes',
+    },
   },
   plugins: [
     babel(),
@@ -27,10 +27,10 @@ const config = (format, file, minify, server = false) => ({
         path: 'examples/index.html',
         contentBase: ['examples', 'dist', 'node_modules'],
         open: false,
-        wait: 500
-      })
+        wait: 500,
+      }),
   ],
-  external: ['react', 'react-dom', 'prop-types']
+  external: ['react', 'react-dom', 'prop-types'],
 })
 
 export default [
@@ -39,5 +39,5 @@ export default [
   config('module', './dist/index.min.mjs', true),
   config('module', './dist/index.mjs'),
   config('cjs', './dist/index.cjs.min.js', true),
-  config('cjs', './dist/index.cjs.js')
+  config('cjs', './dist/index.cjs.js'),
 ]

src/form.js

@@ -2,11 +2,11 @@ import React, { memo, useCallback, useRef, forwardRef } from 'react'
 import { func } from 'prop-types'
 import { FormContext } from './context'
 
-const getElement = (search, elements, mapper = x => x) =>
+const getElement = (search, elements, mapper = (x) => x) =>
   elements[
     Array.from(elements)
       .map(mapper)
-      .findIndex(x => x === search || x.id === search || x.name === search)
+      .findIndex((x) => x === search || x.id === search || x.name === search)
   ]
 
 const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
@@ -25,9 +25,9 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
   )
 
   const unregister = useCallback(
-    field =>
+    (field) =>
       (fields.current = fields.current.filter(
-        f => f.field.name !== field.name
+        (f) => f.field.name !== field.name
       )),
     []
   )
@@ -56,8 +56,8 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
     if (!formInput.checkValidity()) return
 
     let error = null
-    const field = getElement(formInput, fields.current, x => x.field)
-    const others = fields.current.map(x => x.field)
+    const field = getElement(formInput, fields.current, (x) => x.field)
+    const others = fields.current.map((x) => x.field)
 
     for (const fn of field.details.validation ?? []) {
       try {
@@ -84,7 +84,7 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
    */
   const validate = useCallback(
     async ({ target: element }) => {
-      const field = getElement(element, fields.current, x => x.field)
+      const field = getElement(element, fields.current, (x) => x.field)
       await validateSingle(element)
       for (const item of field.details.otherArray) {
         const other = getElement(item, element.form.elements)
@@ -101,7 +101,7 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
    * Calling `.persist()` because when async comes back, the `e.target` is null.
    */
   const handleSubmit = useCallback(
-    async e => {
+    async (e) => {
       e.persist()
       e.preventDefault()
       for (const { field } of fields.current) {
@@ -113,7 +113,7 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
   )
 
   const setInputTouched = useCallback(
-    e => (touched.current[e.target.name] = true),
+    (e) => (touched.current[e.target.name] = true),
     [touched]
   )
 
@@ -123,7 +123,7 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
         register,
         unregister,
         validate,
-        setInputTouched
+        setInputTouched,
       }}
     >
       <form ref={formRef} onSubmit={handleSubmit} {...rest}></form>
@@ -134,7 +134,7 @@ const Form = forwardRef(({ onSubmit, ...rest }, ref) => {
 Form.displayName = 'Form'
 
 Form.propTypes = {
-  onSubmit: func
+  onSubmit: func,
 }
 
 const memoized = memo(Form)

src/index.js

@@ -3,4 +3,3 @@ export { Validator } from './validator'
 
 export { Form } from './form'
 export { Input, Select, TextArea } from './input'
-

src/input.js

@@ -19,10 +19,10 @@ const propTypes = {
   onValid: func,
   onInvalid: func,
   onValidated: func,
-  name: string.isRequired // form elements must have name!
+  name: string.isRequired, // form elements must have name!
 }
 
-const createInput = inputType => {
+const createInput = (inputType) => {
   const Wrapped = forwardRef(
     (
       {
@@ -51,7 +51,7 @@ const createInput = inputType => {
         handleBlur,
         handleChange,
         handleClick,
-        handleFocus
+        handleFocus,
       } = useValidation(innerRef, {
         onBlur,
         onChange,
@@ -67,7 +67,7 @@ const createInput = inputType => {
         onError,
         onValid,
         onInvalid,
-        onValidated
+        onValidated,
       })
 
       return React.createElement(inputType, {
@@ -76,7 +76,7 @@ const createInput = inputType => {
         onChange: handleChange,
         onClick: handleClick,
         onFocus: handleFocus,
-        ...rest
+        ...rest,
       })
     }
   )

src/use-validation.js

@@ -4,7 +4,7 @@ import {
   useCallback,
   useState,
   useRef,
-  useMemo
+  useMemo,
 } from 'react'
 
 import { FormContext } from './context'
@@ -38,7 +38,7 @@ const useValidation = (
     onError,
     onInvalid,
     onValid,
-    onValidated
+    onValidated,
   }
 ) => {
   const ctx = useContext(FormContext)
@@ -54,7 +54,7 @@ const useValidation = (
   const [invalid, setInvalid] = useState(null)
 
   const waitForValidation = useCallback(
-    e => {
+    (e) => {
       if (debounce == null) return validate(e)
       e.persist()
       clearTimeout(timeoutRef.current)
@@ -99,31 +99,31 @@ const useValidation = (
   )
 
   const handleFocus = useCallback(
-    e => {
+    (e) => {
       onFocus?.(e)
       setInputTouched(e)
     },
     [onFocus, setInputTouched]
   )
 
   const handleChange = useCallback(
-    e => {
+    (e) => {
       onChange?.(e)
       if ((validated && recheck) || change) waitForValidation(e)
     },
     [onChange, recheck, change, validated, waitForValidation]
   )
 
   const handleBlur = useCallback(
-    e => {
+    (e) => {
       onBlur?.(e)
       if (blur) waitForValidation(e)
     },
     [onBlur, blur, waitForValidation]
   )
 
   const handleClick = useCallback(
-    e => {
+    (e) => {
       onClick?.(e)
       if (click) waitForValidation(e)
     },
@@ -139,7 +139,7 @@ const useValidation = (
           ? validation
           : [validation],
       updateState,
-      otherArray: other == null ? [] : Array.isArray(other) ? other : [other]
+      otherArray: other == null ? [] : Array.isArray(other) ? other : [other],
     }),
     [validation, updateState, other]
   )