// Copyright (C) The Arvados Authors. All rights reserved.
//
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
import { connect } from "react-redux";
import { RootState } from "~/store/store";
import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
import { Dispatch } from "redux";
import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
import IconButton from '@material-ui/core/IconButton';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import WarningIcon from '@material-ui/icons/Warning';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import ErrorIcon from '@material-ui/icons/Error';
import InfoIcon from '@material-ui/icons/Info';
import CloseIcon from '@material-ui/icons/Close';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from "~/common/custom-theme";
import { amber, green } from "@material-ui/core/colors";
import * as classNames from 'classnames';
const mapStateToProps = (state: RootState): SnackbarProps & ArvadosSnackbarProps => {
const messages = state.snackbar.messages;
return {
anchorOrigin: { vertical: "bottom", horizontal: "right" },
open: state.snackbar.open,
message: {messages.length > 0 ? messages[0].message : ""},
autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0,
kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO
};
};
const mapDispatchToProps = (dispatch: Dispatch) => ({
onClose: (event: any, reason: string) => {
if (reason !== "clickaway") {
dispatch(snackbarActions.CLOSE_SNACKBAR());
}
},
onExited: () => {
dispatch(snackbarActions.SHIFT_MESSAGES());
}
});
const ArvadosSnackbar = (props: any) =>
;
type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({
success: {
backgroundColor: green[600]
},
error: {
backgroundColor: theme.palette.error.dark
},
info: {
backgroundColor: theme.palette.primary.dark
},
warning: {
backgroundColor: amber[700]
},
icon: {
fontSize: 20
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing.unit
},
message: {
display: 'flex',
alignItems: 'center'
},
});
interface ArvadosSnackbarProps {
kind: SnackbarKind;
}
const ArvadosSnackbarContent = (props: SnackbarProps & ArvadosSnackbarProps & WithStyles) => {
const { classes, className, message, onClose, kind } = props;
let Icon = InfoIcon;
let cssClass = classes.info;
switch (kind) {
case SnackbarKind.INFO:
Icon = InfoIcon;
cssClass = classes.info;
break;
case SnackbarKind.WARNING:
Icon = WarningIcon;
cssClass = classes.warning;
break;
case SnackbarKind.SUCCESS:
Icon = CheckCircleIcon;
cssClass = classes.success;
break;
case SnackbarKind.ERROR:
Icon = ErrorIcon;
cssClass = classes.error;
break;
}
return (
{message}
}
action={
{
if (onClose) {
onClose(e, '');
}
}}>
}
/>
);
};
export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
withStyles(styles)(ArvadosSnackbar)
);