@juantroconisf/lib 3.5.6 → 3.5.8
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 +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +8 -6
- package/dist/index.mjs +9 -7
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -91,7 +91,7 @@ type UXProps<O extends StateType> = Record<keyof O, {
|
|
|
91
91
|
errorMessage: string;
|
|
92
92
|
}>;
|
|
93
93
|
type RegisterHandleFunc<O extends StateType> = (id: keyof O) => ComponentInputProps<O>;
|
|
94
|
-
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O]) => any;
|
|
94
|
+
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O], isTouched?: boolean) => any;
|
|
95
95
|
interface InputRegisterProps<O extends StateType, K extends keyof O, V extends unknown = string> extends ComponentInputProps<O> {
|
|
96
96
|
onValueChange: (value: O[K]) => void;
|
|
97
97
|
value: V;
|
package/dist/index.d.ts
CHANGED
|
@@ -91,7 +91,7 @@ type UXProps<O extends StateType> = Record<keyof O, {
|
|
|
91
91
|
errorMessage: string;
|
|
92
92
|
}>;
|
|
93
93
|
type RegisterHandleFunc<O extends StateType> = (id: keyof O) => ComponentInputProps<O>;
|
|
94
|
-
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O]) => any;
|
|
94
|
+
type ValidateInputFunc<O extends StateType> = (id: keyof O, value: O[keyof O], isTouched?: boolean) => any;
|
|
95
95
|
interface InputRegisterProps<O extends StateType, K extends keyof O, V extends unknown = string> extends ComponentInputProps<O> {
|
|
96
96
|
onValueChange: (value: O[K]) => void;
|
|
97
97
|
value: V;
|
package/dist/index.js
CHANGED
|
@@ -294,8 +294,8 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
294
294
|
const [state, setState] = (0, import_react2.useState)(initialState), falseState = allToValue(state, false), touched = (0, import_react2.useRef)(falseState), errors2 = (0, import_react2.useRef)({ ...falseState }), realErrors = (0, import_react2.useRef)({ ...falseState }), { getValidation } = useValidation(), ux = (0, import_react2.useRef)(
|
|
295
295
|
allToValue(state, { isInvalid: false, errorMessage: "" })
|
|
296
296
|
);
|
|
297
|
-
const validateInput = (id, value) => {
|
|
298
|
-
const isTouched = touched.current[id], requirements = validations?.[id];
|
|
297
|
+
const validateInput = (id, value, isInputTouched) => {
|
|
298
|
+
const isTouched = isInputTouched === void 0 ? touched.current[id] : isInputTouched, requirements = validations?.[id];
|
|
299
299
|
const [uiErrors] = [
|
|
300
300
|
{
|
|
301
301
|
ref: errors2,
|
|
@@ -325,13 +325,14 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
325
325
|
errorMessage: uiErrors.validationProps.errorMessage
|
|
326
326
|
};
|
|
327
327
|
};
|
|
328
|
+
const getUXProps = (0, import_react2.useCallback)((id) => ux.current[id], [ux.current]);
|
|
328
329
|
const onBlur = (id) => {
|
|
329
330
|
touched.current = handleNestedChange({
|
|
330
331
|
state: touched.current,
|
|
331
332
|
id,
|
|
332
333
|
value: true
|
|
333
334
|
});
|
|
334
|
-
validateInput(id, state[id]);
|
|
335
|
+
validateInput(id, state[id], true);
|
|
335
336
|
}, onValueChange = (id, value) => {
|
|
336
337
|
setState((prev) => handleNestedChange({ state: prev, id, value }));
|
|
337
338
|
validateInput(id, value);
|
|
@@ -354,7 +355,8 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
354
355
|
setState,
|
|
355
356
|
register: {
|
|
356
357
|
input: (id) => ({
|
|
357
|
-
...ux.current[id],
|
|
358
|
+
// ...ux.current[id],
|
|
359
|
+
...getUXProps(id),
|
|
358
360
|
id,
|
|
359
361
|
onBlur: () => onBlur(id),
|
|
360
362
|
onValueChange: (v) => onValueChange(id, v),
|
|
@@ -363,7 +365,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
363
365
|
select: (id) => {
|
|
364
366
|
const isString = typeof state[id] === "string" || state[id] === null;
|
|
365
367
|
return {
|
|
366
|
-
...
|
|
368
|
+
...getUXProps(id),
|
|
367
369
|
id,
|
|
368
370
|
onBlur: () => onBlur(id),
|
|
369
371
|
onSelectionChange: (v) => onSelectionChange(
|
|
@@ -374,7 +376,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
374
376
|
};
|
|
375
377
|
},
|
|
376
378
|
autocomplete: (id) => ({
|
|
377
|
-
...
|
|
379
|
+
...getUXProps(id),
|
|
378
380
|
id,
|
|
379
381
|
onBlur: () => onBlur(id),
|
|
380
382
|
onSelectionChange: (v) => onSelectionChange(id, v),
|
package/dist/index.mjs
CHANGED
|
@@ -269,13 +269,13 @@ function useFormChange({
|
|
|
269
269
|
}
|
|
270
270
|
|
|
271
271
|
// src/hooks/useForm.tsx
|
|
272
|
-
import { useState as useState2, useRef as useRef2 } from "react";
|
|
272
|
+
import { useState as useState2, useRef as useRef2, useCallback as useCallback2 } from "react";
|
|
273
273
|
function useForm(initialState, { validations, errorMessages } = {}) {
|
|
274
274
|
const [state, setState] = useState2(initialState), falseState = allToValue(state, false), touched = useRef2(falseState), errors2 = useRef2({ ...falseState }), realErrors = useRef2({ ...falseState }), { getValidation } = useValidation(), ux = useRef2(
|
|
275
275
|
allToValue(state, { isInvalid: false, errorMessage: "" })
|
|
276
276
|
);
|
|
277
|
-
const validateInput = (id, value) => {
|
|
278
|
-
const isTouched = touched.current[id], requirements = validations?.[id];
|
|
277
|
+
const validateInput = (id, value, isInputTouched) => {
|
|
278
|
+
const isTouched = isInputTouched === void 0 ? touched.current[id] : isInputTouched, requirements = validations?.[id];
|
|
279
279
|
const [uiErrors] = [
|
|
280
280
|
{
|
|
281
281
|
ref: errors2,
|
|
@@ -305,13 +305,14 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
305
305
|
errorMessage: uiErrors.validationProps.errorMessage
|
|
306
306
|
};
|
|
307
307
|
};
|
|
308
|
+
const getUXProps = useCallback2((id) => ux.current[id], [ux.current]);
|
|
308
309
|
const onBlur = (id) => {
|
|
309
310
|
touched.current = handleNestedChange({
|
|
310
311
|
state: touched.current,
|
|
311
312
|
id,
|
|
312
313
|
value: true
|
|
313
314
|
});
|
|
314
|
-
validateInput(id, state[id]);
|
|
315
|
+
validateInput(id, state[id], true);
|
|
315
316
|
}, onValueChange = (id, value) => {
|
|
316
317
|
setState((prev) => handleNestedChange({ state: prev, id, value }));
|
|
317
318
|
validateInput(id, value);
|
|
@@ -334,7 +335,8 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
334
335
|
setState,
|
|
335
336
|
register: {
|
|
336
337
|
input: (id) => ({
|
|
337
|
-
...ux.current[id],
|
|
338
|
+
// ...ux.current[id],
|
|
339
|
+
...getUXProps(id),
|
|
338
340
|
id,
|
|
339
341
|
onBlur: () => onBlur(id),
|
|
340
342
|
onValueChange: (v) => onValueChange(id, v),
|
|
@@ -343,7 +345,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
343
345
|
select: (id) => {
|
|
344
346
|
const isString = typeof state[id] === "string" || state[id] === null;
|
|
345
347
|
return {
|
|
346
|
-
...
|
|
348
|
+
...getUXProps(id),
|
|
347
349
|
id,
|
|
348
350
|
onBlur: () => onBlur(id),
|
|
349
351
|
onSelectionChange: (v) => onSelectionChange(
|
|
@@ -354,7 +356,7 @@ function useForm(initialState, { validations, errorMessages } = {}) {
|
|
|
354
356
|
};
|
|
355
357
|
},
|
|
356
358
|
autocomplete: (id) => ({
|
|
357
|
-
...
|
|
359
|
+
...getUXProps(id),
|
|
358
360
|
id,
|
|
359
361
|
onBlur: () => onBlur(id),
|
|
360
362
|
onSelectionChange: (v) => onSelectionChange(id, v),
|