[docs] Add Snackbars TypeScript Demos

docs/src/pages/demos/snackbars/CustomizedSnackbars.tsx

@@ -0,0 +1,162 @@
+import React, { SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Button from '@material-ui/core/Button';
+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 green from '@material-ui/core/colors/green';
+import amber from '@material-ui/core/colors/amber';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import WarningIcon from '@material-ui/icons/Warning';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+const variantIcon = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon,
+};
+
+const useStyles1 = makeStyles((theme: Theme) => ({
+  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(1),
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+interface Props {
+  className?: string;
+  message?: string;
+  onClose?: () => void;
+  variant: keyof typeof variantIcon;
+}
+
+function MySnackbarContentWrapper(props: Props) {
+  const classes = useStyles1();
+  const { className, message, onClose, variant, ...other } = props;
+  const Icon = variantIcon[variant];
+
+  return (
+    <SnackbarContent
+      className={clsx(classes[variant], className)}
+      aria-describedby="client-snackbar"
+      message={
+        <span id="client-snackbar" className={classes.message}>
+          <Icon className={clsx(classes.icon, classes.iconVariant)} />
+          {message}
+        </span>
+      }
+      action={[
+        <IconButton
+          edge="end"
+          key="close"
+          aria-label="Close"
+          color="inherit"
+          className={classes.close}
+          onClick={onClose}
+        >
+          <CloseIcon className={classes.icon} />
+        </IconButton>,
+      ]}
+      {...other}
+    />
+  );
+}
+
+MySnackbarContentWrapper.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.node,
+  onClose: PropTypes.func,
+  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
+};
+
+const useStyles2 = makeStyles((theme: Theme) => ({
+  margin: {
+    margin: theme.spacing(1),
+  },
+}));
+
+function CustomizedSnackbars() {
+  const classes = useStyles2();
+  const [open, setOpen] = React.useState(false);
+
+  function handleClick() {
+    setOpen(true);
+  }
+
+  function handleClose(event?: SyntheticEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  }
+
+  return (
+    <div>
+      <Button className={classes.margin} onClick={handleClick}>
+        Open success snackbar
+      </Button>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+      >
+        <MySnackbarContentWrapper
+          onClose={handleClose}
+          variant="success"
+          message="This is a success message!"
+        />
+      </Snackbar>
+      <MySnackbarContentWrapper
+        variant="error"
+        className={classes.margin}
+        message="This is an error message!"
+      />
+      <MySnackbarContentWrapper
+        variant="warning"
+        className={classes.margin}
+        message="This is a warning message!"
+      />
+      <MySnackbarContentWrapper
+        variant="info"
+        className={classes.margin}
+        message="This is an information message!"
+      />
+      <MySnackbarContentWrapper
+        variant="success"
+        className={classes.margin}
+        message="This is a success message!"
+      />
+    </div>
+  );
+}
+
+export default CustomizedSnackbars;

docs/src/pages/demos/snackbars/DirectionSnackbar.js

@@ -20,10 +20,13 @@ function TransitionDown(props) {
 }
 
 class DirectionSnackbar extends React.Component {
-  state = {
-    open: false,
-    Transition: null,
-  };
+  constructor() {
+    super();
+
+    this.state = {
+      open: false,
+    };
+  }
 
   handleClick = Transition => () => {
     this.setState({ open: true, Transition });

docs/src/pages/demos/snackbars/DirectionSnackbar.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Slide from '@material-ui/core/Slide';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+
+function TransitionLeft(props: TransitionProps) {
+  return <Slide {...props} direction="left" />;
+}
+
+function TransitionUp(props: TransitionProps) {
+  return <Slide {...props} direction="up" />;
+}
+
+function TransitionRight(props: TransitionProps) {
+  return <Slide {...props} direction="right" />;
+}
+
+function TransitionDown(props: TransitionProps) {
+  return <Slide {...props} direction="down" />;
+}
+
+interface State {
+  open: boolean;
+  Transition?: React.ComponentType<TransitionProps>;
+}
+
+class DirectionSnackbar extends React.Component<void, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      open: false,
+    };
+  }
+
+  handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
+    this.setState({ open: true, Transition });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.handleClick(TransitionLeft)}>Right</Button>
+        <Button onClick={this.handleClick(TransitionUp)}>Up</Button>
+        <Button onClick={this.handleClick(TransitionRight)}>Left</Button>
+        <Button onClick={this.handleClick(TransitionDown)}>Down</Button>
+        <Snackbar
+          open={this.state.open}
+          onClose={this.handleClose}
+          TransitionComponent={this.state.Transition}
+          ContentProps={{
+            'aria-describedby': 'message-id',
+          }}
+          message={<span id="message-id">I love snacks</span>}
+        />
+      </div>
+    );
+  }
+}
+
+export default DirectionSnackbar;

docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import Snackbar from '@material-ui/core/Snackbar';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  appFrame: {
+    width: 360,
+    height: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  menuButton: {
+    marginRight: 20,
+  },
+  button: {
+    marginBottom: theme.spacing(1),
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+  fabMoveUp: {
+    transform: 'translate3d(0, -46px, 0)',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
+  },
+  fabMoveDown: {
+    transform: 'translate3d(0, 0, 0)',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.leavingScreen,
+      easing: theme.transitions.easing.sharp,
+    }),
+  },
+  snackbar: {
+    position: 'absolute',
+  },
+  snackbarContent: {
+    width: 360,
+  },
+}));
+
+function FabIntegrationSnackbar() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  function handleClick() {
+    setOpen(true);
+  }
+
+  function handleClose() {
+    setOpen(false);
+  }
+
+  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
+
+  return (
+    <div className={classes.root}>
+      <Button className={classes.button} onClick={handleClick}>
+        Open snackbar
+      </Button>
+      <div className={classes.appFrame}>
+        <AppBar position="static" color="primary">
+          <Toolbar>
+            <IconButton
+              edge="start"
+              className={classes.menuButton}
+              color="inherit"
+              aria-label="Menu"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit">
+              Out of my way!
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Fab color="secondary" className={fabClassName}>
+          <AddIcon />
+        </Fab>
+        <Snackbar
+          open={open}
+          autoHideDuration={4000}
+          onClose={handleClose}
+          ContentProps={{
+            'aria-describedby': 'snackbar-fab-message-id',
+            className: classes.snackbarContent,
+          }}
+          message={<span id="snackbar-fab-message-id">Archived</span>}
+          action={
+            <Button color="inherit" size="small" onClick={handleClose}>
+              Undo
+            </Button>
+          }
+          className={classes.snackbar}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FabIntegrationSnackbar;

docs/src/pages/demos/snackbars/FadeSnackbar.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+
+function FadeSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  function handleClick() {
+    setOpen(true);
+  }
+
+  function handleClose() {
+    setOpen(false);
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Open with Fade Transition</Button>
+      <Snackbar
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Fade}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
+      />
+    </div>
+  );
+}
+
+export default FadeSnackbar;