All files / src/components SnackBar.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
// import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import classNames from 'classnames';
 
const styles = theme => ({
    error: {
        backgroundColor: theme.palette.error.dark,
        color: '#fff',
        fontSize: 14
    },
    success: {
        backgroundColor: '#43A047',
        color: '#fff',
        fontSize: 14
    },
    close: {
        padding: theme.spacing.unit / 2
    }
});
 
class SnackBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: this.props.open
        };
    }
 
    handleClose = (event, reason) => {
        this.setState({ open: false });
        if (this.props.closeSnackBar) {
            this.props.closeSnackBar();
        }
    };
 
    render() {
        const { classes, variant } = this.props;
        return (
            <div>
                <Snackbar
                    anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right'
                    }}
                    open={this.state.open}
                    autoHideDuration={5000} // close snackbar afer 1.5 seconds
                    onClose={this.handleClose}
                    ContentProps={{
                        classes: {
                            root: classNames(classes[variant])
                        },
                        'aria-describedby': 'message-id'
                    }}
                    message={<span id='message-id'>{this.props.message}</span>}
                    action={[
                        <IconButton
                            key='close'
                            aria-label='Close'
                            color='inherit'
                            className={classes.close}
                            onClick={this.handleClose}
                        >
                            <CloseIcon />
                        </IconButton>
                    ]}
                />
            </div>
        );
    }
}
 
SnackBar.propTypes = {
    classes: PropTypes.object.isRequired
};
 
export default withStyles(styles)(SnackBar);