@mui/material#Portal 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>
    );
  }

function ZoomImage(props) {
  const { alt, src, zoomedImgProps, classes, className, ...rest } = props;
  const [zoomedIn, setZoomedIn] = useState(false);
  const [scrollbarSize, setScrollbarSize] = useState(null);

  const zoomIn = useCallback(() => {
    setZoomedIn(true);
  }, [setZoomedIn]);

  const zoomOut = useCallback(() => {
    setZoomedIn(false);
  }, [setZoomedIn]);

  useEffect(() => {
    if (zoomedIn) {
      document.body.style.overflow = "hidden";
      document.body.style.paddingRight = `${scrollbarSize}px`;
      document.querySelector(
        "header"
      ).style.paddingRight = `${scrollbarSize}px`;
    } else {
      document.body.style.overflow = "auto";
      document.body.style.paddingRight = "0px";
      document.querySelector("header").style.paddingRight = "0px";
    }
  }, [zoomedIn, scrollbarSize]);

  return (
    <Fragment>
      <ScrollbarSize onChange={setScrollbarSize}></ScrollbarSize>
      {zoomedIn && (
        <Portal>
          <Backdrop
            open={zoomedIn}
            className={classes.backdrop}
            onClick={zoomOut}
          ></Backdrop>
          <div onClick={zoomOut} className={classes.portalImgWrapper}>
            <div className={classes.portalImgInnerWrapper}>
              <img
                alt={alt}
                src={src}
                className={classes.portalImg}
                {...zoomedImgProps}
              ></img>
            </div>
          </div>
        </Portal>
      )}
      <img
        alt={alt}
        src={src}
        onClick={zoomIn}
        className={classNames(className, classes.zoomedOutImage)}
        {...rest}
      ></img>
    </Fragment>
  );
}

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>
    );
  }