-
Notifications
You must be signed in to change notification settings - Fork 0
/
useFormHandler.ts
76 lines (70 loc) · 1.98 KB
/
useFormHandler.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { useState } from "react";
import { FormErrors } from "../types/FormErrors";
import { FormTouched } from "../types/FormTouched";
import {
UseFormHandlerStatelessArg,
UseFormHandlerStatelessReturn,
} from "./useFormHandlerStateless";
import { BaseValues } from "../types/BaseValues";
export type UseFormHandlerArg<Values extends BaseValues> = Omit<
UseFormHandlerStatelessArg<Values>,
| "values"
| "onValues"
| "errors"
| "onErrors"
| "touched"
| "onTouched"
| "isSubmitting"
| "onIsSubmitting"
>;
export type UseFormHandlerReturn<
Values extends BaseValues,
ExtraContext extends Record<string, unknown>
> = UseFormHandlerStatelessReturn<Values, ExtraContext>;
/**
* @private
*/
export interface CreateUseFormHandlerDependencies<
Values extends BaseValues,
ExtraContext extends Record<string, unknown>
> {
useFormHandlerStateless: (
arg: UseFormHandlerStatelessArg<Values>
) => UseFormHandlerStatelessReturn<Values, ExtraContext>;
}
/**
* @private
*/
export const createUseFormHandler = <
Values extends BaseValues,
ExtraContext extends Record<string, unknown>
>({
useFormHandlerStateless,
}: CreateUseFormHandlerDependencies<Values, ExtraContext>) => {
/**
* The base form handler logic as an uncontrolled component, i.e. all state is handled.
*
* @param {UseFormHandlerArg<Values>} arg
* @returns {UseFormHandlerReturn<Values>}
*/
const useFormHandler = (
arg: UseFormHandlerArg<Values>
): UseFormHandlerReturn<Values, ExtraContext> => {
const [values, onValues] = useState<Values>(arg.initialValues);
const [errors, onErrors] = useState<FormErrors<Values>>({});
const [touched, onTouched] = useState<FormTouched<Values>>(new Set());
const [isSubmitting, onIsSubmitting] = useState<boolean>(false);
return useFormHandlerStateless({
...arg,
values,
onValues,
errors,
onErrors,
touched,
onTouched,
isSubmitting,
onIsSubmitting,
});
};
return useFormHandler;
};