remix-validated-form 4.6.5 → 4.6.6
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -9
- package/dist/index.cjs.js +1928 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +337 -0
- package/dist/{remix-validated-form.es.js → index.esm.js} +573 -877
- package/dist/index.esm.js.map +1 -0
- package/package.json +12 -10
- package/src/ValidatedForm.tsx +17 -5
- package/src/hooks.ts +1 -1
- package/src/server.ts +1 -1
- package/tsup.config.ts +3 -0
- package/dist/remix-validated-form.cjs.js +0 -27
- package/dist/remix-validated-form.cjs.js.map +0 -1
- package/dist/remix-validated-form.es.js.map +0 -1
- package/dist/remix-validated-form.umd.js +0 -27
- package/dist/remix-validated-form.umd.js.map +0 -1
- package/dist/types/ValidatedForm.d.ts +0 -50
- package/dist/types/hooks.d.ts +0 -67
- package/dist/types/index.d.ts +0 -7
- package/dist/types/internal/MultiValueMap.d.ts +0 -11
- package/dist/types/internal/constants.d.ts +0 -3
- package/dist/types/internal/flatten.d.ts +0 -1
- package/dist/types/internal/formContext.d.ts +0 -12
- package/dist/types/internal/getInputProps.d.ts +0 -29
- package/dist/types/internal/hooks.d.ts +0 -35
- package/dist/types/internal/hydratable.d.ts +0 -14
- package/dist/types/internal/logic/getCheckboxChecked.d.ts +0 -1
- package/dist/types/internal/logic/getRadioChecked.d.ts +0 -1
- package/dist/types/internal/logic/requestSubmit.d.ts +0 -5
- package/dist/types/internal/state/arrayUtil.d.ts +0 -12
- package/dist/types/internal/state/controlledFields.d.ts +0 -7
- package/dist/types/internal/state/createFormStore.d.ts +0 -79
- package/dist/types/internal/state/fieldArray.d.ts +0 -28
- package/dist/types/internal/state/storeHooks.d.ts +0 -3
- package/dist/types/internal/state/types.d.ts +0 -1
- package/dist/types/internal/submissionCallbacks.d.ts +0 -1
- package/dist/types/internal/util.d.ts +0 -5
- package/dist/types/server.d.ts +0 -21
- package/dist/types/unreleased/formStateHooks.d.ts +0 -64
- package/dist/types/userFacingFormContext.d.ts +0 -85
- package/dist/types/validation/createValidator.d.ts +0 -7
- package/dist/types/validation/types.d.ts +0 -58
- package/vite.config.ts +0 -7
@@ -1,29 +0,0 @@
|
|
1
|
-
export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
|
2
|
-
export declare type ValidationBehaviorOptions = {
|
3
|
-
initial: ValidationBehavior;
|
4
|
-
whenTouched: ValidationBehavior;
|
5
|
-
whenSubmitted: ValidationBehavior;
|
6
|
-
};
|
7
|
-
export declare type CreateGetInputPropsOptions = {
|
8
|
-
clearError: () => void;
|
9
|
-
validate: () => void;
|
10
|
-
defaultValue?: any;
|
11
|
-
touched: boolean;
|
12
|
-
setTouched: (touched: boolean) => void;
|
13
|
-
hasBeenSubmitted: boolean;
|
14
|
-
validationBehavior?: Partial<ValidationBehaviorOptions>;
|
15
|
-
name: string;
|
16
|
-
};
|
17
|
-
declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
|
18
|
-
declare type Callbacks = "onChange" | "onBlur";
|
19
|
-
declare type MinimalInputProps = {
|
20
|
-
onChange?: (...args: any[]) => void;
|
21
|
-
onBlur?: (...args: any[]) => void;
|
22
|
-
defaultValue?: any;
|
23
|
-
defaultChecked?: boolean;
|
24
|
-
name?: string;
|
25
|
-
type?: string;
|
26
|
-
};
|
27
|
-
export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
|
28
|
-
export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
|
29
|
-
export {};
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FieldErrors, ValidationErrorResponseData } from "..";
|
2
|
-
import { InternalFormContextValue } from "./formContext";
|
3
|
-
import { Hydratable } from "./hydratable";
|
4
|
-
import { InternalFormId } from "./state/types";
|
5
|
-
export declare const useInternalFormContext: (formId?: string | symbol, hookName?: string) => InternalFormContextValue;
|
6
|
-
export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
|
7
|
-
export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
|
8
|
-
export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
|
9
|
-
export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
|
10
|
-
[fieldName: string]: any;
|
11
|
-
}>;
|
12
|
-
export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
|
13
|
-
export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => readonly [boolean, (touched: boolean) => void];
|
14
|
-
export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
|
15
|
-
export declare const useClearError: (context: InternalFormContextValue) => (field: string) => void;
|
16
|
-
export declare const useCurrentDefaultValueForField: (formId: InternalFormId, field: string) => any;
|
17
|
-
export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
|
18
|
-
export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
|
19
|
-
export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
|
20
|
-
export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
|
21
|
-
export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
|
22
|
-
export declare const useValidate: (formId: InternalFormId) => () => Promise<import("..").ValidationResult<unknown>>;
|
23
|
-
export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
|
24
|
-
export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
|
25
|
-
[fieldName: string]: any;
|
26
|
-
};
|
27
|
-
export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (field: string, touched: boolean) => void;
|
28
|
-
export declare const useTouchedFields: (formId: InternalFormId) => import("..").TouchedFields;
|
29
|
-
export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
|
30
|
-
export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
|
31
|
-
export declare const useResetFormElement: (formId: InternalFormId) => () => void;
|
32
|
-
export declare const useSubmitForm: (formId: InternalFormId) => () => void;
|
33
|
-
export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
|
34
|
-
export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;
|
35
|
-
export declare const useFormValues: (formId: InternalFormId) => () => FormData;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* The purpose of this type is to simplify the logic
|
3
|
-
* around data that needs to come from the server initially,
|
4
|
-
* but from the internal state after hydration.
|
5
|
-
*/
|
6
|
-
export declare type Hydratable<T> = {
|
7
|
-
hydrateTo: (data: T) => T;
|
8
|
-
map: <U>(fn: (data: T) => U) => Hydratable<U>;
|
9
|
-
};
|
10
|
-
export declare const hydratable: {
|
11
|
-
serverData: <T>(data: T) => Hydratable<T>;
|
12
|
-
hydratedData: <T_1>() => Hydratable<T_1>;
|
13
|
-
from: <T_2>(data: T_2, hydrated: boolean) => Hydratable<T_2>;
|
14
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const getRadioChecked: (radioValue: string | undefined, newValue: unknown) => boolean | undefined;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Ponyfill of the HTMLFormElement.requestSubmit() method.
|
3
|
-
* Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
|
4
|
-
*/
|
5
|
-
export declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement) => void;
|
@@ -1,12 +0,0 @@
|
|
1
|
-
export declare const getArray: (values: any, field: string) => unknown[];
|
2
|
-
export declare const swap: (array: unknown[], indexA: number, indexB: number) => void;
|
3
|
-
export declare const move: (array: unknown[], from: number, to: number) => void;
|
4
|
-
export declare const insert: (array: unknown[], index: number, value: unknown) => void;
|
5
|
-
export declare const remove: (array: unknown[], index: number) => void;
|
6
|
-
export declare const replace: (array: unknown[], index: number, value: unknown) => void;
|
7
|
-
/**
|
8
|
-
* The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
|
9
|
-
* We key those objects by full paths to the fields.
|
10
|
-
* When we're doing array mutations, that makes it difficult to update those objects.
|
11
|
-
*/
|
12
|
-
export declare const mutateAsArray: (field: string, obj: Record<string, any>, mutate: (arr: any[]) => void) => void;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { InternalFormContextValue } from "../formContext";
|
2
|
-
import { InternalFormId } from "./types";
|
3
|
-
export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
|
4
|
-
export declare const useRegisterControlledField: (context: InternalFormContextValue, field: string) => void;
|
5
|
-
export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
|
6
|
-
export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
|
7
|
-
export declare const useAwaitValue: (formId: InternalFormId) => (field: string) => Promise<void>;
|
@@ -1,79 +0,0 @@
|
|
1
|
-
import { WritableDraft } from "immer/dist/internal";
|
2
|
-
import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
|
3
|
-
import { InternalFormId } from "./types";
|
4
|
-
export declare type SyncedFormProps = {
|
5
|
-
formId?: string;
|
6
|
-
action?: string;
|
7
|
-
subaction?: string;
|
8
|
-
defaultValues: {
|
9
|
-
[fieldName: string]: any;
|
10
|
-
};
|
11
|
-
registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
|
12
|
-
validator: Validator<unknown>;
|
13
|
-
};
|
14
|
-
export declare type FormStoreState = {
|
15
|
-
forms: {
|
16
|
-
[formId: InternalFormId]: FormState;
|
17
|
-
};
|
18
|
-
form: (formId: InternalFormId) => FormState;
|
19
|
-
registerForm: (formId: InternalFormId) => void;
|
20
|
-
cleanupForm: (formId: InternalFormId) => void;
|
21
|
-
};
|
22
|
-
export declare type FormState = {
|
23
|
-
isHydrated: boolean;
|
24
|
-
isSubmitting: boolean;
|
25
|
-
hasBeenSubmitted: boolean;
|
26
|
-
fieldErrors: FieldErrors;
|
27
|
-
touchedFields: TouchedFields;
|
28
|
-
formProps?: SyncedFormProps;
|
29
|
-
formElement: HTMLFormElement | null;
|
30
|
-
currentDefaultValues: Record<string, any>;
|
31
|
-
isValid: () => boolean;
|
32
|
-
startSubmit: () => void;
|
33
|
-
endSubmit: () => void;
|
34
|
-
setTouched: (field: string, touched: boolean) => void;
|
35
|
-
setFieldError: (field: string, error: string) => void;
|
36
|
-
setFieldErrors: (errors: FieldErrors) => void;
|
37
|
-
clearFieldError: (field: string) => void;
|
38
|
-
reset: () => void;
|
39
|
-
syncFormProps: (props: SyncedFormProps) => void;
|
40
|
-
setFormElement: (formElement: HTMLFormElement | null) => void;
|
41
|
-
validateField: (fieldName: string) => Promise<string | null>;
|
42
|
-
validate: () => Promise<ValidationResult<unknown>>;
|
43
|
-
resetFormElement: () => void;
|
44
|
-
submit: () => void;
|
45
|
-
getValues: () => FormData;
|
46
|
-
controlledFields: {
|
47
|
-
values: {
|
48
|
-
[fieldName: string]: any;
|
49
|
-
};
|
50
|
-
refCounts: {
|
51
|
-
[fieldName: string]: number;
|
52
|
-
};
|
53
|
-
valueUpdatePromises: {
|
54
|
-
[fieldName: string]: Promise<void>;
|
55
|
-
};
|
56
|
-
valueUpdateResolvers: {
|
57
|
-
[fieldName: string]: () => void;
|
58
|
-
};
|
59
|
-
register: (fieldName: string) => void;
|
60
|
-
unregister: (fieldName: string) => void;
|
61
|
-
setValue: (fieldName: string, value: unknown) => void;
|
62
|
-
kickoffValueUpdate: (fieldName: string) => void;
|
63
|
-
getValue: (fieldName: string) => unknown;
|
64
|
-
awaitValueUpdate: (fieldName: string) => Promise<void>;
|
65
|
-
array: {
|
66
|
-
push: (fieldName: string, value: unknown) => void;
|
67
|
-
swap: (fieldName: string, indexA: number, indexB: number) => void;
|
68
|
-
move: (fieldName: string, fromIndex: number, toIndex: number) => void;
|
69
|
-
insert: (fieldName: string, index: number, value: unknown) => void;
|
70
|
-
unshift: (fieldName: string, value: unknown) => void;
|
71
|
-
remove: (fieldName: string, index: number) => void;
|
72
|
-
pop: (fieldName: string) => void;
|
73
|
-
replace: (fieldName: string, index: number, value: unknown) => void;
|
74
|
-
};
|
75
|
-
};
|
76
|
-
};
|
77
|
-
export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
|
78
|
-
setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;
|
79
|
-
}>;
|
@@ -1,28 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
export declare type FieldArrayValidationBehavior = "onChange" | "onSubmit";
|
3
|
-
export declare type FieldArrayValidationBehaviorOptions = {
|
4
|
-
initial: FieldArrayValidationBehavior;
|
5
|
-
whenSubmitted: FieldArrayValidationBehavior;
|
6
|
-
};
|
7
|
-
export declare type FieldArrayHelpers<Item = any> = {
|
8
|
-
push: (item: Item) => void;
|
9
|
-
swap: (indexA: number, indexB: number) => void;
|
10
|
-
move: (from: number, to: number) => void;
|
11
|
-
insert: (index: number, value: Item) => void;
|
12
|
-
unshift: (value: Item) => void;
|
13
|
-
remove: (index: number) => void;
|
14
|
-
pop: () => void;
|
15
|
-
replace: (index: number, value: Item) => void;
|
16
|
-
};
|
17
|
-
export declare type UseFieldArrayOptions = {
|
18
|
-
formId?: string;
|
19
|
-
validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
|
20
|
-
};
|
21
|
-
export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
|
22
|
-
export declare type FieldArrayProps = {
|
23
|
-
name: string;
|
24
|
-
children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
|
25
|
-
formId?: string;
|
26
|
-
validationBehavior?: FieldArrayValidationBehaviorOptions;
|
27
|
-
};
|
28
|
-
export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => JSX.Element;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare type InternalFormId = string | symbol;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare function useSubmitComplete(isSubmitting: boolean, callback: () => void): void;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import type React from "react";
|
2
|
-
export declare const omit: (obj: any, ...keys: string[]) => any;
|
3
|
-
export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
|
4
|
-
export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
|
5
|
-
export declare const useDeepEqualsMemo: <T>(item: T) => T;
|
package/dist/types/server.d.ts
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
import { FORM_DEFAULTS_FIELD } from "./internal/constants";
|
2
|
-
import { ValidatorError, ValidationErrorResponseData } from "./validation/types";
|
3
|
-
/**
|
4
|
-
* Takes the errors from a `Validator` and returns a `Response`.
|
5
|
-
* When you return this from your action, `ValidatedForm` on the frontend will automatically
|
6
|
-
* display the errors on the correct fields on the correct form.
|
7
|
-
*
|
8
|
-
* You can also provide a second argument to `validationError`
|
9
|
-
* to specify how to repopulate the form when JS is disabled.
|
10
|
-
*
|
11
|
-
* @example
|
12
|
-
* ```ts
|
13
|
-
* const result = validator.validate(await request.formData());
|
14
|
-
* if (result.error) return validationError(result.error, result.submittedData);
|
15
|
-
* ```
|
16
|
-
*/
|
17
|
-
export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
|
18
|
-
export declare type FormDefaults = {
|
19
|
-
[formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
|
20
|
-
};
|
21
|
-
export declare const setFormDefaults: <DataType = any>(formId: string, defaultValues: Partial<DataType>) => FormDefaults;
|
@@ -1,64 +0,0 @@
|
|
1
|
-
import { FieldErrors, TouchedFields, ValidationResult } from "../validation/types";
|
2
|
-
export declare type FormState = {
|
3
|
-
fieldErrors: FieldErrors;
|
4
|
-
isSubmitting: boolean;
|
5
|
-
hasBeenSubmitted: boolean;
|
6
|
-
touchedFields: TouchedFields;
|
7
|
-
defaultValues: {
|
8
|
-
[fieldName: string]: any;
|
9
|
-
};
|
10
|
-
action?: string;
|
11
|
-
subaction?: string;
|
12
|
-
isValid: boolean;
|
13
|
-
};
|
14
|
-
/**
|
15
|
-
* Returns information about the form.
|
16
|
-
*
|
17
|
-
* @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
|
18
|
-
*/
|
19
|
-
export declare const useFormState: (formId?: string) => FormState;
|
20
|
-
export declare type FormHelpers = {
|
21
|
-
/**
|
22
|
-
* Clear the error of the specified field.
|
23
|
-
*/
|
24
|
-
clearError: (fieldName: string) => void;
|
25
|
-
/**
|
26
|
-
* Validate the specified field.
|
27
|
-
*/
|
28
|
-
validateField: (fieldName: string) => Promise<string | null>;
|
29
|
-
/**
|
30
|
-
* Change the touched state of the specified field.
|
31
|
-
*/
|
32
|
-
setTouched: (fieldName: string, touched: boolean) => void;
|
33
|
-
/**
|
34
|
-
* Validate the whole form and populate any errors.
|
35
|
-
*/
|
36
|
-
validate: () => Promise<ValidationResult<unknown>>;
|
37
|
-
/**
|
38
|
-
* Clears all errors on the form.
|
39
|
-
*/
|
40
|
-
clearAllErrors: () => void;
|
41
|
-
/**
|
42
|
-
* Resets the form.
|
43
|
-
*
|
44
|
-
* _Note_: The equivalent behavior can be achieved by calling formElement.reset()
|
45
|
-
* or clicking a button element with `type="reset"`.
|
46
|
-
*/
|
47
|
-
reset: () => void;
|
48
|
-
/**
|
49
|
-
* Submits the form, running all validations first.
|
50
|
-
*
|
51
|
-
* _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
|
52
|
-
*/
|
53
|
-
submit: () => void;
|
54
|
-
/**
|
55
|
-
* Returns the current form values as FormData
|
56
|
-
*/
|
57
|
-
getValues: () => FormData;
|
58
|
-
};
|
59
|
-
/**
|
60
|
-
* Returns helpers that can be used to update the form state.
|
61
|
-
*
|
62
|
-
* @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
|
63
|
-
*/
|
64
|
-
export declare const useFormHelpers: (formId?: string) => FormHelpers;
|
@@ -1,85 +0,0 @@
|
|
1
|
-
import { FieldErrors, TouchedFields, ValidationResult } from "./validation/types";
|
2
|
-
export declare type FormContextValue = {
|
3
|
-
/**
|
4
|
-
* All the errors in all the fields in the form.
|
5
|
-
*/
|
6
|
-
fieldErrors: FieldErrors;
|
7
|
-
/**
|
8
|
-
* Clear the errors of the specified fields.
|
9
|
-
*/
|
10
|
-
clearError: (...names: string[]) => void;
|
11
|
-
/**
|
12
|
-
* Validate the specified field.
|
13
|
-
*/
|
14
|
-
validateField: (fieldName: string) => Promise<string | null>;
|
15
|
-
/**
|
16
|
-
* The `action` prop of the form.
|
17
|
-
*/
|
18
|
-
action?: string;
|
19
|
-
/**
|
20
|
-
* The `subaction` prop of the form.
|
21
|
-
*/
|
22
|
-
subaction?: string;
|
23
|
-
/**
|
24
|
-
* Whether or not the form is submitting.
|
25
|
-
*/
|
26
|
-
isSubmitting: boolean;
|
27
|
-
/**
|
28
|
-
* Whether or not a submission has been attempted.
|
29
|
-
* This is true once the form has been submitted, even if there were validation errors.
|
30
|
-
* Resets to false when the form is reset.
|
31
|
-
*/
|
32
|
-
hasBeenSubmitted: boolean;
|
33
|
-
/**
|
34
|
-
* Whether or not the form is valid.
|
35
|
-
*/
|
36
|
-
isValid: boolean;
|
37
|
-
/**
|
38
|
-
* The default values of the form.
|
39
|
-
*/
|
40
|
-
defaultValues?: {
|
41
|
-
[fieldName: string]: any;
|
42
|
-
};
|
43
|
-
/**
|
44
|
-
* Register a custom focus handler to be used when
|
45
|
-
* the field needs to receive focus due to a validation error.
|
46
|
-
*/
|
47
|
-
registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
|
48
|
-
/**
|
49
|
-
* Any fields that have been touched by the user.
|
50
|
-
*/
|
51
|
-
touchedFields: TouchedFields;
|
52
|
-
/**
|
53
|
-
* Change the touched state of the specified field.
|
54
|
-
*/
|
55
|
-
setFieldTouched: (fieldName: string, touched: boolean) => void;
|
56
|
-
/**
|
57
|
-
* Validate the whole form and populate any errors.
|
58
|
-
*/
|
59
|
-
validate: () => Promise<ValidationResult<unknown>>;
|
60
|
-
/**
|
61
|
-
* Clears all errors on the form.
|
62
|
-
*/
|
63
|
-
clearAllErrors: () => void;
|
64
|
-
/**
|
65
|
-
* Resets the form.
|
66
|
-
*
|
67
|
-
* _Note_: The equivalent behavior can be achieved by calling formElement.reset()
|
68
|
-
* or clicking a button element with `type="reset"`.
|
69
|
-
*/
|
70
|
-
reset: () => void;
|
71
|
-
/**
|
72
|
-
* Submits the form, running all validations first.
|
73
|
-
*
|
74
|
-
* _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
|
75
|
-
*/
|
76
|
-
submit: () => void;
|
77
|
-
/**
|
78
|
-
* Returns the current form values as FormData
|
79
|
-
*/
|
80
|
-
getValues: () => FormData;
|
81
|
-
};
|
82
|
-
/**
|
83
|
-
* Provides access to some of the internal state of the form.
|
84
|
-
*/
|
85
|
-
export declare const useFormContext: (formId?: string) => FormContextValue;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { CreateValidatorArg, Validator } from "..";
|
2
|
-
/**
|
3
|
-
* Used to create a validator for a form.
|
4
|
-
* It provides built-in handling for unflattening nested objects and
|
5
|
-
* extracting the values from FormData.
|
6
|
-
*/
|
7
|
-
export declare function createValidator<T>(validator: CreateValidatorArg<T>): Validator<T>;
|
@@ -1,58 +0,0 @@
|
|
1
|
-
export declare type FieldErrors = Record<string, string>;
|
2
|
-
export declare type TouchedFields = Record<string, boolean>;
|
3
|
-
export declare type GenericObject = {
|
4
|
-
[key: string]: any;
|
5
|
-
};
|
6
|
-
export declare type ValidatorError = {
|
7
|
-
subaction?: string;
|
8
|
-
formId?: string;
|
9
|
-
fieldErrors: FieldErrors;
|
10
|
-
};
|
11
|
-
export declare type ValidationErrorResponseData = {
|
12
|
-
subaction?: string;
|
13
|
-
formId?: string;
|
14
|
-
fieldErrors: FieldErrors;
|
15
|
-
repopulateFields?: unknown;
|
16
|
-
};
|
17
|
-
export declare type BaseResult = {
|
18
|
-
submittedData: GenericObject;
|
19
|
-
formId?: string;
|
20
|
-
};
|
21
|
-
export declare type ErrorResult = BaseResult & {
|
22
|
-
error: ValidatorError;
|
23
|
-
data: undefined;
|
24
|
-
};
|
25
|
-
export declare type SuccessResult<DataType> = BaseResult & {
|
26
|
-
data: DataType;
|
27
|
-
error: undefined;
|
28
|
-
};
|
29
|
-
/**
|
30
|
-
* The result when validating a form.
|
31
|
-
*/
|
32
|
-
export declare type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
|
33
|
-
/**
|
34
|
-
* The result when validating an individual field in a form.
|
35
|
-
*/
|
36
|
-
export declare type ValidateFieldResult = {
|
37
|
-
error?: string;
|
38
|
-
};
|
39
|
-
/**
|
40
|
-
* A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
|
41
|
-
*/
|
42
|
-
export declare type Validator<DataType> = {
|
43
|
-
validate: (unvalidatedData: GenericObject) => Promise<ValidationResult<DataType>>;
|
44
|
-
validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
|
45
|
-
};
|
46
|
-
export declare type Valid<DataType> = {
|
47
|
-
data: DataType;
|
48
|
-
error: undefined;
|
49
|
-
};
|
50
|
-
export declare type Invalid = {
|
51
|
-
error: FieldErrors;
|
52
|
-
data: undefined;
|
53
|
-
};
|
54
|
-
export declare type CreateValidatorArg<DataType> = {
|
55
|
-
validate: (unvalidatedData: GenericObject) => Promise<Valid<DataType> | Invalid>;
|
56
|
-
validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
|
57
|
-
};
|
58
|
-
export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;
|