@juantroconisf/lib 3.6.2 → 4.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/index.d.mts +3 -53
- package/dist/index.d.ts +3 -53
- package/dist/index.js +9 -153
- package/dist/index.mjs +8 -151
- package/package.json +3 -2
package/dist/index.d.mts
CHANGED
|
@@ -2,7 +2,6 @@ import { SelectProps, AutocompleteProps } from '@heroui/react';
|
|
|
2
2
|
import { SingleSelection } from '@react-types/shared/src/selection';
|
|
3
3
|
|
|
4
4
|
type StateType = Record<string, any>;
|
|
5
|
-
type GetNestedValueByKey<O extends StateType> = (obj: O, nestedKey: string) => O[keyof O];
|
|
6
5
|
interface NestedChangeProps<O extends StateType> {
|
|
7
6
|
state: O;
|
|
8
7
|
id: keyof O | string;
|
|
@@ -14,13 +13,6 @@ declare class NextUIError {
|
|
|
14
13
|
errorMessage: string;
|
|
15
14
|
constructor(bool?: boolean, msg?: string);
|
|
16
15
|
}
|
|
17
|
-
type NXErrorFunc = (bool?: boolean, msg?: string) => NextUIError;
|
|
18
|
-
interface MapValidator {
|
|
19
|
-
string: (val: string) => boolean;
|
|
20
|
-
number: (val: string | number) => boolean;
|
|
21
|
-
object: (val: object) => boolean;
|
|
22
|
-
}
|
|
23
|
-
type RequiredValidationFunc = (value: any[] | any) => boolean;
|
|
24
16
|
type ValidatorFunction<T, U> = (val: T, ...args: U[]) => boolean;
|
|
25
17
|
interface Validator<T, U = any> {
|
|
26
18
|
validate: ValidatorFunction<T, U>;
|
|
@@ -39,36 +31,13 @@ interface ValidatorTypes {
|
|
|
39
31
|
password: Validator<string, boolean>;
|
|
40
32
|
custom: Validator<any, boolean>;
|
|
41
33
|
}
|
|
42
|
-
type ValidatorParams$1 = {
|
|
43
|
-
[K in keyof ValidatorTypes]?: ValidatorTypes[K] extends Validator<any, infer U> ? U : never;
|
|
44
|
-
};
|
|
45
|
-
type ValidatorErrorMessage$1 = {
|
|
46
|
-
[K in keyof ValidatorTypes]?: string;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
34
|
type ValidatorParams = {
|
|
50
35
|
[K in keyof ValidatorTypes]?: ValidatorTypes[K] extends Validator<any, infer U> ? U : never;
|
|
51
36
|
};
|
|
52
37
|
type ValidatorErrorMessage = {
|
|
53
38
|
[K in keyof ValidatorTypes]?: string;
|
|
54
39
|
};
|
|
55
|
-
|
|
56
|
-
isValid: boolean;
|
|
57
|
-
validationProps: NextUIError;
|
|
58
|
-
};
|
|
59
|
-
type GetValidationFunc<V extends unknown> = (value: V, isTouched: boolean, types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => GetValidationResponse;
|
|
60
|
-
interface UseValidationFunc {
|
|
61
|
-
getValidation: GetValidationFunc<unknown>;
|
|
62
|
-
}
|
|
63
|
-
interface FormChangeState<O extends StateType> {
|
|
64
|
-
state: O;
|
|
65
|
-
validations?: {
|
|
66
|
-
[key in keyof O]?: ValidatorParams;
|
|
67
|
-
};
|
|
68
|
-
errorMessages?: {
|
|
69
|
-
[key in keyof O]?: ValidatorErrorMessage;
|
|
70
|
-
};
|
|
71
|
-
}
|
|
40
|
+
|
|
72
41
|
interface FormOptions<O extends StateType> {
|
|
73
42
|
validations?: {
|
|
74
43
|
[key in keyof O]?: ValidatorParams;
|
|
@@ -91,8 +60,6 @@ type UXProps<O extends StateType> = Record<keyof O, {
|
|
|
91
60
|
isInvalid: boolean;
|
|
92
61
|
errorMessage: string;
|
|
93
62
|
}>;
|
|
94
|
-
type RegisterHandleFunc<O extends StateType> = (id: keyof O) => ComponentInputProps<O>;
|
|
95
|
-
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O], isTouched?: boolean) => any;
|
|
96
63
|
interface InputRegisterProps<O extends StateType, K extends keyof O, V extends unknown = string> extends ComponentInputProps<O> {
|
|
97
64
|
onValueChange: (value: O[K]) => void;
|
|
98
65
|
value: V;
|
|
@@ -113,20 +80,6 @@ interface RegisterFunc<O extends StateType> {
|
|
|
113
80
|
select: (id: keyof O) => SelectRegisterProps<O>;
|
|
114
81
|
autocomplete: (id: keyof O) => AutocompleteRegisterProps<O>;
|
|
115
82
|
}
|
|
116
|
-
type PreservedKeys<O extends StateType> = keyof O;
|
|
117
|
-
interface UseFormChangeResponse<O extends StateType> {
|
|
118
|
-
onBlur: BlurFunc<O>;
|
|
119
|
-
onValueChange: ValueChangeFunc<O, keyof O>;
|
|
120
|
-
onSelectionChange: ValueChangeFunc<O, keyof O>;
|
|
121
|
-
state: O;
|
|
122
|
-
setState: React.Dispatch<React.SetStateAction<O>>;
|
|
123
|
-
register: RegisterFunc<O>;
|
|
124
|
-
hasInvalidValues: () => boolean;
|
|
125
|
-
touched: TouchedType<O>;
|
|
126
|
-
resetForm: (presevedKeys?: PreservedKeys<O>[]) => void;
|
|
127
|
-
errors: React.RefObject<TouchedType<O>>;
|
|
128
|
-
realErrors: React.RefObject<TouchedType<O>>;
|
|
129
|
-
}
|
|
130
83
|
interface UseFormResponse<O extends StateType> {
|
|
131
84
|
onBlur: BlurFunc<O>;
|
|
132
85
|
onValueChange: ValueChangeFunc<O, keyof O>;
|
|
@@ -137,12 +90,9 @@ interface UseFormResponse<O extends StateType> {
|
|
|
137
90
|
errors: ErrorsType<O>;
|
|
138
91
|
register: RegisterFunc<O>;
|
|
139
92
|
hasInvalidValues: () => boolean;
|
|
140
|
-
resetForm: (
|
|
93
|
+
resetForm: (preservedKeys?: (keyof O)[]) => void;
|
|
141
94
|
}
|
|
142
|
-
type ValidateFunc<O extends StateType> = (value: O[keyof O], types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => NextUIError;
|
|
143
|
-
|
|
144
|
-
declare function useFormChange<O extends StateType>({ state: initialState, validations, errorMessages, }: FormChangeState<O>): UseFormChangeResponse<O>;
|
|
145
95
|
|
|
146
96
|
declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormResponse<O>;
|
|
147
97
|
|
|
148
|
-
export { type BlurFunc, type
|
|
98
|
+
export { type BlurFunc, type ErrorsType, type FormOptions, type NestedChangeProps, NextUIError, type RegisterFunc, type StateType, type TouchedType, type UXProps, type UseFormResponse, type Validator, type ValidatorErrorMessage, type ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { SelectProps, AutocompleteProps } from '@heroui/react';
|
|
|
2
2
|
import { SingleSelection } from '@react-types/shared/src/selection';
|
|
3
3
|
|
|
4
4
|
type StateType = Record<string, any>;
|
|
5
|
-
type GetNestedValueByKey<O extends StateType> = (obj: O, nestedKey: string) => O[keyof O];
|
|
6
5
|
interface NestedChangeProps<O extends StateType> {
|
|
7
6
|
state: O;
|
|
8
7
|
id: keyof O | string;
|
|
@@ -14,13 +13,6 @@ declare class NextUIError {
|
|
|
14
13
|
errorMessage: string;
|
|
15
14
|
constructor(bool?: boolean, msg?: string);
|
|
16
15
|
}
|
|
17
|
-
type NXErrorFunc = (bool?: boolean, msg?: string) => NextUIError;
|
|
18
|
-
interface MapValidator {
|
|
19
|
-
string: (val: string) => boolean;
|
|
20
|
-
number: (val: string | number) => boolean;
|
|
21
|
-
object: (val: object) => boolean;
|
|
22
|
-
}
|
|
23
|
-
type RequiredValidationFunc = (value: any[] | any) => boolean;
|
|
24
16
|
type ValidatorFunction<T, U> = (val: T, ...args: U[]) => boolean;
|
|
25
17
|
interface Validator<T, U = any> {
|
|
26
18
|
validate: ValidatorFunction<T, U>;
|
|
@@ -39,36 +31,13 @@ interface ValidatorTypes {
|
|
|
39
31
|
password: Validator<string, boolean>;
|
|
40
32
|
custom: Validator<any, boolean>;
|
|
41
33
|
}
|
|
42
|
-
type ValidatorParams$1 = {
|
|
43
|
-
[K in keyof ValidatorTypes]?: ValidatorTypes[K] extends Validator<any, infer U> ? U : never;
|
|
44
|
-
};
|
|
45
|
-
type ValidatorErrorMessage$1 = {
|
|
46
|
-
[K in keyof ValidatorTypes]?: string;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
34
|
type ValidatorParams = {
|
|
50
35
|
[K in keyof ValidatorTypes]?: ValidatorTypes[K] extends Validator<any, infer U> ? U : never;
|
|
51
36
|
};
|
|
52
37
|
type ValidatorErrorMessage = {
|
|
53
38
|
[K in keyof ValidatorTypes]?: string;
|
|
54
39
|
};
|
|
55
|
-
|
|
56
|
-
isValid: boolean;
|
|
57
|
-
validationProps: NextUIError;
|
|
58
|
-
};
|
|
59
|
-
type GetValidationFunc<V extends unknown> = (value: V, isTouched: boolean, types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => GetValidationResponse;
|
|
60
|
-
interface UseValidationFunc {
|
|
61
|
-
getValidation: GetValidationFunc<unknown>;
|
|
62
|
-
}
|
|
63
|
-
interface FormChangeState<O extends StateType> {
|
|
64
|
-
state: O;
|
|
65
|
-
validations?: {
|
|
66
|
-
[key in keyof O]?: ValidatorParams;
|
|
67
|
-
};
|
|
68
|
-
errorMessages?: {
|
|
69
|
-
[key in keyof O]?: ValidatorErrorMessage;
|
|
70
|
-
};
|
|
71
|
-
}
|
|
40
|
+
|
|
72
41
|
interface FormOptions<O extends StateType> {
|
|
73
42
|
validations?: {
|
|
74
43
|
[key in keyof O]?: ValidatorParams;
|
|
@@ -91,8 +60,6 @@ type UXProps<O extends StateType> = Record<keyof O, {
|
|
|
91
60
|
isInvalid: boolean;
|
|
92
61
|
errorMessage: string;
|
|
93
62
|
}>;
|
|
94
|
-
type RegisterHandleFunc<O extends StateType> = (id: keyof O) => ComponentInputProps<O>;
|
|
95
|
-
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O], isTouched?: boolean) => any;
|
|
96
63
|
interface InputRegisterProps<O extends StateType, K extends keyof O, V extends unknown = string> extends ComponentInputProps<O> {
|
|
97
64
|
onValueChange: (value: O[K]) => void;
|
|
98
65
|
value: V;
|
|
@@ -113,20 +80,6 @@ interface RegisterFunc<O extends StateType> {
|
|
|
113
80
|
select: (id: keyof O) => SelectRegisterProps<O>;
|
|
114
81
|
autocomplete: (id: keyof O) => AutocompleteRegisterProps<O>;
|
|
115
82
|
}
|
|
116
|
-
type PreservedKeys<O extends StateType> = keyof O;
|
|
117
|
-
interface UseFormChangeResponse<O extends StateType> {
|
|
118
|
-
onBlur: BlurFunc<O>;
|
|
119
|
-
onValueChange: ValueChangeFunc<O, keyof O>;
|
|
120
|
-
onSelectionChange: ValueChangeFunc<O, keyof O>;
|
|
121
|
-
state: O;
|
|
122
|
-
setState: React.Dispatch<React.SetStateAction<O>>;
|
|
123
|
-
register: RegisterFunc<O>;
|
|
124
|
-
hasInvalidValues: () => boolean;
|
|
125
|
-
touched: TouchedType<O>;
|
|
126
|
-
resetForm: (presevedKeys?: PreservedKeys<O>[]) => void;
|
|
127
|
-
errors: React.RefObject<TouchedType<O>>;
|
|
128
|
-
realErrors: React.RefObject<TouchedType<O>>;
|
|
129
|
-
}
|
|
130
83
|
interface UseFormResponse<O extends StateType> {
|
|
131
84
|
onBlur: BlurFunc<O>;
|
|
132
85
|
onValueChange: ValueChangeFunc<O, keyof O>;
|
|
@@ -137,12 +90,9 @@ interface UseFormResponse<O extends StateType> {
|
|
|
137
90
|
errors: ErrorsType<O>;
|
|
138
91
|
register: RegisterFunc<O>;
|
|
139
92
|
hasInvalidValues: () => boolean;
|
|
140
|
-
resetForm: (
|
|
93
|
+
resetForm: (preservedKeys?: (keyof O)[]) => void;
|
|
141
94
|
}
|
|
142
|
-
type ValidateFunc<O extends StateType> = (value: O[keyof O], types?: ValidatorParams, errorMessages?: ValidatorErrorMessage) => NextUIError;
|
|
143
|
-
|
|
144
|
-
declare function useFormChange<O extends StateType>({ state: initialState, validations, errorMessages, }: FormChangeState<O>): UseFormChangeResponse<O>;
|
|
145
95
|
|
|
146
96
|
declare function useForm<O extends StateType>(initialState: O, { validations, errorMessages }?: FormOptions<O>): UseFormResponse<O>;
|
|
147
97
|
|
|
148
|
-
export { type BlurFunc, type
|
|
98
|
+
export { type BlurFunc, type ErrorsType, type FormOptions, type NestedChangeProps, NextUIError, type RegisterFunc, type StateType, type TouchedType, type UXProps, type UseFormResponse, type Validator, type ValidatorErrorMessage, type ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm };
|
package/dist/index.js
CHANGED
|
@@ -20,14 +20,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
var index_exports = {};
|
|
21
21
|
__export(index_exports, {
|
|
22
22
|
NextUIError: () => NextUIError,
|
|
23
|
-
useForm: () => useForm
|
|
24
|
-
useFormChange: () => useFormChange
|
|
23
|
+
useForm: () => useForm
|
|
25
24
|
});
|
|
26
25
|
module.exports = __toCommonJS(index_exports);
|
|
27
26
|
|
|
28
|
-
// src/hooks/useFormChange.tsx
|
|
29
|
-
var import_react = require("react");
|
|
30
|
-
|
|
31
27
|
// src/utils/types.ts
|
|
32
28
|
var NextUIError = class {
|
|
33
29
|
isInvalid;
|
|
@@ -38,6 +34,9 @@ var NextUIError = class {
|
|
|
38
34
|
}
|
|
39
35
|
};
|
|
40
36
|
|
|
37
|
+
// src/hooks/useForm.tsx
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
|
|
41
40
|
// src/utils/utils.ts
|
|
42
41
|
function handleNestedChange({
|
|
43
42
|
state,
|
|
@@ -60,7 +59,6 @@ var allToValue = (obj, value) => Object.keys(obj).reduce((acc, key) => {
|
|
|
60
59
|
acc[key] = value;
|
|
61
60
|
return acc;
|
|
62
61
|
}, {});
|
|
63
|
-
var nxError = (bool, msg) => new NextUIError(bool, msg);
|
|
64
62
|
var regex = {
|
|
65
63
|
email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
66
64
|
password: /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}[\]|:;"'<>,.?/_₹]).{8,24}$/
|
|
@@ -150,147 +148,6 @@ function useComponentLanguage() {
|
|
|
150
148
|
};
|
|
151
149
|
}
|
|
152
150
|
|
|
153
|
-
// src/hooks/useValidation.tsx
|
|
154
|
-
function useValidation() {
|
|
155
|
-
const { lang } = useComponentLanguage();
|
|
156
|
-
const getValidation = (value, isTouched, types, errorMessages) => {
|
|
157
|
-
if (!types) return { isValid: true, validationProps: nxError() };
|
|
158
|
-
const items = Object.entries(types), requiredExist = types?.required !== void 0, isRequired = requiredExist ? types.required : false;
|
|
159
|
-
if (value === "" && !isRequired || !isTouched)
|
|
160
|
-
return { isValid: true, validationProps: nxError() };
|
|
161
|
-
const validations = items.map(([name, opts]) => {
|
|
162
|
-
const { validate, msg: msg2 } = errors[name];
|
|
163
|
-
return {
|
|
164
|
-
isValid: validate(value, opts),
|
|
165
|
-
msg: errorMessages?.[name] || lang[msg2]
|
|
166
|
-
};
|
|
167
|
-
}), { isValid, msg } = validations.find(({ isValid: isValid2 }) => !isValid2) || {
|
|
168
|
-
isValid: true,
|
|
169
|
-
msg: ""
|
|
170
|
-
};
|
|
171
|
-
return {
|
|
172
|
-
isValid,
|
|
173
|
-
validationProps: nxError(!isValid, msg)
|
|
174
|
-
};
|
|
175
|
-
};
|
|
176
|
-
return { getValidation };
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// src/hooks/useFormChange.tsx
|
|
180
|
-
function useFormChange({
|
|
181
|
-
state: initialState,
|
|
182
|
-
validations,
|
|
183
|
-
errorMessages
|
|
184
|
-
}) {
|
|
185
|
-
const [state, setState] = (0, import_react.useState)(initialState), falseState = allToValue(state, false), [touched, setTouched] = (0, import_react.useState)(falseState), errors2 = (0, import_react.useRef)({ ...falseState }), realErrors = (0, import_react.useRef)({ ...falseState }), { getValidation } = useValidation();
|
|
186
|
-
const onBlur = (id) => setTouched(
|
|
187
|
-
handleNestedChange({ state: touched, id, value: true })
|
|
188
|
-
), onValueChange = (id, value) => setState(handleNestedChange({ state, id, value })), onSelectionChange = (id, value) => setState(
|
|
189
|
-
handleNestedChange({
|
|
190
|
-
state,
|
|
191
|
-
id,
|
|
192
|
-
value: typeof value === "string" || value === null ? value : Array.from(value)
|
|
193
|
-
})
|
|
194
|
-
);
|
|
195
|
-
const registerHandle = (0, import_react.useCallback)(
|
|
196
|
-
(id) => {
|
|
197
|
-
const [value, isTouched] = [state[id], touched[id]], requirements = validations?.[id], props = {
|
|
198
|
-
id,
|
|
199
|
-
onBlur: () => onBlur(id),
|
|
200
|
-
isInvalid: false,
|
|
201
|
-
errorMessage: ""
|
|
202
|
-
};
|
|
203
|
-
const [ui] = [
|
|
204
|
-
{
|
|
205
|
-
ref: errors2,
|
|
206
|
-
touched: isTouched
|
|
207
|
-
},
|
|
208
|
-
{
|
|
209
|
-
ref: realErrors,
|
|
210
|
-
touched: true
|
|
211
|
-
}
|
|
212
|
-
].map((item) => {
|
|
213
|
-
const req = getValidation(
|
|
214
|
-
value,
|
|
215
|
-
item.touched,
|
|
216
|
-
requirements,
|
|
217
|
-
errorMessages?.[id]
|
|
218
|
-
);
|
|
219
|
-
item.ref.current = handleNestedChange({
|
|
220
|
-
state: item.ref.current,
|
|
221
|
-
id,
|
|
222
|
-
value: !req.isValid
|
|
223
|
-
});
|
|
224
|
-
return req;
|
|
225
|
-
});
|
|
226
|
-
if (requirements === void 0) return props;
|
|
227
|
-
return {
|
|
228
|
-
...props,
|
|
229
|
-
isInvalid: !ui.isValid,
|
|
230
|
-
errorMessage: ui.validationProps.errorMessage
|
|
231
|
-
};
|
|
232
|
-
},
|
|
233
|
-
[state, touched, getValidation, validations]
|
|
234
|
-
);
|
|
235
|
-
return {
|
|
236
|
-
onBlur,
|
|
237
|
-
onValueChange,
|
|
238
|
-
onSelectionChange,
|
|
239
|
-
state,
|
|
240
|
-
setState,
|
|
241
|
-
register: (0, import_react.useMemo)(
|
|
242
|
-
() => ({
|
|
243
|
-
input: (id) => ({
|
|
244
|
-
...registerHandle(id),
|
|
245
|
-
onValueChange: (v) => onValueChange(id, v),
|
|
246
|
-
value: state[id]
|
|
247
|
-
}),
|
|
248
|
-
select: (id) => {
|
|
249
|
-
const isString = typeof state[id] === "string" || state[id] === null;
|
|
250
|
-
return {
|
|
251
|
-
...registerHandle(id),
|
|
252
|
-
onSelectionChange: (v) => onSelectionChange(
|
|
253
|
-
id,
|
|
254
|
-
!isString ? v : Array.from(v)[0] || null
|
|
255
|
-
),
|
|
256
|
-
selectedKeys: state[id] === null ? [] : isString ? [state[id]] : state[id]
|
|
257
|
-
};
|
|
258
|
-
},
|
|
259
|
-
autocomplete: (id) => ({
|
|
260
|
-
...registerHandle(id),
|
|
261
|
-
onSelectionChange: (v) => onSelectionChange(id, v),
|
|
262
|
-
selectedKey: state[id]
|
|
263
|
-
})
|
|
264
|
-
}),
|
|
265
|
-
[registerHandle]
|
|
266
|
-
),
|
|
267
|
-
hasInvalidValues: () => {
|
|
268
|
-
setTouched(allToValue(touched, true));
|
|
269
|
-
return JSON.stringify(realErrors.current).includes(":true");
|
|
270
|
-
},
|
|
271
|
-
touched,
|
|
272
|
-
resetForm: (preservedKeys) => {
|
|
273
|
-
const val = allToValue(initialState, false);
|
|
274
|
-
setTouched(val);
|
|
275
|
-
errors2.current = val;
|
|
276
|
-
setState(
|
|
277
|
-
preservedKeys === void 0 ? initialState : preservedKeys.reduce(
|
|
278
|
-
(acc, key) => ({
|
|
279
|
-
...acc,
|
|
280
|
-
[key]: state[key]
|
|
281
|
-
}),
|
|
282
|
-
initialState
|
|
283
|
-
)
|
|
284
|
-
);
|
|
285
|
-
},
|
|
286
|
-
errors: errors2,
|
|
287
|
-
realErrors
|
|
288
|
-
};
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
// src/hooks/useForm.tsx
|
|
292
|
-
var import_react2 = require("react");
|
|
293
|
-
|
|
294
151
|
// src/hooks/useValidate.tsx
|
|
295
152
|
var validProps = {
|
|
296
153
|
isInvalid: false,
|
|
@@ -327,7 +184,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
327
184
|
errorMessage: ""
|
|
328
185
|
})
|
|
329
186
|
};
|
|
330
|
-
const [state, setState] = (0,
|
|
187
|
+
const [state, setState] = (0, import_react.useState)(initialState), [touched, setTouched] = (0, import_react.useState)(initial.touched), [errors2, setErrors] = (0, import_react.useState)(initial.errors), { performValidations } = useValidate();
|
|
331
188
|
const validateInput = (id, value) => setErrors(
|
|
332
189
|
(prev) => handleNestedChange({
|
|
333
190
|
state: prev,
|
|
@@ -339,7 +196,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
339
196
|
)
|
|
340
197
|
})
|
|
341
198
|
);
|
|
342
|
-
const getUXProps = (0,
|
|
199
|
+
const getUXProps = (0, import_react.useCallback)(
|
|
343
200
|
(id) => {
|
|
344
201
|
const inputError = errors2[id], isTouched = touched[id];
|
|
345
202
|
return {
|
|
@@ -349,7 +206,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
349
206
|
},
|
|
350
207
|
[errors2, touched]
|
|
351
208
|
);
|
|
352
|
-
const onBlur = (id) => setTouched(
|
|
209
|
+
const onBlur = (id) => !touched[id] && setTouched(
|
|
353
210
|
(prev) => handleNestedChange({
|
|
354
211
|
state: prev,
|
|
355
212
|
id,
|
|
@@ -408,7 +265,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
408
265
|
},
|
|
409
266
|
hasInvalidValues: () => {
|
|
410
267
|
setTouched((prev) => allToValue(prev, true));
|
|
411
|
-
return JSON.stringify(errors2).includes("
|
|
268
|
+
return JSON.stringify(errors2).includes(":true");
|
|
412
269
|
},
|
|
413
270
|
resetForm: (preservedKeys) => {
|
|
414
271
|
setTouched(initial.touched);
|
|
@@ -428,6 +285,5 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
428
285
|
// Annotate the CommonJS export names for ESM import in node:
|
|
429
286
|
0 && (module.exports = {
|
|
430
287
|
NextUIError,
|
|
431
|
-
useForm
|
|
432
|
-
useFormChange
|
|
288
|
+
useForm
|
|
433
289
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -5,9 +5,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
5
5
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
6
6
|
});
|
|
7
7
|
|
|
8
|
-
// src/hooks/useFormChange.tsx
|
|
9
|
-
import { useState, useRef, useCallback, useMemo } from "react";
|
|
10
|
-
|
|
11
8
|
// src/utils/types.ts
|
|
12
9
|
var NextUIError = class {
|
|
13
10
|
isInvalid;
|
|
@@ -18,6 +15,9 @@ var NextUIError = class {
|
|
|
18
15
|
}
|
|
19
16
|
};
|
|
20
17
|
|
|
18
|
+
// src/hooks/useForm.tsx
|
|
19
|
+
import { useState, useCallback } from "react";
|
|
20
|
+
|
|
21
21
|
// src/utils/utils.ts
|
|
22
22
|
function handleNestedChange({
|
|
23
23
|
state,
|
|
@@ -40,7 +40,6 @@ var allToValue = (obj, value) => Object.keys(obj).reduce((acc, key) => {
|
|
|
40
40
|
acc[key] = value;
|
|
41
41
|
return acc;
|
|
42
42
|
}, {});
|
|
43
|
-
var nxError = (bool, msg) => new NextUIError(bool, msg);
|
|
44
43
|
var regex = {
|
|
45
44
|
email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
46
45
|
password: /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}[\]|:;"'<>,.?/_₹]).{8,24}$/
|
|
@@ -130,147 +129,6 @@ function useComponentLanguage() {
|
|
|
130
129
|
};
|
|
131
130
|
}
|
|
132
131
|
|
|
133
|
-
// src/hooks/useValidation.tsx
|
|
134
|
-
function useValidation() {
|
|
135
|
-
const { lang } = useComponentLanguage();
|
|
136
|
-
const getValidation = (value, isTouched, types, errorMessages) => {
|
|
137
|
-
if (!types) return { isValid: true, validationProps: nxError() };
|
|
138
|
-
const items = Object.entries(types), requiredExist = types?.required !== void 0, isRequired = requiredExist ? types.required : false;
|
|
139
|
-
if (value === "" && !isRequired || !isTouched)
|
|
140
|
-
return { isValid: true, validationProps: nxError() };
|
|
141
|
-
const validations = items.map(([name, opts]) => {
|
|
142
|
-
const { validate, msg: msg2 } = errors[name];
|
|
143
|
-
return {
|
|
144
|
-
isValid: validate(value, opts),
|
|
145
|
-
msg: errorMessages?.[name] || lang[msg2]
|
|
146
|
-
};
|
|
147
|
-
}), { isValid, msg } = validations.find(({ isValid: isValid2 }) => !isValid2) || {
|
|
148
|
-
isValid: true,
|
|
149
|
-
msg: ""
|
|
150
|
-
};
|
|
151
|
-
return {
|
|
152
|
-
isValid,
|
|
153
|
-
validationProps: nxError(!isValid, msg)
|
|
154
|
-
};
|
|
155
|
-
};
|
|
156
|
-
return { getValidation };
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
// src/hooks/useFormChange.tsx
|
|
160
|
-
function useFormChange({
|
|
161
|
-
state: initialState,
|
|
162
|
-
validations,
|
|
163
|
-
errorMessages
|
|
164
|
-
}) {
|
|
165
|
-
const [state, setState] = useState(initialState), falseState = allToValue(state, false), [touched, setTouched] = useState(falseState), errors2 = useRef({ ...falseState }), realErrors = useRef({ ...falseState }), { getValidation } = useValidation();
|
|
166
|
-
const onBlur = (id) => setTouched(
|
|
167
|
-
handleNestedChange({ state: touched, id, value: true })
|
|
168
|
-
), onValueChange = (id, value) => setState(handleNestedChange({ state, id, value })), onSelectionChange = (id, value) => setState(
|
|
169
|
-
handleNestedChange({
|
|
170
|
-
state,
|
|
171
|
-
id,
|
|
172
|
-
value: typeof value === "string" || value === null ? value : Array.from(value)
|
|
173
|
-
})
|
|
174
|
-
);
|
|
175
|
-
const registerHandle = useCallback(
|
|
176
|
-
(id) => {
|
|
177
|
-
const [value, isTouched] = [state[id], touched[id]], requirements = validations?.[id], props = {
|
|
178
|
-
id,
|
|
179
|
-
onBlur: () => onBlur(id),
|
|
180
|
-
isInvalid: false,
|
|
181
|
-
errorMessage: ""
|
|
182
|
-
};
|
|
183
|
-
const [ui] = [
|
|
184
|
-
{
|
|
185
|
-
ref: errors2,
|
|
186
|
-
touched: isTouched
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
ref: realErrors,
|
|
190
|
-
touched: true
|
|
191
|
-
}
|
|
192
|
-
].map((item) => {
|
|
193
|
-
const req = getValidation(
|
|
194
|
-
value,
|
|
195
|
-
item.touched,
|
|
196
|
-
requirements,
|
|
197
|
-
errorMessages?.[id]
|
|
198
|
-
);
|
|
199
|
-
item.ref.current = handleNestedChange({
|
|
200
|
-
state: item.ref.current,
|
|
201
|
-
id,
|
|
202
|
-
value: !req.isValid
|
|
203
|
-
});
|
|
204
|
-
return req;
|
|
205
|
-
});
|
|
206
|
-
if (requirements === void 0) return props;
|
|
207
|
-
return {
|
|
208
|
-
...props,
|
|
209
|
-
isInvalid: !ui.isValid,
|
|
210
|
-
errorMessage: ui.validationProps.errorMessage
|
|
211
|
-
};
|
|
212
|
-
},
|
|
213
|
-
[state, touched, getValidation, validations]
|
|
214
|
-
);
|
|
215
|
-
return {
|
|
216
|
-
onBlur,
|
|
217
|
-
onValueChange,
|
|
218
|
-
onSelectionChange,
|
|
219
|
-
state,
|
|
220
|
-
setState,
|
|
221
|
-
register: useMemo(
|
|
222
|
-
() => ({
|
|
223
|
-
input: (id) => ({
|
|
224
|
-
...registerHandle(id),
|
|
225
|
-
onValueChange: (v) => onValueChange(id, v),
|
|
226
|
-
value: state[id]
|
|
227
|
-
}),
|
|
228
|
-
select: (id) => {
|
|
229
|
-
const isString = typeof state[id] === "string" || state[id] === null;
|
|
230
|
-
return {
|
|
231
|
-
...registerHandle(id),
|
|
232
|
-
onSelectionChange: (v) => onSelectionChange(
|
|
233
|
-
id,
|
|
234
|
-
!isString ? v : Array.from(v)[0] || null
|
|
235
|
-
),
|
|
236
|
-
selectedKeys: state[id] === null ? [] : isString ? [state[id]] : state[id]
|
|
237
|
-
};
|
|
238
|
-
},
|
|
239
|
-
autocomplete: (id) => ({
|
|
240
|
-
...registerHandle(id),
|
|
241
|
-
onSelectionChange: (v) => onSelectionChange(id, v),
|
|
242
|
-
selectedKey: state[id]
|
|
243
|
-
})
|
|
244
|
-
}),
|
|
245
|
-
[registerHandle]
|
|
246
|
-
),
|
|
247
|
-
hasInvalidValues: () => {
|
|
248
|
-
setTouched(allToValue(touched, true));
|
|
249
|
-
return JSON.stringify(realErrors.current).includes(":true");
|
|
250
|
-
},
|
|
251
|
-
touched,
|
|
252
|
-
resetForm: (preservedKeys) => {
|
|
253
|
-
const val = allToValue(initialState, false);
|
|
254
|
-
setTouched(val);
|
|
255
|
-
errors2.current = val;
|
|
256
|
-
setState(
|
|
257
|
-
preservedKeys === void 0 ? initialState : preservedKeys.reduce(
|
|
258
|
-
(acc, key) => ({
|
|
259
|
-
...acc,
|
|
260
|
-
[key]: state[key]
|
|
261
|
-
}),
|
|
262
|
-
initialState
|
|
263
|
-
)
|
|
264
|
-
);
|
|
265
|
-
},
|
|
266
|
-
errors: errors2,
|
|
267
|
-
realErrors
|
|
268
|
-
};
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
// src/hooks/useForm.tsx
|
|
272
|
-
import { useState as useState2, useCallback as useCallback2 } from "react";
|
|
273
|
-
|
|
274
132
|
// src/hooks/useValidate.tsx
|
|
275
133
|
var validProps = {
|
|
276
134
|
isInvalid: false,
|
|
@@ -307,7 +165,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
307
165
|
errorMessage: ""
|
|
308
166
|
})
|
|
309
167
|
};
|
|
310
|
-
const [state, setState] =
|
|
168
|
+
const [state, setState] = useState(initialState), [touched, setTouched] = useState(initial.touched), [errors2, setErrors] = useState(initial.errors), { performValidations } = useValidate();
|
|
311
169
|
const validateInput = (id, value) => setErrors(
|
|
312
170
|
(prev) => handleNestedChange({
|
|
313
171
|
state: prev,
|
|
@@ -319,7 +177,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
319
177
|
)
|
|
320
178
|
})
|
|
321
179
|
);
|
|
322
|
-
const getUXProps =
|
|
180
|
+
const getUXProps = useCallback(
|
|
323
181
|
(id) => {
|
|
324
182
|
const inputError = errors2[id], isTouched = touched[id];
|
|
325
183
|
return {
|
|
@@ -329,7 +187,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
329
187
|
},
|
|
330
188
|
[errors2, touched]
|
|
331
189
|
);
|
|
332
|
-
const onBlur = (id) => setTouched(
|
|
190
|
+
const onBlur = (id) => !touched[id] && setTouched(
|
|
333
191
|
(prev) => handleNestedChange({
|
|
334
192
|
state: prev,
|
|
335
193
|
id,
|
|
@@ -388,7 +246,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
388
246
|
},
|
|
389
247
|
hasInvalidValues: () => {
|
|
390
248
|
setTouched((prev) => allToValue(prev, true));
|
|
391
|
-
return JSON.stringify(errors2).includes("
|
|
249
|
+
return JSON.stringify(errors2).includes(":true");
|
|
392
250
|
},
|
|
393
251
|
resetForm: (preservedKeys) => {
|
|
394
252
|
setTouched(initial.touched);
|
|
@@ -407,6 +265,5 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
407
265
|
}
|
|
408
266
|
export {
|
|
409
267
|
NextUIError,
|
|
410
|
-
useForm
|
|
411
|
-
useFormChange
|
|
268
|
+
useForm
|
|
412
269
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juantroconisf/lib",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "4.0.0",
|
|
4
|
+
"description": "A form validation library for HeroUI.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"homepage": "https://github.com/juandiegotroconis/lib#readme",
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@heroui/react": "^2.7.5",
|
|
21
|
+
"@types/node": "^24.3.0",
|
|
21
22
|
"@types/react": "^19.0.12",
|
|
22
23
|
"tsup": "^8.4.0",
|
|
23
24
|
"typescript": "^5.8.2"
|