remix-validated-form 4.6.1 → 4.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/remix-validated-form.cjs.js +4 -4
- package/dist/remix-validated-form.cjs.js.map +1 -1
- package/dist/remix-validated-form.es.js +1889 -234
- package/dist/remix-validated-form.es.js.map +1 -1
- package/dist/remix-validated-form.umd.js +4 -4
- package/dist/remix-validated-form.umd.js.map +1 -1
- package/dist/types/internal/flatten.d.ts +1 -1
- package/package.json +4 -5
- package/src/ValidatedForm.tsx +2 -2
- package/src/internal/flatten.ts +3 -4
- package/src/internal/getInputProps.ts +2 -2
- package/src/internal/hooks.ts +3 -3
- package/src/internal/state/arrayUtil.ts +6 -5
- package/src/internal/state/createFormStore.ts +10 -7
- package/src/internal/util.ts +2 -2
- package/src/validation/createValidator.ts +2 -2
- package/src/validation/validation.test.ts +2 -2
- package/stats.html +0 -4044
@@ -1 +1 @@
|
|
1
|
-
export declare const objectFromPathEntries: (entries: [string, any][]) =>
|
1
|
+
export declare const objectFromPathEntries: (entries: [string, any][]) => {};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "remix-validated-form",
|
3
|
-
"version": "4.6.
|
3
|
+
"version": "4.6.2",
|
4
4
|
"description": "Form component and utils for easy form validation in remix",
|
5
5
|
"browser": "./dist/remix-validated-form.cjs.js",
|
6
6
|
"main": "./dist/remix-validated-form.umd.js",
|
@@ -39,18 +39,17 @@
|
|
39
39
|
"devDependencies": {
|
40
40
|
"@remix-run/react": "^1.6.5",
|
41
41
|
"@testing-library/react": "^13.3.0",
|
42
|
+
"@types/lodash": "^4.14.178",
|
42
43
|
"@types/react": "^18.0.9",
|
43
44
|
"fetch-blob": "^3.1.3",
|
44
45
|
"react": "^18.1.0",
|
45
|
-
"ts-toolbelt": "^9.6.0",
|
46
46
|
"tsconfig": "*",
|
47
|
-
"typescript": "^4.
|
47
|
+
"typescript": "^4.5.3",
|
48
48
|
"vite-config": "*"
|
49
49
|
},
|
50
50
|
"dependencies": {
|
51
51
|
"immer": "^9.0.12",
|
52
|
-
"
|
53
|
-
"setGet": "*",
|
52
|
+
"lodash": "^4.17.21",
|
54
53
|
"tiny-invariant": "^1.2.0",
|
55
54
|
"zustand": "^4.0.0-rc.1"
|
56
55
|
}
|
package/src/ValidatedForm.tsx
CHANGED
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
useFetcher,
|
5
5
|
useSubmit,
|
6
6
|
} from "@remix-run/react";
|
7
|
+
import uniq from "lodash/uniq";
|
7
8
|
import React, {
|
8
9
|
ComponentProps,
|
9
10
|
FormEvent,
|
@@ -14,7 +15,6 @@ import React, {
|
|
14
15
|
useRef,
|
15
16
|
useState,
|
16
17
|
} from "react";
|
17
|
-
import * as R from "remeda";
|
18
18
|
import { useIsSubmitting, useIsValid } from "./hooks";
|
19
19
|
import { FORM_ID_FIELD } from "./internal/constants";
|
20
20
|
import {
|
@@ -108,7 +108,7 @@ const focusFirstInvalidInput = (
|
|
108
108
|
})
|
109
109
|
.filter(nonNull)
|
110
110
|
.filter((name) => name in fieldErrors);
|
111
|
-
const uniqueNamesInOrder =
|
111
|
+
const uniqueNamesInOrder = uniq(namesInOrder);
|
112
112
|
|
113
113
|
for (const fieldName of uniqueNamesInOrder) {
|
114
114
|
if (customFocusHandlers.has(fieldName)) {
|
package/src/internal/flatten.ts
CHANGED
@@ -1,12 +1,11 @@
|
|
1
|
-
import
|
1
|
+
import set from "lodash/set";
|
2
2
|
import { MultiValueMap } from "./MultiValueMap";
|
3
3
|
|
4
4
|
export const objectFromPathEntries = (entries: [string, any][]) => {
|
5
5
|
const map = new MultiValueMap<string, any>();
|
6
6
|
entries.forEach(([key, value]) => map.add(key, value));
|
7
7
|
return [...map.entries()].reduce(
|
8
|
-
(acc, [key, value]) =>
|
9
|
-
|
10
|
-
{} as Record<string, any>
|
8
|
+
(acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value),
|
9
|
+
{}
|
11
10
|
);
|
12
11
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import omitBy from "lodash/omitBy";
|
2
2
|
import { getCheckboxChecked } from "./logic/getCheckboxChecked";
|
3
3
|
import { getRadioChecked } from "./logic/getRadioChecked";
|
4
4
|
|
@@ -89,6 +89,6 @@ export const createGetInputProps = ({
|
|
89
89
|
inputProps.defaultValue = defaultValue;
|
90
90
|
}
|
91
91
|
|
92
|
-
return
|
92
|
+
return omitBy(inputProps, (value) => value === undefined) as T;
|
93
93
|
};
|
94
94
|
};
|
package/src/internal/hooks.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useActionData, useMatches, useTransition } from "@remix-run/react";
|
2
|
+
import lodashGet from "lodash/get";
|
2
3
|
import { useCallback, useContext } from "react";
|
3
|
-
import { getPath } from "setGet";
|
4
4
|
import invariant from "tiny-invariant";
|
5
5
|
import { FieldErrors, ValidationErrorResponseData } from "..";
|
6
6
|
import { formDefaultValuesKey } from "./constants";
|
@@ -145,7 +145,7 @@ export const useCurrentDefaultValueForField = (
|
|
145
145
|
formId: InternalFormId,
|
146
146
|
field: string
|
147
147
|
) =>
|
148
|
-
useFormStore(formId, (state) =>
|
148
|
+
useFormStore(formId, (state) => lodashGet(state.currentDefaultValues, field));
|
149
149
|
|
150
150
|
export const useFieldDefaultValue = (
|
151
151
|
name: string,
|
@@ -154,7 +154,7 @@ export const useFieldDefaultValue = (
|
|
154
154
|
const defaultValues = useDefaultValuesForForm(context);
|
155
155
|
const state = useCurrentDefaultValueForField(context.formId, name);
|
156
156
|
|
157
|
-
return defaultValues.map((val) =>
|
157
|
+
return defaultValues.map((val) => lodashGet(val, name)).hydrateTo(state);
|
158
158
|
};
|
159
159
|
|
160
160
|
export const useInternalIsSubmitting = (formId: InternalFormId) =>
|
@@ -1,4 +1,5 @@
|
|
1
|
-
import
|
1
|
+
import lodashGet from "lodash/get";
|
2
|
+
import lodashSet from "lodash/set";
|
2
3
|
import invariant from "tiny-invariant";
|
3
4
|
|
4
5
|
////
|
@@ -7,10 +8,10 @@ import invariant from "tiny-invariant";
|
|
7
8
|
////
|
8
9
|
|
9
10
|
export const getArray = (values: any, field: string): unknown[] => {
|
10
|
-
const value =
|
11
|
+
const value = lodashGet(values, field);
|
11
12
|
if (value === undefined || value === null) {
|
12
13
|
const newValue: unknown[] = [];
|
13
|
-
|
14
|
+
lodashSet(values, field, newValue);
|
14
15
|
return newValue;
|
15
16
|
}
|
16
17
|
invariant(
|
@@ -93,8 +94,8 @@ export const mutateAsArray = (
|
|
93
94
|
for (const [key, value] of Object.entries(obj)) {
|
94
95
|
if (key.startsWith(field) && key !== field) {
|
95
96
|
beforeKeys.add(key);
|
96
|
-
setPath(arr, key.substring(field.length), value);
|
97
97
|
}
|
98
|
+
lodashSet(arr, key.substring(field.length), value);
|
98
99
|
}
|
99
100
|
|
100
101
|
mutate(arr);
|
@@ -104,7 +105,7 @@ export const mutateAsArray = (
|
|
104
105
|
|
105
106
|
const newKeys = getDeepArrayPaths(arr);
|
106
107
|
for (const key of newKeys) {
|
107
|
-
const val =
|
108
|
+
const val = lodashGet(arr, key);
|
108
109
|
obj[`${field}${key}`] = val;
|
109
110
|
}
|
110
111
|
};
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { WritableDraft } from "immer/dist/internal";
|
2
|
-
import
|
2
|
+
import lodashGet from "lodash/get";
|
3
|
+
import lodashSet from "lodash/set";
|
3
4
|
import invariant from "tiny-invariant";
|
4
5
|
import create, { GetState } from "zustand";
|
5
6
|
import { immer } from "zustand/middleware/immer";
|
@@ -11,6 +12,7 @@ import {
|
|
11
12
|
} from "../../validation/types";
|
12
13
|
import { requestSubmit } from "../logic/requestSubmit";
|
13
14
|
import * as arrayUtil from "./arrayUtil";
|
15
|
+
import { useControlledFieldStore } from "./controlledFieldStore";
|
14
16
|
import { InternalFormId } from "./types";
|
15
17
|
|
16
18
|
export type SyncedFormProps = {
|
@@ -300,25 +302,26 @@ const createFormState = (
|
|
300
302
|
|
301
303
|
// When nested within a field array, we should leave resetting up to the field array
|
302
304
|
if (!isNested) {
|
303
|
-
|
305
|
+
lodashSet(
|
304
306
|
state.controlledFields.values,
|
305
307
|
fieldName,
|
306
|
-
|
308
|
+
lodashGet(state.formProps?.defaultValues, fieldName)
|
307
309
|
);
|
308
|
-
|
310
|
+
lodashSet(
|
309
311
|
state.currentDefaultValues,
|
310
312
|
fieldName,
|
311
|
-
|
313
|
+
lodashGet(state.formProps?.defaultValues, fieldName)
|
312
314
|
);
|
313
315
|
}
|
314
316
|
|
315
317
|
delete state.controlledFields.refCounts[fieldName];
|
316
318
|
});
|
317
319
|
},
|
318
|
-
getValue: (fieldName) =>
|
320
|
+
getValue: (fieldName) =>
|
321
|
+
lodashGet(get().controlledFields.values, fieldName),
|
319
322
|
setValue: (fieldName, value) => {
|
320
323
|
set((state) => {
|
321
|
-
|
324
|
+
lodashSet(state.controlledFields.values, fieldName, value);
|
322
325
|
});
|
323
326
|
get().controlledFields.kickoffValueUpdate(fieldName);
|
324
327
|
},
|
package/src/internal/util.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
+
import isEqual from "lodash/isEqual";
|
1
2
|
import type React from "react";
|
2
3
|
import { useEffect, useLayoutEffect, useRef } from "react";
|
3
|
-
import * as R from "remeda";
|
4
4
|
|
5
5
|
export const omit = (obj: any, ...keys: string[]) => {
|
6
6
|
const result = { ...obj };
|
@@ -29,7 +29,7 @@ export const useIsomorphicLayoutEffect =
|
|
29
29
|
|
30
30
|
export const useDeepEqualsMemo = <T>(item: T): T => {
|
31
31
|
const ref = useRef<T>(item);
|
32
|
-
const areEqual = ref.current === item ||
|
32
|
+
const areEqual = ref.current === item || isEqual(ref.current, item);
|
33
33
|
useEffect(() => {
|
34
34
|
if (!areEqual) {
|
35
35
|
ref.current = item;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import omit from "lodash/omit";
|
2
2
|
import { CreateValidatorArg, GenericObject, Validator } from "..";
|
3
3
|
import { FORM_ID_FIELD } from "../internal/constants";
|
4
4
|
import { objectFromPathEntries } from "../internal/flatten";
|
@@ -12,7 +12,7 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
|
|
12
12
|
};
|
13
13
|
|
14
14
|
const omitInternalFields = (data: GenericObject): GenericObject =>
|
15
|
-
|
15
|
+
omit(data, FORM_ID_FIELD);
|
16
16
|
|
17
17
|
/**
|
18
18
|
* Used to create a validator for a form.
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { anyString, TestFormData } from "@remix-validated-form/test-utils";
|
2
2
|
import { withYup } from "@remix-validated-form/with-yup/src";
|
3
3
|
import { withZod } from "@remix-validated-form/with-zod";
|
4
|
-
import
|
4
|
+
import omit from "lodash/omit";
|
5
5
|
import { Validator } from "remix-validated-form/src";
|
6
6
|
import { objectFromPathEntries } from "remix-validated-form/src/internal/flatten";
|
7
7
|
import { describe, it, expect } from "vitest";
|
@@ -120,7 +120,7 @@ describe("Validation", () => {
|
|
120
120
|
[FORM_ID_FIELD]: "something",
|
121
121
|
};
|
122
122
|
expect(await validator.validate(person)).toEqual({
|
123
|
-
data:
|
123
|
+
data: omit(person, FORM_ID_FIELD),
|
124
124
|
error: undefined,
|
125
125
|
submittedData: person,
|
126
126
|
formId: "something",
|