85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import MaterialUISnackbar from '@material-ui/core/Snackbar';
|
|
import SnackbarContent from '@material-ui/core/SnackbarContent';
|
|
|
|
import { faTimes } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
const styles = (theme) => ({
|
|
success: {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastText
|
|
},
|
|
error: {
|
|
backgroundColor: theme.palette.error.dark,
|
|
color: theme.palette.error.contrastText
|
|
}
|
|
});
|
|
|
|
class Snackbar extends Component {
|
|
|
|
constructor(props){
|
|
super(props);
|
|
this.state = {
|
|
open: props.open
|
|
};
|
|
this.timeout = null;
|
|
}
|
|
|
|
componentDidMount(){
|
|
if(this.state.open){
|
|
this.autoHideDuration();
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(){
|
|
if(!this.state.open){
|
|
clearTimeout(this.timeout);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount(){
|
|
if(this.state.open){
|
|
clearTimeout(this.timeout);
|
|
}
|
|
}
|
|
|
|
onClose = () => {
|
|
this.setState({open: false});
|
|
}
|
|
|
|
autoHideDuration = () => {
|
|
this.timeout = setTimeout(() => {
|
|
this.onClose();
|
|
}, 5000);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<MaterialUISnackbar
|
|
anchorOrigin={{vertical: 'bottom', horizontal: 'left' }}
|
|
open={this.state.open}
|
|
key={this.props.key}
|
|
style={{left: '22px', bottom: '40px', width: '300px', zIndex: '100'}}
|
|
>
|
|
<SnackbarContent
|
|
style={{flexWrap: 'nowrap'}}
|
|
className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
|
|
action={
|
|
<IconButton onClick={this.onClose} style={{color: 'inherit'}}>
|
|
<FontAwesomeIcon icon={faTimes} size="xs"/>
|
|
</IconButton>
|
|
}
|
|
message={this.props.message}
|
|
/>
|
|
</MaterialUISnackbar>
|
|
);
|
|
};
|
|
}
|
|
|
|
|
|
export default withStyles(styles, {withTheme: true})(Snackbar);
|