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 export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
  87     (props: SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>) => {
  88         const { classes } = props;
  89
  90         const variants = {
  91             [SnackbarKind.INFO]: [InfoIcon, classes.info],
  92             [SnackbarKind.WARNING]: [WarningIcon, classes.warning],
  93             [SnackbarKind.SUCCESS]: [CheckCircleIcon, classes.success],
  94             [SnackbarKind.ERROR]: [ErrorIcon, classes.error]
  95         };
  96
  97         const [Icon, cssClass] = variants[props.kind];
  98
  99         return (
 100             <MaterialSnackbar
 101                 open={props.open}
 102                 message={props.message}
 103                 onClose={props.onClose}
 104                 onExited={props.onExited}
 105                 anchorOrigin={props.anchorOrigin}
 106                 autoHideDuration={props.autoHideDuration}>
 107                 <SnackbarContent
 108                     className={classNames(cssClass)}
 109                     aria-describedby="client-snackbar"
 110                     message={
 111                         <span id="client-snackbar" className={classes.message}>
 112                             <Icon className={classNames(classes.icon, classes.iconVariant)}/>
 113                             {props.message}
 114                         </span>
 115                     }
 116                     action={
 117                         <IconButton
 118                             key="close"
 119                             aria-label="Close"
 120                             color="inherit"
 121                             onClick={e => props.onClose && props.onClose(e, '')}>
 122                             <CloseIcon className={classes.icon}/>
 123                         </IconButton>
 124                     }
 125                 />
 126             </MaterialSnackbar>
 127         );
 128     }
 129 ));