feat(FormProvider): submit, onNotify in FormProvider

It is now possible to pass onNotify and submit functions to FormProvider, instead of defining them in each useForm. The handleSubmit function now also gives the name of the form it was called from, to be able to identify what form called the submit function if it was passed to FormProvider.

Author: balazsorban44

src/FormContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useEffect, useRef } from 'react'
+import React, { createContext, useReducer, useEffect, useRef, useMemo } from 'react'
 
 const FormContext = createContext()
 
@@ -8,7 +8,13 @@ function reducer(state, { type, payload }) {
     { ...state, ...payload }
 }
 
-function FormProvider({ children, initialState = {}, validators = {} }) {
+function FormProvider({
+  children,
+  initialState = {},
+  validators = {},
+  onNotify = null,
+  submit = null
+}) {
   const [forms, dispatch] = useReducer(reducer, initialState)
 
 
@@ -23,8 +29,16 @@ function FormProvider({ children, initialState = {}, validators = {} }) {
     }
   }, [initialState])
 
+  const value = useMemo(() => ({
+    forms,
+    dispatch,
+    validators,
+    onNotify,
+    submit
+  }), [forms, onNotify, submit, validators])
+
   return (
-    <FormContext.Provider value={{ forms, dispatch, validators }}>
+    <FormContext.Provider value={value}>
       {children}
     </FormContext.Provider>
   )

src/useForm.js

@@ -7,7 +7,7 @@ const isObject = o => Object.prototype.toString.call(o) === '[object Object]'
 
 export default function useForm ({
   name,
-  submit,
+  submit = null,
   validators = undefined,
   onFinished = null,
   onNotify = null,
@@ -16,14 +16,22 @@ export default function useForm ({
 }) {
 
 
-  const { dispatch, forms, validators: _validators } = useContext(context || FormContext)
+  const {
+    dispatch,
+    forms,
+    validators: _validators,
+    onNotify: _onNotify,
+    submit: _submit
+  } = useContext(context || FormContext)
 
   const form = forms[name]
 
   validators = validators || (_validators[name] ? { ..._validators[name] } : undefined)
+  onNotify = onNotify || _onNotify
 
   const [errors, setErrors] = useState({})
   const [loading, setLoading] = useState(false)
+  submit = submit || _submit
 
 
   if (process.env.NODE_ENV !== 'production') {
@@ -142,6 +150,7 @@ export default function useForm ({
       }
       else {
         return submit({
+          name,
           fields: form,
           setLoading,
           finish: (...args) => {
@@ -153,7 +162,7 @@ export default function useForm ({
     }
   }, [
     // REVIEW: Find a better way to optimize here.
-    form, loading, onNotify, validators, submit, onFinished,
+    name, form, loading, onNotify, validators, submit, onFinished,
   ])
 
   return ({