Skip to content

Commit 2286cf6

Browse files
Merge pull request #6 from balazsorban44/handle-submit-options
handleSubmit options
2 parents c2f8956 + d65576d commit 2286cf6

File tree

7 files changed

+43
-8
lines changed

7 files changed

+43
-8
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,7 @@ An optional object
401401
| :------------ | :--------- | -----------------------------------------------------------------------------------------------------------------------------------: |
402402
| value | `string` | Usually, when using radio buttons, values are static. (Each button in the same group must have different values) |
403403
| generateProps | `function` | Provides `name`, `value` and `error` that can be used to generate additional props. Useful, if you want to avoid using `form.fields` |
404+
| formName | `string` | If the input type is `submit`, it can be used to override the name of the form being submitted. |
404405

405406
> Example:
406407
1.

src/__tests__/useForm.test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,4 +251,27 @@ it('if onNotify is not defined, throw error ', () => {
251251
const notifyParam = 'submitSuccess'
252252
render(<App notifyParam={notifyParam} useFormParams={{ onNotify }}/>)
253253
expect(onNotify).toBeCalledWith(notifyParam)
254+
})
255+
256+
257+
it('should propagate name from event target', () => {
258+
const onSubmit = jest.fn()
259+
const initialState = { input: '' }
260+
const formName = 'formName'
261+
262+
const App = ({ name }) => {
263+
const form = useForm({ name, initialState, validators: validatorsMock, onSubmit })
264+
return (
265+
<form>
266+
<label htmlFor="input">Input</label>
267+
<input {...form.inputs.text('input')}/>
268+
<button {...form.inputs.submit('Submit', { formName })}/>
269+
</form>
270+
)
271+
}
272+
273+
const { getByText } = render(<App/>)
274+
fireEvent.click(getByText(/submit/i))
275+
expect(onSubmit).toBeCalledWith(expect.objectContaining({ name: formName }))
276+
254277
})

src/inputPropGenerators.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const inputTypes = [
1515

1616

1717
const inputPropsGenerator = ({ type, fields, handleChange, handleSubmit }) =>
18-
(name, { value, generateProps } = {}) => {
18+
(name, { value, generateProps, formName } = {}) => {
1919
const field = fields[name]
2020

2121
let props = {
@@ -46,9 +46,12 @@ const inputPropsGenerator = ({ type, fields, handleChange, handleSubmit }) =>
4646
props = {
4747
value: name,
4848
children: name,
49-
type: 'submit',
50-
onClick: handleSubmit
49+
type: 'submit'
5150
}
51+
if (formName)
52+
props.onClick = e => handleSubmit(e, { formName })
53+
else
54+
props.onClick = handleSubmit
5255
break
5356
default:
5457
break

src/submitHandler.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import { errors as devErrors } from './handleDevErrors'
66
* It does a validation on all the fields
77
* before it is being sent.
88
*/
9-
export default function submitHandler({ e, name, form, submit, setLoading, setErrors, onNotify, validators }) {
9+
export default function submitHandler({ e, options, name, form, submit, setLoading, setErrors, onNotify, validators }) {
1010
e?.preventDefault?.()
11+
name = options?.formName || name
12+
1113
const errors = validate({ fields: form, validators, submitting: true })
1214
setErrors(e => ({ ...e, ...errors }))
1315

src/useForm.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export default function useForm ({ name, initialState, validators, onSubmit, onN
2929
const handleChange = (...args) =>
3030
changeHandler({ dispatch, setErrors, form, name, onNotify, validators, args })
3131

32-
const handleSubmit = e =>
33-
submitHandler({ e, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators })
32+
const handleSubmit = (e, options) =>
33+
submitHandler({ e, options, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators })
3434

3535
const inputs = inputPropGenerators({ fields, handleChange, handleSubmit })
3636

typings/InputPropGenerator.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ type InputPropGenerator<
4444
options?: {
4545
value: T extends "checkbox" | "select" ? string : never
4646
generateProps: G
47+
/** Override the name of the form being submitted. */
48+
formName: T extends "submit" ? string : never
4749
}
4850
) => GeneratedProps<T, F, N> | ReturnType<G>
4951

typings/useForm.d.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ export type SubmitCallback<N, F, T = any> = (submitParams: {
2020
notify: NotifyCallback<F, SubmitNotificationType>
2121
}) => T
2222

23+
export interface SubmitHandlerOptions {
24+
/** Overrides the name of the form being submitted in `onSubmit`. */
25+
formName: string
26+
}
2327
/**
2428
* Set up a form, or hook into one deifned in `FormProvider`.
2529
*/
@@ -145,7 +149,7 @@ export interface ChangeHandler<F, V> {
145149

146150
export interface UseForm<
147151
N, F, V, KV,
148-
OnSubmitCallback
152+
SubmitCallback
149153
> {
150154
/** Name of the form */
151155
name: N
@@ -171,7 +175,7 @@ export interface UseForm<
171175
* @note If an event is passed as an argument, preventdefault()
172176
* is called automatically.
173177
*/
174-
handleSubmit: (event?: React.FormEvent) => ReturnType<OnSubmitCallback>
178+
handleSubmit: (event?: React.FormEvent, options: SubmitHandlerOptions) => ReturnType<SubmitCallback>
175179
/**
176180
* Tells if there is some async operation running in the form,
177181
* like sending data to server. Can be used to for example disable

0 commit comments

Comments
 (0)