@material-ui/icons#MoreVert TypeScript Examples

render() {
    const { icon, menuItems } = this.props;
    const { anchorEl } = this.state;
    const iconElement = icon || <MoreVert />;
    return (
      <span>
        <IconButton onClick={e => this._onOpenMenu(e)}>
          {iconElement}
        </IconButton>
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          keepMounted
          onClose={this._onMenuClose}
        >
          {menuItems(this._onMenuClose)}
        </Menu>
      </span>
    );
  }

withHeroes = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={'Substation 3'}
        headerSubtitle={'High Humidity Alarm'}
        headerInfo={'4 Devices'}
        headerColor={Colors.blue[500]}
        headerFontColor={Colors.white[50]}
        headerBackgroundImage={backgroundImage}
        actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
        actionRow={actionRow}
        badge={
            <HeroBanner>
                {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
            </HeroBanner>
        }
        badgeOffset={0}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
)

MenuIcon = withStyles({
  root: {
    fontSize: '20px',
  },
})(MoreVert)

actionItems = [
    <Search onClick={action('clicked search')} key={'search'} />,
    <Mail onClick={action('clicked mail')} key={'mail'} />,
    <Notifications onClick={action('clicked alarms')} key={'notifications'} />,
    <Favorite onClick={action('clicked favorite')} key={'favorite'} />,
    <Cloud onClick={action('clicked cloud')} key={'cloud'} />,
    <MoreVert onClick={action('clicked more')} key={'morevert'} />,
]

withScoreBadge = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={'Substation 3'}
            headerSubtitle={'Normal'}
            headerInfo={'4 Devices'}
            headerFontColor={Colors.white[50]}
            headerBackgroundImage={backgroundImage}
            actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    <Hero
                        icon={<GradeA fontSize={'inherit'} htmlColor={Colors.green[500]} />}
                        label={'Grade'}
                        iconSize={72}
                        iconBackgroundColor={useDarkMode() ? Colors.black[900] : Colors.white[50]}
                        value={'98'}
                        units={'/100'}
                        fontSize={'normal'}
                    />
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -52)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}

export default function useChangeMenuIcon(): SvgIconComponent {
  const Icon: SvgIconComponent = () =>
    useMediaQuery("(max-width: 768px)") ? <MoreVert /> : <MoreHoriz />;
  return Icon;
}

BuildList: FunctionComponent = () => {
  const classes = useStyles();
  const navigate = useNavigate();
  const { buildList, selectedBuild, loading, total, take } = useBuildState();
  const buildDispatch = useBuildDispatch();
  const { enqueueSnackbar } = useSnackbar();
  const { selectedProjectId } = useProjectState();
  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
  const [editDialogOpen, setEditDialogOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [menuBuild, setMenuBuild] = React.useState<Build | null>();
  const [newCiBuildId, setNewCiBuildId] = React.useState("");
  const [paginationPage, setPaginationPage] = React.useState(1);

  const handleMenuClick = (
    event: React.MouseEvent<HTMLElement>,
    build: Build
  ) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
    setMenuBuild(build);
  };

  const handleMenuClose = () => {
    setMenuBuild(null);
  };

  const toggleDeleteDialogOpen = () => {
    setDeleteDialogOpen(!deleteDialogOpen);
  };

  const toggleEditDialogOpen = () => {
    setEditDialogOpen(!editDialogOpen);
  };

  const selectBuildCalback = React.useCallback(
    (id?: string) => navigate(buildTestRunLocation(id)),
    [navigate]
  );

  const handlePaginationChange = React.useCallback(
    (page: number) => {
      setPaginationPage(page);
      if (selectedProjectId) {
        buildDispatch({ type: "request" });
        buildsService
          .getList(selectedProjectId, take, take * (page - 1))
          .then((payload) => {
            buildDispatch({ type: "get", payload });
          })
          .catch((err: string) =>
            enqueueSnackbar(err, {
              variant: "error",
            })
          );
      }
    },
    [buildDispatch, enqueueSnackbar, selectedProjectId, take]
  );

  React.useEffect(() => {
    handlePaginationChange(1);
  }, [handlePaginationChange]);

  return (
    <React.Fragment>
      <Box height="91%" overflow="auto">
        <List>
          {loading ? (
            <SkeletonList />
          ) : buildList.length === 0 ? (
            <Typography variant="h5">No builds</Typography>
          ) : (
            buildList.map((build) => (
              <React.Fragment key={build.id}>
                <ListItem
                  selected={selectedBuild?.id === build.id}
                  button
                  onClick={() => selectBuildCalback(build.id)}
                  classes={{
                    container: classes.listItem,
                  }}
                >
                  <ListItemText
                    disableTypography
                    primary={
                      <Typography
                        variant="subtitle2"
                        style={{
                          wordWrap: "break-word",
                        }}
                      >
                        {`#${build.number} ${build.ciBuildId || ""}`}
                      </Typography>
                    }
                    secondary={
                      <Grid container direction="column">
                        <Grid item>
                          <Typography variant="caption" color="textPrimary">
                            {formatDateTime(build.createdAt)}
                          </Typography>
                        </Grid>
                        <Grid item>
                          <Grid container justifyContent="space-between">
                            <Grid item>
                              <Tooltip title={build.branchName}>
                                <Chip
                                  size="small"
                                  label={build.branchName}
                                  style={{ maxWidth: 180 }}
                                />
                              </Tooltip>
                            </Grid>
                            <Grid item>
                              <BuildStatusChip status={build.status} />
                            </Grid>
                          </Grid>
                        </Grid>
                      </Grid>
                    }
                  />

                  <ListItemSecondaryAction
                    className={classes.listItemSecondaryAction}
                  >
                    <IconButton
                      onClick={(event) => handleMenuClick(event, build)}
                    >
                      <MoreVert />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
                {build.isRunning && <LinearProgress />}
              </React.Fragment>
            ))
          )}
        </List>
      </Box>
      <Box height="9%">
        <Grid container justifyContent="center">
          <Grid item>
            <Pagination
              size="small"
              defaultPage={1}
              page={paginationPage}
              count={Math.ceil(total / take)}
              onChange={(event, page) => handlePaginationChange(page)}
            />
          </Grid>
        </Grid>
      </Box>

      {menuBuild && (
        <Menu anchorEl={anchorEl} open={!!menuBuild} onClose={handleMenuClose}>
          {menuBuild.isRunning && (
            <MenuItem
              onClick={() => {
                buildsService
                  .update(menuBuild.id, { isRunning: false })
                  .then((b) =>
                    enqueueSnackbar(`${menuBuild.id} finished`, {
                      variant: "success",
                    })
                  )
                  .catch((err) =>
                    enqueueSnackbar(err, {
                      variant: "error",
                    })
                  );
                handleMenuClose();
              }}
            >
              Stop
            </MenuItem>
          )}
          <MenuItem onClick={toggleEditDialogOpen}>Edit CI Build</MenuItem>
          <MenuItem onClick={toggleDeleteDialogOpen}>Delete</MenuItem>
        </Menu>
      )}
      {menuBuild && (
        <BaseModal
          open={editDialogOpen}
          title={"Edit CI Build ID"}
          submitButtonText={"Edit"}
          onCancel={toggleEditDialogOpen}
          content={
            <React.Fragment>
              <Typography>{`Edit the ci build id for build: #${
                menuBuild.number || menuBuild.id
              }`}</Typography>
              <TextValidator
                name="newCiBuildId"
                validators={["minStringLength:2"]}
                errorMessages={["Enter at least two characters."]}
                margin="dense"
                id="name"
                label="New CI Build Id"
                type="text"
                fullWidth
                required
                value={newCiBuildId}
                inputProps={{
                  onChange: (event: any) =>
                    setNewCiBuildId((event.target as HTMLInputElement).value),
                  "data-testid": "newCiBuildId",
                }}
              />
            </React.Fragment>
          }
          onSubmit={() => {
            buildsService
              .update(menuBuild.id, {
                ciBuildId: newCiBuildId,
              })
              .then((b) => {
                toggleEditDialogOpen();
              })
              .catch((err) =>
                enqueueSnackbar(err, {
                  variant: "error",
                })
              );
            handleMenuClose();
          }}
        />
      )}
      {menuBuild && (
        <BaseModal
          open={deleteDialogOpen}
          title={"Delete Build"}
          submitButtonText={"Delete"}
          onCancel={toggleDeleteDialogOpen}
          content={
            <Typography>{`Are you sure you want to delete build: #${
              menuBuild.number || menuBuild.id
            }?`}</Typography>
          }
          onSubmit={() => {
            deleteBuild(buildDispatch, menuBuild.id)
              .then((build) => {
                toggleDeleteDialogOpen();
                enqueueSnackbar(
                  `Build #${menuBuild.number || menuBuild.id} deleted`,
                  {
                    variant: "success",
                  }
                );
              })
              .then(() => handlePaginationChange(paginationPage))
              .then(() => {
                if (menuBuild.id === selectedBuild?.id) {
                  selectBuildCalback();
                }
              })
              .catch((err) =>
                enqueueSnackbar(err, {
                  variant: "error",
                })
              );
            handleMenuClose();
          }}
        />
      )}
    </React.Fragment>
  );
}

NeoReport = ({
    database = "neo4j", // The Neo4j database to run queries onto.
    query = "", // The Cypher query used to populate the report.
    parameters = {}, // A dictionary of parameters to pass into the query.
    disabled = false, // Whether to disable query execution.
    selection = {}, // A selection of return fields to send to the report.
    fields = [], // A list of the return data fields that the query produces.
    settings = {}, // An optional dictionary of customization settings to pass to the report.  
    setFields = (f) => { fields = f }, // The callback to update the set of query fields after query execution. 
    setGlobalParameter = () => { }, // callback to update global (dashboard) parameters.
    getGlobalParameter = (key) => {return ""}, // function to get global (cypher) parameters.
    refreshRate = 0, // Optionally refresh the report every X seconds.
    dimensions = { width: 300, height: 300 }, // Size of the report in pixels.
    rowLimit = DEFAULT_ROW_LIMIT, // The maximum number of records to render.
    queryTimeLimit = 20, // Time limit for queries before automatically aborted.
    type = "table", // The type of report as a string.
    expanded = false, // whether the report is visualized in a fullscreen view.
    ChartType = NeoTableChart, // The report component to render with the query results.
}) => {
    const [records, setRecords] = useState(null);
    const [timer, setTimer] = useState(null);
    const [status, setStatus] = useState(QueryStatus.NO_QUERY);
    const { driver } = useContext<Neo4jContextState>(Neo4jContext);
    if (!driver) throw new Error('`driver` not defined. Have you added it into your app as <Neo4jContext.Provider value={{driver}}> ?')

    const debouncedRunCypherQuery = useCallback(
        debounce(runCypherQuery, RUN_QUERY_DELAY_MS),
        [],
    );

    const populateReport = (debounced = true) => {
        // If this is a 'text-only' report, no queries are ran, instead we pass the input directly to the report.
        if (REPORT_TYPES[type].textOnly) {
            setStatus(QueryStatus.COMPLETE);
            setRecords([{ input: query, parameters: parameters }]);
            return;
        }

        // Reset the report records before we run the query.
        setRecords([]);

        // Determine the set of fields from the configurations.
        var numericFields = (REPORT_TYPES[type].selection && fields) ? Object.keys(REPORT_TYPES[type].selection).filter(field => REPORT_TYPES[type].selection[field].type == SELECTION_TYPES.NUMBER && !REPORT_TYPES[type].selection[field].multiple) : [];
        var numericOrDatetimeFields = (REPORT_TYPES[type].selection && fields) ? Object.keys(REPORT_TYPES[type].selection).filter(field => REPORT_TYPES[type].selection[field].type == SELECTION_TYPES.NUMBER_OR_DATETIME && !REPORT_TYPES[type].selection[field].multiple) : [];
        var textFields = (REPORT_TYPES[type].selection && fields) ? Object.keys(REPORT_TYPES[type].selection).filter(field => REPORT_TYPES[type].selection[field].type == SELECTION_TYPES.TEXT && !REPORT_TYPES[type].selection[field].multiple) : [];
        var optionalFields = (REPORT_TYPES[type].selection && fields) ? Object.keys(REPORT_TYPES[type].selection).filter(field => REPORT_TYPES[type].selection[field].optional == true) : [];

        // Take care of multi select fields, they need to be added to the numeric fields too.
        if (REPORT_TYPES[type].selection) {
            Object.keys(REPORT_TYPES[type].selection).forEach((field, i) => {
                if (REPORT_TYPES[type].selection[field].multiple && selection[field]) {
                    selection[field].forEach((f, i) => numericFields.push(field + "(" + f + ")"))
                }
            });
        }

        const defaultKeyField = (REPORT_TYPES[type].selection) ? Object.keys(REPORT_TYPES[type].selection).find(field => REPORT_TYPES[type].selection[field].key == true) : undefined;
        const useRecordMapper = REPORT_TYPES[type].useRecordMapper == true;
        const useNodePropsAsFields = REPORT_TYPES[type].useNodePropsAsFields == true;

        if (debounced) {
            setStatus(QueryStatus.RUNNING)
            debouncedRunCypherQuery(driver, database, query, parameters, selection, fields,
                rowLimit, setStatus, setRecords, setFields, HARD_ROW_LIMITING, useRecordMapper, useNodePropsAsFields,
                numericFields, numericOrDatetimeFields, textFields, optionalFields, defaultKeyField, queryTimeLimit);
        } else {
            runCypherQuery(driver, database, query, parameters, selection, fields,
                rowLimit, setStatus, setRecords, setFields, HARD_ROW_LIMITING, useRecordMapper, useNodePropsAsFields,
                numericFields, numericOrDatetimeFields, textFields, optionalFields, defaultKeyField, queryTimeLimit);
        }
    };

    // When report parameters are changed, re-run the report.
    useEffect(() => {

        if (timer) {
            // @ts-ignore
            clearInterval(timer);
        }
        if (!disabled) {
            if (query.trim() == "") {
                setStatus(QueryStatus.NO_QUERY);
            }
            populateReport();
            // If a refresh rate was specified, set up an interval for re-running the report. (max 24 hrs)
            if (refreshRate && refreshRate > 0) {
                // @ts-ignore
                setTimer(setInterval(function () {
                    populateReport(false);
                }, Math.min(refreshRate, 86400) * 1000.0));
            }
        }
    }, REPORT_TYPES[type].useRecordMapper == true ?
        [disabled, query, JSON.stringify(parameters), fields ? fields : [], JSON.stringify(selection)] :
        [disabled, query, JSON.stringify(parameters), null, null])

    // Define query callback to allow reports to get extra data on interactions.
    const queryCallback = useCallback(
        (query, parameters, setRecords) => {
            runCypherQuery(driver, database, query, parameters, selection, fields, rowLimit,
                (status) => { status == QueryStatus.NO_DATA ? setRecords([]) : null },
                (result => setRecords(result)),
                () => { return }, HARD_ROW_LIMITING,
                REPORT_TYPES[type].useRecordMapper == true, false,
                [], [], [], [], null, queryTimeLimit);
        },
        [],
    );

    // Draw the report based on the query status.
    if (disabled) {
        return <div></div>;
    } else if (status == QueryStatus.NO_QUERY) {
        return (<div style={{ padding: 15 }}>No query specified. <br /> Use the <Chip style={{backgroundColor: "#efefef"}}size="small" icon={<MoreVert />} label="Report Settings" /> button to get started. </div>);
    } else if (status == QueryStatus.RUNNING) {
        return (<Typography variant="h2" color="textSecondary" style={{ paddingTop: "100px", textAlign: "center" }}>
            <CircularProgress color="inherit" />
        </Typography>);
    } else if (status == QueryStatus.NO_DATA) {
        return <NeoCodeViewerComponent value={"Query returned no data."} />
    } else if (status == QueryStatus.NO_DRAWABLE_DATA) {
        return <NeoCodeViewerComponent value={"Data was returned, but it can't be visualized.\n\n" +
            "This could have the following causes:\n" +
            "- a numeric value field was selected, but no numeric values were returned. \n" +
            "- a numeric value field was selected, but only zero's were returned.\n" +
            "- Your visualization expects nodes/relationships, but none were returned."
        } />
    } else if (status == QueryStatus.COMPLETE) {
        if (records == null || records.length == 0) {
            return <div>Loading...</div>
        }
        {/* @ts-ignore */ }
        return (<div style={{ height: "100%", marginTop: "0px", overflow: REPORT_TYPES[type].allowScrolling ? "auto" : "hidden" }}>
            <ChartType records={records}
                selection={selection}
                settings={settings}
                fullscreen={expanded}
                dimensions={dimensions}
                parameters={parameters}
                queryCallback={queryCallback}
                setGlobalParameter={setGlobalParameter}
                getGlobalParameter={getGlobalParameter} />
        </div>);
    } else if (status == QueryStatus.COMPLETE_TRUNCATED) {
        if (records == null || records.length == 0) {
            return <div>Loading...</div>
        }
        {/* Results have been truncated */ }
        return (<div style={{ height: "100%", marginTop: "0px", overflow: REPORT_TYPES[type].allowScrolling ? "auto" : "hidden" }}>
            <div style={{ marginBottom: "-31px" }}>
                <div style={{ display: "flex" }} >
                    <Tooltip title={"Over " + rowLimit + " row(s) were returned, results have been truncated."} placement="left" aria-label="host">
                        <WarningIcon style={{ zIndex: 999, marginTop: "2px", marginRight: "20px", marginLeft: "auto", color: "orange" }} />
                    </Tooltip>
                </div>
            </div>
            <ChartType
                records={records}
                selection={selection}
                settings={settings}
                fullscreen={expanded}
                dimensions={dimensions}
                parameters={parameters}
                queryCallback={queryCallback}
                setGlobalParameter={setGlobalParameter}
                getGlobalParameter={getGlobalParameter} />
        </div>);
    } else if (status == QueryStatus.TIMED_OUT) {
        return <NeoCodeViewerComponent value={"Query was aborted - it took longer than " + queryTimeLimit + "s to run. \n"
            + "Consider limiting your returned query rows,\nor increase the maximum query time."} />
    }
    {/* @ts-ignore */ }

    return <NeoCodeViewerComponent value={records && records[0] && records[0].error && records[0].error}
        placeholder={"Unknown query error, check the browser console."} />

}