diff --git a/frontend/.changeset/blue-apples-sink.md b/frontend/.changeset/blue-apples-sink.md new file mode 100644 index 0000000..cb35f95 --- /dev/null +++ b/frontend/.changeset/blue-apples-sink.md @@ -0,0 +1,5 @@ +--- +'pydantic-forms': patch +--- + +Adds option to clear form after submission diff --git a/frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx b/frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx index d6c1b02..860524e 100644 --- a/frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx +++ b/frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx @@ -26,21 +26,33 @@ const RenderForm = (contextProps: PydanticFormContextProps) => { title, headerComponent, skipSuccessNotice, + loadingComponent, + clearForm, } = contextProps; + const { + formRenderer, + footerRenderer, + componentMatcher: customComponentMatcher, + resetAfterSubmit, + } = config || {}; - if (isLoading && !isSending) { - return
Formulier aan het ophalen... A
; - } + const LoadingComponent = loadingComponent ?? ( +
Formulier aan het ophalen...
+ ); - if (!pydanticFormSchema) { - return
Formulier aan het ophalen... B
; + if (isLoading && !isSending) { + return LoadingComponent; } - if (isSending) { - return
Formulier aan het verzenden...
; + if (!pydanticFormSchema || isSending) { + return LoadingComponent; } if (isFullFilled) { + if (resetAfterSubmit) { + clearForm(); + } + if (skipSuccessNotice) { return <>; } @@ -50,11 +62,6 @@ const RenderForm = (contextProps: PydanticFormContextProps) => { ); } - const { - formRenderer, - footerRenderer, - componentMatcher: customComponentMatcher, - } = config || {}; const Renderer = formRenderer ?? FormRenderer; const FooterRenderer = footerRenderer ?? Footer; diff --git a/frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx b/frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx index 9734c28..4ac20b9 100644 --- a/frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx +++ b/frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx @@ -64,6 +64,7 @@ function PydanticFormContextProvider({ sendLabel, headerComponent, footerComponent, + loadingComponent, successNotice, onSuccess, onCancel, @@ -311,6 +312,12 @@ function PydanticFormContextProvider({ isParsingSchema || (customDataProvider ? isLoadingCustomData : false); + const clearForm = useCallback(() => { + setFormInputData([]); + setIsFullFilled(false); + setRawSchema(undefined); + }, []); + const PydanticFormContextState = { // to prevent an issue where the sending state hangs // we check both the SWR hook state as our manual state @@ -320,6 +327,7 @@ function PydanticFormContextProvider({ pydanticFormSchema, headerComponent, footerComponent, + loadingComponent, onCancel, title, sendLabel, @@ -338,6 +346,7 @@ function PydanticFormContextProvider({ setSaveToLeavePageInCurrentState, formKey, formIdKey, + clearForm, }; return ( diff --git a/frontend/packages/pydantic-forms/src/types.ts b/frontend/packages/pydantic-forms/src/types.ts index 27e5c83..8b59199 100644 --- a/frontend/packages/pydantic-forms/src/types.ts +++ b/frontend/packages/pydantic-forms/src/types.ts @@ -28,8 +28,8 @@ export interface PydanticFormInitialContextProps { children: (props: PydanticFormContextProps) => React.ReactNode; headerComponent?: React.ReactNode; footerComponent?: React.ReactNode; + loadingComponent?: React.ReactNode; hasCardWrapper?: boolean; - config: PydanticFormsContextConfig; } @@ -65,6 +65,7 @@ export interface PydanticFormContextProps { successNotice?: React.ReactNode; headerComponent?: React.ReactNode; footerComponent?: React.ReactNode; + loadingComponent?: React.ReactNode; allowUntouchedSubmit?: boolean; skipSuccessNotice?: boolean; footerCtaPrimaryVariant?: string; @@ -73,6 +74,8 @@ export interface PydanticFormContextProps { config?: PydanticFormsContextConfig; formKey: string; formIdKey?: string; + clearForm: () => void; + resetAfterSubmit?: boolean; } export enum PydanticFormState { @@ -305,6 +308,8 @@ export interface PydanticFormsContextConfig { // have an option to change the layout columns of fields formStructureMutator?: PydanticFormStructureMutator; + + resetAfterSubmit?: boolean; } export type FormRenderer = React.JSXElementConstructor<{