-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
/
CustomizedDialog.tsx
104 lines (94 loc) · 3.14 KB
/
CustomizedDialog.tsx
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
102
103
104
import React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
margin: 0,
padding: theme.spacing(2),
},
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
content: {
padding: theme.spacing(2),
},
actions: {
margin: 0,
padding: theme.spacing(1),
},
}),
);
interface DialogTitleProps {
children: React.ReactNode;
handleClose?(): void;
}
function DialogTitle(props: DialogTitleProps) {
const classes = useStyles();
return (
<MuiDialogTitle disableTypography className={classes.root}>
<Typography variant="h6">{props.children}</Typography>
{props.handleClose && (
<IconButton aria-label="Close" className={classes.closeButton} onClick={props.handleClose}>
<CloseIcon />
</IconButton>
)}
</MuiDialogTitle>
);
}
DialogTitle.propTypes = {
children: PropTypes.node.isRequired,
handleClose: PropTypes.func,
} as any;
function CustomizedDialogDemo() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
function handleClickOpen() {
setOpen(true);
}
function handleClose() {
setOpen(false);
}
return (
<div>
<Button variant="outlined" color="secondary" onClick={handleClickOpen}>
Open dialog
</Button>
<Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
<DialogTitle>Modal title</DialogTitle>
<DialogContent className={classes.content} dividers>
<Typography gutterBottom>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</Typography>
<Typography gutterBottom>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</Typography>
<Typography gutterBottom>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</Typography>
</DialogContent>
<DialogActions className={classes.actions}>
<Button onClick={handleClose} color="primary">
Save changes
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default CustomizedDialogDemo;