@mittwald/flow-react-components 0.2.0-alpha.660 → 0.2.0-alpha.661
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/CHANGELOG.md +6 -0
- package/dist/assets/doc-properties.json +1582 -1563
- package/dist/js/components/src/integrations/react-hook-form/components/Form/Form.mjs +18 -2
- package/dist/js/components/src/integrations/react-hook-form/components/Form/Form.mjs.map +1 -1
- package/dist/js/components/src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.mjs +9 -2
- package/dist/js/components/src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.mjs.map +1 -1
- package/dist/js/components/src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.mjs +4 -3
- package/dist/js/components/src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.mjs.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Form/Form.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Form/Form.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Form/stories/Form.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.d.ts +2 -0
- package/dist/types/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.d.ts +2 -0
- package/dist/types/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
import { useHotkeySubmit } from './useHotkeySubmit.mjs';
|
|
5
5
|
import { FormContextProvider } from '../FormContextProvider/FormContextProvider.mjs';
|
|
6
|
-
import { useId, useMemo } from 'react';
|
|
6
|
+
import { useId, useMemo, useRef } from 'react';
|
|
7
7
|
import { FormProvider } from 'react-hook-form';
|
|
8
8
|
|
|
9
9
|
const DefaultFormComponent = (p) => /* @__PURE__ */ jsx("form", { ...p });
|
|
@@ -21,10 +21,25 @@ function Form(props) {
|
|
|
21
21
|
const newFormId = useId();
|
|
22
22
|
const formId = idProp ?? newFormId;
|
|
23
23
|
const FormComponent = useMemo(() => formComponent, [formId]);
|
|
24
|
+
const afterSubmitCallback = useRef(void 0);
|
|
25
|
+
const handleSubmitResult = (result) => {
|
|
26
|
+
if (typeof result === "function") {
|
|
27
|
+
afterSubmitCallback.current = result;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
24
30
|
const handleSubmit = (e) => {
|
|
25
31
|
const formEvent = e && "nativeEvent" in e ? e : void 0;
|
|
26
32
|
formEvent?.stopPropagation();
|
|
27
|
-
return form.handleSubmit(
|
|
33
|
+
return form.handleSubmit((e2) => {
|
|
34
|
+
const submitResult = onSubmit(e2);
|
|
35
|
+
if (submitResult instanceof Promise) {
|
|
36
|
+
return submitResult.then(handleSubmitResult);
|
|
37
|
+
}
|
|
38
|
+
handleSubmitResult(submitResult);
|
|
39
|
+
})(formEvent);
|
|
40
|
+
};
|
|
41
|
+
const onAfterSuccessFeedback = () => {
|
|
42
|
+
afterSubmitCallback.current?.();
|
|
28
43
|
};
|
|
29
44
|
const refWithHotkeySubmit = useHotkeySubmit({
|
|
30
45
|
ref,
|
|
@@ -36,6 +51,7 @@ function Form(props) {
|
|
|
36
51
|
form,
|
|
37
52
|
isReadOnly,
|
|
38
53
|
id: formId,
|
|
54
|
+
onAfterSuccessFeedback,
|
|
39
55
|
children: /* @__PURE__ */ jsx(
|
|
40
56
|
FormComponent,
|
|
41
57
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { useHotkeySubmit } from \"@/integrations/react-hook-form/components/Form/useHotkeySubmit\";\nimport { FormContextProvider } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n type ComponentProps,\n type FC,\n type FormEvent,\n type FormEventHandler,\n type PropsWithChildren,\n type Ref,\n useId,\n useMemo,\n} from \"react\";\nimport type {\n FieldValues,\n SubmitHandler,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = SubmitHandler<F>;\n\ntype FormComponentType = FC<\n PropsWithChildren<{\n id: string;\n onSubmit?: FormEventHandler | FormOnSubmitHandler<never>;\n ref?: Ref<HTMLFormElement>;\n }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n extends Omit<ComponentProps<\"form\">, \"onSubmit\">, PropsWithChildren {\n form: UseFormReturn<F>;\n onSubmit: FormOnSubmitHandler<F>;\n formComponent?: FC<Omit<FormComponentType, \"ref\">>;\n isReadOnly?: boolean;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n const {\n form,\n children,\n onSubmit,\n formComponent = DefaultFormComponent,\n isReadOnly,\n ref,\n id: idProp,\n ...formProps\n } = props;\n\n const newFormId = useId();\n const formId = idProp ?? newFormId;\n const FormComponent = useMemo(() => formComponent, [formId]);\n\n const handleSubmit = (e?: FormEvent | F) => {\n const formEvent = e && \"nativeEvent\" in e ? (e as FormEvent) : undefined;\n formEvent?.stopPropagation();\n return form.handleSubmit(onSubmit)(formEvent);\n };\n\n const refWithHotkeySubmit = useHotkeySubmit({\n ref,\n handleSubmit,\n });\n\n return (\n <RhfFormContextProvider {...form}>\n <FormContextProvider\n form={form as UseFormReturn}\n isReadOnly={isReadOnly}\n id={formId}\n >\n <FormComponent\n {...formProps}\n ref={refWithHotkeySubmit}\n id={formId}\n onSubmit={handleSubmit}\n >\n {children}\n </FormComponent>\n </FormContextProvider>\n </RhfFormContextProvider>\n );\n}\n\nexport default Form;\n"],"names":["RhfFormContextProvider"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Form.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { useHotkeySubmit } from \"@/integrations/react-hook-form/components/Form/useHotkeySubmit\";\nimport { FormContextProvider } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport {\n type ComponentProps,\n type FC,\n type FormEvent,\n type FormEventHandler,\n type PropsWithChildren,\n type Ref,\n useId,\n useMemo,\n useRef,\n} from \"react\";\nimport type {\n FieldValues,\n SubmitHandler,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = SubmitHandler<F>;\n\nexport type AfterFormSubmitCallback = (...unknownArgs: unknown[]) => unknown;\n\ntype FormComponentType = FC<\n PropsWithChildren<{\n id: string;\n onSubmit?: FormEventHandler | FormOnSubmitHandler<never>;\n ref?: Ref<HTMLFormElement>;\n }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n extends Omit<ComponentProps<\"form\">, \"onSubmit\">, PropsWithChildren {\n form: UseFormReturn<F>;\n onSubmit: FormOnSubmitHandler<F>;\n formComponent?: FC<Omit<FormComponentType, \"ref\">>;\n isReadOnly?: boolean;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n const {\n form,\n children,\n onSubmit,\n formComponent = DefaultFormComponent,\n isReadOnly,\n ref,\n id: idProp,\n ...formProps\n } = props;\n\n const newFormId = useId();\n const formId = idProp ?? newFormId;\n const FormComponent = useMemo(() => formComponent, [formId]);\n const afterSubmitCallback = useRef<AfterFormSubmitCallback>(undefined);\n\n const handleSubmitResult = (result: unknown) => {\n if (typeof result === \"function\") {\n afterSubmitCallback.current = result as AfterFormSubmitCallback;\n }\n };\n\n const handleSubmit = (e?: FormEvent | F) => {\n const formEvent = e && \"nativeEvent\" in e ? (e as FormEvent) : undefined;\n formEvent?.stopPropagation();\n return form.handleSubmit((e) => {\n const submitResult = onSubmit(e);\n if (submitResult instanceof Promise) {\n return submitResult.then(handleSubmitResult);\n }\n handleSubmitResult(submitResult);\n })(formEvent);\n };\n\n const onAfterSuccessFeedback = () => {\n afterSubmitCallback.current?.();\n };\n\n const refWithHotkeySubmit = useHotkeySubmit({\n ref,\n handleSubmit,\n });\n\n return (\n <RhfFormContextProvider {...form}>\n <FormContextProvider\n form={form as UseFormReturn}\n isReadOnly={isReadOnly}\n id={formId}\n onAfterSuccessFeedback={onAfterSuccessFeedback}\n >\n <FormComponent\n {...formProps}\n ref={refWithHotkeySubmit}\n id={formId}\n onSubmit={handleSubmit}\n >\n {children}\n </FormComponent>\n </FormContextProvider>\n </RhfFormContextProvider>\n );\n}\n\nexport default Form;\n"],"names":["e","RhfFormContextProvider"],"mappings":";;;;;;AAwCA,MAAM,uBAA0C,CAAC,CAAA,qBAAM,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,CAAA,EAAG,CAAA;AAE7D,SAAS,KAA4B,KAAA,EAAqB;AAC/D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA,GAAgB,oBAAA;AAAA,IAChB,UAAA;AAAA,IACA,GAAA;AAAA,IACA,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,SAAS,MAAA,IAAU,SAAA;AACzB,EAAA,MAAM,gBAAgB,OAAA,CAAQ,MAAM,aAAA,EAAe,CAAC,MAAM,CAAC,CAAA;AAC3D,EAAA,MAAM,mBAAA,GAAsB,OAAgC,MAAS,CAAA;AAErE,EAAA,MAAM,kBAAA,GAAqB,CAAC,MAAA,KAAoB;AAC9C,IAAA,IAAI,OAAO,WAAW,UAAA,EAAY;AAChC,MAAA,mBAAA,CAAoB,OAAA,GAAU,MAAA;AAAA,IAChC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAAsB;AAC1C,IAAA,MAAM,SAAA,GAAY,CAAA,IAAK,aAAA,IAAiB,CAAA,GAAK,CAAA,GAAkB,MAAA;AAC/D,IAAA,SAAA,EAAW,eAAA,EAAgB;AAC3B,IAAA,OAAO,IAAA,CAAK,YAAA,CAAa,CAACA,EAAAA,KAAM;AAC9B,MAAA,MAAM,YAAA,GAAe,SAASA,EAAC,CAAA;AAC/B,MAAA,IAAI,wBAAwB,OAAA,EAAS;AACnC,QAAA,OAAO,YAAA,CAAa,KAAK,kBAAkB,CAAA;AAAA,MAC7C;AACA,MAAA,kBAAA,CAAmB,YAAY,CAAA;AAAA,IACjC,CAAC,EAAE,SAAS,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,mBAAA,CAAoB,OAAA,IAAU;AAAA,EAChC,CAAA;AAEA,EAAA,MAAM,sBAAsB,eAAA,CAAgB;AAAA,IAC1C,GAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA,CAACC,YAAA,EAAA,EAAwB,GAAG,IAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,UAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,sBAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA,EAAK,mBAAA;AAAA,UACL,EAAA,EAAI,MAAA;AAAA,UACJ,QAAA,EAAU,YAAA;AAAA,UAET;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -9,12 +9,19 @@ const FormContext = createContext(
|
|
|
9
9
|
void 0
|
|
10
10
|
);
|
|
11
11
|
const FormContextProvider = (props) => {
|
|
12
|
-
const {
|
|
12
|
+
const {
|
|
13
|
+
form,
|
|
14
|
+
id,
|
|
15
|
+
isReadOnly: isReadOnlyProp = false,
|
|
16
|
+
onAfterSuccessFeedback,
|
|
17
|
+
children
|
|
18
|
+
} = props;
|
|
13
19
|
const [isReadOnlyState, setReadOnly] = useState(isReadOnlyProp);
|
|
14
20
|
const isReadOnly = isReadOnlyProp || isReadOnlyState;
|
|
15
21
|
const formSubmitAction = useFormSubmitAction({
|
|
16
22
|
form,
|
|
17
|
-
setReadOnly
|
|
23
|
+
setReadOnly,
|
|
24
|
+
onAfterSuccessFeedback
|
|
18
25
|
});
|
|
19
26
|
return /* @__PURE__ */ jsx(
|
|
20
27
|
FormContext,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContextProvider.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.tsx"],"sourcesContent":["import type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport {\n createContext,\n useContext,\n useState,\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n} from \"react\";\nimport type { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport invariant from \"invariant\";\nimport { useFormSubmitAction } from \"@/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction\";\n\ninterface FormContext<F extends FieldValues> {\n form: UseFormReturn<F>;\n id: string;\n isReadOnly: boolean;\n setReadOnly: Dispatch<SetStateAction<boolean>>;\n formSubmitAction: ActionModel;\n}\n\nexport const FormContext = createContext<FormContext<FieldValues> | undefined>(\n undefined,\n);\n\nexport interface FormContextProviderProps extends PropsWithChildren {\n form: UseFormReturn;\n id: string;\n isReadOnly?: boolean;\n}\n\nexport const FormContextProvider = (props: FormContextProviderProps) => {\n const {
|
|
1
|
+
{"version":3,"file":"FormContextProvider.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.tsx"],"sourcesContent":["import type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport {\n createContext,\n useContext,\n useState,\n type Dispatch,\n type PropsWithChildren,\n type SetStateAction,\n} from \"react\";\nimport type { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport invariant from \"invariant\";\nimport { useFormSubmitAction } from \"@/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction\";\nimport type { AfterFormSubmitCallback } from \"@/integrations/react-hook-form/components/Form/Form\";\n\ninterface FormContext<F extends FieldValues> {\n form: UseFormReturn<F>;\n id: string;\n isReadOnly: boolean;\n setReadOnly: Dispatch<SetStateAction<boolean>>;\n formSubmitAction: ActionModel;\n}\n\nexport const FormContext = createContext<FormContext<FieldValues> | undefined>(\n undefined,\n);\n\nexport interface FormContextProviderProps extends PropsWithChildren {\n form: UseFormReturn;\n id: string;\n isReadOnly?: boolean;\n onAfterSuccessFeedback?: AfterFormSubmitCallback;\n}\n\nexport const FormContextProvider = (props: FormContextProviderProps) => {\n const {\n form,\n id,\n isReadOnly: isReadOnlyProp = false,\n onAfterSuccessFeedback,\n children,\n } = props;\n const [isReadOnlyState, setReadOnly] = useState(isReadOnlyProp);\n const isReadOnly = isReadOnlyProp || isReadOnlyState;\n\n const formSubmitAction = useFormSubmitAction({\n form,\n setReadOnly,\n onAfterSuccessFeedback,\n });\n\n return (\n <FormContext\n value={{\n isReadOnly,\n setReadOnly,\n id,\n form,\n formSubmitAction,\n }}\n >\n {children}\n </FormContext>\n );\n};\n\nexport const useFormContext = <F extends FieldValues>() => {\n const ctx = useOptionalFormContext<F>();\n invariant(\n !!ctx,\n \"Could not useFormContext() outside a Form, or multiple versions of Flow installed.\",\n );\n return ctx;\n};\n\nexport const useOptionalFormContext = <F extends FieldValues>() =>\n useContext(FormContext) as FormContext<F> | undefined;\n\nexport default FormContextProvider;\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,WAAA,GAAc,aAAA;AAAA,EACzB;AACF;AASO,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAoC;AACtE,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,EAAA;AAAA,IACA,YAAY,cAAA,GAAiB,KAAA;AAAA,IAC7B,sBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,CAAC,eAAA,EAAiB,WAAW,CAAA,GAAI,SAAS,cAAc,CAAA;AAC9D,EAAA,MAAM,aAAa,cAAA,IAAkB,eAAA;AAErC,EAAA,MAAM,mBAAmB,mBAAA,CAAoB;AAAA,IAC3C,IAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,UAAA;AAAA,QACA,WAAA;AAAA,QACA,EAAA;AAAA,QACA,IAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,MAAM,iBAAiB,MAA6B;AACzD,EAAA,MAAM,MAAM,sBAAA,EAA0B;AACtC,EAAA,SAAA;AAAA,IACE,CAAC,CAAC,GAAA;AAAA,IACF;AAAA,GACF;AACA,EAAA,OAAO,GAAA;AACT;AAEO,MAAM,sBAAA,GAAyB,MACpC,UAAA,CAAW,WAAW;;;;"}
|
|
@@ -4,7 +4,7 @@ import { ActionModel } from '../../../../components/Action/models/ActionModel.mj
|
|
|
4
4
|
import { useRef, useEffect } from 'react';
|
|
5
5
|
|
|
6
6
|
const useFormSubmitAction = (options) => {
|
|
7
|
-
const { form, setReadOnly } = options;
|
|
7
|
+
const { form, setReadOnly, onAfterSuccessFeedback } = options;
|
|
8
8
|
const formSubmitAction = ActionModel.useNew({});
|
|
9
9
|
const { isSubmitting, isSubmitted, isSubmitSuccessful } = form.formState;
|
|
10
10
|
const wasSubmitting = useRef(isSubmitting);
|
|
@@ -16,7 +16,7 @@ const useFormSubmitAction = (options) => {
|
|
|
16
16
|
formSubmitAction.state.onAsyncStart();
|
|
17
17
|
} else if (submittingDone) {
|
|
18
18
|
if (isSubmitSuccessful) {
|
|
19
|
-
formSubmitAction.state.onSucceeded();
|
|
19
|
+
formSubmitAction.state.onSucceeded().then(onAfterSuccessFeedback);
|
|
20
20
|
} else {
|
|
21
21
|
formSubmitAction.state.onFailed(new Error("Form submission failed"));
|
|
22
22
|
}
|
|
@@ -28,7 +28,8 @@ const useFormSubmitAction = (options) => {
|
|
|
28
28
|
isSubmitted,
|
|
29
29
|
isSubmitSuccessful,
|
|
30
30
|
formSubmitAction,
|
|
31
|
-
setReadOnly
|
|
31
|
+
setReadOnly,
|
|
32
|
+
onAfterSuccessFeedback
|
|
32
33
|
]);
|
|
33
34
|
return formSubmitAction;
|
|
34
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormSubmitAction.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useEffect, useRef } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\n\ninterface Options {\n form: UseFormReturn;\n setReadOnly: (isReadOnly: boolean) => void;\n}\n\nexport const useFormSubmitAction = (options: Options) => {\n const { form, setReadOnly } = options;\n\n const formSubmitAction = ActionModel.useNew({});\n\n const { isSubmitting, isSubmitted, isSubmitSuccessful } = form.formState;\n const wasSubmitting = useRef(isSubmitting);\n\n useEffect(() => {\n const submittingDone = wasSubmitting.current && !isSubmitting;\n wasSubmitting.current = isSubmitting;\n\n if (isSubmitting) {\n setReadOnly(true);\n formSubmitAction.state.onAsyncStart();\n } else if (submittingDone) {\n if (isSubmitSuccessful) {\n formSubmitAction.state.onSucceeded();\n } else {\n formSubmitAction.state.onFailed(new Error(\"Form submission failed\"));\n }\n setReadOnly(false);\n }\n }, [\n wasSubmitting,\n isSubmitting,\n isSubmitted,\n isSubmitSuccessful,\n formSubmitAction,\n setReadOnly,\n ]);\n\n return formSubmitAction;\n};\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useFormSubmitAction.mjs","sources":["../../../../../../../../src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport type { AfterFormSubmitCallback } from \"@/integrations/react-hook-form/components/Form/Form\";\nimport { useEffect, useRef } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\n\ninterface Options {\n form: UseFormReturn;\n setReadOnly: (isReadOnly: boolean) => void;\n onAfterSuccessFeedback?: AfterFormSubmitCallback;\n}\n\nexport const useFormSubmitAction = (options: Options) => {\n const { form, setReadOnly, onAfterSuccessFeedback } = options;\n\n const formSubmitAction = ActionModel.useNew({});\n\n const { isSubmitting, isSubmitted, isSubmitSuccessful } = form.formState;\n const wasSubmitting = useRef(isSubmitting);\n\n useEffect(() => {\n const submittingDone = wasSubmitting.current && !isSubmitting;\n wasSubmitting.current = isSubmitting;\n\n if (isSubmitting) {\n setReadOnly(true);\n formSubmitAction.state.onAsyncStart();\n } else if (submittingDone) {\n if (isSubmitSuccessful) {\n formSubmitAction.state.onSucceeded().then(onAfterSuccessFeedback);\n } else {\n formSubmitAction.state.onFailed(new Error(\"Form submission failed\"));\n }\n setReadOnly(false);\n }\n }, [\n wasSubmitting,\n isSubmitting,\n isSubmitted,\n isSubmitSuccessful,\n formSubmitAction,\n setReadOnly,\n onAfterSuccessFeedback,\n ]);\n\n return formSubmitAction;\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,mBAAA,GAAsB,CAAC,OAAA,KAAqB;AACvD,EAAA,MAAM,EAAE,IAAA,EAAM,WAAA,EAAa,sBAAA,EAAuB,GAAI,OAAA;AAEtD,EAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,MAAA,CAAO,EAAE,CAAA;AAE9C,EAAA,MAAM,EAAE,YAAA,EAAc,WAAA,EAAa,kBAAA,KAAuB,IAAA,CAAK,SAAA;AAC/D,EAAA,MAAM,aAAA,GAAgB,OAAO,YAAY,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,cAAA,GAAiB,aAAA,CAAc,OAAA,IAAW,CAAC,YAAA;AACjD,IAAA,aAAA,CAAc,OAAA,GAAU,YAAA;AAExB,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,gBAAA,CAAiB,MAAM,YAAA,EAAa;AAAA,IACtC,WAAW,cAAA,EAAgB;AACzB,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA,gBAAA,CAAiB,KAAA,CAAM,WAAA,EAAY,CAAE,IAAA,CAAK,sBAAsB,CAAA;AAAA,MAClE,CAAA,MAAO;AACL,QAAA,gBAAA,CAAiB,KAAA,CAAM,QAAA,CAAS,IAAI,KAAA,CAAM,wBAAwB,CAAC,CAAA;AAAA,MACrE;AACA,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA,IACnB;AAAA,EACF,CAAA,EAAG;AAAA,IACD,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,kBAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,OAAO,gBAAA;AACT;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentProps, FC, FormEventHandler, PropsWithChildren, Ref } from 'react';
|
|
2
2
|
import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
|
3
3
|
export type FormOnSubmitHandler<F extends FieldValues> = SubmitHandler<F>;
|
|
4
|
+
export type AfterFormSubmitCallback = (...unknownArgs: unknown[]) => unknown;
|
|
4
5
|
type FormComponentType = FC<PropsWithChildren<{
|
|
5
6
|
id: string;
|
|
6
7
|
onSubmit?: FormEventHandler | FormOnSubmitHandler<never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAEP,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EAEP,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,CAAC,GAAG,WAAW,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;AAE7E,KAAK,iBAAiB,GAAG,EAAE,CACzB,iBAAiB,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B,CAAC,CACH,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,WAAW,CAC9C,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,EAAE,iBAAiB;IACnE,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,2CA+D9D;AAED,eAAe,IAAI,CAAC"}
|
package/dist/types/integrations/react-hook-form/components/Form/stories/Form.stories.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/integrations/react-hook-form/components/Form/stories/Form.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,qDAAqD,CAAC;AAE3E,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/integrations/react-hook-form/components/Form/stories/Form.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,qDAAqD,CAAC;AAE3E,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAuBvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA2B3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,sBAAsB,EAAE,KAgCpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAwBtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAwB1C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgCjC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FieldValues, UseFormReturn } from 'react-hook-form';
|
|
2
2
|
import { Dispatch, PropsWithChildren, SetStateAction } from 'react';
|
|
3
3
|
import { ActionModel } from '../../../../components/Action/models/ActionModel';
|
|
4
|
+
import { AfterFormSubmitCallback } from '../Form/Form';
|
|
4
5
|
interface FormContext<F extends FieldValues> {
|
|
5
6
|
form: UseFormReturn<F>;
|
|
6
7
|
id: string;
|
|
@@ -13,6 +14,7 @@ export interface FormContextProviderProps extends PropsWithChildren {
|
|
|
13
14
|
form: UseFormReturn;
|
|
14
15
|
id: string;
|
|
15
16
|
isReadOnly?: boolean;
|
|
17
|
+
onAfterSuccessFeedback?: AfterFormSubmitCallback;
|
|
16
18
|
}
|
|
17
19
|
export declare const FormContextProvider: (props: FormContextProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
20
|
export declare const useFormContext: <F extends FieldValues>() => FormContext<F>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormContextProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"FormContextProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/FormContextProvider/FormContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AAEnG,UAAU,WAAW,CAAC,CAAC,SAAS,WAAW;IACzC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/C,gBAAgB,EAAE,WAAW,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,+DAEvB,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,IAAI,EAAE,aAAa,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,uBAAuB,CAAC;CAClD;AAED,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA8BlE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,qBAOnD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,OAC/B,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAExD,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { ActionModel } from '../../../../components/Action/models/ActionModel';
|
|
2
|
+
import { AfterFormSubmitCallback } from '../Form/Form';
|
|
2
3
|
import { UseFormReturn } from 'react-hook-form';
|
|
3
4
|
interface Options {
|
|
4
5
|
form: UseFormReturn;
|
|
5
6
|
setReadOnly: (isReadOnly: boolean) => void;
|
|
7
|
+
onAfterSuccessFeedback?: AfterFormSubmitCallback;
|
|
6
8
|
}
|
|
7
9
|
export declare const useFormSubmitAction: (options: Options) => ActionModel;
|
|
8
10
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormSubmitAction.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"useFormSubmitAction.d.ts","sourceRoot":"","sources":["../../../../../../src/integrations/react-hook-form/components/FormContextProvider/useFormSubmitAction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AAEnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,OAAO;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sBAAsB,CAAC,EAAE,uBAAuB,CAAC;CAClD;AAED,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,gBAkCnD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.661",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.661",
|
|
62
62
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
63
63
|
"@react-aria/form": "^3.1.3",
|
|
64
64
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@faker-js/faker": "^10.2.0",
|
|
104
104
|
"@internationalized/date": "^3.10.1",
|
|
105
105
|
"@mittwald/flow-core": "",
|
|
106
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
106
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.661",
|
|
107
107
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
108
108
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
109
109
|
"@mittwald/typescript-config": "",
|
|
@@ -172,5 +172,5 @@
|
|
|
172
172
|
"optional": true
|
|
173
173
|
}
|
|
174
174
|
},
|
|
175
|
-
"gitHead": "
|
|
175
|
+
"gitHead": "2f16838c1d421fc0b576c701efedd0d27006a7ad"
|
|
176
176
|
}
|