@mui/material#Snackbar JavaScript Examples

render() {
    const { snackbar, onClose } = this.props;
    const msg = (snackbar || '').toString();
    return (
      <Portal>
        <Snackbar
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          open={!!snackbar}
          onClose={onClose}
          autoHideDuration={(msg || '').includes('Success!') ? 2000 : 6000}
          transitionDuration={{ in: 0, appear: 250, enter: 250, exit: 0 }}
        >
          <Alert
            onClose={onClose}
            severity={(msg || '').includes('Success!') ? "success" : "error"}
            elevation={6}
            variant="filled"
          >
            {(msg || '') === "The server encountered an error while processing the request." && config.devMode ?
              <img src={PANIK} alt="PANIK" height="80" width="78"/>:
              (msg || '')}
            
          </Alert>
        </Snackbar>
      </Portal>
    );
  }

DirectionSnackbar = () => {
  const [open, setOpen] = useState(false);
  const [TransitionType, setTransitionType] = useState(undefined);

  const handleClick = (slideDirection) => () => {
    setOpen(true);
    setTransitionType(() => slideDirection);
  };

  const handleClose = () => setOpen(false);

  return (
    <Box>
      <Button onClick={handleClick(TransitionLeft)}>Right</Button>
      <Button onClick={handleClick(TransitionUp)}>Up</Button>
      <Button onClick={handleClick(TransitionRight)}>Left</Button>
      <Button onClick={handleClick(TransitionDown)}>Down</Button>

      <Snackbar
        open={open}
        onClose={handleClose}
        TransitionComponent={TransitionType}
        ContentProps={{ "aria-describedby": "message-id" }}
        message={<span id="message-id">I love snacks</span>}
      />
    </Box>
  );
}

export default function TransitionsSnackbar() {
  const [state, setState] = React.useState({
    open: false,
    Transition: Fade,
  });

  const handleClick = (Transition) => () => {
    setState({ open: true, Transition });
  };

  function handleClose() {
    setState({ ...state, open: false });
  }

  return (
    <div>
      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
      <Snackbar
        open={state.open}
        onClose={handleClose}
        TransitionComponent={state.Transition}
        ContentProps={{ "aria-describedby": "message-id" }}
        message={<span id="message-id">I love snacks</span>}
      />
    </div>
  );
}

function CookieConsent(props) {
  const { classes, handleCookieRulesDialogOpen } = props;
  const [isVisible, setIsVisible] = useState(false);

  const openOnEuCountry = useCallback(() => {
    fetchIpData
      .then((data) => {
        if (
          data &&
          data.country &&
          !europeanCountryCodes.includes(data.country)
        ) {
          setIsVisible(false);
        } else {
          setIsVisible(true);
        }
      })
      .catch(() => {
        setIsVisible(true);
      });
  }, [setIsVisible]);

  /**
   * Set a persistent cookie
   */
  const onAccept = useCallback(() => {
    Cookies.set("remember-cookie-snackbar", "", {
      expires: 365,
    });
    setIsVisible(false);
  }, [setIsVisible]);

  useEffect(() => {
    if (Cookies.get("remember-cookie-snackbar") === undefined) {
      openOnEuCountry();
    }
  }, [openOnEuCountry]);

  return (
    <Snackbar
      className={classes.snackbarContent}
      open={isVisible}
      message={
        <Typography className="text-white">
          We use cookies to ensure you get the best experience on our website.{" "}
        </Typography>
      }
      action={
        <Fragment>
          <Box mr={1}>
            <Button color="primary" onClick={handleCookieRulesDialogOpen}>
              More details
            </Button>
          </Box>
          <Button color="primary" onClick={onAccept}>
            Got it!
          </Button>
        </Fragment>
      }
    />
  );
}

function ConsecutiveSnackbars(props) {
  const { classes, getPushMessageFromChild } = props;
  const [isOpen, setIsOpen] = useState(false);
  const [messageInfo, setMessageInfo] = useState({});
  const queue = useRef([]);

  const processQueue = useCallback(() => {
    if (queue.current.length > 0) {
      setMessageInfo(queue.current.shift());
      setIsOpen(true);
    }
  }, [setMessageInfo, setIsOpen, queue]);

  const handleClose = useCallback((_, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setIsOpen(false);
  }, [setIsOpen]);

  const pushMessage = useCallback(message => {
    queue.current.push({
      message,
      key: new Date().getTime(),
    });
    if (isOpen) {
      // immediately begin dismissing current message
      // to start showing new one
      setIsOpen(false);
    } else {
      processQueue();
    }
  }, [queue, isOpen, setIsOpen, processQueue]);

  useEffect(() => {
    getPushMessageFromChild(pushMessage);
  }, [getPushMessageFromChild, pushMessage]);

  return (
    <Snackbar
      disableWindowBlurListener
      key={messageInfo.key}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "left",
      }}
      open={isOpen}
      autoHideDuration={6000}
      onClose={handleClose}
      ContentProps={{
        classes: {
          root: classes.root,
        },
      }}
      message={
        <span>{messageInfo.message ? messageInfo.message.text : null}</span>
      }
      TransitionProps={{
        onExited: processQueue
      }} />
  );

}

ConsecutiveSnackbars = () => {
  const [queue, setQueue] = useState([]);
  const [open, setOpen] = useState(false);
  const [messageInfo, setMessageInfo] = useState({});

  const handleClick = (message) => () => {
    setQueue((state) => [...state, { message, key: new Date().getTime() }]);

    if (open) {
      // immediately begin dismissing current message
      // to start showing new one
      setOpen(false);
    } else {
      processQueue();
    }
  };

  const processQueue = () => {
    if (queue.length > 0) {
      setMessageInfo(queue.shift());
      setOpen(true);
    }
  };

  const handleClose = (_, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  };

  const handleExited = () => processQueue();

  return (
    <Box>
      <Button onClick={handleClick("Message A")}>Show message A</Button>
      <Button onClick={handleClick("Message B")}>Show message B</Button>
      <Snackbar
        open={open}
        key={messageInfo.key}
        onClose={handleClose}
        autoHideDuration={6000}
        onExited={handleExited}
        ContentProps={{ "aria-describedby": "message-id" }}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        message={<span id="message-id">{messageInfo.message}</span>}
        action={[
          <Button key="undo" color="secondary" size="small" onClick={handleClose}>
            UNDO
          </Button>,
          <StyledIconButton key="close" color="inherit" aria-label="Close" onClick={handleClose}>
            <CloseIcon />
          </StyledIconButton>,
        ]}
      />
    </Box>
  );
}

export default function CustomizedSnackbars() {
  const [open, setOpen] = React.useState(false);

  function handleClick() {
    setOpen(true);
  }
  function handleClose(_, reason) {
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  }

  return (
    <ContentRoot>
      <Button variant="outlined" className="margin" onClick={handleClick}>
        Open success snackbar
      </Button>

      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }} variant="filled">
          This is a success message!
        </Alert>
      </Snackbar>

      <Alert onClose={handleClose} sx={{ m: 1 }} severity="error" variant="filled">
        This is an error message!
      </Alert>

      <Alert onClose={handleClose} sx={{ m: 1 }} severity="warning" variant="filled">
        This is a warning message!
      </Alert>

      <Alert onClose={handleClose} sx={{ m: 1 }} severity="info" variant="filled">
        This is an information message!
      </Alert>

      <Alert onClose={handleClose} sx={{ m: 1 }} severity="success" variant="filled">
        This is a success message!
      </Alert>
    </ContentRoot>
  );
}

export default function PositionedSnackbar() {
  const [state, setState] = React.useState({
    open: false,
    vertical: "top",
    horizontal: "center",
  });

  const { vertical, horizontal, open } = state;

  const handleClick = (newState) => () => {
    setState({ open: true, ...newState });
  };

  function handleClose() {
    setState({ ...state, open: false });
  }

  return (
    <Box>
      <Button onClick={handleClick({ vertical: "top", horizontal: "center" })}>Top-Center</Button>
      <Button onClick={handleClick({ vertical: "top", horizontal: "right" })}>Top-Right</Button>

      <Button onClick={handleClick({ vertical: "bottom", horizontal: "right" })}>
        Bottom-Right
      </Button>

      <Button onClick={handleClick({ vertical: "bottom", horizontal: "center" })}>
        Bottom-Center
      </Button>

      <Button onClick={handleClick({ vertical: "bottom", horizontal: "left" })}>Bottom-Left</Button>

      <Button onClick={handleClick({ vertical: "top", horizontal: "left" })}>Top-Left</Button>

      <Snackbar
        open={open}
        onClose={handleClose}
        key={`${vertical},${horizontal}`}
        anchorOrigin={{ vertical, horizontal }}
        ContentProps={{ "aria-describedby": "message-id" }}
        message={<span id="message-id">I love snacks</span>}
      />
    </Box>
  );
}

export default function SimpleSnackbar() {
  const theme = useTheme();
  const [open, setOpen] = useState(false);

  function handleClick() {
    setOpen(true);
  }

  function handleClose(_, reason) {
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  }

  return (
    <Box>
      <Button onClick={handleClick}>Open simple snackbar</Button>
      <Snackbar
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        ContentProps={{ "aria-describedby": "message-id" }}
        message={<span id="message-id">Note archived</span>}
        action={[
          <Button key="undo" color="secondary" size="small" onClick={handleClose}>
            UNDO
          </Button>,
          <IconButton
            key="close"
            aria-label="Close"
            color="inherit"
            onClick={handleClose}
            sx={{ padding: theme.spacing(0.5) }}
          >
            <CloseIcon />
          </IconButton>,
        ]}
      />
    </Box>
  );
}

render() {
    const { classes, t, logs } = this.props;
    const { snackbar, log, filename, autorefresh, clipboardMessage } = this.state;

    return (
      <TableViewContainer
        headline={t("Logs")}
        subtitle={t("logs_sub")}
        href="https://docs.grommunio.com/admin/administration.html#logs"
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <div className={classes.logViewer}>
          <List style={{ width: 200 }}>
            <ListItem>
              <ListItemText
                primary={t("Log files")}
                primaryTypographyProps={{ color: "primary", variant: 'h6' }}
              />
            </ListItem>
            {logs.Logs.map((log, idx) =>
              <ListItem
                key={idx}
                onClick={this.handleLog(log)}
                button
                className={classes.li}
                selected={log === filename}
              >
                <ListItemText
                  primary={log}
                  primaryTypographyProps={{ color: "textPrimary" }}
                />
              </ListItem>
            )}
          </List>
          <Paper elevation={1} className={classes.paper}>
            {filename && <Grid container justifyContent="flex-end">
              <IconButton onClick={this.handleRefresh} style={{ marginRight: 8 }} size="large">
                <Refresh />
              </IconButton>
              <FormControlLabel
                control={
                  <Switch
                    checked={autorefresh}
                    onChange={this.handleAutoRefresh}
                    name="autorefresh"
                    color="primary"
                  />
                }
                label="Autorefresh"
              />
            </Grid>}
            {log.length > 0 ? <IconButton onClick={this.handleScroll} size="large">
              <ArrowUp />
            </IconButton> : filename && <Typography>&lt;no logs&gt;</Typography>}
            {log.map((log, idx) =>
              <pre
                key={idx}
                className={log.level < 4 ? classes.errorLog : log.level < 6 ? classes.noticeLog : classes.log}
                onClick={this.handleCopyToClipboard(log.message)}
              >
                {'[' + log.time + ']: ' + log.message}
              </pre>
            )}
          </Paper>
        </div>
        <Portal>
          <Snackbar
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'center',
            }}
            open={!!clipboardMessage}
            onClose={this.handleSnackbarClose}
            autoHideDuration={2000}
            transitionDuration={{ in: 0, appear: 250, enter: 250, exit: 0 }}
          >
            <Alert
              onClose={this.handleSnackbarClose}
              severity={"success"}
              elevation={6}
              variant="filled"
            >
              {clipboardMessage}
            </Alert>
          </Snackbar>
        </Portal>
      </TableViewContainer>
    );
  }