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, { SnackbarOrigin } 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 interface SnackbarDataProps {
  24     anchorOrigin?: SnackbarOrigin;
  25     autoHideDuration?: number;
  26     open: boolean;
  27     message?: React.ReactElement<any>;
  28     kind: SnackbarKind;
  29 }
  30
  31 interface SnackbarEventProps {
  32     onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
  33     onExited: () => void;
  34 }
  35
  36 const mapStateToProps = (state: RootState): SnackbarDataProps => {
  37     const messages = state.snackbar.messages;
  38     return {
  39         anchorOrigin: { vertical: "bottom", horizontal: "right" },
  40         open: state.snackbar.open,
  41         message: <span>{messages.length > 0 ? messages[0].message : ""}</span>,
  42         autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0,
  43         kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO
  44     };
  45 };
  46
  47 const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
  48     onClose: (event: any, reason: string) => {
  49         if (reason !== "clickaway") {
  50             dispatch(snackbarActions.CLOSE_SNACKBAR());
  51         }
  52     },
  53     onExited: () => {
  54         dispatch(snackbarActions.SHIFT_MESSAGES());
  55     }
  56 });
  57
  58 type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
  59
  60 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  61     success: {
  62         backgroundColor: green[600]
  63     },
  64     error: {
  65         backgroundColor: theme.palette.error.dark
  66     },
  67     info: {
  68         backgroundColor: theme.palette.primary.dark
  69     },
  70     warning: {
  71         backgroundColor: amber[700]
  72     },
  73     icon: {
  74         fontSize: 20
  75     },
  76     iconVariant: {
  77         opacity: 0.9,
  78         marginRight: theme.spacing.unit
  79     },
  80     message: {
  81         display: 'flex',
  82         alignItems: 'center'
  83     },
  84 });
  85
  86 const ArvadosSnackbar = (props: SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>) => {
  87     const { classes, message, onClose, kind } = props;
  88
  89     const variants = {
  90         [SnackbarKind.INFO]: [InfoIcon, classes.info],
  91         [SnackbarKind.WARNING]: [WarningIcon, classes.warning],
  92         [SnackbarKind.SUCCESS]: [CheckCircleIcon, classes.success],
  93         [SnackbarKind.ERROR]: [ErrorIcon, classes.error]
  94     };
  95
  96     const [Icon, cssClass] = variants[kind];
  97
  98     return (
  99         <MaterialSnackbar
 100             open={props.open}
 101             message={props.message}
 102             onClose={props.onClose}
 103             anchorOrigin={props.anchorOrigin}
 104             autoHideDuration={props.autoHideDuration}>
 105             <SnackbarContent
 106                 className={classNames(cssClass)}
 107                 aria-describedby="client-snackbar"
 108                 message={
 109                     <span id="client-snackbar" className={classes.message}>
 110                         <Icon className={classNames(classes.icon, classes.iconVariant)}/>
 111                         {message}
 112                     </span>
 113                 }
 114                 action={
 115                     <IconButton
 116                         key="close"
 117                         aria-label="Close"
 118                         color="inherit"
 119                         onClick={e => onClose && onClose(e, '')}>
 120                         <CloseIcon className={classes.icon}/>
 121                     </IconButton>
 122                 }
 123             />
 124         </MaterialSnackbar>
 125     );
 126 };
 127
 128 export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(ArvadosSnackbar));