src/views-components/snackbar/snackbar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { connect } from "react-redux";
   7 import { RootState } from "~/store/store";
   8 import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
   9 import { Dispatch } from "redux";
  10 import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
  11 import IconButton from '@material-ui/core/IconButton';
  12 import SnackbarContent from '@material-ui/core/SnackbarContent';
  13 import WarningIcon from '@material-ui/icons/Warning';
  14 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
  15 import ErrorIcon from '@material-ui/icons/Error';
  16 import InfoIcon from '@material-ui/icons/Info';
  17 import CloseIcon from '@material-ui/icons/Close';
  18 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
  19 import { ArvadosTheme } from "~/common/custom-theme";
  20 import { amber, green } from "@material-ui/core/colors";
  21 import * as classNames from 'classnames';
  22
  23 const mapStateToProps = (state: RootState): SnackbarProps => ({
  24     anchorOrigin: { vertical: "bottom", horizontal: "right" },
  25     open: state.snackbar.open,
  26     message: <span>{state.snackbar.message}</span>,
  27     autoHideDuration: state.snackbar.hideDuration,
  28 });
  29
  30 const mapDispatchToProps = (dispatch: Dispatch): Pick<SnackbarProps, "onClose"> => ({
  31     onClose: (event: any, reason: string) => {
  32         if (reason !== "clickaway") {
  33             dispatch(snackbarActions.CLOSE_SNACKBAR());
  34         }
  35     }
  36 });
  37
  38 const ArvadosSnackbar = (props: any) => <MaterialSnackbar {...props}>
  39     <ArvadosSnackbarContent {...props}/>
  40 </MaterialSnackbar>;
  41
  42 type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
  43
  44 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  45     success: {
  46         backgroundColor: green[600],
  47     },
  48     error: {
  49         backgroundColor: theme.palette.error.dark,
  50     },
  51     info: {
  52         backgroundColor: theme.palette.primary.dark,
  53     },
  54     warning: {
  55         backgroundColor: amber[700],
  56     },
  57     icon: {
  58         fontSize: 20,
  59     },
  60     iconVariant: {
  61         opacity: 0.9,
  62         marginRight: theme.spacing.unit,
  63     },
  64     message: {
  65         display: 'flex',
  66         alignItems: 'center',
  67     },
  68 });
  69
  70 interface ArvadosSnackbarProps {
  71     kind: SnackbarKind;
  72 }
  73
  74 const ArvadosSnackbarContent = (props: SnackbarProps & ArvadosSnackbarProps & WithStyles<CssRules>) => {
  75     const { classes, className, message, onClose, kind, ...other } = props;
  76
  77     let Icon = InfoIcon;
  78     let cssClass;
  79     switch (kind) {
  80         case SnackbarKind.INFO:
  81             Icon = InfoIcon;
  82             cssClass = classes.info;
  83             break;
  84         case SnackbarKind.WARNING:
  85             Icon = WarningIcon;
  86             cssClass = classes.warning;
  87             break;
  88         case SnackbarKind.SUCCESS:
  89             Icon = CheckCircleIcon;
  90             cssClass = classes.success;
  91             break;
  92         case SnackbarKind.ERROR:
  93             Icon = ErrorIcon;
  94             cssClass = classes.error;
  95             break;
  96     }
  97
  98     return (
  99         <SnackbarContent
 100             className={classNames(cssClass, className)}
 101             aria-describedby="client-snackbar"
 102             message={
 103                 <span id="client-snackbar" className={classes.message}>
 104                     <Icon className={classNames(classes.icon, classes.iconVariant)}/>
 105                     {message}
 106                 </span>
 107             }
 108             action={
 109                 <IconButton
 110                     key="close"
 111                     aria-label="Close"
 112                     color="inherit"
 113                     onClick={e => {
 114                         if (onClose) {
 115                             onClose(e, '');
 116                         }
 117                     }}>
 118                     <CloseIcon className={classes.icon}/>
 119                 </IconButton>
 120             }
 121         />
 122     );
 123 };
 124
 125 export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
 126     withStyles(styles)(ArvadosSnackbar)
 127 );