@paragrav/rhf-utils 0.0.128 → 0.0.131
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/README.md +12 -9
- package/dist/esm/exports.mjs +21 -23
- package/dist/esm/form/Form.mjs +1 -1
- package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs +15 -23
- package/dist/types/client/config/RhfUtilsClientConfig.d.ts +1 -1
- package/dist/types/client/utils.d.ts +5 -39
- package/dist/types/client/zod/context/useRhfUtilsZodForm.d.ts +1 -3
- package/dist/types/errors/message/FormErrorMessageByPath.d.ts +0 -1
- package/dist/types/errors/nonfield/FormNonFieldErrorMarker.d.ts +0 -1
- package/dist/types/errors/nonfield/isNonFieldErrorMarkerInDOM.d.ts +1 -1
- package/dist/types/errors/orphan/getIsOrphanFormErrorWithParentElement.d.ts +1 -1
- package/dist/types/errors/orphan/getOrphansFromFlatFieldErrors.d.ts +1 -1
- package/dist/types/errors/orphan/isOrphanFormError.d.ts +1 -1
- package/dist/types/errors/output/consoleErrors.d.ts +1 -1
- package/dist/types/errors/root/RootErrorsListFromFlatFieldErrorsContext.d.ts +0 -1
- package/dist/types/errors/trpc/getOnSubmitTrpcClientErrorHandler.d.ts +2 -2
- package/dist/types/exports.d.ts +0 -1
- package/dist/types/form/context/group/index.d.ts +0 -1
- package/dist/types/form/context/utils/RhfUtilsContextProvider.d.ts +0 -2
- package/dist/types/form/context/utils/useRhfUtilsContextRequestSubmit.d.ts +1 -1
- package/dist/types/form/utils/getSubmitterButtonData.d.ts +1 -4
- package/dist/types/form/utils/useFormRequestSubmit.d.ts +1 -1
- package/dist/types/form/utils/useShouldFormBlockNavigation.d.ts +17 -4
- package/dist/types/submit/useFormOnSubmitSuccessfulAndReset.d.ts +1 -1
- package/dist/types/submit/useResetFormOnSubmitted.d.ts +2 -2
- package/dist/types/utils/PassthroughChildren.d.ts +0 -1
- package/package.json +1 -1
- package/dist/esm/form/utils/useShouldFormBlockNavigation.mjs +0 -9
- package/dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs +0 -12
package/README.md
CHANGED
|
@@ -73,15 +73,18 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
73
73
|
},
|
|
74
74
|
|
|
75
75
|
// non-FormSubmitError thrown in onSubmit
|
|
76
|
-
// use case:
|
|
77
|
-
|
|
76
|
+
// use case: handle and transform error data for frontend
|
|
77
|
+
onSubmitErrorUnknown: (
|
|
78
78
|
error, // unknown
|
|
79
79
|
) => {
|
|
80
|
-
// if other error, re-throw to handle in ErrorBoundary
|
|
81
|
-
if (!(error instanceof MyServerError)) throw error;
|
|
82
|
-
|
|
83
80
|
// return FormSubmitErrors object to be merged to RHF context errors
|
|
84
|
-
|
|
81
|
+
if (isMyServerError(error))
|
|
82
|
+
return transformMyServerErrorToFormSubmitErrors(error);
|
|
83
|
+
|
|
84
|
+
// if other error
|
|
85
|
+
return {
|
|
86
|
+
root: { type: 'server', message: 'There was a problem.' },
|
|
87
|
+
} satisfies FormSubmitErrors;
|
|
85
88
|
},
|
|
86
89
|
|
|
87
90
|
// rhfContext.formState.errors output for debugging
|
|
@@ -237,7 +240,7 @@ Example:
|
|
|
237
240
|
/>
|
|
238
241
|
```
|
|
239
242
|
|
|
240
|
-
Any non-`FormSubmitError`s thrown from submit handler (e.g., fetch/axios error) can be transformed by `RhfUtilsClientConfig`'s `
|
|
243
|
+
Any non-`FormSubmitError`s thrown from submit handler (e.g., fetch/axios error) can be transformed by `RhfUtilsClientConfig`'s `onSubmitErrorUnknown` callback. This takes an `unknown` error and can return a `FormSubmitErrors` object, which is merged in RHF's context errors.
|
|
241
244
|
|
|
242
245
|
Most common use case will be transforming backend errors to frontend shape. (You can use `getOnSubmitTrpcClientErrorHandler` HOF provided by this library for TRPC backends.)
|
|
243
246
|
|
|
@@ -255,8 +258,8 @@ type RhfUtilsFormOptions = {
|
|
|
255
258
|
|
|
256
259
|
/**
|
|
257
260
|
* Reset form values and state (e.g., isDirty, etc.) after submit -- on success and/or error.
|
|
258
|
-
* - `defaults`: reset current values to defaults
|
|
259
|
-
* - `current`: reset defaults to current values
|
|
261
|
+
* - `defaults`: reset current values to defaults (e.g., clear form)
|
|
262
|
+
* - `current`: reset defaults to current values (keep current values)
|
|
260
263
|
*/
|
|
261
264
|
resetOnSubmitted?: {
|
|
262
265
|
success?: { values: 'defaults' | 'current' };
|
package/dist/esm/exports.mjs
CHANGED
|
@@ -7,46 +7,44 @@ import { default as x } from "./errors/message/FormErrorMessageByPath.mjs";
|
|
|
7
7
|
import { default as F } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
|
|
8
8
|
import { default as C } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
|
|
9
9
|
import { default as E } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
10
|
+
import { default as R } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
|
|
11
|
+
import { default as b } from "./form/context/utils/useRhfUtilsContext.mjs";
|
|
12
12
|
import { default as y } from "./form/context/utils/useRhfUtilsContextRequestSubmit.mjs";
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
13
|
+
import { default as B } from "./form/context/group/FormGroupContextProvider.mjs";
|
|
14
|
+
import { default as P } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
|
|
15
|
+
import { default as U } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
|
|
16
16
|
import { default as O } from "./form/context/group/useFormGroupChildTracker.mjs";
|
|
17
|
-
import { default as
|
|
18
|
-
import { default as
|
|
19
|
-
import { default as
|
|
20
|
-
import { default as
|
|
17
|
+
import { default as Z } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
|
|
18
|
+
import { default as v } from "./form/context/group/useFormGroupIsChildBusy.mjs";
|
|
19
|
+
import { default as A } from "./form/context/group/useFormGroupIsParentBusy.mjs";
|
|
20
|
+
import { default as L } from "./form/context/group/useFormGroupParentTracker.mjs";
|
|
21
21
|
import { default as j } from "./form/context/group/useFormOrParentIsBusy.mjs";
|
|
22
22
|
import { default as z } from "./form/utils/getSubmitterButtonData.mjs";
|
|
23
23
|
import { default as K } from "./form/utils/useFormRequestSubmit.mjs";
|
|
24
|
-
import {
|
|
25
|
-
import { FormSubmitError as X } from "./submit/error/FormSubmitError.mjs";
|
|
24
|
+
import { FormSubmitError as V } from "./submit/error/FormSubmitError.mjs";
|
|
26
25
|
export {
|
|
27
26
|
x as FormErrorMessageByPath,
|
|
28
|
-
|
|
27
|
+
B as FormGroupContextProvider,
|
|
29
28
|
F as FormNonFieldErrorMarker,
|
|
30
|
-
|
|
29
|
+
V as FormSubmitError,
|
|
31
30
|
e as RhfUtilsClientForZodContextProvider,
|
|
32
31
|
a as RhfUtilsZodForm,
|
|
33
32
|
C as RootErrorsListFromFlatFieldErrorsContext,
|
|
34
33
|
E as getOnSubmitTrpcClientErrorHandler,
|
|
35
34
|
z as getSubmitterButtonData,
|
|
36
|
-
|
|
35
|
+
R as trpcClientErrorToFormSubmitErrorsSchemaTransformer,
|
|
37
36
|
m as useFlatFieldErrorsContext,
|
|
38
37
|
d as useFlatFieldErrorsContextHasOnlyOrphans,
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
P as useFormGroupChildIsMountedTracker,
|
|
39
|
+
U as useFormGroupChildIsSubmittingTracker,
|
|
41
40
|
O as useFormGroupChildTracker,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
Z as useFormGroupIsAnyBusy,
|
|
42
|
+
v as useFormGroupIsChildBusy,
|
|
43
|
+
A as useFormGroupIsParentBusy,
|
|
44
|
+
L as useFormGroupParentTracker,
|
|
46
45
|
j as useFormOrParentIsBusy,
|
|
47
46
|
K as useFormRequestSubmit,
|
|
48
|
-
|
|
47
|
+
b as useRhfUtilsContext,
|
|
49
48
|
y as useRhfUtilsContextRequestSubmit,
|
|
50
|
-
u as useRhfUtilsZodForm
|
|
51
|
-
V as useShouldFormBlockNavigation
|
|
49
|
+
u as useRhfUtilsZodForm
|
|
52
50
|
};
|
package/dist/esm/form/Form.mjs
CHANGED
|
@@ -43,7 +43,7 @@ function A({
|
|
|
43
43
|
o.errors
|
|
44
44
|
) : (
|
|
45
45
|
// if error is not FormSubmitError, consumer can provide global handler
|
|
46
|
-
(x = t == null ? void 0 : t.
|
|
46
|
+
(x = t == null ? void 0 : t.onSubmitErrorUnknown) == null ? void 0 : x.call(t, o)
|
|
47
47
|
);
|
|
48
48
|
C && S(e, C), d == null || d(
|
|
49
49
|
o,
|
|
@@ -1,29 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
formRef: m,
|
|
11
|
-
onSubmitSuccessfulAndReset: t,
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import i from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
|
|
3
|
+
import a from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
|
|
4
|
+
import f from "../../../submit/useResetFormOnSubmitted.mjs";
|
|
5
|
+
import C from "../../../submit/useSubmitFormOnChange.mjs";
|
|
6
|
+
import { _RhfUtilsContextProvider as s } from "./useRhfUtilsContext.mjs";
|
|
7
|
+
const n = ({
|
|
8
|
+
formId: u,
|
|
9
|
+
formRef: t,
|
|
12
10
|
options: r,
|
|
13
|
-
children:
|
|
11
|
+
children: l
|
|
14
12
|
}) => {
|
|
15
|
-
var
|
|
16
|
-
const e =
|
|
17
|
-
return
|
|
13
|
+
var m;
|
|
14
|
+
const e = i();
|
|
15
|
+
return a((m = e == null ? void 0 : e.FieldErrors) == null ? void 0 : m.output), C(t, {
|
|
18
16
|
disabled: !(r != null && r.submitOnChange)
|
|
19
|
-
}),
|
|
20
|
-
(r == null ? void 0 : r.resetOnSubmitted) ?? (t && {
|
|
21
|
-
success: { values: "defaults" }
|
|
22
|
-
})
|
|
23
|
-
), i(() => {
|
|
24
|
-
t == null || t();
|
|
25
|
-
}), /* @__PURE__ */ u(O, { value: { formId: l, formRef: m, options: r }, children: C });
|
|
17
|
+
}), f(r == null ? void 0 : r.resetOnSubmitted), /* @__PURE__ */ d(s, { value: { formId: u, formRef: t, options: r }, children: l });
|
|
26
18
|
};
|
|
27
19
|
export {
|
|
28
|
-
|
|
20
|
+
n as default
|
|
29
21
|
};
|
|
@@ -56,7 +56,7 @@ export type RhfUtilsClientConfig = {
|
|
|
56
56
|
* - if {@link FormSubmitErrors}: merge into context errors.
|
|
57
57
|
* - if `undefined`: do nothing.
|
|
58
58
|
*/
|
|
59
|
-
|
|
59
|
+
onSubmitErrorUnknown?: (error: unknown) => FormSubmitErrors | undefined;
|
|
60
60
|
FieldErrors?: {
|
|
61
61
|
/**
|
|
62
62
|
* Configure how/if errors should be outputted.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { RhfUtilsFormOptions } from '../form/RhfUtilsFormOptions';
|
|
1
2
|
import { SafeFieldValues } from '../form/SafeFieldValues';
|
|
2
3
|
import { UseRhfUtilsFormProps } from '../form/UseRhfUtilsFormProps';
|
|
3
4
|
import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
|
|
@@ -5,43 +6,8 @@ import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
|
|
|
5
6
|
/**
|
|
6
7
|
* Merge {@link RhfUtilsClientConfig.defaults} with array of {@link UseRhfUtilsFormProps}'s overrides.
|
|
7
8
|
*/
|
|
8
|
-
export declare const mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(defaults: RhfUtilsClientConfig[
|
|
9
|
-
rhf?: Pick<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
reValidateMode: "onChange" | "onBlur" | "onSubmit";
|
|
13
|
-
defaultValues: ((payload?: unknown) => Promise<import('react-hook-form').FieldValues>) | {
|
|
14
|
-
[x: string]: any;
|
|
15
|
-
};
|
|
16
|
-
values: import('react-hook-form').FieldValues;
|
|
17
|
-
errors: import('react-hook-form').FieldErrors<import('react-hook-form').FieldValues>;
|
|
18
|
-
resetOptions: Partial<{
|
|
19
|
-
keepDirtyValues: boolean;
|
|
20
|
-
keepErrors: boolean;
|
|
21
|
-
keepDirty: boolean;
|
|
22
|
-
keepValues: boolean;
|
|
23
|
-
keepDefaultValues: boolean;
|
|
24
|
-
keepIsSubmitted: boolean;
|
|
25
|
-
keepIsSubmitSuccessful: boolean;
|
|
26
|
-
keepTouched: boolean;
|
|
27
|
-
keepIsValidating: boolean;
|
|
28
|
-
keepIsValid: boolean;
|
|
29
|
-
keepSubmitCount: boolean;
|
|
30
|
-
}> | undefined;
|
|
31
|
-
resolver: import('react-hook-form').Resolver<import('react-hook-form').FieldValues, any>;
|
|
32
|
-
context: any;
|
|
33
|
-
shouldFocusError: boolean;
|
|
34
|
-
shouldUnregister: boolean;
|
|
35
|
-
shouldUseNativeValidation: boolean;
|
|
36
|
-
progressive: boolean;
|
|
37
|
-
criteriaMode: import('react-hook-form').CriteriaMode;
|
|
38
|
-
delayError: number;
|
|
39
|
-
}>, "shouldUnregister" | "mode" | "reValidateMode" | "resetOptions" | "context" | "shouldFocusError" | "shouldUseNativeValidation" | "progressive" | "criteriaMode" | "delayError"> | undefined;
|
|
40
|
-
utils?: {
|
|
41
|
-
stopSubmitPropagation?: boolean | undefined;
|
|
42
|
-
submitOnChange?: boolean | undefined;
|
|
43
|
-
resetOnSubmitted?: import('../submit/useResetFormOnSubmitted').UseResetFormOnSubmittedOptions;
|
|
44
|
-
devTool?: true | Pick<import('@hookform/devtools/dist/devToolUI').DevtoolUIProps, "placement" | "styles"> | undefined;
|
|
45
|
-
} | undefined;
|
|
46
|
-
form?: Omit<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onSubmit"> | undefined;
|
|
9
|
+
export declare const mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(defaults: RhfUtilsClientConfig["defaults"], ...props: Pick<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>, "rhf" | "utils" | "form">[]) => {
|
|
10
|
+
rhf?: Pick<import('react-hook-form').UseFormProps, "mode" | "reValidateMode" | "resetOptions" | "context" | "shouldFocusError" | "shouldUnregister" | "shouldUseNativeValidation" | "progressive" | "criteriaMode" | "delayError">;
|
|
11
|
+
utils?: RhfUtilsFormOptions;
|
|
12
|
+
form?: Omit<React.PropsWithoutRef<JSX.IntrinsicElements["form"]>, "onSubmit">;
|
|
47
13
|
} | undefined;
|
|
@@ -3,8 +3,6 @@ import { zodTypeInput, zodTypeOutput } from '../consts';
|
|
|
3
3
|
import { ZodTypeFieldValues } from '../ZodTypeFieldValues';
|
|
4
4
|
|
|
5
5
|
declare const useRhfUtilsZodForm: <TSchema extends ZodTypeFieldValues>(schema: TSchema, form: UseRhfUtilsFormProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput]>) => import('../../../form/UseRhfUtilsFormReturn').UseRhfUtilsFormReturn<TSchema["_input"], TSchema["_output"]> & {
|
|
6
|
-
FormWithProviders: import('react').FC<
|
|
7
|
-
children?: import('react').ReactNode;
|
|
8
|
-
}>;
|
|
6
|
+
FormWithProviders: import('react').FC<import('react').PropsWithChildren>;
|
|
9
7
|
};
|
|
10
8
|
export default useRhfUtilsZodForm;
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Determine if a non-field error marker is in the DOM.
|
|
3
3
|
* Note: this will also look for nested markers to accommodate field arrays
|
|
4
4
|
*/
|
|
5
|
-
declare const isNonFieldErrorMarkerInDOM: (path: string, parentElement: Pick<HTMLElement,
|
|
5
|
+
declare const isNonFieldErrorMarkerInDOM: (path: string, parentElement: Pick<HTMLElement, "querySelector">) => boolean;
|
|
6
6
|
export default isNonFieldErrorMarkerInDOM;
|
|
@@ -3,5 +3,5 @@ import { FlatFieldErrorEntry } from '../flat/types';
|
|
|
3
3
|
/**
|
|
4
4
|
* Util wrapper for {@link isOrphanFormError} for usage with {@link FlatFieldErrorEntry}.
|
|
5
5
|
*/
|
|
6
|
-
declare const getIsFlatFieldErrorEntryOrphanByParentElement: (parentElement: Pick<HTMLElement,
|
|
6
|
+
declare const getIsFlatFieldErrorEntryOrphanByParentElement: (parentElement: Pick<HTMLElement, "querySelector">) => ([path, error]: FlatFieldErrorEntry) => boolean;
|
|
7
7
|
export default getIsFlatFieldErrorEntryOrphanByParentElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FlatFieldErrors } from '../flat/types';
|
|
2
2
|
|
|
3
|
-
declare const getOrphansFromFlatFieldErrors: (errors: FlatFieldErrors, parentElement: Pick<HTMLElement,
|
|
3
|
+
declare const getOrphansFromFlatFieldErrors: (errors: FlatFieldErrors, parentElement: Pick<HTMLElement, "querySelector">) => FlatFieldErrors;
|
|
4
4
|
export default getOrphansFromFlatFieldErrors;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FieldError } from 'react-hook-form';
|
|
2
2
|
|
|
3
|
-
declare const isOrphanFormError: (path: string, error: FieldError, parentElement: Pick<HTMLElement,
|
|
3
|
+
declare const isOrphanFormError: (path: string, error: FieldError, parentElement: Pick<HTMLElement, "querySelector">) => boolean;
|
|
4
4
|
export default isOrphanFormError;
|
|
@@ -3,5 +3,5 @@ import { SafeFieldValues } from '../../form/SafeFieldValues';
|
|
|
3
3
|
/**
|
|
4
4
|
* Output form values and errors to console.
|
|
5
5
|
*/
|
|
6
|
-
declare const consoleErrors: (message: string, values: SafeFieldValues, errors: Record<string, unknown>, type?:
|
|
6
|
+
declare const consoleErrors: (message: string, values: SafeFieldValues, errors: Record<string, unknown>, type?: "debug" | "error") => void;
|
|
7
7
|
export default consoleErrors;
|
|
@@ -2,10 +2,10 @@ import { RhfUtilsClientConfig } from '../../client/config/RhfUtilsClientConfig';
|
|
|
2
2
|
import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* HOF that returns submit error handler for {@link RhfUtilsClientConfig.
|
|
5
|
+
* HOF that returns submit error handler for {@link RhfUtilsClientConfig.onSubmitErrorUnknown}.
|
|
6
6
|
*
|
|
7
7
|
* @param onError Fallback for handling non-TRPC errors.
|
|
8
8
|
* @returns FormSubmitError
|
|
9
9
|
*/
|
|
10
|
-
declare const getOnSubmitTrpcClientErrorHandler: (onNotTrpcClientError: NonNullable<RhfUtilsClientConfig[
|
|
10
|
+
declare const getOnSubmitTrpcClientErrorHandler: (onNotTrpcClientError: NonNullable<RhfUtilsClientConfig["onSubmitErrorUnknown"]>) => (error: unknown) => FormSubmitErrors | undefined;
|
|
11
11
|
export default getOnSubmitTrpcClientErrorHandler;
|
package/dist/types/exports.d.ts
CHANGED
|
@@ -28,5 +28,4 @@ export { default as useFormGroupParentTracker } from './form/context/group/useFo
|
|
|
28
28
|
export { default as useFormOrParentIsBusy } from './form/context/group/useFormOrParentIsBusy';
|
|
29
29
|
export { default as getSubmitterButtonData } from './form/utils/getSubmitterButtonData';
|
|
30
30
|
export { default as useFormRequestSubmit } from './form/utils/useFormRequestSubmit';
|
|
31
|
-
export { default as useShouldFormBlockNavigation } from './form/utils/useShouldFormBlockNavigation';
|
|
32
31
|
export { FormSubmitError } from './submit/error/FormSubmitError';
|
|
@@ -3,8 +3,6 @@ import { RhfUtilsFormOptions } from '../../RhfUtilsFormOptions';
|
|
|
3
3
|
type Props = React.PropsWithChildren<{
|
|
4
4
|
formId: string;
|
|
5
5
|
formRef: React.RefObject<HTMLFormElement>;
|
|
6
|
-
/** Callback after successful submit, and form reset. */
|
|
7
|
-
onSubmitSuccessfulAndReset?: () => void;
|
|
8
6
|
options?: RhfUtilsFormOptions;
|
|
9
7
|
}>;
|
|
10
8
|
declare const RhfUtilsContextProvider: React.FC<Props>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Get `requestSubmit` function from the form ref'd in current context.
|
|
3
3
|
*/
|
|
4
|
-
declare const useRhfUtilsContextRequestSubmit: () => (submitter?: HTMLElement | null
|
|
4
|
+
declare const useRhfUtilsContextRequestSubmit: () => (submitter?: HTMLElement | null) => void;
|
|
5
5
|
export default useRhfUtilsContextRequestSubmit;
|
|
@@ -4,8 +4,5 @@ import { default as React } from 'react';
|
|
|
4
4
|
* Get [name, value] tuple of button/input that submitted form.
|
|
5
5
|
* Useful when determining user intent
|
|
6
6
|
*/
|
|
7
|
-
declare const getSubmitterButtonData: (event: React.BaseSyntheticEvent) => [
|
|
8
|
-
name: string,
|
|
9
|
-
value: string
|
|
10
|
-
] | undefined;
|
|
7
|
+
declare const getSubmitterButtonData: (event: React.BaseSyntheticEvent) => [name: string, value: string] | undefined;
|
|
11
8
|
export default getSubmitterButtonData;
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Get callback to trigger submit manually on form.
|
|
3
3
|
* @link https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit
|
|
4
4
|
*/
|
|
5
|
-
declare const useFormRequestSubmit: (ref: React.RefObject<HTMLFormElement>) => HTMLFormElement[
|
|
5
|
+
declare const useFormRequestSubmit: (ref: React.RefObject<HTMLFormElement>) => HTMLFormElement["requestSubmit"];
|
|
6
6
|
export default useFormRequestSubmit;
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
import { FieldValues, FormState } from 'react-hook-form';
|
|
2
2
|
|
|
3
|
+
export type UseShouldFormBlockNavigationOptions = {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* Block navigation while submitting.
|
|
7
|
+
* (In other words, will always block when `isDirty`.)
|
|
8
|
+
*
|
|
9
|
+
* NOTE: Be sure to use with `UseResetFormOnSubmittedOptions` configuration
|
|
10
|
+
* to mark form state as not `isDirty` after successful submit.
|
|
11
|
+
*
|
|
12
|
+
* This options is recommended because it prohibits possible
|
|
13
|
+
* user-triggered navigation during prolonged request.
|
|
14
|
+
*/
|
|
15
|
+
blockWhenSubmitting?: boolean;
|
|
16
|
+
};
|
|
3
17
|
/**
|
|
4
18
|
* Returns `boolean` value when the form should block navigation.
|
|
5
19
|
*
|
|
20
|
+
* By default, return `true` when the form is submitting or is not dirty.
|
|
21
|
+
*
|
|
6
22
|
* Evaluates to `true` when `enabled` and `isDirty` except when `isSubmitting` and `isValid`,
|
|
7
23
|
* because we don't want to block navigation when the form is submitting and valid.
|
|
8
|
-
*
|
|
9
|
-
* NOTE: If you need to block navigation during a potentially prolonged submission request,
|
|
10
|
-
* you will need to provide your own behaviors above and beyond this hook.
|
|
11
24
|
*/
|
|
12
|
-
declare const useShouldFormBlockNavigation: (
|
|
25
|
+
declare const useShouldFormBlockNavigation: ({ isDirty, isSubmitting }: FormState<FieldValues>, options?: UseShouldFormBlockNavigationOptions) => boolean;
|
|
13
26
|
export default useShouldFormBlockNavigation;
|
|
@@ -11,5 +11,5 @@ import { MaybePromise } from '@trpc/server/unstable-core-do-not-import';
|
|
|
11
11
|
*
|
|
12
12
|
* SubmitSuccessfulAndReset = was `isSubmitSuccessful` and now `!isDirty`
|
|
13
13
|
*/
|
|
14
|
-
declare const useFormOnSubmitSuccessfulAndReset: (callback?: () => MaybePromise<unknown>) => void;
|
|
14
|
+
declare const useFormOnSubmitSuccessfulAndReset: (callback?: (...data: unknown[]) => MaybePromise<unknown>) => void;
|
|
15
15
|
export default useFormOnSubmitSuccessfulAndReset;
|
|
@@ -24,8 +24,8 @@ export type UseResetFormOnSubmittedOptions = undefined | {
|
|
|
24
24
|
*
|
|
25
25
|
* Use cases:
|
|
26
26
|
* - on success:
|
|
27
|
-
* - `defaults`:
|
|
28
|
-
* - `current`: reset defaults to current values
|
|
27
|
+
* - `defaults`: reset current values to defaults (e.g., clear form)
|
|
28
|
+
* - `current`: reset defaults to current values (e.g., keep values)
|
|
29
29
|
* - on error:
|
|
30
30
|
* - reset current values to default values (e.g., submitOnChange reset)
|
|
31
31
|
*
|
package/package.json
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import f from "react";
|
|
2
|
-
import { useFormState as i } from "react-hook-form";
|
|
3
|
-
import m from "../utils/useRefIfValueWasTrue.mjs";
|
|
4
|
-
const n = (s) => {
|
|
5
|
-
const { isDirty: t, isSubmitSuccessful: e } = i(), [u, r] = m(e);
|
|
6
|
-
f.useEffect(() => {
|
|
7
|
-
s && (t || (e || u) && (s(), r()));
|
|
8
|
-
}, [e, t]);
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
n as default
|
|
12
|
-
};
|