Rename progressFn to api actions, add colors to snackbar

[arvados-workbench2.git] / src / views-components / snackbar / snackbar.tsx

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index 535777e1bd4fd0765f1ac88914e592165f969258..341e803cf66cbdcbaf1634d72b9a93f2d9300ef8 100644 (file)
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -7,13 +7,24 @@ import { connect } from "react-redux";
 import { RootState } from "~/store/store";
 import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
 import { Dispatch } from "redux";
-import { snackbarActions } from "~/store/snackbar/snackbar-actions";
+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 => ({
-    anchorOrigin: { vertical: "bottom", horizontal: "center" },
+    anchorOrigin: { vertical: "bottom", horizontal: "right" },
     open: state.snackbar.open,
     message: <span>{state.snackbar.message}</span>,
-    autoHideDuration: state.snackbar.hideDuration
+    autoHideDuration: state.snackbar.hideDuration,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): Pick<SnackbarProps, "onClose"> => ({
@@ -24,4 +35,93 @@ const mapDispatchToProps = (dispatch: Dispatch): Pick<SnackbarProps, "onClose">
     }
 });
 
-export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(MaterialSnackbar);
+const ArvadosSnackbar = (props: any) => <MaterialSnackbar {...props}>
+    <ArvadosSnackbarContent {...props}/>
+</MaterialSnackbar>;
+
+type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
+
+const styles: StyleRulesCallback<CssRules> = (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<CssRules>) => {
+    const { classes, className, message, onClose, kind, ...other } = props;
+
+    let Icon = InfoIcon;
+    let cssClass;
+    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 (
+        <SnackbarContent
+            className={classNames(cssClass, className)}
+            aria-describedby="client-snackbar"
+            message={
+                <span id="client-snackbar" className={classes.message}>
+                    <Icon className={classNames(classes.icon, classes.iconVariant)}/>
+                    {message}
+                </span>
+            }
+            action={
+                <IconButton
+                    key="close"
+                    aria-label="Close"
+                    color="inherit"
+                    onClick={e => {
+                        if (onClose) {
+                            onClose(e, '');
+                        }
+                    }}>
+                    <CloseIcon className={classes.icon}/>
+                </IconButton>
+            }
+        />
+    );
+};
+
+export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
+    withStyles(styles)(ArvadosSnackbar)
+);