Merge pull request #6 from balazsorban44/handle-submit-options

handleSubmit options

Author: balazsorban44

README.md

@@ -401,6 +401,7 @@ An optional object
 | :------------ | :--------- | -----------------------------------------------------------------------------------------------------------------------------------: |
 | value         | `string`   |                     Usually, when using radio buttons, values are static. (Each button in the same group must have different values) |
 | generateProps | `function` | Provides `name`, `value` and `error` that can be used to generate additional props. Useful, if you want to avoid using `form.fields` |
+| formName      | `string`   |                                      If the input type is `submit`, it can be used to override the name of the form being submitted. |
 
 > Example:
 1. 

src/__tests__/useForm.test.js

@@ -251,4 +251,27 @@ it('if onNotify is not defined, throw error ', () => {
   const notifyParam = 'submitSuccess'
   render(<App notifyParam={notifyParam} useFormParams={{ onNotify }}/>)
   expect(onNotify).toBeCalledWith(notifyParam)
+})
+
+
+it('should propagate name from event target', () => {
+  const onSubmit = jest.fn()
+  const initialState = { input: '' }
+  const formName = 'formName'
+
+  const App = ({ name }) => {
+    const form = useForm({ name, initialState, validators: validatorsMock, onSubmit })
+    return (
+      <form>
+        <label htmlFor="input">Input</label>
+        <input {...form.inputs.text('input')}/>
+        <button {...form.inputs.submit('Submit', { formName })}/>
+      </form>
+    )
+  }
+
+  const { getByText } = render(<App/>)
+  fireEvent.click(getByText(/submit/i))
+  expect(onSubmit).toBeCalledWith(expect.objectContaining({ name: formName }))
+
 })

src/inputPropGenerators.js

@@ -15,7 +15,7 @@ const inputTypes = [
 
 
 const inputPropsGenerator = ({ type, fields, handleChange, handleSubmit }) =>
-  (name, { value, generateProps } = {}) => {
+  (name, { value, generateProps, formName } = {}) => {
     const field = fields[name]
 
     let props = {
@@ -46,9 +46,12 @@ const inputPropsGenerator = ({ type, fields, handleChange, handleSubmit }) =>
       props = {
         value: name,
         children: name,
-        type: 'submit',
-        onClick: handleSubmit
+        type: 'submit'
       }
+      if (formName)
+        props.onClick = e => handleSubmit(e, { formName })
+      else
+        props.onClick = handleSubmit
       break
     default:
       break

src/submitHandler.js

@@ -6,8 +6,10 @@ import { errors as devErrors } from './handleDevErrors'
  * It does a validation on all the fields
  * before it is being sent.
  */
-export default function submitHandler({ e, name, form, submit, setLoading, setErrors, onNotify, validators }) {
+export default function submitHandler({ e, options, name, form, submit, setLoading, setErrors, onNotify, validators }) {
   e?.preventDefault?.()
+  name = options?.formName || name
+
   const errors = validate({ fields: form, validators, submitting: true })
   setErrors(e => ({ ...e, ...errors }))
 

src/useForm.js

@@ -29,8 +29,8 @@ export default function useForm ({ name, initialState, validators, onSubmit, onN
   const handleChange = (...args) =>
     changeHandler({ dispatch, setErrors, form, name, onNotify, validators, args })
 
-  const handleSubmit = e =>
-    submitHandler({ e, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators })
+  const handleSubmit = (e, options) =>
+    submitHandler({ e, options, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators })
 
   const inputs = inputPropGenerators({ fields, handleChange, handleSubmit })
 

typings/InputPropGenerator.d.ts

@@ -44,6 +44,8 @@ type InputPropGenerator<
   options?: {
     value: T extends "checkbox" | "select" ? string : never
     generateProps: G
+    /** Override the name of the form being submitted. */
+    formName: T extends "submit" ? string : never
   }
 ) => GeneratedProps<T, F, N> | ReturnType<G>
 

typings/useForm.d.ts

@@ -20,6 +20,10 @@ export type SubmitCallback<N, F, T = any> = (submitParams: {
   notify: NotifyCallback<F, SubmitNotificationType>
 }) => T
 
+export interface SubmitHandlerOptions {
+  /** Overrides the name of the form being submitted in `onSubmit`. */
+  formName: string
+}
 /**
  * Set up a form, or hook into one deifned in `FormProvider`.
  */
@@ -145,7 +149,7 @@ export interface ChangeHandler<F, V> {
 
 export interface UseForm<
   N, F, V, KV,
-  OnSubmitCallback
+  SubmitCallback
 > {
   /** Name of the form */
   name: N
@@ -171,7 +175,7 @@ export interface UseForm<
    * @note If an event is passed as an argument, preventdefault()
    * is called automatically.
    */
-  handleSubmit: (event?: React.FormEvent) => ReturnType<OnSubmitCallback>
+  handleSubmit: (event?: React.FormEvent, options: SubmitHandlerOptions) => ReturnType<SubmitCallback>
   /**
    * Tells if there is some async operation running in the form,
    * like sending data to server. Can be used to for example disable