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
|
import React from 'react';
import classNames from 'classnames';
import { Theme, withStyles } from '@material-ui/core/styles';
import amber from '@material-ui/core/colors/amber';
import green from '@material-ui/core/colors/green';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import ErrorIcon from '@material-ui/icons/Error';
import WarningIcon from '@material-ui/icons/Warning';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
// modified from https://material-ui.com/demos/snackbars/
const variantIcon = {
error: ErrorIcon,
warning: WarningIcon,
success: CheckCircleIcon
};
const styles = (theme: Theme) => ({
error: {
backgroundColor: theme.palette.error.dark,
},
warning: {
backgroundColor: amber[700],
},
success: {
backgroundColor: green[600],
},
icon: {
fontSize: 20,
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing.unit,
},
message: {
display: 'flex',
alignItems: 'center',
},
});
export type SnackbarVariant = 'error' | 'warning' | 'success';
type CustomSnackbarProps = {
classes: {
error: string,
warning: string,
success: string,
message: string,
icon: string,
iconVariant: string,
close: string
},
variant: SnackbarVariant,
className?: string,
open: boolean,
message: string,
onClose: (event: React.SyntheticEvent<{}>, reason?: string) => void
};
function CustomSnackbar(props: CustomSnackbarProps) {
const { classes, className, message, variant, open, onClose } = props;
const Icon = variantIcon[variant];
return (
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={open}
autoHideDuration={10000}
onClose={onClose}>
<SnackbarContent
className={classNames(classes[variant], className)}
aria-describedby="snackbar-content"
message={
<span id="snackbar-content" className={classes.message}>
<Icon className={classNames(classes.icon, classes.iconVariant)} />
{message}
</span>
}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={onClose}
>
<CloseIcon className={classes.icon} />
</IconButton>,
]}
/>
</Snackbar>
);
}
export default withStyles(styles)(CustomSnackbar);
|