react-f0rm 0.2.0 → 0.2.2
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/form-d06e6444.d.ts +201 -0
- package/dist/index.d.ts +112 -0
- package/dist/index.umd.min.js +1 -1
- package/dist/resolvers/yup.d.ts +7 -0
- package/dist/resolvers/zod.d.ts +7 -0
- package/dist/validate-0f17f86a.d.ts +8 -0
- package/package.json +15 -5
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import { EventEmitter } from '@for-fun/event-emitter';
|
|
2
|
+
|
|
3
|
+
type PathValue$1 = (string | number)[];
|
|
4
|
+
type Name$1 = string | PathValue$1;
|
|
5
|
+
type Path = {
|
|
6
|
+
value: PathValue$1;
|
|
7
|
+
key: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
type PathValue = (string | number)[];
|
|
11
|
+
type Name = string | PathValue;
|
|
12
|
+
interface Form<T extends Record<string, any> = any> {
|
|
13
|
+
emitter: EventEmitter;
|
|
14
|
+
revalidateOnChange: boolean;
|
|
15
|
+
initialValues: T;
|
|
16
|
+
values: Map<string, any>;
|
|
17
|
+
errors: Map<string, string>;
|
|
18
|
+
touched: Set<string>;
|
|
19
|
+
validators: Map<string, () => void>;
|
|
20
|
+
validating: Set<string>;
|
|
21
|
+
validate?: (values: T) => Record<string, string> | Promise<Record<string, string>>;
|
|
22
|
+
isSubmitting: boolean;
|
|
23
|
+
submitCount: number;
|
|
24
|
+
isSubmitSuccessful: boolean | undefined;
|
|
25
|
+
}
|
|
26
|
+
type Options<T extends Record<string, any> = any> = {
|
|
27
|
+
initialValues?: T;
|
|
28
|
+
validateOnSubmit?: boolean;
|
|
29
|
+
validateOnChange?: boolean;
|
|
30
|
+
validateOnBlur?: boolean;
|
|
31
|
+
revalidateOnChange?: boolean;
|
|
32
|
+
revalidateOnBlur?: boolean;
|
|
33
|
+
validate?: (values: T) => Record<string, string> | Promise<Record<string, string>>;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Create form instance
|
|
37
|
+
* @param options
|
|
38
|
+
* @return form instance
|
|
39
|
+
*/
|
|
40
|
+
declare function create<T extends Record<string, any> = any>(options?: Options<T>): Form<T>;
|
|
41
|
+
/**
|
|
42
|
+
* Get form values
|
|
43
|
+
* @param form
|
|
44
|
+
*/
|
|
45
|
+
declare function getValues(form: Form): any;
|
|
46
|
+
/**
|
|
47
|
+
* Get field value
|
|
48
|
+
* @param form
|
|
49
|
+
* @param name
|
|
50
|
+
*/
|
|
51
|
+
declare function getValue(form: Form, name: Name): any;
|
|
52
|
+
/**
|
|
53
|
+
* Get field value by path
|
|
54
|
+
* @param form
|
|
55
|
+
* @param path
|
|
56
|
+
*/
|
|
57
|
+
declare function getValueByPath({ initialValues, values }: Form, path: Path): any;
|
|
58
|
+
/**
|
|
59
|
+
* Set field value
|
|
60
|
+
* @param form
|
|
61
|
+
* @param name
|
|
62
|
+
* @param value
|
|
63
|
+
*/
|
|
64
|
+
declare function setValue(form: Form, name: Name, value: any): void;
|
|
65
|
+
/**
|
|
66
|
+
* Set field value
|
|
67
|
+
* @param form
|
|
68
|
+
* @param path
|
|
69
|
+
* @param value
|
|
70
|
+
*/
|
|
71
|
+
declare function setValueByPath({ emitter, values }: Form, path: Path, value: any): void;
|
|
72
|
+
/**
|
|
73
|
+
* Get field error
|
|
74
|
+
* @param form
|
|
75
|
+
* @param name
|
|
76
|
+
*/
|
|
77
|
+
declare function getError(form: Form, name: Name): string | undefined;
|
|
78
|
+
/**
|
|
79
|
+
* Get field error by path
|
|
80
|
+
* @param form
|
|
81
|
+
* @param path
|
|
82
|
+
*/
|
|
83
|
+
declare function getErrorByPath({ errors }: Form, path: Path): string | undefined;
|
|
84
|
+
/**
|
|
85
|
+
* Get all errors
|
|
86
|
+
* @param form
|
|
87
|
+
* @return array of error strings
|
|
88
|
+
*/
|
|
89
|
+
declare function getErrors({ errors }: Form): string[];
|
|
90
|
+
/**
|
|
91
|
+
* Get first error string
|
|
92
|
+
* @param form
|
|
93
|
+
* @return first error string or undefined
|
|
94
|
+
*/
|
|
95
|
+
declare function getFirstError({ errors }: Form): string | undefined;
|
|
96
|
+
declare function unsetValidatingByPath({ emitter, validating }: Form, { key }: Path): void;
|
|
97
|
+
declare function setValidatingByPath({ emitter, validating }: Form, { key }: Path): void;
|
|
98
|
+
/**
|
|
99
|
+
* Set field error
|
|
100
|
+
* @param form
|
|
101
|
+
* @param name
|
|
102
|
+
* @param error
|
|
103
|
+
*/
|
|
104
|
+
declare function setError(form: Form, name: Name, error: string | undefined): void;
|
|
105
|
+
/**
|
|
106
|
+
* Set field error
|
|
107
|
+
* @param form
|
|
108
|
+
* @param path
|
|
109
|
+
* @param error
|
|
110
|
+
*/
|
|
111
|
+
declare function setErrorByPath({ emitter, errors }: Form, path: Path, error: string | undefined): void;
|
|
112
|
+
/**
|
|
113
|
+
* Clear errors
|
|
114
|
+
* @param form
|
|
115
|
+
*/
|
|
116
|
+
declare function clearErrors({ emitter, errors }: Form): void;
|
|
117
|
+
/**
|
|
118
|
+
* Set field touched state
|
|
119
|
+
* @param form
|
|
120
|
+
* @param name
|
|
121
|
+
*/
|
|
122
|
+
declare function setTouched(form: Form, name: Name): void;
|
|
123
|
+
/**
|
|
124
|
+
* Set field touched state
|
|
125
|
+
* @param form
|
|
126
|
+
* @param path
|
|
127
|
+
*/
|
|
128
|
+
declare function setTouchedByPath({ emitter, touched }: Form, { key }: Path): void;
|
|
129
|
+
/**
|
|
130
|
+
* Check if field has been touched
|
|
131
|
+
* @param form
|
|
132
|
+
* @param name
|
|
133
|
+
*/
|
|
134
|
+
declare function hasTouched(form: Form, name: Name): boolean;
|
|
135
|
+
/**
|
|
136
|
+
* Check if field has been touched
|
|
137
|
+
* @param form
|
|
138
|
+
* @param path
|
|
139
|
+
*/
|
|
140
|
+
declare function hasTouchedByPath({ touched }: Form, path: Path): boolean;
|
|
141
|
+
/**
|
|
142
|
+
* Is dirty -- any value differs from initialValues
|
|
143
|
+
* @param form
|
|
144
|
+
*/
|
|
145
|
+
declare function isDirty({ initialValues, values }: Form): boolean;
|
|
146
|
+
/**
|
|
147
|
+
* Is touched -- any field has been touched
|
|
148
|
+
* @param form
|
|
149
|
+
*/
|
|
150
|
+
declare function isTouched({ touched }: Form): boolean;
|
|
151
|
+
/**
|
|
152
|
+
* Remove field
|
|
153
|
+
* @param form
|
|
154
|
+
* @param name
|
|
155
|
+
*/
|
|
156
|
+
declare function removeField(form: Form, name: Name): void;
|
|
157
|
+
/**
|
|
158
|
+
* Remove field
|
|
159
|
+
* @param form
|
|
160
|
+
* @param path
|
|
161
|
+
*/
|
|
162
|
+
declare function removeFieldByPath(form: Form, { key }: Path): void;
|
|
163
|
+
/**
|
|
164
|
+
* Set form initialValues
|
|
165
|
+
* @param form
|
|
166
|
+
* @param initialValues
|
|
167
|
+
*/
|
|
168
|
+
declare function setInitialValues(form: Form, initialValues: any): void;
|
|
169
|
+
/**
|
|
170
|
+
* Reset form
|
|
171
|
+
* @param form
|
|
172
|
+
* @param initialValues
|
|
173
|
+
*/
|
|
174
|
+
declare function reset(form: Form, initialValues?: any): void;
|
|
175
|
+
/**
|
|
176
|
+
* @param form
|
|
177
|
+
*/
|
|
178
|
+
declare function hasErrors({ errors }: Form): boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Trigger all fields validate.
|
|
181
|
+
* @param form
|
|
182
|
+
*/
|
|
183
|
+
declare function trigger(form: Form): void;
|
|
184
|
+
/**
|
|
185
|
+
* Validate and throw if any field error.
|
|
186
|
+
* @param form
|
|
187
|
+
* @return resolve if no error; reject and stop validate if has an error
|
|
188
|
+
*/
|
|
189
|
+
declare function ensureValidate(form: Form): Promise<void>;
|
|
190
|
+
/**
|
|
191
|
+
* Validate and return if any field error.
|
|
192
|
+
* @param form
|
|
193
|
+
* @return error message string or void
|
|
194
|
+
*/
|
|
195
|
+
declare function validate(form: Form): Promise<void | string>;
|
|
196
|
+
declare function setIsSubmitting(form: Form, value: boolean): void;
|
|
197
|
+
declare function incrementSubmitCount(form: Form): void;
|
|
198
|
+
declare function setSubmitSuccessful(form: Form, value: boolean): void;
|
|
199
|
+
|
|
200
|
+
export { reset as A, hasErrors as B, trigger as C, ensureValidate as D, validate as E, setIsSubmitting as G, incrementSubmitCount as H, setSubmitSuccessful as I, create as c, getValue as d, getValueByPath as e, setValueByPath as f, getValues as g, getError as h, getErrorByPath as i, getErrors as j, getFirstError as k, setValidatingByPath as l, setError as m, setErrorByPath as n, clearErrors as o, setTouched as p, setTouchedByPath as q, hasTouched as r, setValue as s, hasTouchedByPath as t, unsetValidatingByPath as u, isDirty as v, isTouched as w, removeField as x, removeFieldByPath as y, setInitialValues as z };
|
|
201
|
+
export type { Form as F, Name as N, Options as O, Path as P, Name$1 as a, PathValue as b };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { O as Options, F as Form$1, N as Name, P as Path, a as Name$1 } from './form-d06e6444.js';
|
|
2
|
+
export { b as PathValue, o as clearErrors, c as createForm, D as ensureValidate, h as getError, i as getErrorByPath, j as getErrors, k as getFirstError, d as getValue, e as getValueByPath, g as getValues, B as hasErrors, r as hasTouched, t as hasTouchedByPath, H as incrementSubmitCount, v as isDirty, w as isTouched, x as removeField, y as removeFieldByPath, A as reset, m as setError, n as setErrorByPath, z as setInitialValues, G as setIsSubmitting, I as setSubmitSuccessful, p as setTouched, q as setTouchedByPath, l as setValidatingByPath, s as setValue, f as setValueByPath, C as trigger, u as unsetValidatingByPath, E as validate } from './form-d06e6444.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { EventEmitter } from '@for-fun/event-emitter';
|
|
5
|
+
|
|
6
|
+
declare const FormContext: React.Context<any>;
|
|
7
|
+
declare const FormProvider: React.Provider<any>;
|
|
8
|
+
declare function useFormContext(): any;
|
|
9
|
+
declare const CheckboxGroupContext: React.Context<any>;
|
|
10
|
+
declare const CheckboxGroupProvider: React.Provider<any>;
|
|
11
|
+
declare function useCheckboxGroupContext(): any;
|
|
12
|
+
|
|
13
|
+
declare function useForm<T extends Record<string, any> = any>(options?: Options<T>): Form$1<T>;
|
|
14
|
+
declare function useWatch<T>(emitter: EventEmitter, event: string, getter: () => T): T;
|
|
15
|
+
/**
|
|
16
|
+
* Get field value state
|
|
17
|
+
*/
|
|
18
|
+
declare function useValue(form: Form$1, name: Name): any;
|
|
19
|
+
/**
|
|
20
|
+
* Get field value state by path
|
|
21
|
+
*/
|
|
22
|
+
declare function useValueByPath(form: Form$1, path: Path): any;
|
|
23
|
+
/**
|
|
24
|
+
* Get field touched state
|
|
25
|
+
*/
|
|
26
|
+
declare function useTouched(form: Form$1, name: Name): boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Get field touched state by path
|
|
29
|
+
*/
|
|
30
|
+
declare function useTouchedByPath(form: Form$1, path: Path): boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Get field error state
|
|
33
|
+
*/
|
|
34
|
+
declare function useError(form: Form$1, name: Name): string | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* Get field error state by path
|
|
37
|
+
*/
|
|
38
|
+
declare function useErrorByPath(form: Form$1, path: Path): string | undefined;
|
|
39
|
+
declare function useIsDirty(form: Form$1): boolean;
|
|
40
|
+
declare function useHasErrors(form: Form$1): boolean;
|
|
41
|
+
declare function useIsSubmitting(form: Form$1): boolean;
|
|
42
|
+
declare function useSubmitCount(form: Form$1): number;
|
|
43
|
+
|
|
44
|
+
interface UseFieldOptions$1 {
|
|
45
|
+
form?: Form$1;
|
|
46
|
+
name: Name$1;
|
|
47
|
+
initialValue?: any;
|
|
48
|
+
shouldUnregister?: boolean;
|
|
49
|
+
validate?: (value: any, meta: {
|
|
50
|
+
form: Form$1;
|
|
51
|
+
path: Path;
|
|
52
|
+
}) => string | undefined | Promise<string | undefined>;
|
|
53
|
+
[key: string]: any;
|
|
54
|
+
}
|
|
55
|
+
interface UseFieldResult {
|
|
56
|
+
value: any;
|
|
57
|
+
error: string | undefined;
|
|
58
|
+
onChange: (v: any) => void;
|
|
59
|
+
onBlur: () => void;
|
|
60
|
+
name: string;
|
|
61
|
+
[key: string]: any;
|
|
62
|
+
}
|
|
63
|
+
declare function useField({ form: f1, name, initialValue, shouldUnregister, validate, ...rest }: UseFieldOptions$1): UseFieldResult;
|
|
64
|
+
|
|
65
|
+
interface FieldArrayItem {
|
|
66
|
+
id: string;
|
|
67
|
+
index: number;
|
|
68
|
+
}
|
|
69
|
+
declare function useFieldArray(options: {
|
|
70
|
+
name: Name;
|
|
71
|
+
form?: Form$1;
|
|
72
|
+
}): {
|
|
73
|
+
fields: FieldArrayItem[];
|
|
74
|
+
append: (value: any) => void;
|
|
75
|
+
prepend: (value: any) => void;
|
|
76
|
+
insert: (index: number, value: any) => void;
|
|
77
|
+
remove: (index: number) => void;
|
|
78
|
+
swap: (from: number, to: number) => void;
|
|
79
|
+
move: (from: number, to: number) => void;
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
interface FormProps<T extends Record<string, any> = any> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
|
|
83
|
+
form?: Form<T>;
|
|
84
|
+
initialValues?: T;
|
|
85
|
+
onSubmit?: (values: T, e: React.FormEvent) => void;
|
|
86
|
+
onValidSubmit?: (values: T, e: React.FormEvent) => void;
|
|
87
|
+
onInvalidSubmit?: (errors: string[], values: T) => void;
|
|
88
|
+
}
|
|
89
|
+
declare function Form<T extends Record<string, any> = any>({ form: f1, initialValues, onSubmit, onValidSubmit, onInvalidSubmit, ...props }: FormProps<T>): React.JSX.Element;
|
|
90
|
+
|
|
91
|
+
interface UseFieldOptions {
|
|
92
|
+
form?: any;
|
|
93
|
+
name?: Name$1;
|
|
94
|
+
initialValue?: any;
|
|
95
|
+
validate?: (value: any, meta: {
|
|
96
|
+
form: any;
|
|
97
|
+
path: any;
|
|
98
|
+
}) => string | undefined | Promise<string | undefined>;
|
|
99
|
+
[key: string]: any;
|
|
100
|
+
}
|
|
101
|
+
interface FieldProps extends UseFieldOptions {
|
|
102
|
+
as?: React.ComponentType<any>;
|
|
103
|
+
asProps?: Record<string, any>;
|
|
104
|
+
eventToValue?: (e: any) => any;
|
|
105
|
+
valueToProps?: (value: any) => Record<string, any>;
|
|
106
|
+
}
|
|
107
|
+
declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
108
|
+
interface CheckboxProps extends UseFieldOptions {
|
|
109
|
+
}
|
|
110
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
111
|
+
|
|
112
|
+
export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, Form, FormContext, FormProvider, Name, Options, useCheckboxGroupContext, useError, useErrorByPath, useField, useFieldArray, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useValue, useValueByPath, useWatch };
|
package/dist/index.umd.min.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* react-f0rm v0.2.
|
|
2
|
+
* react-f0rm v0.2.2
|
|
3
3
|
* Copyright (c) 2021-present wmzy <1256573276@qq.com>
|
|
4
4
|
*/
|
|
5
5
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define("react-f0rm",["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-f0rm"]={},e.React)}(this,function(e,t){"use strict";function r(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var n=r(t);function u(e,t,r){var n=function(e,t){var r=e.get(t);if(r)return r;var n=new Set;return e.set(t,n),n}(e,t);return n.add(r),function(){return n.delete(r)}}function i(e){return Array.isArray(e)?e:e.split(/\.|\[/).map(e=>e.endsWith("]")?Number.parseInt(e,10):e)}function o(e,t){return t.reduce((e,t)=>{if(null!=e)return e[t]},e)}function a(e,t,r){if(!t.length)return r;const[n,...u]=t;if("number"==typeof n){const t=Array.isArray(e)?e.slice():[];return t[n]=a(t[n],u,r),t}return{...e,[n]:a(e&&e[n],u,r)}}function c(e){const t=i(e);return{value:t,key:JSON.stringify(t)}}const s=function(e,t){for(var r=arguments.length,n=new Array(r>2?r-2:0),u=2;u<r;u++)n[u-2]=arguments[u];(e.get(t)||[]).forEach(function(e){return e.apply(void 0,n)})};function l(e){return{emitter:new Map,revalidateOnChange:!0,...e,initialValues:e?.initialValues??{},values:new Map,errors:new Map,touched:new Set,validators:new Map,validating:new Set,isSubmitting:!1,submitCount:0,isSubmitSuccessful:void 0}}function f(e){return Array.from(e.values.keys()).reduce((t,r)=>a(t,JSON.parse(r),e.values.get(r)),e.initialValues)}function d({initialValues:e,values:t},r){return t.has(r.key)?t.get(r.key):o(e,r.value)}function m({emitter:e,values:t},r,n){t.set(r.key,n),s(e,"change",r)}function h({errors:e},t){return e.get(t.key)}function v({errors:e}){return Array.from(e.values())}function y({errors:e}){return e.values().next().value}function g({emitter:e,validating:t},{key:r}){t.delete(r),s(e,"validating")}function p({emitter:e,validating:t},{key:r}){t.add(r),s(e,"validating")}function b(e,t,r){C(e,c(t),r)}function C({emitter:e,errors:t},r,n){n?t.set(r.key,n):t.delete(r.key),s(e,"errors")}function k({emitter:e,errors:t}){t.clear(),s(e,"errors")}function V({emitter:e,touched:t},{key:r}){t.has(r)||(t.add(r),s(e,"touched"))}function E({touched:e},t){return e.has(t.key)}function w({initialValues:e,values:t}){for(const[r,n]of t){if(o(e,JSON.parse(r))!==n)return!0}return!1}function S(e,{key:t}){const{emitter:r,values:n,touched:u,errors:i,validating:o}=e;n.delete(t),u.delete(t),i.delete(t),o.delete(t),s(r,"change"),s(r,"touched"),s(r,"errors"),s(r,"validating")}function P(e,t){e.initialValues!==t&&(e.initialValues=t,e.values.clear(),s(e.emitter,"change"))}function x({errors:e}){return e.size>0}async function B(e){var t,r,n,i;if(e.validators.forEach(e=>e()),await(t=e.emitter,r="validating",n=()=>!e.validating.size,i=()=>x(e),new Promise((e,o)=>{if(i())return void o();if(n())return void e();const a=u(t,r,()=>{if(i())return a(),void o();n()||(a(),e())})})).catch(()=>{throw new Error(y(e))}),e.validate){const t=await e.validate(f(e)),r=t?Object.entries(t):[];if(r.length)throw r.forEach(([t,r])=>{b(e,t,r)}),new Error(y(e))}}async function O(e){return B(e).catch(e=>e.message)}function F(e,t){e.isSubmitting=t,s(e.emitter,"submitting")}function R(e){e.submitCount++,s(e.emitter,"submitCount")}function T(e,t){e.isSubmitSuccessful=t,s(e.emitter,"submitSuccessful")}const A=t.createContext(null),j=A.Provider;function I(){const e=t.useContext(A);if(!e)throw new Error("no form provided");return e}const M=t.createContext(null),z=M.Provider;function D(e){const r=t.useRef(null),n=r.current=r.current||l(e),u=e&&e.initialValues;return t.useEffect(()=>{P(n,u)},[u]),n}function N(e,r,n){const[i,o]=t.useReducer(n,void 0,n);return t.useEffect(()=>u(e,r,o),[e,r]),i}function G(e,t){return N(e.emitter,"change",d.bind(null,e,t))}function J(e,t){return N(e.emitter,"touched",E.bind(null,e,t))}function W(e,t){return N(e.emitter,"errors",h.bind(null,e,t))}function q(e){const r=t.useMemo(()=>c(i(e)),[e]);return t.useMemo(()=>r,[r.key])}function H(e){const r=function(e){const r=t.useRef(e);return r.current=e,r}(e);return t.useCallback((...e)=>r.current(...e),[])}function U({form:e,name:r,initialValue:n,shouldUnregister:u,validate:i,...o}){const a=I(),c=e||a,s=q(r),l=function(e,r){const n=I(),u=t.useRef(null),i=t.useRef(e);return i.current=e,t.useEffect(()=>(n.validators.set(r.key,()=>{const e=i.current;if(!e)return;const t=e(d(n,r),{form:n,path:r});if(!(o=t)||"function"!=typeof o.then)return void C(n,r,t);var o;const a=u.current={};p(n,r),t.then(e=>{a===u.current&&C(n,r,e)}).finally(()=>{a===u.current&&(g(n,r),u.current=null)})}),()=>{n.validators.delete(r.key)}),[n,r.key]),H(()=>n.validators.get(r.key)?.())}(i,s);t.useMemo(()=>{void 0!==n&&m(c,s,n)},[c,s]);const f=W(c,s),h=G(c,s),v=H(e=>{m(c,s,e),(c.validateOnChange||c.revalidateOnChange&&f&&void 0!==f)&&l()}),y=H(()=>{V(c,s),(c.validateOnBlur||c.revalidateOnBlur&&void 0!==f)&&l()});return t.useEffect(()=>()=>{!1!==u&&S(c,s)},[s,c,u]),{...o,value:h,error:f,onChange:v,onBlur:y,name:s.key}}let _=0;function K(){return"_"+ ++_}const L=Symbol("buildInError");const Q=n.forwardRef(({validate:e,eventToValue:t,initialValue:r,name:u,asProps:i,...o},a)=>{const c=n.useRef(null),s=n.useCallback(e=>{c.current=e,function(e,t){"function"==typeof e?e(t):e&&(e.current=t)}(a,e)},[a]),{as:l,value:f,valueToProps:d,onChange:m,error:h,...v}=U({...o,name:u,initialValue:r,validate:(...t)=>!1===c.current?.checkValidity()?L:e?e(...t):void 0}),y=l||"input";n.useEffect(()=>{if(c.current)return h===L?(c.current.setCustomValidity(""),void c.current.reportValidity()):void("string"==typeof h&&(c.current.setCustomValidity(h),c.current.reportValidity()))},[h]);const g=t??(e=>e.target.value);return n.createElement(y,{...v,...i,...d?d(f):{value:f},onChange:e=>m(g(e)),ref:s})}),X=n.forwardRef(({name:e,...t},r)=>{const{value:u,onChange:i,error:o,...a}=U({...t,name:e});return n.createElement("input",{...a,type:"checkbox",checked:!!u,onChange:e=>i(e.target.checked),ref:r})});e.Checkbox=X,e.CheckboxGroupContext=M,e.CheckboxGroupProvider=z,e.Field=Q,e.Form=function({form:e,initialValues:t,onSubmit:r,onValidSubmit:u,onInvalidSubmit:i,...o}){const a=D({initialValues:t}),c=e||a;return n.createElement(j,{value:c},n.createElement("form",{...o,noValidate:!0,onSubmit:async function(e){e.preventDefault(),F(c,!0),R(c);const t=await O(c),n=f(c);if(t)return F(c,!1),T(c,!1),void(i&&i(v(c),n));try{r&&await r(n,e),u&&u(n,e),T(c,!0)}catch{T(c,!1)}finally{F(c,!1)}}}))},e.FormContext=A,e.FormProvider=j,e.clearErrors=k,e.createForm=l,e.ensureValidate=B,e.getError=function(e,t){return h(e,c(t))},e.getErrorByPath=h,e.getErrors=v,e.getFirstError=y,e.getValue=function(e,t){return d(e,c(t))},e.getValueByPath=d,e.getValues=f,e.hasErrors=x,e.hasTouched=function(e,t){return E(e,c(t))},e.hasTouchedByPath=E,e.incrementSubmitCount=R,e.isDirty=w,e.isTouched=function({touched:e}){return e.size>0},e.removeField=function(e,t){S(e,c(t))},e.removeFieldByPath=S,e.reset=function(e,t){e.initialValues=t,k(e);const{emitter:r,touched:n,values:u}=e;u.clear(),n.clear(),s(r,"change"),s(r,"touched"),s(r,"reset")},e.setError=b,e.setErrorByPath=C,e.setInitialValues=P,e.setIsSubmitting=F,e.setSubmitSuccessful=T,e.setTouched=function(e,t){V(e,c(t))},e.setTouchedByPath=V,e.setValidatingByPath=p,e.setValue=function(e,t,r){m(e,c(t),r)},e.setValueByPath=m,e.trigger=function(e){e.validators.forEach(e=>e())},e.unsetValidatingByPath=g,e.useCheckboxGroupContext=function(){const e=t.useContext(M);if(!e)throw new Error("no group provided");return e},e.useError=function(e,t){return W(e,c(t))},e.useErrorByPath=W,e.useField=U,e.useFieldArray=function(e){const r=I(),n=e.form||r,i=q(e.name),o=t.useRef([]),a=t.useCallback(()=>d(n,i)||[],[n,i]),c=t.useCallback(e=>{m(n,i,e)},[n,i]),s=t.useCallback(()=>{const e=a();for(;o.current.length<e.length;)o.current.push(K());for(;o.current.length>e.length;)o.current.pop();return o.current.map((e,t)=>({id:e,index:t}))},[a]),[l,f]=t.useReducer(s,void 0,s);return t.useEffect(()=>u(n.emitter,"change",f),[n.emitter]),{fields:l,append:H(e=>{const t=a();o.current.push(K()),c([...t,e])}),prepend:H(e=>{const t=a();o.current.unshift(K()),c([e,...t])}),insert:H((e,t)=>{const r=a();o.current.splice(e,0,K());const n=[...r.slice(0,e),t,...r.slice(e)];c(n)}),remove:H(e=>{const t=a();o.current.splice(e,1);const r=t.filter((t,r)=>r!==e);c(r)}),swap:H((e,t)=>{const r=a();[o.current[e],o.current[t]]=[o.current[t],o.current[e]];const n=[...r];[n[e],n[t]]=[n[t],n[e]],c(n)}),move:H((e,t)=>{const r=a(),[n]=o.current.splice(e,1);o.current.splice(t,0,n);const u=[...r],[i]=u.splice(e,1);u.splice(t,0,i),c(u)})}},e.useForm=D,e.useFormContext=I,e.useHasErrors=function(e){return N(e.emitter,"errors",x.bind(null,e))},e.useIsDirty=function(e){return N(e.emitter,"touched",w.bind(null,e))},e.useIsSubmitting=function(e){return N(e.emitter,"submitting",()=>e.isSubmitting)},e.useSubmitCount=function(e){return N(e.emitter,"submitCount",()=>e.submitCount)},e.useTouched=function(e,t){return J(e,c(t))},e.useTouchedByPath=J,e.useValue=function(e,t){return G(e,c(t))},e.useValueByPath=G,e.useWatch=N,e.validate=O});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-f0rm",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"packageManager": "pnpm@11.4.0",
|
|
5
5
|
"description": "react form",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -8,11 +8,20 @@
|
|
|
8
8
|
"unpkg": "dist/index.umd.min.js",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
11
12
|
"import": "./dist/index.esm.js",
|
|
12
13
|
"require": "./dist/index.cjs.js"
|
|
13
14
|
},
|
|
14
|
-
"./resolvers/zod":
|
|
15
|
-
|
|
15
|
+
"./resolvers/zod": {
|
|
16
|
+
"types": "./dist/resolvers/zod.d.ts",
|
|
17
|
+
"import": "./dist/resolvers/zod.esm.js",
|
|
18
|
+
"require": "./dist/resolvers/zod.cjs.js"
|
|
19
|
+
},
|
|
20
|
+
"./resolvers/yup": {
|
|
21
|
+
"types": "./dist/resolvers/yup.d.ts",
|
|
22
|
+
"import": "./dist/resolvers/yup.esm.js",
|
|
23
|
+
"require": "./dist/resolvers/yup.cjs.js"
|
|
24
|
+
}
|
|
16
25
|
},
|
|
17
26
|
"types": "dist/index.d.ts",
|
|
18
27
|
"files": [
|
|
@@ -29,8 +38,8 @@
|
|
|
29
38
|
"test:watch": "vitest",
|
|
30
39
|
"test:ui": "vitest --ui",
|
|
31
40
|
"clean": "rimraf dist node_modules/.cache",
|
|
32
|
-
"lint:fix": "eslint --fix
|
|
33
|
-
"lint": "eslint
|
|
41
|
+
"lint:fix": "eslint --fix src/ test/",
|
|
42
|
+
"lint": "eslint src/ test/",
|
|
34
43
|
"storybook": "storybook dev -p 6006",
|
|
35
44
|
"build-storybook": "storybook build",
|
|
36
45
|
"size": "size-limit",
|
|
@@ -103,6 +112,7 @@
|
|
|
103
112
|
"react-dom": "^18.2.0",
|
|
104
113
|
"rimraf": "^5.0.1",
|
|
105
114
|
"rollup": "^3.26.2",
|
|
115
|
+
"rollup-plugin-dts": "^6.4.1",
|
|
106
116
|
"rollup-plugin-esbuild": "^6.2.1",
|
|
107
117
|
"size-limit": "^12.1.0",
|
|
108
118
|
"storybook": "^10.4.1",
|