@juantroconisf/lib 5.0.1 → 5.1.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 +13 -25
- package/dist/index.d.ts +13 -25
- package/dist/index.js +190 -20
- package/dist/index.mjs +190 -20
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -80,8 +80,6 @@ interface FormOptions<O extends StateType> {
|
|
|
80
80
|
* Default is "id".
|
|
81
81
|
*/
|
|
82
82
|
arrayIdentifiers?: Partial<Record<ArrayKeys<O>, string>>;
|
|
83
|
-
/** General configuration for the form behavior. */
|
|
84
|
-
config?: {};
|
|
85
83
|
}
|
|
86
84
|
type TouchedType<O extends StateType> = Record<keyof O, boolean>;
|
|
87
85
|
type ErrorsType<O extends StateType> = Record<keyof O, NextUIError>;
|
|
@@ -116,37 +114,25 @@ interface ItemAutocompleteProps extends ComponentInputProps<any> {
|
|
|
116
114
|
* Interface for the polymorphic 'on' method handlers.
|
|
117
115
|
*/
|
|
118
116
|
interface OnMethods<O extends StateType> {
|
|
119
|
-
/**
|
|
120
|
-
* Registers a standard or nested field for an input component.
|
|
121
|
-
*/
|
|
117
|
+
/** Registers a scalar or nested object field. */
|
|
122
118
|
input<P extends AllPaths<O>>(id: P): ItemInputProps<NestedFieldValue<O, P & string>>;
|
|
123
|
-
/**
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
input<K extends ArrayKeys<O>, F extends FieldPaths<ArrayElement<O[K]>>>(arrayKey: K, itemId: ItemIdType<O, K>, field: F): ItemInputProps<NestedFieldValue<ArrayElement<O[K]>, F & string>>;
|
|
127
|
-
/**
|
|
128
|
-
* Registers a standard or nested field for a select component.
|
|
129
|
-
*/
|
|
119
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
120
|
+
input<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemInputProps<any>;
|
|
121
|
+
/** Registers a scalar or nested object field. */
|
|
130
122
|
select<P extends AllPaths<O>>(id: P): ItemSelectProps;
|
|
131
|
-
/**
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
select<K extends ArrayKeys<O>>(arrayKey: K, itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>): ItemSelectProps;
|
|
135
|
-
/**
|
|
136
|
-
* Registers a standard or nested field for an autocomplete component.
|
|
137
|
-
*/
|
|
123
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
124
|
+
select<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemSelectProps;
|
|
125
|
+
/** Registers a scalar or nested object field. */
|
|
138
126
|
autocomplete<P extends AllPaths<O>>(id: P): ItemAutocompleteProps;
|
|
139
|
-
/**
|
|
140
|
-
|
|
141
|
-
*/
|
|
142
|
-
autocomplete<K extends ArrayKeys<O>>(arrayKey: K, itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>): ItemAutocompleteProps;
|
|
127
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
128
|
+
autocomplete<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemAutocompleteProps;
|
|
143
129
|
}
|
|
144
130
|
type ArrayKeys<O extends StateType> = {
|
|
145
131
|
[K in keyof O]: O[K] extends any[] ? K : never;
|
|
146
132
|
}[keyof O];
|
|
147
133
|
type ArrayElement<T> = T extends (infer E)[] ? E : never;
|
|
148
134
|
/** Resolves the type of the identifier field for an array element (defaults to "id"). */
|
|
149
|
-
type ItemIdType<O extends StateType, K extends
|
|
135
|
+
type ItemIdType<O extends StateType, K extends keyof O> = "id" extends keyof ArrayElement<O[K]> ? ArrayElement<O[K]>["id"] : string | number;
|
|
150
136
|
type NestedFieldValue<T, F extends string> = F extends `${infer First}.${infer Rest}` ? First extends keyof T ? NestedFieldValue<T[First], Rest> : any : F extends keyof T ? T[F] : any;
|
|
151
137
|
type FieldPaths<T> = T extends Record<string, any> ? {
|
|
152
138
|
[K in keyof T & string]: T[K] extends any[] ? K : T[K] extends Record<string, any> ? `${K}.${FieldPaths<T[K]>}` : K;
|
|
@@ -169,6 +155,8 @@ interface HelpersFunc<O extends StateType> {
|
|
|
169
155
|
removeItem: <K extends ArrayKeys<O>>(arrayKey: K, index: number) => void;
|
|
170
156
|
/** Removes an item from an array by its unique identifier. */
|
|
171
157
|
removeById: <K extends ArrayKeys<O>>(arrayKey: K, itemId: string | number) => void;
|
|
158
|
+
/** Replaces an item in an array at the given index. */
|
|
159
|
+
updateItem: <K extends ArrayKeys<O>>(arrayKey: K, index: number, value: ArrayElement<O[K]>) => void;
|
|
172
160
|
/** Moves an item within an array using indices. */
|
|
173
161
|
moveItem: <K extends ArrayKeys<O>>(arrayKey: K, from: number, to: number) => void;
|
|
174
162
|
/** Moves an item within an array using unique identifiers. */
|
|
@@ -199,6 +187,6 @@ interface UseFormResponse<O extends StateType> {
|
|
|
199
187
|
resetTouched: (preservedKeys?: (keyof O)[]) => void;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
|
-
declare function useForm<O extends StateType>(initialState: O, { rules, messages, arrayRules, arrayMessages, arrayIdentifiers,
|
|
190
|
+
declare function useForm<O extends StateType>(initialState: O, { rules, messages, arrayRules, arrayMessages, arrayIdentifiers, }?: FormOptions<O>): UseFormResponse<O>;
|
|
203
191
|
|
|
204
192
|
export { type ArrayMessages, type ArrayRules, type BlurFunc, type ErrorsType, type FormOptions, type HelpersFunc, type NestedChangeProps, NextUIError, type OnMethods, 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
|
@@ -80,8 +80,6 @@ interface FormOptions<O extends StateType> {
|
|
|
80
80
|
* Default is "id".
|
|
81
81
|
*/
|
|
82
82
|
arrayIdentifiers?: Partial<Record<ArrayKeys<O>, string>>;
|
|
83
|
-
/** General configuration for the form behavior. */
|
|
84
|
-
config?: {};
|
|
85
83
|
}
|
|
86
84
|
type TouchedType<O extends StateType> = Record<keyof O, boolean>;
|
|
87
85
|
type ErrorsType<O extends StateType> = Record<keyof O, NextUIError>;
|
|
@@ -116,37 +114,25 @@ interface ItemAutocompleteProps extends ComponentInputProps<any> {
|
|
|
116
114
|
* Interface for the polymorphic 'on' method handlers.
|
|
117
115
|
*/
|
|
118
116
|
interface OnMethods<O extends StateType> {
|
|
119
|
-
/**
|
|
120
|
-
* Registers a standard or nested field for an input component.
|
|
121
|
-
*/
|
|
117
|
+
/** Registers a scalar or nested object field. */
|
|
122
118
|
input<P extends AllPaths<O>>(id: P): ItemInputProps<NestedFieldValue<O, P & string>>;
|
|
123
|
-
/**
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
input<K extends ArrayKeys<O>, F extends FieldPaths<ArrayElement<O[K]>>>(arrayKey: K, itemId: ItemIdType<O, K>, field: F): ItemInputProps<NestedFieldValue<ArrayElement<O[K]>, F & string>>;
|
|
127
|
-
/**
|
|
128
|
-
* Registers a standard or nested field for a select component.
|
|
129
|
-
*/
|
|
119
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
120
|
+
input<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemInputProps<any>;
|
|
121
|
+
/** Registers a scalar or nested object field. */
|
|
130
122
|
select<P extends AllPaths<O>>(id: P): ItemSelectProps;
|
|
131
|
-
/**
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
select<K extends ArrayKeys<O>>(arrayKey: K, itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>): ItemSelectProps;
|
|
135
|
-
/**
|
|
136
|
-
* Registers a standard or nested field for an autocomplete component.
|
|
137
|
-
*/
|
|
123
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
124
|
+
select<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemSelectProps;
|
|
125
|
+
/** Registers a scalar or nested object field. */
|
|
138
126
|
autocomplete<P extends AllPaths<O>>(id: P): ItemAutocompleteProps;
|
|
139
|
-
/**
|
|
140
|
-
|
|
141
|
-
*/
|
|
142
|
-
autocomplete<K extends ArrayKeys<O>>(arrayKey: K, itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>): ItemAutocompleteProps;
|
|
127
|
+
/** Registers an array element — adapts to primitive arrays (by index) or object arrays (by ID + field). */
|
|
128
|
+
autocomplete<K extends ArrayKeys<O>>(arrayKey: K, ...args: O[K] extends Record<string, any>[] ? [itemId: ItemIdType<O, K>, field: FieldPaths<ArrayElement<O[K]>>] | [itemId: ItemIdType<O, K>, field: string, index: number] : [index: number]): ItemAutocompleteProps;
|
|
143
129
|
}
|
|
144
130
|
type ArrayKeys<O extends StateType> = {
|
|
145
131
|
[K in keyof O]: O[K] extends any[] ? K : never;
|
|
146
132
|
}[keyof O];
|
|
147
133
|
type ArrayElement<T> = T extends (infer E)[] ? E : never;
|
|
148
134
|
/** Resolves the type of the identifier field for an array element (defaults to "id"). */
|
|
149
|
-
type ItemIdType<O extends StateType, K extends
|
|
135
|
+
type ItemIdType<O extends StateType, K extends keyof O> = "id" extends keyof ArrayElement<O[K]> ? ArrayElement<O[K]>["id"] : string | number;
|
|
150
136
|
type NestedFieldValue<T, F extends string> = F extends `${infer First}.${infer Rest}` ? First extends keyof T ? NestedFieldValue<T[First], Rest> : any : F extends keyof T ? T[F] : any;
|
|
151
137
|
type FieldPaths<T> = T extends Record<string, any> ? {
|
|
152
138
|
[K in keyof T & string]: T[K] extends any[] ? K : T[K] extends Record<string, any> ? `${K}.${FieldPaths<T[K]>}` : K;
|
|
@@ -169,6 +155,8 @@ interface HelpersFunc<O extends StateType> {
|
|
|
169
155
|
removeItem: <K extends ArrayKeys<O>>(arrayKey: K, index: number) => void;
|
|
170
156
|
/** Removes an item from an array by its unique identifier. */
|
|
171
157
|
removeById: <K extends ArrayKeys<O>>(arrayKey: K, itemId: string | number) => void;
|
|
158
|
+
/** Replaces an item in an array at the given index. */
|
|
159
|
+
updateItem: <K extends ArrayKeys<O>>(arrayKey: K, index: number, value: ArrayElement<O[K]>) => void;
|
|
172
160
|
/** Moves an item within an array using indices. */
|
|
173
161
|
moveItem: <K extends ArrayKeys<O>>(arrayKey: K, from: number, to: number) => void;
|
|
174
162
|
/** Moves an item within an array using unique identifiers. */
|
|
@@ -199,6 +187,6 @@ interface UseFormResponse<O extends StateType> {
|
|
|
199
187
|
resetTouched: (preservedKeys?: (keyof O)[]) => void;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
|
-
declare function useForm<O extends StateType>(initialState: O, { rules, messages, arrayRules, arrayMessages, arrayIdentifiers,
|
|
190
|
+
declare function useForm<O extends StateType>(initialState: O, { rules, messages, arrayRules, arrayMessages, arrayIdentifiers, }?: FormOptions<O>): UseFormResponse<O>;
|
|
203
191
|
|
|
204
192
|
export { type ArrayMessages, type ArrayRules, type BlurFunc, type ErrorsType, type FormOptions, type HelpersFunc, type NestedChangeProps, NextUIError, type OnMethods, type StateType, type TouchedType, type UXProps, type UseFormResponse, type Validator, type ValidatorErrorMessage, type ValidatorParams, type ValidatorTypes, type ValueChangeFunc, useForm };
|
package/dist/index.js
CHANGED
|
@@ -231,8 +231,7 @@ function useForm(initialState, {
|
|
|
231
231
|
messages,
|
|
232
232
|
arrayRules,
|
|
233
233
|
arrayMessages,
|
|
234
|
-
arrayIdentifiers
|
|
235
|
-
config
|
|
234
|
+
arrayIdentifiers
|
|
236
235
|
} = {}) {
|
|
237
236
|
const initial = {
|
|
238
237
|
touched: allToValue(initialState, false),
|
|
@@ -261,18 +260,17 @@ function useForm(initialState, {
|
|
|
261
260
|
}
|
|
262
261
|
return map2;
|
|
263
262
|
}, [state, arrayIdentifiers]);
|
|
264
|
-
const getIndex = (0, import_react.useCallback)(
|
|
265
|
-
|
|
266
|
-
|
|
263
|
+
const getIndex = (0, import_react.useCallback)(
|
|
264
|
+
(arrayKey, itemId) => {
|
|
265
|
+
return indexMap.get(arrayKey)?.get(itemId);
|
|
266
|
+
},
|
|
267
|
+
[indexMap]
|
|
268
|
+
);
|
|
267
269
|
const validateInput = (id, value) => setErrors(
|
|
268
270
|
(prev) => handleNestedChange({
|
|
269
271
|
state: prev,
|
|
270
272
|
id,
|
|
271
|
-
value: performValidations(
|
|
272
|
-
value,
|
|
273
|
-
rules?.[id],
|
|
274
|
-
messages?.[id]
|
|
275
|
-
)
|
|
273
|
+
value: performValidations(value, rules?.[id], messages?.[id])
|
|
276
274
|
})
|
|
277
275
|
);
|
|
278
276
|
const getUXProps = (0, import_react.useCallback)(
|
|
@@ -311,6 +309,8 @@ function useForm(initialState, {
|
|
|
311
309
|
validateInput(id, fixedValue);
|
|
312
310
|
};
|
|
313
311
|
const getItemCompositeKey = (arrayKey, itemId, field) => `${arrayKey}.${itemId}.${field}`;
|
|
312
|
+
const getPrimitiveCompositeKey = (arrayKey, index) => `${arrayKey}.@${index}`;
|
|
313
|
+
const getNestedPrimitiveCompositeKey = (parentKey, parentId, field, index) => `${parentKey}.${parentId}.${field}.@${index}`;
|
|
314
314
|
const validateItemInput = (arrayKey, itemId, field, value) => {
|
|
315
315
|
const index = getIndex(String(arrayKey), itemId);
|
|
316
316
|
if (index === void 0) return;
|
|
@@ -321,11 +321,7 @@ function useForm(initialState, {
|
|
|
321
321
|
const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
|
|
322
322
|
setItemErrors((prev) => ({
|
|
323
323
|
...prev,
|
|
324
|
-
[compositeKey]: performValidations(
|
|
325
|
-
value,
|
|
326
|
-
fieldRules,
|
|
327
|
-
fieldMessages
|
|
328
|
-
)
|
|
324
|
+
[compositeKey]: performValidations(value, fieldRules, fieldMessages)
|
|
329
325
|
}));
|
|
330
326
|
};
|
|
331
327
|
const getItemUXProps = (0, import_react.useCallback)(
|
|
@@ -380,11 +376,7 @@ function useForm(initialState, {
|
|
|
380
376
|
const topKey = dotPath.split(".")[0];
|
|
381
377
|
setNestedErrors((prev) => ({
|
|
382
378
|
...prev,
|
|
383
|
-
[dotPath]: performValidations(
|
|
384
|
-
value,
|
|
385
|
-
rules?.[topKey],
|
|
386
|
-
messages?.[topKey]
|
|
387
|
-
)
|
|
379
|
+
[dotPath]: performValidations(value, rules?.[topKey], messages?.[topKey])
|
|
388
380
|
}));
|
|
389
381
|
};
|
|
390
382
|
const onNestedBlur = (dotPath) => {
|
|
@@ -427,6 +419,65 @@ function useForm(initialState, {
|
|
|
427
419
|
value: getNestedValue(state, key)
|
|
428
420
|
};
|
|
429
421
|
}
|
|
422
|
+
if (args.length === 2) {
|
|
423
|
+
const [arrayKey2, index2] = args;
|
|
424
|
+
const arr2 = state[arrayKey2];
|
|
425
|
+
const value2 = arr2?.[index2];
|
|
426
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
427
|
+
return {
|
|
428
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
429
|
+
id: compositeKey2,
|
|
430
|
+
onBlur: () => {
|
|
431
|
+
const compositeKey3 = getPrimitiveCompositeKey(
|
|
432
|
+
String(arrayKey2),
|
|
433
|
+
index2
|
|
434
|
+
);
|
|
435
|
+
if (itemTouched[compositeKey3]) return;
|
|
436
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey3]: true }));
|
|
437
|
+
},
|
|
438
|
+
onValueChange: (v) => {
|
|
439
|
+
setState((prev) => {
|
|
440
|
+
const arr3 = [...prev[arrayKey2]];
|
|
441
|
+
arr3[index2] = v;
|
|
442
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
443
|
+
});
|
|
444
|
+
},
|
|
445
|
+
value: value2
|
|
446
|
+
};
|
|
447
|
+
}
|
|
448
|
+
if (args.length === 4) {
|
|
449
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
450
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
451
|
+
const arr2 = state[parentKey];
|
|
452
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
453
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : void 0;
|
|
454
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
455
|
+
String(parentKey),
|
|
456
|
+
parentId,
|
|
457
|
+
field2,
|
|
458
|
+
index2
|
|
459
|
+
);
|
|
460
|
+
return {
|
|
461
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
462
|
+
id: compositeKey2,
|
|
463
|
+
onBlur: () => {
|
|
464
|
+
if (itemTouched[compositeKey2]) return;
|
|
465
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
466
|
+
},
|
|
467
|
+
onValueChange: (v) => {
|
|
468
|
+
if (parentIndex === void 0) return;
|
|
469
|
+
setState((prev) => {
|
|
470
|
+
const parentArr = [...prev[parentKey]];
|
|
471
|
+
const item = { ...parentArr[parentIndex] };
|
|
472
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
473
|
+
nestedArr2[index2] = v;
|
|
474
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
475
|
+
return { ...prev, [parentKey]: parentArr };
|
|
476
|
+
});
|
|
477
|
+
},
|
|
478
|
+
value: value2
|
|
479
|
+
};
|
|
480
|
+
}
|
|
430
481
|
const [arrayKey, itemId, field] = args;
|
|
431
482
|
const index = getIndex(String(arrayKey), itemId);
|
|
432
483
|
const arr = state[arrayKey];
|
|
@@ -468,6 +519,63 @@ function useForm(initialState, {
|
|
|
468
519
|
selectedKeys: value2 === null ? [] : isString2 ? [value2] : value2
|
|
469
520
|
};
|
|
470
521
|
}
|
|
522
|
+
if (args.length === 2) {
|
|
523
|
+
const [arrayKey2, index2] = args;
|
|
524
|
+
const arr2 = state[arrayKey2];
|
|
525
|
+
const value2 = arr2?.[index2];
|
|
526
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
527
|
+
return {
|
|
528
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
529
|
+
id: compositeKey2,
|
|
530
|
+
onBlur: () => {
|
|
531
|
+
if (itemTouched[compositeKey2]) return;
|
|
532
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
533
|
+
},
|
|
534
|
+
onSelectionChange: (v) => {
|
|
535
|
+
const fixedValue = typeof v === "string" || v === null ? v : Array.from(v)[0] || null;
|
|
536
|
+
setState((prev) => {
|
|
537
|
+
const arr3 = [...prev[arrayKey2]];
|
|
538
|
+
arr3[index2] = fixedValue;
|
|
539
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
540
|
+
});
|
|
541
|
+
},
|
|
542
|
+
selectedKeys: value2 === null ? [] : [value2]
|
|
543
|
+
};
|
|
544
|
+
}
|
|
545
|
+
if (args.length === 4) {
|
|
546
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
547
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
548
|
+
const arr2 = state[parentKey];
|
|
549
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
550
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : null;
|
|
551
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
552
|
+
String(parentKey),
|
|
553
|
+
parentId,
|
|
554
|
+
field2,
|
|
555
|
+
index2
|
|
556
|
+
);
|
|
557
|
+
return {
|
|
558
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
559
|
+
id: compositeKey2,
|
|
560
|
+
onBlur: () => {
|
|
561
|
+
if (itemTouched[compositeKey2]) return;
|
|
562
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
563
|
+
},
|
|
564
|
+
onSelectionChange: (v) => {
|
|
565
|
+
if (parentIndex === void 0) return;
|
|
566
|
+
const fixedValue = typeof v === "string" || v === null ? v : Array.from(v)[0] || null;
|
|
567
|
+
setState((prev) => {
|
|
568
|
+
const parentArr = [...prev[parentKey]];
|
|
569
|
+
const item = { ...parentArr[parentIndex] };
|
|
570
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
571
|
+
nestedArr2[index2] = fixedValue;
|
|
572
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
573
|
+
return { ...prev, [parentKey]: parentArr };
|
|
574
|
+
});
|
|
575
|
+
},
|
|
576
|
+
selectedKeys: value2 === null ? [] : [value2]
|
|
577
|
+
};
|
|
578
|
+
}
|
|
471
579
|
const [arrayKey, itemId, field] = args;
|
|
472
580
|
const index = getIndex(String(arrayKey), itemId);
|
|
473
581
|
const arr = state[arrayKey];
|
|
@@ -504,6 +612,61 @@ function useForm(initialState, {
|
|
|
504
612
|
selectedKey: getNestedValue(state, key)
|
|
505
613
|
};
|
|
506
614
|
}
|
|
615
|
+
if (args.length === 2) {
|
|
616
|
+
const [arrayKey2, index2] = args;
|
|
617
|
+
const arr2 = state[arrayKey2];
|
|
618
|
+
const value2 = arr2?.[index2];
|
|
619
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
620
|
+
return {
|
|
621
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
622
|
+
id: compositeKey2,
|
|
623
|
+
onBlur: () => {
|
|
624
|
+
if (itemTouched[compositeKey2]) return;
|
|
625
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
626
|
+
},
|
|
627
|
+
onSelectionChange: (v) => {
|
|
628
|
+
setState((prev) => {
|
|
629
|
+
const arr3 = [...prev[arrayKey2]];
|
|
630
|
+
arr3[index2] = typeof v === "string" || v === null ? v : String(v);
|
|
631
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
632
|
+
});
|
|
633
|
+
},
|
|
634
|
+
selectedKey: value2
|
|
635
|
+
};
|
|
636
|
+
}
|
|
637
|
+
if (args.length === 4) {
|
|
638
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
639
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
640
|
+
const arr2 = state[parentKey];
|
|
641
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
642
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : null;
|
|
643
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
644
|
+
String(parentKey),
|
|
645
|
+
parentId,
|
|
646
|
+
field2,
|
|
647
|
+
index2
|
|
648
|
+
);
|
|
649
|
+
return {
|
|
650
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
651
|
+
id: compositeKey2,
|
|
652
|
+
onBlur: () => {
|
|
653
|
+
if (itemTouched[compositeKey2]) return;
|
|
654
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
655
|
+
},
|
|
656
|
+
onSelectionChange: (v) => {
|
|
657
|
+
if (parentIndex === void 0) return;
|
|
658
|
+
setState((prev) => {
|
|
659
|
+
const parentArr = [...prev[parentKey]];
|
|
660
|
+
const item = { ...parentArr[parentIndex] };
|
|
661
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
662
|
+
nestedArr2[index2] = typeof v === "string" || v === null ? v : String(v);
|
|
663
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
664
|
+
return { ...prev, [parentKey]: parentArr };
|
|
665
|
+
});
|
|
666
|
+
},
|
|
667
|
+
selectedKey: value2
|
|
668
|
+
};
|
|
669
|
+
}
|
|
507
670
|
const [arrayKey, itemId, field] = args;
|
|
508
671
|
const index = getIndex(String(arrayKey), itemId);
|
|
509
672
|
const arr = state[arrayKey];
|
|
@@ -584,6 +747,13 @@ function useForm(initialState, {
|
|
|
584
747
|
return { ...prev, [arrayKey]: arr };
|
|
585
748
|
});
|
|
586
749
|
}
|
|
750
|
+
},
|
|
751
|
+
updateItem: (arrayKey, index, value) => {
|
|
752
|
+
setState((prev) => {
|
|
753
|
+
const arr = [...prev[arrayKey]];
|
|
754
|
+
arr[index] = value;
|
|
755
|
+
return { ...prev, [arrayKey]: arr };
|
|
756
|
+
});
|
|
587
757
|
}
|
|
588
758
|
},
|
|
589
759
|
isDirty: JSON.stringify(state) !== JSON.stringify(initialState),
|
package/dist/index.mjs
CHANGED
|
@@ -212,8 +212,7 @@ function useForm(initialState, {
|
|
|
212
212
|
messages,
|
|
213
213
|
arrayRules,
|
|
214
214
|
arrayMessages,
|
|
215
|
-
arrayIdentifiers
|
|
216
|
-
config
|
|
215
|
+
arrayIdentifiers
|
|
217
216
|
} = {}) {
|
|
218
217
|
const initial = {
|
|
219
218
|
touched: allToValue(initialState, false),
|
|
@@ -242,18 +241,17 @@ function useForm(initialState, {
|
|
|
242
241
|
}
|
|
243
242
|
return map2;
|
|
244
243
|
}, [state, arrayIdentifiers]);
|
|
245
|
-
const getIndex = useCallback(
|
|
246
|
-
|
|
247
|
-
|
|
244
|
+
const getIndex = useCallback(
|
|
245
|
+
(arrayKey, itemId) => {
|
|
246
|
+
return indexMap.get(arrayKey)?.get(itemId);
|
|
247
|
+
},
|
|
248
|
+
[indexMap]
|
|
249
|
+
);
|
|
248
250
|
const validateInput = (id, value) => setErrors(
|
|
249
251
|
(prev) => handleNestedChange({
|
|
250
252
|
state: prev,
|
|
251
253
|
id,
|
|
252
|
-
value: performValidations(
|
|
253
|
-
value,
|
|
254
|
-
rules?.[id],
|
|
255
|
-
messages?.[id]
|
|
256
|
-
)
|
|
254
|
+
value: performValidations(value, rules?.[id], messages?.[id])
|
|
257
255
|
})
|
|
258
256
|
);
|
|
259
257
|
const getUXProps = useCallback(
|
|
@@ -292,6 +290,8 @@ function useForm(initialState, {
|
|
|
292
290
|
validateInput(id, fixedValue);
|
|
293
291
|
};
|
|
294
292
|
const getItemCompositeKey = (arrayKey, itemId, field) => `${arrayKey}.${itemId}.${field}`;
|
|
293
|
+
const getPrimitiveCompositeKey = (arrayKey, index) => `${arrayKey}.@${index}`;
|
|
294
|
+
const getNestedPrimitiveCompositeKey = (parentKey, parentId, field, index) => `${parentKey}.${parentId}.${field}.@${index}`;
|
|
295
295
|
const validateItemInput = (arrayKey, itemId, field, value) => {
|
|
296
296
|
const index = getIndex(String(arrayKey), itemId);
|
|
297
297
|
if (index === void 0) return;
|
|
@@ -302,11 +302,7 @@ function useForm(initialState, {
|
|
|
302
302
|
const compositeKey = getItemCompositeKey(String(arrayKey), itemId, field);
|
|
303
303
|
setItemErrors((prev) => ({
|
|
304
304
|
...prev,
|
|
305
|
-
[compositeKey]: performValidations(
|
|
306
|
-
value,
|
|
307
|
-
fieldRules,
|
|
308
|
-
fieldMessages
|
|
309
|
-
)
|
|
305
|
+
[compositeKey]: performValidations(value, fieldRules, fieldMessages)
|
|
310
306
|
}));
|
|
311
307
|
};
|
|
312
308
|
const getItemUXProps = useCallback(
|
|
@@ -361,11 +357,7 @@ function useForm(initialState, {
|
|
|
361
357
|
const topKey = dotPath.split(".")[0];
|
|
362
358
|
setNestedErrors((prev) => ({
|
|
363
359
|
...prev,
|
|
364
|
-
[dotPath]: performValidations(
|
|
365
|
-
value,
|
|
366
|
-
rules?.[topKey],
|
|
367
|
-
messages?.[topKey]
|
|
368
|
-
)
|
|
360
|
+
[dotPath]: performValidations(value, rules?.[topKey], messages?.[topKey])
|
|
369
361
|
}));
|
|
370
362
|
};
|
|
371
363
|
const onNestedBlur = (dotPath) => {
|
|
@@ -408,6 +400,65 @@ function useForm(initialState, {
|
|
|
408
400
|
value: getNestedValue(state, key)
|
|
409
401
|
};
|
|
410
402
|
}
|
|
403
|
+
if (args.length === 2) {
|
|
404
|
+
const [arrayKey2, index2] = args;
|
|
405
|
+
const arr2 = state[arrayKey2];
|
|
406
|
+
const value2 = arr2?.[index2];
|
|
407
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
408
|
+
return {
|
|
409
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
410
|
+
id: compositeKey2,
|
|
411
|
+
onBlur: () => {
|
|
412
|
+
const compositeKey3 = getPrimitiveCompositeKey(
|
|
413
|
+
String(arrayKey2),
|
|
414
|
+
index2
|
|
415
|
+
);
|
|
416
|
+
if (itemTouched[compositeKey3]) return;
|
|
417
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey3]: true }));
|
|
418
|
+
},
|
|
419
|
+
onValueChange: (v) => {
|
|
420
|
+
setState((prev) => {
|
|
421
|
+
const arr3 = [...prev[arrayKey2]];
|
|
422
|
+
arr3[index2] = v;
|
|
423
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
424
|
+
});
|
|
425
|
+
},
|
|
426
|
+
value: value2
|
|
427
|
+
};
|
|
428
|
+
}
|
|
429
|
+
if (args.length === 4) {
|
|
430
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
431
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
432
|
+
const arr2 = state[parentKey];
|
|
433
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
434
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : void 0;
|
|
435
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
436
|
+
String(parentKey),
|
|
437
|
+
parentId,
|
|
438
|
+
field2,
|
|
439
|
+
index2
|
|
440
|
+
);
|
|
441
|
+
return {
|
|
442
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
443
|
+
id: compositeKey2,
|
|
444
|
+
onBlur: () => {
|
|
445
|
+
if (itemTouched[compositeKey2]) return;
|
|
446
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
447
|
+
},
|
|
448
|
+
onValueChange: (v) => {
|
|
449
|
+
if (parentIndex === void 0) return;
|
|
450
|
+
setState((prev) => {
|
|
451
|
+
const parentArr = [...prev[parentKey]];
|
|
452
|
+
const item = { ...parentArr[parentIndex] };
|
|
453
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
454
|
+
nestedArr2[index2] = v;
|
|
455
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
456
|
+
return { ...prev, [parentKey]: parentArr };
|
|
457
|
+
});
|
|
458
|
+
},
|
|
459
|
+
value: value2
|
|
460
|
+
};
|
|
461
|
+
}
|
|
411
462
|
const [arrayKey, itemId, field] = args;
|
|
412
463
|
const index = getIndex(String(arrayKey), itemId);
|
|
413
464
|
const arr = state[arrayKey];
|
|
@@ -449,6 +500,63 @@ function useForm(initialState, {
|
|
|
449
500
|
selectedKeys: value2 === null ? [] : isString2 ? [value2] : value2
|
|
450
501
|
};
|
|
451
502
|
}
|
|
503
|
+
if (args.length === 2) {
|
|
504
|
+
const [arrayKey2, index2] = args;
|
|
505
|
+
const arr2 = state[arrayKey2];
|
|
506
|
+
const value2 = arr2?.[index2];
|
|
507
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
508
|
+
return {
|
|
509
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
510
|
+
id: compositeKey2,
|
|
511
|
+
onBlur: () => {
|
|
512
|
+
if (itemTouched[compositeKey2]) return;
|
|
513
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
514
|
+
},
|
|
515
|
+
onSelectionChange: (v) => {
|
|
516
|
+
const fixedValue = typeof v === "string" || v === null ? v : Array.from(v)[0] || null;
|
|
517
|
+
setState((prev) => {
|
|
518
|
+
const arr3 = [...prev[arrayKey2]];
|
|
519
|
+
arr3[index2] = fixedValue;
|
|
520
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
521
|
+
});
|
|
522
|
+
},
|
|
523
|
+
selectedKeys: value2 === null ? [] : [value2]
|
|
524
|
+
};
|
|
525
|
+
}
|
|
526
|
+
if (args.length === 4) {
|
|
527
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
528
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
529
|
+
const arr2 = state[parentKey];
|
|
530
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
531
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : null;
|
|
532
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
533
|
+
String(parentKey),
|
|
534
|
+
parentId,
|
|
535
|
+
field2,
|
|
536
|
+
index2
|
|
537
|
+
);
|
|
538
|
+
return {
|
|
539
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
540
|
+
id: compositeKey2,
|
|
541
|
+
onBlur: () => {
|
|
542
|
+
if (itemTouched[compositeKey2]) return;
|
|
543
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
544
|
+
},
|
|
545
|
+
onSelectionChange: (v) => {
|
|
546
|
+
if (parentIndex === void 0) return;
|
|
547
|
+
const fixedValue = typeof v === "string" || v === null ? v : Array.from(v)[0] || null;
|
|
548
|
+
setState((prev) => {
|
|
549
|
+
const parentArr = [...prev[parentKey]];
|
|
550
|
+
const item = { ...parentArr[parentIndex] };
|
|
551
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
552
|
+
nestedArr2[index2] = fixedValue;
|
|
553
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
554
|
+
return { ...prev, [parentKey]: parentArr };
|
|
555
|
+
});
|
|
556
|
+
},
|
|
557
|
+
selectedKeys: value2 === null ? [] : [value2]
|
|
558
|
+
};
|
|
559
|
+
}
|
|
452
560
|
const [arrayKey, itemId, field] = args;
|
|
453
561
|
const index = getIndex(String(arrayKey), itemId);
|
|
454
562
|
const arr = state[arrayKey];
|
|
@@ -485,6 +593,61 @@ function useForm(initialState, {
|
|
|
485
593
|
selectedKey: getNestedValue(state, key)
|
|
486
594
|
};
|
|
487
595
|
}
|
|
596
|
+
if (args.length === 2) {
|
|
597
|
+
const [arrayKey2, index2] = args;
|
|
598
|
+
const arr2 = state[arrayKey2];
|
|
599
|
+
const value2 = arr2?.[index2];
|
|
600
|
+
const compositeKey2 = getPrimitiveCompositeKey(String(arrayKey2), index2);
|
|
601
|
+
return {
|
|
602
|
+
...getItemUXProps(String(arrayKey2), `@${index2}`, ""),
|
|
603
|
+
id: compositeKey2,
|
|
604
|
+
onBlur: () => {
|
|
605
|
+
if (itemTouched[compositeKey2]) return;
|
|
606
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
607
|
+
},
|
|
608
|
+
onSelectionChange: (v) => {
|
|
609
|
+
setState((prev) => {
|
|
610
|
+
const arr3 = [...prev[arrayKey2]];
|
|
611
|
+
arr3[index2] = typeof v === "string" || v === null ? v : String(v);
|
|
612
|
+
return { ...prev, [arrayKey2]: arr3 };
|
|
613
|
+
});
|
|
614
|
+
},
|
|
615
|
+
selectedKey: value2
|
|
616
|
+
};
|
|
617
|
+
}
|
|
618
|
+
if (args.length === 4) {
|
|
619
|
+
const [parentKey, parentId, field2, index2] = args;
|
|
620
|
+
const parentIndex = getIndex(String(parentKey), parentId);
|
|
621
|
+
const arr2 = state[parentKey];
|
|
622
|
+
const nestedArr = parentIndex !== void 0 ? getNestedValue(arr2[parentIndex], field2) : void 0;
|
|
623
|
+
const value2 = Array.isArray(nestedArr) ? nestedArr[index2] : null;
|
|
624
|
+
const compositeKey2 = getNestedPrimitiveCompositeKey(
|
|
625
|
+
String(parentKey),
|
|
626
|
+
parentId,
|
|
627
|
+
field2,
|
|
628
|
+
index2
|
|
629
|
+
);
|
|
630
|
+
return {
|
|
631
|
+
...getItemUXProps(String(parentKey), parentId, `${field2}.@${index2}`),
|
|
632
|
+
id: compositeKey2,
|
|
633
|
+
onBlur: () => {
|
|
634
|
+
if (itemTouched[compositeKey2]) return;
|
|
635
|
+
setItemTouched((prev) => ({ ...prev, [compositeKey2]: true }));
|
|
636
|
+
},
|
|
637
|
+
onSelectionChange: (v) => {
|
|
638
|
+
if (parentIndex === void 0) return;
|
|
639
|
+
setState((prev) => {
|
|
640
|
+
const parentArr = [...prev[parentKey]];
|
|
641
|
+
const item = { ...parentArr[parentIndex] };
|
|
642
|
+
const nestedArr2 = [...getNestedValue(item, field2) || []];
|
|
643
|
+
nestedArr2[index2] = typeof v === "string" || v === null ? v : String(v);
|
|
644
|
+
parentArr[parentIndex] = setNestedValue(item, field2, nestedArr2);
|
|
645
|
+
return { ...prev, [parentKey]: parentArr };
|
|
646
|
+
});
|
|
647
|
+
},
|
|
648
|
+
selectedKey: value2
|
|
649
|
+
};
|
|
650
|
+
}
|
|
488
651
|
const [arrayKey, itemId, field] = args;
|
|
489
652
|
const index = getIndex(String(arrayKey), itemId);
|
|
490
653
|
const arr = state[arrayKey];
|
|
@@ -565,6 +728,13 @@ function useForm(initialState, {
|
|
|
565
728
|
return { ...prev, [arrayKey]: arr };
|
|
566
729
|
});
|
|
567
730
|
}
|
|
731
|
+
},
|
|
732
|
+
updateItem: (arrayKey, index, value) => {
|
|
733
|
+
setState((prev) => {
|
|
734
|
+
const arr = [...prev[arrayKey]];
|
|
735
|
+
arr[index] = value;
|
|
736
|
+
return { ...prev, [arrayKey]: arr };
|
|
737
|
+
});
|
|
568
738
|
}
|
|
569
739
|
},
|
|
570
740
|
isDirty: JSON.stringify(state) !== JSON.stringify(initialState),
|