All files / src/components/DialogModal DialogModal.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
8x
8x
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
4x
4x
4x
1x
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogActions from '@material-ui/core/DialogActions';
import MuiDialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
 
const DialogTitle = withStyles(theme => ({
    root: {
        borderBottom: `1px solid ${theme.palette.divider}`,
        margin: 0,
        padding: theme.spacing.unit * 2
    },
    closeButton: {
        position: 'absolute',
        right: theme.spacing.unit,
        top: theme.spacing.unit,
        color: theme.palette.grey[500],
    },
}))(props => {
    const { children, classes, onClose } = props;
    return (
        <MuiDialogTitle disableTypography className={classes.root}>
            <Typography variant='h6'>{children}</Typography>
            <IconButton aria-label='Close' className={classes.closeButton} onClick={onClose}>
                <CloseIcon />
            </IconButton>
        </MuiDialogTitle>
    );
});
 
const DialogContent = withStyles(theme => ({
    root: {
        margin: 0,
        padding: theme.spacing.unit * 2
    },
}))(MuiDialogContent);
 
const DialogActions = withStyles(theme => ({
    root: {
        borderTop: `1px solid ${theme.palette.divider}`,
        margin: 0,
        padding: theme.spacing.unit,
    },
}))(MuiDialogActions);
 
const DialogModal = props => {
    const { isOpen, handleCloseEvent, modalTitle, modalContent, handleCancelEvent, modalCancelButtonText, handleOkEvent, modalOkButtonText, fullWidth, maxWidth, modalContentAlignment } = props;
    let contentAlign = 'left';
    if (modalContentAlignment) {
        contentAlign = modalContentAlignment;
    }
 
    return (
        <Dialog
            data-testid="Dialog-Box"
            open={isOpen}
            onClose={handleCloseEvent}
            aria-labelledby='alert-dialog-title'
            aria-describedby='alert-dialog-description'
            fullWidth={fullWidth}
            maxWidth={maxWidth}
        >
            <DialogTitle id='alert-dialog-title' onClose={handleCloseEvent}>{modalTitle}</DialogTitle>
            <DialogContent style={{ textAlign: contentAlign }}>
                <DialogContentText id='alert-dialog-description'>
                    {modalContent}
                </DialogContentText>
            </DialogContent>
 
            {
                (modalCancelButtonText && modalOkButtonText) && (
                    <DialogActions>
                        {
                            modalCancelButtonText && (
                                <Button onClick={handleCancelEvent} color='primary'>
                                    {modalCancelButtonText}
                                </Button>
                            )
                        }
 
                        {
                            modalOkButtonText && (
                                <Button onClick={handleOkEvent} color='primary' autoFocus>
                                    {modalOkButtonText}
                                </Button>
                            )
                        }
                    </DialogActions>
                )
            }
        </Dialog>
    );
};
 
export default DialogModal;