+type SnackbarProps = SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>;
+
+export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
+ (props: SnackbarProps) => {
+ const { classes } = props;
+
+ const variants = {
+ [SnackbarKind.INFO]: [InfoIcon, classes.info],
+ [SnackbarKind.WARNING]: [WarningIcon, classes.warning],
+ [SnackbarKind.SUCCESS]: [CheckCircleIcon, classes.success],
+ [SnackbarKind.ERROR]: [ErrorIcon, classes.error]
+ };
+
+ return (
+ <MaterialSnackbar
+ open={props.open}
+ onClose={props.onClose}
+ onExited={props.onExited}
+ anchorOrigin={props.anchorOrigin}
+ autoHideDuration={props.autoHideDuration}>
+ <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)}
+ />
+ })
+ }
+ </div>
+ </MaterialSnackbar>
+ );
+ }
+));
+
+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, '', index)}>
+ <CloseIcon className={classes.icon} />
+ </IconButton>
+ ];
+ if (props.link) {
+ actions.splice(0, 0,
+ <Button key="goTo"
+ aria-label="goTo"
+ size="small"
+ color="inherit"
+ className={classes.linkButton}
+ onClick={() => onClick(props.link)}>
+ <span data-cy='snackbar-goto-action'>Go To</span>
+ </Button>
+ );
+ }
+ return actions;
+};