Merge pull request #527 from sudhanshutech/genric/modal

Genric or Custom Modal

src/custom/ChartDialog/ChartDialog.tsx

@@ -1,25 +1,33 @@
 import React from 'react';
+import { Dialog } from '../../base';
 import { DialogActions } from '../../base/DialogActions';
 import { DialogContent } from '../../base/DialogContent';
 import { DialogContentText } from '../../base/DialogContentText';
-import { StyledDialog, StyledDialogTitle } from '../Dialog';
+import { StyledDialogTitle } from '../Dialog';
 
 interface ChartDialogProps {
   open: boolean;
   content: React.ReactNode;
   title: string;
   actions?: React.ReactNode;
+  onClose: () => void;
 }
 
-function StyledChartDialog({ open, content, title, actions }: ChartDialogProps): JSX.Element {
+function StyledChartDialog({
+  open,
+  content,
+  title,
+  actions,
+  onClose
+}: ChartDialogProps): JSX.Element {
   return (
-    <StyledDialog fullWidth maxWidth="md" open={open}>
+    <Dialog open={open} onClose={onClose}>
       <StyledDialogTitle>{title}</StyledDialogTitle>
       <DialogContent>
         <DialogContentText>{content}</DialogContentText>
       </DialogContent>
       <DialogActions>{actions}</DialogActions>
-    </StyledDialog>
+    </Dialog>
   );
 }
 

src/custom/Dialog/CustomDialog.tsx

@@ -0,0 +1,84 @@
+import { Backdrop, type DialogProps } from '@mui/material';
+import { Dialog } from '../../base/Dialog';
+import { DialogTitle } from '../../base/DialogTitle';
+import StyledDialogActions from './StyledDialogActions';
+import StyledDialogContent from './StyledDialogContent';
+import { ButtonContainer, ContentContainer, HeaderModal, ModalWrapper } from './style';
+
+export interface CustomDialogProps {
+  open: boolean;
+  fullScreen?: boolean;
+  title?: string;
+  leftHeaderIcon?: React.ReactNode;
+  helpText?: string;
+  helpArea?: React.ReactNode;
+  actions?: React.ReactNode;
+  hideActions?: boolean;
+  styleContent?: React.CSSProperties;
+  content: React.ReactNode;
+  maxWidth?: DialogProps['maxWidth'];
+  onClose: () => void;
+}
+
+function CustomDialog({
+  open,
+  onClose,
+  title,
+  leftHeaderIcon,
+  helpText,
+  helpArea,
+  actions,
+  hideActions = false,
+  content,
+  maxWidth = 'xs',
+  ...props
+}: CustomDialogProps): JSX.Element {
+  return (
+    <Dialog
+      sx={{
+        '& .MuiDialog-paper': {
+          borderRadius: '10px'
+        }
+      }}
+      open={open}
+      maxWidth={maxWidth}
+      onClose={onClose}
+      slots={{ backdrop: Backdrop }}
+      slotProps={{
+        backdrop: {
+          timeout: 500
+        }
+      }}
+      {...props}
+    >
+      <ModalWrapper>
+        <HeaderModal>
+          {leftHeaderIcon && (
+            <div style={{ display: 'flex', alignItems: 'center' }}>{leftHeaderIcon}</div>
+          )}
+          {title && (
+            <>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <DialogTitle>{title}</DialogTitle>
+              </div>
+            </>
+          )}
+
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            {helpText && <div>{helpArea}</div>}
+          </div>
+        </HeaderModal>
+        <StyledDialogContent>
+          <ContentContainer>{content}</ContentContainer>
+        </StyledDialogContent>
+        {!hideActions && (
+          <StyledDialogActions>
+            <ButtonContainer>{actions}</ButtonContainer>
+          </StyledDialogActions>
+        )}
+      </ModalWrapper>
+    </Dialog>
+  );
+}
+
+export default CustomDialog;

src/custom/Dialog/StyledDialogActions.tsx

@@ -5,7 +5,7 @@ interface StyledDialogActionsProps {
   children: React.ReactNode;
 }
 
-function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element {
+export function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element {
   return <DialogActions {...props}>{children}</DialogActions>;
 }
 

src/custom/Dialog/StyledDialogContent.tsx

@@ -5,7 +5,7 @@ interface StyledDialogContentProps {
   children: React.ReactNode;
 }
 
-function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element {
+export function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element {
   return <DialogContent {...props}>{children}</DialogContent>;
 }
 

src/custom/Dialog/StyledDialogTitle.tsx

@@ -4,20 +4,16 @@ import { Typography } from '../../base/Typography';
 
 interface StyledDialogTitleProps {
   children: React.ReactNode;
+  style?: React.CSSProperties;
 }
 
-function StyledDialogTitle({ children, ...props }: StyledDialogTitleProps): JSX.Element {
+export function StyledDialogTitle({
+  children,
+  style,
+  ...props
+}: StyledDialogTitleProps): JSX.Element {
   return (
-    <DialogTitle
-      sx={{
-        padding: 0,
-        backgroundColor: '#00B39F',
-        color: 'white',
-        bottom: '2px',
-        boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)'
-      }}
-      {...props}
-    >
+    <DialogTitle sx={style} {...props}>
       <Typography
         sx={{
           flexGrow: 1,

src/custom/Dialog/index.tsx

@@ -1,4 +1,4 @@
-export { default as StyledDialog } from './StyledDialog';
+export { default as CustomDialog } from './CustomDialog';
 export { default as StyledDialogActions } from './StyledDialogActions';
 export { default as StyledDialogContent } from './StyledDialogContent';
 export { default as StyledDialogTitle } from './StyledDialogTitle';

src/custom/Dialog/style.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@mui/material';
+import {
+  BLACK,
+  BUTTON_MODAL,
+  BUTTON_MODAL_DARK,
+  NOT_FOUND,
+  SLIGHT_BLACK_2,
+  SLIGHT_BLUE,
+  WHITE
+} from '../../theme/colors/colors';
+
+export const HeaderModal = styled('div')(({ theme }) => {
+  const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
+  const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
+
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '1rem',
+    boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
+    background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
+    filter:
+      theme.palette.mode === 'light'
+        ? `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL}',endColorstr='${SLIGHT_BLUE}',GradientType=1)`
+        : `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL_DARK}',GradientType=1)`
+  };
+});
+
+export const ModalWrapper = styled('div')(() => ({
+  zIndex: '100',
+  borderRadius: '5px'
+}));
+
+export const ButtonContainer = styled('div')(({ theme }) => ({
+  padding: '1rem 1.5rem',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  backgroundColor: theme.palette.mode === 'light' ? BUTTON_MODAL : BUTTON_MODAL_DARK,
+  boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)'
+}));
+
+export const ContentContainer = styled('div')(({ theme }) => ({
+  padding: '2rem 1rem',
+  backgroundColor: theme.palette.mode === 'light' ? WHITE : NOT_FOUND
+}));

src/custom/index.tsx

@@ -5,6 +5,13 @@ import {
   CustomColumnVisibilityControlProps
 } from './CustomColumnVisibilityControl/CustomColumnVisibilityControl';
 import { CustomTooltip } from './CustomTooltip';
+import {
+  CustomDialog,
+  StyledDialogActions,
+  StyledDialogContent,
+  StyledDialogTitle
+} from './Dialog';
+import { CustomDialogProps } from './Dialog/CustomDialog';
 import { EmptyState } from './EmptyState';
 import {
   ErrorBoundary,
@@ -25,6 +32,7 @@ export { StyledSearchBar } from './StyledSearchBar';
 export {
   ConnectionChip,
   CustomColumnVisibilityControl,
+  CustomDialog,
   CustomTooltip,
   EmptyState,
   ErrorBoundary,
@@ -33,6 +41,9 @@ export {
   PopperListener,
   ResponsiveDataTable,
   SearchBar,
+  StyledDialogActions,
+  StyledDialogContent,
+  StyledDialogTitle,
   UniversalFilter,
   useNotificationHandler,
   useWindowDimensions,
@@ -42,8 +53,11 @@ export {
 export type {
   CustomColumn,
   CustomColumnVisibilityControlProps,
+  CustomDialogProps,
   IPopperListener,
   ResponsiveDataTableProps,
   SearchBarProps,
   UniversalFilterProps
 };
+
+export * from './Dialog';

src/theme/colors/colors.ts

@@ -35,6 +35,10 @@ export const NOT_FOUND = '#666666';
 export const YELLOW_SEA = '#F0A303';
 export const PINE_GREEN = '#008071';
 export const DARK_BLUE_GRAY = '#263238';
+export const BUTTON_MODAL = '#396679';
+export const BUTTON_MODAL_DARK = '#202020';
+export const SLIGHT_BLUE = '#548194';
+export const SLIGHT_BLACK_2 = '#23365f';
 
 export const common = {
   black: BLACK,