From b012555c95612e5f7b41baaea8641329bdfbad99 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 5 May 2022 15:00:28 +0530
Subject: [PATCH] updated message dialog base

---
 .../MessageDialog/MessageDialogBase.tsx       | 29 +++++++++++++++++--
 src/components/MessageDialog/index.tsx        | 11 ++++---
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/components/MessageDialog/MessageDialogBase.tsx b/src/components/MessageDialog/MessageDialogBase.tsx
index 552898f64..a825d4e77 100644
--- a/src/components/MessageDialog/MessageDialogBase.tsx
+++ b/src/components/MessageDialog/MessageDialogBase.tsx
@@ -1,7 +1,9 @@
-import { Dialog } from '@mui/material';
+import { Dialog, DialogProps } from '@mui/material';
+import { FC } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-const MessageDialogBase = styled(Dialog)(({ theme }) => ({
+const StyledMessageDialog = styled(Dialog)(({ theme }) => ({
     '& .MuiPaper-root': {
         padding: '32px 32px 32px 28px',
         margin: '16px',
@@ -40,4 +42,27 @@ const MessageDialogBase = styled(Dialog)(({ theme }) => ({
     },
 }));
 
+interface MessageDialogBaseProps extends DialogProps {
+    staticBackDrop?: boolean;
+}
+
+const MessageDialogBase: FC<MessageDialogBaseProps> = ({
+    children,
+    staticBackDrop,
+    ...props
+}) => {
+    const handleClose: DialogProps['onClose'] = (_, reason) => {
+        if (staticBackDrop && reason === 'backdropClick') {
+            // no-op
+        } else {
+            props.onClose;
+        }
+    };
+    return (
+        <StyledMessageDialog onClose={handleClose} {...props}>
+            {children}
+        </StyledMessageDialog>
+    );
+};
+
 export default MessageDialogBase;
diff --git a/src/components/MessageDialog/index.tsx b/src/components/MessageDialog/index.tsx
index 74cd3e893..972a22a7e 100644
--- a/src/components/MessageDialog/index.tsx
+++ b/src/components/MessageDialog/index.tsx
@@ -53,15 +53,14 @@ export default function MessageDialog({
             open={props.show}
             maxWidth={props.size}
             fullWidth
-            onClose={!attributes.nonClosable && props.onHide}>
+            staticBackDrop={attributes.staticBackdrop}
+            onClose={attributes.nonClosable ? props.onHide : () => null}>
             {attributes.title && <DialogTitle>{attributes.title}</DialogTitle>}
             {(children || attributes?.content) && (
                 <DialogContent>
-                    {children || (
-                        <DialogContentText>
-                            {attributes.content}
-                        </DialogContentText>
-                    )}
+                    <DialogContentText>
+                        {children ?? attributes.content}
+                    </DialogContentText>
                 </DialogContent>
             )}
             {(attributes.close || attributes.proceed) && (