Snackbar via notistack

Snackbar.component.jsx

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { SnackbarProvider, withSnackbar } from 'notistack';

import CheckIcon from 'mdi-material-ui/Check';
import ErrorIcon from '@material-ui/icons/Error';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import WarningIcon from '@material-ui/icons/Warning';

const styles = theme => {
  return {
    // inotistack - snackbar configuration
    variantSuccess: { backgroundColor: theme.status.accepted },
    variantError: { backgroundColor: theme.status.rejected },
    variantWarning: { backgroundColor: theme.status.flagged },
    variantInfo: { backgroundColor: theme.status.pending },
  };
};

const setupVariant = (enqueueSnackbar, variant, defaultOptions = {}) => (
  message,
  submessage = null,
  options = {}
) => {
  if (!submessage) return enqueueSnackbar(message, { variant, ...options });
  return enqueueSnackbar(
    <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
      <div style={{ fontWeight: 'bold', marginBottom: '0.3em' }}>{message}</div>
      <div style={{ fontWeight: 'normal' }}>{submessage}</div>
    </div>,
    { variant, ...defaultOptions, ...options }
  );
};

const GlobalSnackbar = withSnackbar(({ enqueueSnackbar, closeSnackbar }) => {
  if (!window.snackbar) {
    var action = key => (
      <Button
        onClick={() => closeSnackbar(key)}
        style={{
          color: '#fff',
          fontSize: '2em',
          marginRight: '-0.5em',
          padding: 0,
          minWidth: '2em',
          minHeight: '2em',
        }}>
        &times;
      </Button>
    );
    // enable global interface for showing snackbar items.
    window.snackbar = {
      success: setupVariant(enqueueSnackbar, 'success', { action }),
      error: setupVariant(enqueueSnackbar, 'error', { action }),
      warning: setupVariant(enqueueSnackbar, 'warning', { action }),
      info: setupVariant(enqueueSnackbar, 'info', { action }),
      sticky: {
        success: setupVariant(enqueueSnackbar, 'success', { action, persist: true }),
        error: setupVariant(enqueueSnackbar, 'error', { action, persist: true }),
        warning: setupVariant(enqueueSnackbar, 'warning', { action, persist: true }),
        info: setupVariant(enqueueSnackbar, 'info', { action, persist: true }),
      },
    };
  }
  return null;
});

export const Snackbar = ({ children, classes }) => {
  const { variantSuccess, variantError, variantWarning, variantInfo } = classes;
  return (
    <SnackbarProvider
      maxSnack={4}
      dense
      preventDuplicate
      classes={{ variantSuccess, variantError, variantWarning, variantInfo }}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
      iconVariant={{
        success: <CheckIcon style={{ marginRight: '0.6em' }} />,
        error: <ErrorIcon style={{ marginRight: '0.6em' }} />,
        warning: <WarningIcon style={{ marginRight: '0.6em' }} />,
        info: <ThumbUpIcon style={{ marginRight: '0.6em' }} />,
      }}>
      <GlobalSnackbar />
      {children}
    </SnackbarProvider>
  );
};

export default withStyles(styles)(Snackbar);