diff --git a/striker-ui/components/ConfirmDialog.tsx b/striker-ui/components/ConfirmDialog.tsx index a51aab82..31b3b83e 100644 --- a/striker-ui/components/ConfirmDialog.tsx +++ b/striker-ui/components/ConfirmDialog.tsx @@ -1,5 +1,14 @@ -import { Box, Dialog } from '@mui/material'; -import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'; +import { Dialog as MUIDialog } from '@mui/material'; +import { + ButtonHTMLAttributes, + ElementType, + FormEventHandler, + forwardRef, + MouseEventHandler, + useImperativeHandle, + useMemo, + useState, +} from 'react'; import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME'; @@ -25,6 +34,7 @@ const ConfirmDialog = forwardRef< { actionCancelText = 'Cancel', actionProceedText, + contentContainerProps = {}, closeOnProceed: isCloseOnProceed = false, content, dialogProps: { @@ -32,10 +42,12 @@ const ConfirmDialog = forwardRef< PaperProps: paperProps = {}, ...restDialogProps } = {}, + formContent: isFormContent, loadingAction: isLoadingAction = false, onActionAppend, onCancelAppend, onProceedAppend, + onSubmitAppend, openInitially = false, proceedButtonProps = {}, proceedColour: proceedColourKey = 'blue', @@ -59,6 +71,54 @@ const ConfirmDialog = forwardRef< () => MAP_TO_COLOUR[proceedColourKey], [proceedColourKey], ); + const { + contentContainerComponent, + contentContainerSubmitEventHandler, + proceedButtonClickEventHandler, + proceedButtonType, + } = useMemo(() => { + let ccComponent: ElementType | undefined; + let ccSubmitEventHandler: FormEventHandler | undefined; + let pbClickEventHandler: + | MouseEventHandler + | undefined = (...args) => { + if (isCloseOnProceed) { + setIsOpen(false); + } + + onActionAppend?.call(null, ...args); + onProceedAppend?.call(null, ...args); + }; + let pbType: ButtonHTMLAttributes['type'] | undefined; + + if (isFormContent) { + ccComponent = 'form'; + ccSubmitEventHandler = (event, ...restArgs) => { + event.preventDefault(); + + if (isCloseOnProceed) { + setIsOpen(false); + } + + onSubmitAppend?.call(null, event, ...restArgs); + }; + pbClickEventHandler = undefined; + pbType = 'submit'; + } + + return { + contentContainerComponent: ccComponent, + contentContainerSubmitEventHandler: ccSubmitEventHandler, + proceedButtonClickEventHandler: pbClickEventHandler, + proceedButtonType: pbType, + }; + }, [ + isCloseOnProceed, + isFormContent, + onActionAppend, + onProceedAppend, + onSubmitAppend, + ]); const cancelButtonElement = useMemo( () => ( @@ -78,14 +138,8 @@ const ConfirmDialog = forwardRef< const proceedButtonElement = useMemo( () => ( { - if (isCloseOnProceed) { - setIsOpen(false); - } - - onActionAppend?.call(null, ...args); - onProceedAppend?.call(null, ...args); - }} + onClick={proceedButtonClickEventHandler} + type={proceedButtonType} {...restProceedButtonProps} sx={{ backgroundColor: proceedColour, @@ -101,10 +155,9 @@ const ConfirmDialog = forwardRef< ), [ actionProceedText, - isCloseOnProceed, - onActionAppend, - onProceedAppend, + proceedButtonClickEventHandler, proceedButtonSx, + proceedButtonType, proceedColour, restProceedButtonProps, ], @@ -125,6 +178,11 @@ const ConfirmDialog = forwardRef< ), [cancelButtonElement, isLoadingAction, proceedButtonElement], ); + const contentElement = useMemo( + () => + typeof content === 'string' ? : content, + [content], + ); useImperativeHandle( ref, @@ -135,7 +193,7 @@ const ConfirmDialog = forwardRef< ); return ( - - - {typeof content === 'string' ? : content} - - {actionAreaElement} - + + {contentElement} + {actionAreaElement} + + ); }, ); diff --git a/striker-ui/types/ConfirmDialog.d.ts b/striker-ui/types/ConfirmDialog.d.ts index a9932182..3ec64882 100644 --- a/striker-ui/types/ConfirmDialog.d.ts +++ b/striker-ui/types/ConfirmDialog.d.ts @@ -1,11 +1,14 @@ type ConfirmDialogOptionalProps = { actionCancelText?: string; closeOnProceed?: boolean; + contentContainerProps?: import('../components/FlexBox').FlexBoxProps; dialogProps?: Partial; + formContent?: boolean; loadingAction?: boolean; onActionAppend?: ContainedButtonProps['onClick']; onProceedAppend?: ContainedButtonProps['onClick']; onCancelAppend?: ContainedButtonProps['onClick']; + onSubmitAppend?: import('react').FormEventHandler; openInitially?: boolean; proceedButtonProps?: ContainedButtonProps; proceedColour?: 'blue' | 'red';