import { RootState } from "store/store";
import { Button, IconButton, StyleRulesCallback, WithStyles, withStyles, SnackbarContent } from '@material-ui/core';
import MaterialSnackbar, { SnackbarOrigin } from "@material-ui/core/Snackbar";
-import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
+import { snackbarActions, SnackbarKind, SnackbarMessage } from "store/snackbar/snackbar-actions";
import { navigateTo } from 'store/navigation/navigation-action';
import WarningIcon from '@material-ui/icons/Warning';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
anchorOrigin?: SnackbarOrigin;
autoHideDuration?: number;
open: boolean;
- message?: React.ReactElement<any>;
- kind: SnackbarKind;
- link?: string;
+ messages: SnackbarMessage[];
}
interface SnackbarEventProps {
- onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
+ onClose?: (event: React.SyntheticEvent<any>, reason: string, message?: string) => void;
onExited: () => void;
onClick: (uuid: string) => void;
}
return {
anchorOrigin: { vertical: "bottom", horizontal: "right" },
open: state.snackbar.open,
- message: <span>{messages.length > 0 ? messages[0].message : ""}</span>,
- autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0,
- kind: messages.length > 0 ? messages[0].kind : SnackbarKind.INFO,
- link: messages.length > 0 ? messages[0].link : ''
+ messages,
+ autoHideDuration: messages.length > 0 ? messages[0].hideDuration : 0
};
};
const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
- onClose: (event: any, reason: string) => {
+ onClose: (event: any, reason: string, id: undefined) => {
if (reason !== "clickaway") {
- dispatch(snackbarActions.CLOSE_SNACKBAR());
+ dispatch(snackbarActions.CLOSE_SNACKBAR(id));
}
},
onExited: () => {
}
});
-type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message" | "linkButton";
+type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message" | "linkButton" | "snackbarContent";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
success: {
},
linkButton: {
fontWeight: 'bolder'
+ },
+ snackbarContent: {
+ marginBottom: '1rem'
}
});
[SnackbarKind.ERROR]: [ErrorIcon, classes.error]
};
- const [Icon, cssClass] = variants[props.kind];
-
-
-
return (
<MaterialSnackbar
open={props.open}
- message={props.message}
onClose={props.onClose}
onExited={props.onExited}
anchorOrigin={props.anchorOrigin}
autoHideDuration={props.autoHideDuration}>
- <div data-cy="snackbar"><SnackbarContent
- className={classNames(cssClass)}
- aria-describedby="client-snackbar"
- message={
- <span id="client-snackbar" className={classes.message}>
- <Icon className={classNames(classes.icon, classes.iconVariant)} />
- {props.message}
- </span>
+ <div data-cy="snackbar">
+ {
+ props.messages.map((message, index) => {
+ const [Icon, cssClass] = variants[message.kind];
+
+ return <SnackbarContent
+ key={`${index}-${message.message}`}
+ className={classNames(cssClass, classes.snackbarContent)}
+ aria-describedby="client-snackbar"
+ message={
+ <span id="client-snackbar" className={classes.message}>
+ <Icon className={classNames(classes.icon, classes.iconVariant)} />
+ {message.message}
+ </span>
+ }
+ action={actions(message, props.onClick, props.onClose, classes, index, props.autoHideDuration)}
+ />
+ })
}
- action={actions(props)}
- /></div>
+ </div>
</MaterialSnackbar>
);
}
));
-const actions = (props: SnackbarProps) => {
- const { link, onClose, onClick, classes } = props;
+const actions = (props: SnackbarMessage, onClick, onClose, classes, index, autoHideDuration) => {
+ if (onClose && autoHideDuration) {
+ setTimeout(onClose, autoHideDuration);
+ }
+
const actions = [
<IconButton
key="close"
aria-label="Close"
color="inherit"
- onClick={e => onClose && onClose(e, '')}>
+ onClick={e => onClose && onClose(e, '', index)}>
<CloseIcon className={classes.icon} />
</IconButton>
];
- if (link) {
+ if (props.link) {
actions.splice(0, 0,
<Button key="goTo"
aria-label="goTo"
size="small"
color="inherit"
className={classes.linkButton}
- onClick={() => onClick(link)}>
+ onClick={() => onClick(props.link)}>
<span data-cy='snackbar-goto-action'>Go To</span>
</Button>
);