aboutsummaryrefslogtreecommitdiff
path: root/src/Snackbar.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/Snackbar.js')
-rw-r--r--src/Snackbar.js78
1 files changed, 78 insertions, 0 deletions
diff --git a/src/Snackbar.js b/src/Snackbar.js
new file mode 100644
index 0000000..f17863c
--- /dev/null
+++ b/src/Snackbar.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import amber from '@material-ui/core/colors/amber';
+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 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,
+};
+
+const styles = theme => ({
+ error: {
+ backgroundColor: theme.palette.error.dark,
+ },
+ warning: {
+ backgroundColor: amber[700],
+ },
+ icon: {
+ fontSize: 20,
+ },
+ iconVariant: {
+ opacity: 0.9,
+ marginRight: theme.spacing.unit,
+ },
+ message: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+});
+
+function CustomSnackbar(props) {
+ const { classes, className, message, variant, open, onClose, ...other } = 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>,
+ ]}
+ {...other}
+ />
+ </Snackbar>
+ );
+}
+
+export default withStyles(styles)(CustomSnackbar);