diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/ModalFooter.tsx b/app/client/packages/design-system/widgets/src/components/Modal/src/ModalFooter.tsx index 7327075996..d70ad9795b 100644 --- a/app/client/packages/design-system/widgets/src/components/Modal/src/ModalFooter.tsx +++ b/app/client/packages/design-system/widgets/src/components/Modal/src/ModalFooter.tsx @@ -7,6 +7,7 @@ import type { ModalFooterProps } from "./types"; export const ModalFooter = (props: ModalFooterProps) => { const { + closeOnSubmit = true, closeText = "Close", excludeFromTabOrder = false, onSubmit, @@ -20,7 +21,7 @@ export const ModalFooter = (props: ModalFooterProps) => { setIsLoading(true); await onSubmit(); setIsLoading(false); - setOpen(false); + if (closeOnSubmit) setOpen(false); } }; diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts index ee644acc1a..1c5bb1abd7 100644 --- a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts @@ -49,6 +49,8 @@ export interface ModalFooterProps { /** The event that is triggered when the submit button is clicked. */ onSubmit?: () => void; excludeFromTabOrder?: boolean; + /** Defines if the modal should close when submit button is pressed */ + closeOnSubmit?: boolean; } export interface ModalBodyProps { diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts index b2337a8794..77bf3cac80 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts @@ -20,6 +20,7 @@ export const defaultsConfig = { size: "medium", title: "Modal Title", showSubmitButton: true, + closeOnSubmit: true, submitButtonText: "Save Changes", cancelButtonText: "Cancel", blueprint: { diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/propertyPaneConfig/contentConfig.ts index 8cac94cba7..ac427d3dcd 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/propertyPaneConfig/contentConfig.ts @@ -1,4 +1,5 @@ import { ValidationTypes } from "constants/WidgetValidation"; +import type { ModalWidgetProps } from "../../widget/types"; export const propertyPaneContentConfig = [ { @@ -49,7 +50,7 @@ export const propertyPaneContentConfig = [ label: "Title", helpText: "Title of the modal", controlType: "INPUT_TEXT", - hidden: (props: any) => !props.showHeader, + hidden: (props: ModalWidgetProps) => !props.showHeader, dependencies: ["showHeader"], isBindProperty: false, isTriggerProperty: false, @@ -73,7 +74,7 @@ export const propertyPaneContentConfig = [ label: "Submit", helpText: "Show or hide the submit button", controlType: "SWITCH", - hidden: (props: any) => !props.showFooter, + hidden: (props: ModalWidgetProps) => !props.showFooter, dependencies: ["showFooter"], isBindProperty: false, isTriggerProperty: false, @@ -83,18 +84,20 @@ export const propertyPaneContentConfig = [ label: "Submit Button Text", helpText: "Label for the Submit Button", controlType: "INPUT_TEXT", - hidden: (props: any) => !props.showSubmitButton || !props.showFooter, + hidden: (props: ModalWidgetProps) => + !props.showSubmitButton || !props.showFooter, dependencies: ["showSubmitButton", "showFooter"], isBindProperty: false, isTriggerProperty: false, placeholderText: "Submit", }, + { propertyName: "cancelButtonText", label: "Cancel Button Text", helpText: "Label for the Cancel Button", controlType: "INPUT_TEXT", - hidden: (props: any) => !props.showFooter, + hidden: (props: ModalWidgetProps) => !props.showFooter, dependencies: ["showCancelButton", "showFooter"], isBindProperty: false, isTriggerProperty: false, @@ -114,9 +117,24 @@ export const propertyPaneContentConfig = [ isBindProperty: true, isTriggerProperty: true, }, + { + propertyName: "closeOnSubmit", + label: "Close on submit", + helpText: + "Set the modal to automatically close on submit button click. Note: If an action is configured for the onSubmit action, it would be ideal to toggle this off and configure a 'Close Modal' action in the onSuccess and/or onFailure callback of the onSubmit action", + controlType: "SWITCH", + hidden: (props: ModalWidgetProps) => + !props.showFooter || !props.showSubmitButton, + dependencies: ["showFooter", "showSubmitButton"], + isBindProperty: false, + isTriggerProperty: false, + }, { helpText: "Trigger an action when the submit button is pressed", propertyName: "onSubmit", + hidden: (props: ModalWidgetProps) => + !props.showFooter || !props.showSubmitButton, + dependencies: ["showSubmitButton", "showFooter"], label: "onSubmit", controlType: "ACTION_SELECTOR", isJSConvertible: true, diff --git a/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx index 08bb6bd17f..a0cd96602d 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx @@ -100,7 +100,7 @@ class WDSModalWidget extends BaseWidget { }; onSubmitClick = () => { - if (this.props.onSubmit) { + if (this.props.onSubmit && this.props.showSubmitButton) { super.executeAction({ triggerPropertyName: "onSubmit", dynamicString: this.props.onSubmit, @@ -150,6 +150,7 @@ class WDSModalWidget extends BaseWidget { {this.props.showFooter && (