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
105
106
107
108
109
110
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close';
import classNames from 'classnames';
import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import { Snackbar, IconButton, SnackbarContent } from '@material-ui/core';
const styles = theme => ({
close: {
width: theme.spacing(4),
},
});
const variantIcon = {
success: CheckCircleOutlinedIcon,
warning: ReportProblemOutlinedIcon,
error: ErrorOutlineOutlinedIcon,
info: InfoOutlinedIcon,
};
const styles1 = theme => ({
success: {
backgroundColor: '#b6f8c4',
},
error: {
backgroundColor: '#faabab',
},
info: {
backgroundColor: '#b2e7f5',
},
warning: {
backgroundColor: '#f5ea9f',
},
icon: {
fontSize: 20,
color: 'black'
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing(1),
},
message: {
display: 'flex',
alignItems: 'center',
color: 'black'
},
});
class Notification extends React.Component {
handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.props.close('crudTableDemo');
};
render() {
const { classes, message, variant } = this.props;
const Icon = variantIcon[variant];
return (
<Snackbar
open={message !== ''}
autoHideDuration={3000}
onClose={() => this.handleClose()}
ContentProps={{
'aria-describedby': 'message-id',
}}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<SnackbarContent
className={classNames(classes[variant])}
message={(
<span id="client-snackbar" 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={() => this.handleClose()}
>
<CloseIcon className={classes.icon}/>
</IconButton>,
]}
/>
</Snackbar>
);
}
}
Notification.propTypes = {
classes: PropTypes.object.isRequired,
close: PropTypes.func.isRequired,
message: PropTypes.string.isRequired,
};
export default withStyles(styles1)(Notification);
|
