Skip to content

Commit 377eeb8

Browse files
aabidsofi19aabidsofi19
authored
Merge pull request #527 from sudhanshutech/genric/modal
Genric or Custom Modal
2 parents 29fd2d0 + f022a2d commit 377eeb8

10 files changed

Lines changed: 169 additions & 54 deletions

File tree

‎src/custom/ChartDialog/ChartDialog.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11
import React from 'react';
2+
import { Dialog } from '../../base';
23
import { DialogActions } from '../../base/DialogActions';
34
import { DialogContent } from '../../base/DialogContent';
45
import { DialogContentText } from '../../base/DialogContentText';
5-
import { StyledDialog, StyledDialogTitle } from '../Dialog';
6+
import { StyledDialogTitle } from '../Dialog';
67

78
interface ChartDialogProps {
89
open: boolean;
910
content: React.ReactNode;
1011
title: string;
1112
actions?: React.ReactNode;
13+
onClose: () => void;
1214
}
1315

14-
function StyledChartDialog({ open, content, title, actions }: ChartDialogProps): JSX.Element {
16+
function StyledChartDialog({
17+
open,
18+
content,
19+
title,
20+
actions,
21+
onClose
22+
}: ChartDialogProps): JSX.Element {
1523
return (
16-
<StyledDialog fullWidth maxWidth="md" open={open}>
24+
<Dialog open={open} onClose={onClose}>
1725
<StyledDialogTitle>{title}</StyledDialogTitle>
1826
<DialogContent>
1927
<DialogContentText>{content}</DialogContentText>
2028
</DialogContent>
2129
<DialogActions>{actions}</DialogActions>
22-
</StyledDialog>
30+
</Dialog>
2331
);
2432
}
2533

‎src/custom/Dialog/CustomDialog.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Backdrop, type DialogProps } from '@mui/material';
2+
import { Dialog } from '../../base/Dialog';
3+
import { DialogTitle } from '../../base/DialogTitle';
4+
import StyledDialogActions from './StyledDialogActions';
5+
import StyledDialogContent from './StyledDialogContent';
6+
import { ButtonContainer, ContentContainer, HeaderModal, ModalWrapper } from './style';
7+
8+
export interface CustomDialogProps {
9+
open: boolean;
10+
fullScreen?: boolean;
11+
title?: string;
12+
leftHeaderIcon?: React.ReactNode;
13+
helpText?: string;
14+
helpArea?: React.ReactNode;
15+
actions?: React.ReactNode;
16+
hideActions?: boolean;
17+
styleContent?: React.CSSProperties;
18+
content: React.ReactNode;
19+
maxWidth?: DialogProps['maxWidth'];
20+
onClose: () => void;
21+
}
22+
23+
function CustomDialog({
24+
open,
25+
onClose,
26+
title,
27+
leftHeaderIcon,
28+
helpText,
29+
helpArea,
30+
actions,
31+
hideActions = false,
32+
content,
33+
maxWidth = 'xs',
34+
...props
35+
}: CustomDialogProps): JSX.Element {
36+
return (
37+
<Dialog
38+
sx={{
39+
'& .MuiDialog-paper': {
40+
borderRadius: '10px'
41+
}
42+
}}
43+
open={open}
44+
maxWidth={maxWidth}
45+
onClose={onClose}
46+
slots={{ backdrop: Backdrop }}
47+
slotProps={{
48+
backdrop: {
49+
timeout: 500
50+
}
51+
}}
52+
{...props}
53+
>
54+
<ModalWrapper>
55+
<HeaderModal>
56+
{leftHeaderIcon && (
57+
<div style={{ display: 'flex', alignItems: 'center' }}>{leftHeaderIcon}</div>
58+
)}
59+
{title && (
60+
<>
61+
<div style={{ display: 'flex', alignItems: 'center' }}>
62+
<DialogTitle>{title}</DialogTitle>
63+
</div>
64+
</>
65+
)}
66+
67+
<div style={{ display: 'flex', alignItems: 'center' }}>
68+
{helpText && <div>{helpArea}</div>}
69+
</div>
70+
</HeaderModal>
71+
<StyledDialogContent>
72+
<ContentContainer>{content}</ContentContainer>
73+
</StyledDialogContent>
74+
{!hideActions && (
75+
<StyledDialogActions>
76+
<ButtonContainer>{actions}</ButtonContainer>
77+
</StyledDialogActions>
78+
)}
79+
</ModalWrapper>
80+
</Dialog>
81+
);
82+
}
83+
84+
export default CustomDialog;

‎src/custom/Dialog/StyledDialog.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/custom/Dialog/StyledDialogActions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface StyledDialogActionsProps {
55
children: React.ReactNode;
66
}
77

8-
function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element {
8+
export function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element {
99
return <DialogActions {...props}>{children}</DialogActions>;
1010
}
1111

‎src/custom/Dialog/StyledDialogContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface StyledDialogContentProps {
55
children: React.ReactNode;
66
}
77

8-
function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element {
8+
export function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element {
99
return <DialogContent {...props}>{children}</DialogContent>;
1010
}
1111

‎src/custom/Dialog/StyledDialogTitle.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,16 @@ import { Typography } from '../../base/Typography';
44

55
interface StyledDialogTitleProps {
66
children: React.ReactNode;
7+
style?: React.CSSProperties;
78
}
89

9-
function StyledDialogTitle({ children, ...props }: StyledDialogTitleProps): JSX.Element {
10+
export function StyledDialogTitle({
11+
children,
12+
style,
13+
...props
14+
}: StyledDialogTitleProps): JSX.Element {
1015
return (
11-
<DialogTitle
12-
sx={{
13-
padding: 0,
14-
backgroundColor: '#00B39F',
15-
color: 'white',
16-
bottom: '2px',
17-
boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)'
18-
}}
19-
{...props}
20-
>
16+
<DialogTitle sx={style} {...props}>
2117
<Typography
2218
sx={{
2319
flexGrow: 1,

‎src/custom/Dialog/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { default as StyledDialog } from './StyledDialog';
1+
export { default as CustomDialog } from './CustomDialog';
22
export { default as StyledDialogActions } from './StyledDialogActions';
33
export { default as StyledDialogContent } from './StyledDialogContent';
44
export { default as StyledDialogTitle } from './StyledDialogTitle';

‎src/custom/Dialog/style.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { styled } from '@mui/material';
2+
import {
3+
BLACK,
4+
BUTTON_MODAL,
5+
BUTTON_MODAL_DARK,
6+
NOT_FOUND,
7+
SLIGHT_BLACK_2,
8+
SLIGHT_BLUE,
9+
WHITE
10+
} from '../../theme/colors/colors';
11+
12+
export const HeaderModal = styled('div')(({ theme }) => {
13+
const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
14+
const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
15+
16+
return {
17+
display: 'flex',
18+
justifyContent: 'space-between',
19+
padding: '1rem',
20+
boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
21+
background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
22+
filter:
23+
theme.palette.mode === 'light'
24+
? `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL}',endColorstr='${SLIGHT_BLUE}',GradientType=1)`
25+
: `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL_DARK}',GradientType=1)`
26+
};
27+
});
28+
29+
export const ModalWrapper = styled('div')(() => ({
30+
zIndex: '100',
31+
borderRadius: '5px'
32+
}));
33+
34+
export const ButtonContainer = styled('div')(({ theme }) => ({
35+
padding: '1rem 1.5rem',
36+
display: 'flex',
37+
justifyContent: 'flex-end',
38+
backgroundColor: theme.palette.mode === 'light' ? BUTTON_MODAL : BUTTON_MODAL_DARK,
39+
boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)'
40+
}));
41+
42+
export const ContentContainer = styled('div')(({ theme }) => ({
43+
padding: '2rem 1rem',
44+
backgroundColor: theme.palette.mode === 'light' ? WHITE : NOT_FOUND
45+
}));

‎src/custom/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ import {
55
CustomColumnVisibilityControlProps
66
} from './CustomColumnVisibilityControl/CustomColumnVisibilityControl';
77
import { CustomTooltip } from './CustomTooltip';
8+
import {
9+
CustomDialog,
10+
StyledDialogActions,
11+
StyledDialogContent,
12+
StyledDialogTitle
13+
} from './Dialog';
14+
import { CustomDialogProps } from './Dialog/CustomDialog';
815
import { EmptyState } from './EmptyState';
916
import {
1017
ErrorBoundary,
@@ -25,6 +32,7 @@ export { StyledSearchBar } from './StyledSearchBar';
2532
export {
2633
ConnectionChip,
2734
CustomColumnVisibilityControl,
35+
CustomDialog,
2836
CustomTooltip,
2937
EmptyState,
3038
ErrorBoundary,
@@ -33,6 +41,9 @@ export {
3341
PopperListener,
3442
ResponsiveDataTable,
3543
SearchBar,
44+
StyledDialogActions,
45+
StyledDialogContent,
46+
StyledDialogTitle,
3647
UniversalFilter,
3748
useNotificationHandler,
3849
useWindowDimensions,
@@ -42,8 +53,11 @@ export {
4253
export type {
4354
CustomColumn,
4455
CustomColumnVisibilityControlProps,
56+
CustomDialogProps,
4557
IPopperListener,
4658
ResponsiveDataTableProps,
4759
SearchBarProps,
4860
UniversalFilterProps
4961
};
62+
63+
export * from './Dialog';

‎src/theme/colors/colors.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export const NOT_FOUND = '#666666';
3535
export const YELLOW_SEA = '#F0A303';
3636
export const PINE_GREEN = '#008071';
3737
export const DARK_BLUE_GRAY = '#263238';
38+
export const BUTTON_MODAL = '#396679';
39+
export const BUTTON_MODAL_DARK = '#202020';
40+
export const SLIGHT_BLUE = '#548194';
41+
export const SLIGHT_BLACK_2 = '#23365f';
3842

3943
export const common = {
4044
black: BLACK,

0 commit comments

Comments
 (0)