converting consecutive snackbars to ts

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

@@ -15,10 +15,13 @@ const styles = theme => ({
 class ConsecutiveSnackbars extends React.Component {
   queue = [];
 
-  state = {
-    open: false,
-    messageInfo: {},
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+    };
+  }
 
   handleClick = message => () => {
     this.queue.push({
@@ -57,7 +60,7 @@ class ConsecutiveSnackbars extends React.Component {
 
   render() {
     const { classes } = this.props;
-    const { messageInfo } = this.state;
+    const { messageInfo = {} } = this.state;
 
     return (
       <div>

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

@@ -0,0 +1,121 @@
+import React, { SyntheticEvent } from 'react';
+import PropTypes, { number } from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import { string } from 'parsimmon';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    close: {
+      padding: theme.spacing(0.5),
+    },
+  });
+
+export interface SnackbarMessage {
+  message: string;
+  key: number;
+}
+
+export type Props = WithStyles<typeof styles>;
+
+export interface State {
+  open: boolean;
+  messageInfo?: SnackbarMessage;
+}
+
+class ConsecutiveSnackbars extends React.Component<Props, State> {
+  queue: SnackbarMessage[] = [];
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      open: false,
+    };
+  }
+
+  handleClick = (message: string) => () => {
+    this.queue.push({
+      message,
+      key: new Date().getTime(),
+    });
+
+    if (this.state.open) {
+      // immediately begin dismissing current message
+      // to start showing new one
+      this.setState({ open: false });
+    } else {
+      this.processQueue();
+    }
+  };
+
+  processQueue = () => {
+    if (this.queue.length > 0) {
+      this.setState({
+        messageInfo: this.queue.shift(),
+        open: true,
+      });
+    }
+  };
+
+  handleClose = (event: SyntheticEvent | MouseEvent, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    this.setState({ open: false });
+  };
+
+  handleExited = () => {
+    this.processQueue();
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { messageInfo = {} as SnackbarMessage } = this.state;
+
+    return (
+      <div>
+        <Button onClick={this.handleClick('message a')}>Show message A</Button>
+        <Button onClick={this.handleClick('message b')}>Show message B</Button>
+        <Snackbar
+          key={messageInfo.key}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          open={this.state.open}
+          autoHideDuration={6000}
+          onClose={this.handleClose}
+          onExited={this.handleExited}
+          ContentProps={{
+            'aria-describedby': 'message-id',
+          }}
+          message={<span id="message-id">{messageInfo.message}</span>}
+          action={[
+            <Button key="undo" color="secondary" size="small" onClick={this.handleClose}>
+              UNDO
+            </Button>,
+            <IconButton
+              key="close"
+              aria-label="Close"
+              color="inherit"
+              className={classes.close}
+              onClick={this.handleClose}
+            >
+              <CloseIcon />
+            </IconButton>,
+          ]}
+        />
+      </div>
+    );
+  }
+}
+
+(ConsecutiveSnackbars as React.ComponentClass<Props>).propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ConsecutiveSnackbars);

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

@@ -47,7 +47,7 @@ const useStyles1 = makeStyles((theme: Theme) => ({
   },
 }));
 
-interface Props {
+export interface Props {
   className?: string;
   message?: string;
   onClose?: () => void;

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

@@ -20,7 +20,7 @@ function TransitionDown(props: TransitionProps) {
   return <Slide {...props} direction="down" />;
 }
 
-interface State {
+export interface State {
   open: boolean;
   Transition?: React.ComponentType<TransitionProps>;
 }

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

@@ -17,7 +17,7 @@ const styles = (theme: Theme) =>
     },
   });
 
-type Props = WithStyles<typeof styles>;
+export type Props = WithStyles<typeof styles>;
 
 function LongTextSnackbar(props: Props) {
   const { classes } = props;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 import Snackbar, { SnackbarOrigin } from '@material-ui/core/Snackbar';
 
-interface State extends SnackbarOrigin {
+export interface State extends SnackbarOrigin {
   open: boolean;
 }