@weser/forms 0.0.18 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/createForm.d.ts +253 -0
- package/dist/createForm.js +19 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -0
- package/dist/types.d.ts +6 -4
- package/dist/useField.d.ts +2 -2
- package/dist/useForm.d.ts +6 -5
- package/dist/useForm.js +8 -4
- package/dist/useForm.jsx +112 -0
- package/package.json +5 -2
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
import { ZodObject, ZodRawShape } from 'zod';
|
|
2
|
+
import type { ChangeEvent, ReactNode } from 'react';
|
|
3
|
+
export default function createForm<T extends ZodRawShape>(schema: ZodObject<T>): {
|
|
4
|
+
useForm: () => {
|
|
5
|
+
isValidating: boolean;
|
|
6
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
7
|
+
valid: boolean;
|
|
8
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
9
|
+
reset: () => void;
|
|
10
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
11
|
+
errorMessage: string | undefined;
|
|
12
|
+
inputProps: {
|
|
13
|
+
onFocus: () => void;
|
|
14
|
+
onBlur: () => void;
|
|
15
|
+
value: any;
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
name: string | undefined;
|
|
18
|
+
'data-valid': boolean;
|
|
19
|
+
onChange: (e: C) => void;
|
|
20
|
+
} | {
|
|
21
|
+
onFocus: () => void;
|
|
22
|
+
onBlur?: undefined;
|
|
23
|
+
value: any;
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
name: string | undefined;
|
|
26
|
+
'data-valid': boolean;
|
|
27
|
+
onChange: (e: C) => void;
|
|
28
|
+
};
|
|
29
|
+
props: {
|
|
30
|
+
onFocus: () => void;
|
|
31
|
+
onBlur: () => void;
|
|
32
|
+
value: any;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
name: string | undefined;
|
|
35
|
+
valid: boolean;
|
|
36
|
+
errorMessage: string | undefined;
|
|
37
|
+
onChange: (e: C) => void;
|
|
38
|
+
} | {
|
|
39
|
+
onFocus: () => void;
|
|
40
|
+
onBlur?: undefined;
|
|
41
|
+
value: any;
|
|
42
|
+
disabled: boolean;
|
|
43
|
+
name: string | undefined;
|
|
44
|
+
valid: boolean;
|
|
45
|
+
errorMessage: string | undefined;
|
|
46
|
+
onChange: (e: C) => void;
|
|
47
|
+
};
|
|
48
|
+
_initial: {
|
|
49
|
+
value: T_1;
|
|
50
|
+
disabled: boolean;
|
|
51
|
+
touched: boolean;
|
|
52
|
+
dirty: boolean;
|
|
53
|
+
valid: boolean;
|
|
54
|
+
errorMessage: string | undefined;
|
|
55
|
+
};
|
|
56
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
57
|
+
value: T_1;
|
|
58
|
+
disabled: boolean;
|
|
59
|
+
touched: boolean;
|
|
60
|
+
dirty: boolean;
|
|
61
|
+
};
|
|
62
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
63
|
+
checkDirty: () => boolean;
|
|
64
|
+
reset: () => void;
|
|
65
|
+
};
|
|
66
|
+
useFormContext: () => {
|
|
67
|
+
isValidating: boolean;
|
|
68
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
69
|
+
valid: boolean;
|
|
70
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
71
|
+
reset: () => void;
|
|
72
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
73
|
+
errorMessage: string | undefined;
|
|
74
|
+
inputProps: {
|
|
75
|
+
onFocus: () => void;
|
|
76
|
+
onBlur: () => void;
|
|
77
|
+
value: any;
|
|
78
|
+
disabled: boolean;
|
|
79
|
+
name: string | undefined;
|
|
80
|
+
'data-valid': boolean;
|
|
81
|
+
onChange: (e: C) => void;
|
|
82
|
+
} | {
|
|
83
|
+
onFocus: () => void;
|
|
84
|
+
onBlur?: undefined;
|
|
85
|
+
value: any;
|
|
86
|
+
disabled: boolean;
|
|
87
|
+
name: string | undefined;
|
|
88
|
+
'data-valid': boolean;
|
|
89
|
+
onChange: (e: C) => void;
|
|
90
|
+
};
|
|
91
|
+
props: {
|
|
92
|
+
onFocus: () => void;
|
|
93
|
+
onBlur: () => void;
|
|
94
|
+
value: any;
|
|
95
|
+
disabled: boolean;
|
|
96
|
+
name: string | undefined;
|
|
97
|
+
valid: boolean;
|
|
98
|
+
errorMessage: string | undefined;
|
|
99
|
+
onChange: (e: C) => void;
|
|
100
|
+
} | {
|
|
101
|
+
onFocus: () => void;
|
|
102
|
+
onBlur?: undefined;
|
|
103
|
+
value: any;
|
|
104
|
+
disabled: boolean;
|
|
105
|
+
name: string | undefined;
|
|
106
|
+
valid: boolean;
|
|
107
|
+
errorMessage: string | undefined;
|
|
108
|
+
onChange: (e: C) => void;
|
|
109
|
+
};
|
|
110
|
+
_initial: {
|
|
111
|
+
value: T_1;
|
|
112
|
+
disabled: boolean;
|
|
113
|
+
touched: boolean;
|
|
114
|
+
dirty: boolean;
|
|
115
|
+
valid: boolean;
|
|
116
|
+
errorMessage: string | undefined;
|
|
117
|
+
};
|
|
118
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
119
|
+
value: T_1;
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
touched: boolean;
|
|
122
|
+
dirty: boolean;
|
|
123
|
+
};
|
|
124
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
125
|
+
checkDirty: () => boolean;
|
|
126
|
+
reset: () => void;
|
|
127
|
+
};
|
|
128
|
+
FormProvider: import("react").ComponentType<{
|
|
129
|
+
value: {
|
|
130
|
+
isValidating: boolean;
|
|
131
|
+
useFormField: <T_1 = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof T, options?: Omit<import("./types.js").Options<T_1, C>, "name" | "formatErrorMessage" | "_onInit" | "_onUpdate" | "_storedField">) => {
|
|
132
|
+
valid: boolean;
|
|
133
|
+
update: (data: Partial<import("./types.js").T_Field<T_1>>) => void;
|
|
134
|
+
reset: () => void;
|
|
135
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
136
|
+
errorMessage: string | undefined;
|
|
137
|
+
inputProps: {
|
|
138
|
+
onFocus: () => void;
|
|
139
|
+
onBlur: () => void;
|
|
140
|
+
value: any;
|
|
141
|
+
disabled: boolean;
|
|
142
|
+
name: string | undefined;
|
|
143
|
+
'data-valid': boolean;
|
|
144
|
+
onChange: (e: C) => void;
|
|
145
|
+
} | {
|
|
146
|
+
onFocus: () => void;
|
|
147
|
+
onBlur?: undefined;
|
|
148
|
+
value: any;
|
|
149
|
+
disabled: boolean;
|
|
150
|
+
name: string | undefined;
|
|
151
|
+
'data-valid': boolean;
|
|
152
|
+
onChange: (e: C) => void;
|
|
153
|
+
};
|
|
154
|
+
props: {
|
|
155
|
+
onFocus: () => void;
|
|
156
|
+
onBlur: () => void;
|
|
157
|
+
value: any;
|
|
158
|
+
disabled: boolean;
|
|
159
|
+
name: string | undefined;
|
|
160
|
+
valid: boolean;
|
|
161
|
+
errorMessage: string | undefined;
|
|
162
|
+
onChange: (e: C) => void;
|
|
163
|
+
} | {
|
|
164
|
+
onFocus: () => void;
|
|
165
|
+
onBlur?: undefined;
|
|
166
|
+
value: any;
|
|
167
|
+
disabled: boolean;
|
|
168
|
+
name: string | undefined;
|
|
169
|
+
valid: boolean;
|
|
170
|
+
errorMessage: string | undefined;
|
|
171
|
+
onChange: (e: C) => void;
|
|
172
|
+
};
|
|
173
|
+
_initial: {
|
|
174
|
+
value: T_1;
|
|
175
|
+
disabled: boolean;
|
|
176
|
+
touched: boolean;
|
|
177
|
+
dirty: boolean;
|
|
178
|
+
valid: boolean;
|
|
179
|
+
errorMessage: string | undefined;
|
|
180
|
+
};
|
|
181
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
182
|
+
value: T_1;
|
|
183
|
+
disabled: boolean;
|
|
184
|
+
touched: boolean;
|
|
185
|
+
dirty: boolean;
|
|
186
|
+
};
|
|
187
|
+
handleSubmit: (onSubmit: (data: import("zod/v4/core").$InferObjectOutput<T, {}>) => void, onError?: ((issues: import("zod/v4/core").$ZodIssue[]) => void) | undefined) => (e: import("react").FormEvent<HTMLFormElement>) => Promise<void>;
|
|
188
|
+
checkDirty: () => boolean;
|
|
189
|
+
reset: () => void;
|
|
190
|
+
};
|
|
191
|
+
} & {
|
|
192
|
+
children?: ReactNode;
|
|
193
|
+
}>;
|
|
194
|
+
Field: <T_2 = string, C_1 = ChangeEvent<HTMLInputElement>>({ name, children, ...options }: {
|
|
195
|
+
name: keyof T;
|
|
196
|
+
children: (field: {
|
|
197
|
+
valid: boolean;
|
|
198
|
+
update: (data: Partial<import("./types.js").T_Field<T_2>>) => void;
|
|
199
|
+
reset: () => void;
|
|
200
|
+
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
201
|
+
errorMessage: string | undefined;
|
|
202
|
+
inputProps: {
|
|
203
|
+
onFocus: () => void;
|
|
204
|
+
onBlur: () => void;
|
|
205
|
+
value: any;
|
|
206
|
+
disabled: boolean;
|
|
207
|
+
name: string | undefined;
|
|
208
|
+
'data-valid': boolean;
|
|
209
|
+
onChange: (e: C_1) => void;
|
|
210
|
+
} | {
|
|
211
|
+
onFocus: () => void;
|
|
212
|
+
onBlur?: undefined;
|
|
213
|
+
value: any;
|
|
214
|
+
disabled: boolean;
|
|
215
|
+
name: string | undefined;
|
|
216
|
+
'data-valid': boolean;
|
|
217
|
+
onChange: (e: C_1) => void;
|
|
218
|
+
};
|
|
219
|
+
props: {
|
|
220
|
+
onFocus: () => void;
|
|
221
|
+
onBlur: () => void;
|
|
222
|
+
value: any;
|
|
223
|
+
disabled: boolean;
|
|
224
|
+
name: string | undefined;
|
|
225
|
+
valid: boolean;
|
|
226
|
+
errorMessage: string | undefined;
|
|
227
|
+
onChange: (e: C_1) => void;
|
|
228
|
+
} | {
|
|
229
|
+
onFocus: () => void;
|
|
230
|
+
onBlur?: undefined;
|
|
231
|
+
value: any;
|
|
232
|
+
disabled: boolean;
|
|
233
|
+
name: string | undefined;
|
|
234
|
+
valid: boolean;
|
|
235
|
+
errorMessage: string | undefined;
|
|
236
|
+
onChange: (e: C_1) => void;
|
|
237
|
+
};
|
|
238
|
+
_initial: {
|
|
239
|
+
value: T_2;
|
|
240
|
+
disabled: boolean;
|
|
241
|
+
touched: boolean;
|
|
242
|
+
dirty: boolean;
|
|
243
|
+
valid: boolean;
|
|
244
|
+
errorMessage: string | undefined;
|
|
245
|
+
};
|
|
246
|
+
_applyError: (issue: import("zod/v4/core").$ZodIssue) => void;
|
|
247
|
+
value: T_2;
|
|
248
|
+
disabled: boolean;
|
|
249
|
+
touched: boolean;
|
|
250
|
+
dirty: boolean;
|
|
251
|
+
}) => ReactNode;
|
|
252
|
+
} & import("./types.js").Options<T_2, C_1>) => ReactNode;
|
|
253
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext } from '@weser/context';
|
|
2
|
+
import _useForm from './useForm.js';
|
|
3
|
+
export default function createForm(schema) {
|
|
4
|
+
function useForm() {
|
|
5
|
+
return _useForm(schema);
|
|
6
|
+
}
|
|
7
|
+
const [useFormContext, FormProvider] = createContext(null);
|
|
8
|
+
function Field({ name, children, ...options }) {
|
|
9
|
+
const { useFormField } = useFormContext();
|
|
10
|
+
const field = useFormField(name, options);
|
|
11
|
+
return children(field);
|
|
12
|
+
}
|
|
13
|
+
return {
|
|
14
|
+
useForm,
|
|
15
|
+
useFormContext,
|
|
16
|
+
FormProvider,
|
|
17
|
+
Field,
|
|
18
|
+
};
|
|
19
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as createForm } from './createForm.js';
|
|
2
|
+
export { default as useForm } from './useForm.js';
|
|
2
3
|
export { default as useField } from './useField.js';
|
|
3
|
-
export type {
|
|
4
|
+
export type { T_Field, T_FieldName } from './types.js';
|
package/dist/index.js
CHANGED
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { ZodObject } from 'zod';
|
|
1
2
|
import { $ZodIssue } from 'zod/v4/core';
|
|
2
|
-
export type
|
|
3
|
+
export type T_FieldName<T extends ZodObject<any>> = keyof T['shape'];
|
|
4
|
+
export type T_Field<T> = {
|
|
3
5
|
value: T;
|
|
4
6
|
disabled: boolean;
|
|
5
7
|
touched: boolean;
|
|
@@ -16,7 +18,7 @@ export type Options<T, C> = {
|
|
|
16
18
|
parseEvent?: (e: C) => T;
|
|
17
19
|
formatValue?: (value: T) => any;
|
|
18
20
|
formatErrorMessage?: (error: $ZodIssue, value: T, name?: string) => string;
|
|
19
|
-
_onInit?: (field:
|
|
20
|
-
_onUpdate?: (field: Partial<
|
|
21
|
-
_storedField?:
|
|
21
|
+
_onInit?: (field: T_Field<T>) => void;
|
|
22
|
+
_onUpdate?: (field: Partial<T_Field<T>>) => void;
|
|
23
|
+
_storedField?: T_Field<T>;
|
|
22
24
|
};
|
package/dist/useField.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ChangeEvent } from 'react';
|
|
2
2
|
import { ZodType } from 'zod';
|
|
3
3
|
import { $ZodIssue } from 'zod/v4/core';
|
|
4
|
-
import {
|
|
4
|
+
import { T_Field, Options } from './types.js';
|
|
5
5
|
export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseEvent, formatValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T, C>): {
|
|
6
6
|
valid: boolean;
|
|
7
|
-
update: (data: Partial<
|
|
7
|
+
update: (data: Partial<T_Field<T>>) => void;
|
|
8
8
|
reset: () => void;
|
|
9
9
|
validate: () => import("zod").ZodSafeParseResult<unknown>;
|
|
10
10
|
errorMessage: string | undefined;
|
package/dist/useForm.d.ts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { FormEvent, ChangeEvent } from 'react';
|
|
2
|
-
import { z, ZodObject,
|
|
2
|
+
import { z, ZodObject, ZodRawShape } from 'zod';
|
|
3
3
|
import { $ZodIssue } from 'zod/v4/core';
|
|
4
4
|
import { Options } from './types.js';
|
|
5
5
|
import useField from './useField.js';
|
|
6
|
-
|
|
6
|
+
type FieldsMap = Record<string, ReturnType<typeof useField<any, any>>>;
|
|
7
7
|
type Config = {
|
|
8
8
|
formatErrorMessage?: (error: $ZodIssue, value: any, name?: string) => string;
|
|
9
9
|
_onUpdate?: (fields: FieldsMap) => void;
|
|
10
10
|
};
|
|
11
11
|
export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, { formatErrorMessage, _onUpdate }?: Config): {
|
|
12
|
-
|
|
12
|
+
isValidating: boolean;
|
|
13
|
+
useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof S, options?: Omit<Options<T, C>, 'formatErrorMessage' | 'name' | '_onInit' | '_onUpdate' | '_storedField'>) => {
|
|
13
14
|
valid: boolean;
|
|
14
|
-
update: (data: Partial<import("./types.js").
|
|
15
|
+
update: (data: Partial<import("./types.js").T_Field<T>>) => void;
|
|
15
16
|
reset: () => void;
|
|
16
17
|
validate: () => z.ZodSafeParseResult<unknown>;
|
|
17
18
|
errorMessage: string | undefined;
|
|
@@ -65,7 +66,7 @@ export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, { f
|
|
|
65
66
|
touched: boolean;
|
|
66
67
|
dirty: boolean;
|
|
67
68
|
};
|
|
68
|
-
handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (
|
|
69
|
+
handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (issues: Array<$ZodIssue>) => void) => (e: FormEvent<HTMLFormElement>) => Promise<void>;
|
|
69
70
|
checkDirty: () => boolean;
|
|
70
71
|
reset: () => void;
|
|
71
72
|
};
|
package/dist/useForm.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
2
|
import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
|
|
3
3
|
import useField from './useField.js';
|
|
4
4
|
export default function useForm(schema, { formatErrorMessage = defaultFormatErrorMessage, _onUpdate } = {}) {
|
|
5
|
+
const [isValidating, setIsValidating] = useState(false);
|
|
5
6
|
const fields = useRef({});
|
|
6
7
|
function useFormField(_name, options = {}) {
|
|
7
8
|
const name = String(_name);
|
|
@@ -54,12 +55,14 @@ export default function useForm(schema, { formatErrorMessage = defaultFormatErro
|
|
|
54
55
|
return false;
|
|
55
56
|
}
|
|
56
57
|
function handleSubmit(onSubmit, onError) {
|
|
57
|
-
return (e) => {
|
|
58
|
+
return async (e) => {
|
|
58
59
|
e.stopPropagation();
|
|
59
60
|
e.preventDefault();
|
|
60
61
|
touchFields();
|
|
61
62
|
const data = mapFieldsToData(fields.current);
|
|
62
|
-
|
|
63
|
+
setIsValidating(true);
|
|
64
|
+
const parsed = await schema.safeParseAsync(data);
|
|
65
|
+
setIsValidating(false);
|
|
63
66
|
if (parsed.success) {
|
|
64
67
|
onSubmit(parsed.data);
|
|
65
68
|
}
|
|
@@ -68,7 +71,7 @@ export default function useForm(schema, { formatErrorMessage = defaultFormatErro
|
|
|
68
71
|
_applyErrors(parsed.error.issues);
|
|
69
72
|
}
|
|
70
73
|
if (onError) {
|
|
71
|
-
onError(parsed.error);
|
|
74
|
+
onError(parsed.error.issues);
|
|
72
75
|
}
|
|
73
76
|
}
|
|
74
77
|
};
|
|
@@ -82,6 +85,7 @@ export default function useForm(schema, { formatErrorMessage = defaultFormatErro
|
|
|
82
85
|
}
|
|
83
86
|
}
|
|
84
87
|
return {
|
|
88
|
+
isValidating,
|
|
85
89
|
useFormField,
|
|
86
90
|
handleSubmit,
|
|
87
91
|
checkDirty,
|
package/dist/useForm.jsx
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { useRef, useState, } from 'react';
|
|
2
|
+
import { createContext } from '@weser/context';
|
|
3
|
+
import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
|
|
4
|
+
import useField from './useField.js';
|
|
5
|
+
export function createForm(schema) {
|
|
6
|
+
function _useForm() {
|
|
7
|
+
return useForm(schema);
|
|
8
|
+
}
|
|
9
|
+
const [useFormContext, FormProvider] = createContext(null);
|
|
10
|
+
return {
|
|
11
|
+
useForm: _useForm,
|
|
12
|
+
useFormContext,
|
|
13
|
+
FormProvider,
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function mapFieldsToData(fields) {
|
|
17
|
+
const obj = {};
|
|
18
|
+
for (const name in fields) {
|
|
19
|
+
obj[name] = fields[name].value;
|
|
20
|
+
}
|
|
21
|
+
return obj;
|
|
22
|
+
}
|
|
23
|
+
export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
|
|
24
|
+
const [isValidating, setIsValidating] = useState(false);
|
|
25
|
+
const fields = useRef({});
|
|
26
|
+
function useFormField(_name, options = {}) {
|
|
27
|
+
const name = String(_name);
|
|
28
|
+
const shape = schema.shape[_name];
|
|
29
|
+
const stored = fields.current[name];
|
|
30
|
+
const field = useField(shape, {
|
|
31
|
+
...options,
|
|
32
|
+
name,
|
|
33
|
+
formatErrorMessage,
|
|
34
|
+
// internals
|
|
35
|
+
_storedField: stored,
|
|
36
|
+
_onInit: (data) => {
|
|
37
|
+
fields.current[name] = {
|
|
38
|
+
...field,
|
|
39
|
+
...data,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
_onUpdate: (data) => {
|
|
43
|
+
fields.current[name] = {
|
|
44
|
+
...fields.current[name],
|
|
45
|
+
...data,
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
return field;
|
|
50
|
+
}
|
|
51
|
+
function touchFields() {
|
|
52
|
+
for (const name in fields.current) {
|
|
53
|
+
fields.current[name].update({
|
|
54
|
+
touched: true,
|
|
55
|
+
// force revalidate
|
|
56
|
+
value: fields.current[name].value,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function reset() {
|
|
61
|
+
for (const name in fields.current) {
|
|
62
|
+
fields.current[name].reset();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
function checkDirty() {
|
|
66
|
+
for (const name in fields.current) {
|
|
67
|
+
if (fields.current[name].dirty) {
|
|
68
|
+
return true;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
function handleSubmit(onSubmit, onError) {
|
|
74
|
+
return async (e) => {
|
|
75
|
+
e.stopPropagation();
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
touchFields();
|
|
78
|
+
// TODO: abort if fields are invalid already
|
|
79
|
+
// collect validation for each field
|
|
80
|
+
const data = mapFieldsToData(fields.current);
|
|
81
|
+
setIsValidating(true);
|
|
82
|
+
const parsed = await schema.safeParseAsync(data);
|
|
83
|
+
setIsValidating(false);
|
|
84
|
+
if (parsed.success) {
|
|
85
|
+
onSubmit(parsed.data);
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
if (parsed.error.issues.length > 0) {
|
|
89
|
+
_applyErrors(parsed.error.issues);
|
|
90
|
+
}
|
|
91
|
+
if (onError) {
|
|
92
|
+
onError(parsed.error);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
function _applyErrors(issues) {
|
|
98
|
+
for (const issue of issues) {
|
|
99
|
+
const field = fields.current[issue.path[0]];
|
|
100
|
+
if (field) {
|
|
101
|
+
field._applyError(issue);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
useFormField,
|
|
107
|
+
handleSubmit,
|
|
108
|
+
checkDirty,
|
|
109
|
+
isValidating,
|
|
110
|
+
reset,
|
|
111
|
+
};
|
|
112
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weser/forms",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "React hooks for forms with zod schemas",
|
|
5
5
|
"author": "Robin Weser <robin@weser.io>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,6 +43,9 @@
|
|
|
43
43
|
"forms",
|
|
44
44
|
"zod"
|
|
45
45
|
],
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@weser/context": "1.0.0"
|
|
48
|
+
},
|
|
46
49
|
"peerDependencies": {
|
|
47
50
|
"react": ">16.3.0",
|
|
48
51
|
"zod": ">=4"
|
|
@@ -55,5 +58,5 @@
|
|
|
55
58
|
"typescript": "^5.4.5",
|
|
56
59
|
"zod": "^4.1.11"
|
|
57
60
|
},
|
|
58
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "afc0628ca4aeaba255eef9716652640fdc5b50c4"
|
|
59
62
|
}
|