@material-ui/core#SelectProps TypeScript Examples

MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
  variant: 'menu',
  getContentAnchorEl: null,
} as SelectProps['MenuProps']

CurrencySelect = ({
  currency,
  currencies,
  onSelect,
}: CurrencySelectProps) => {
  const classes = useStyles();

  const getOption = (value: unknown) => {
    const kind = (value === NULL_VALUE ? null : value) as CurrencyType;
    return findAlways(currencies, c => c.kind === kind);
  };

  const handleOnChange: SelectProps['onChange'] = e => {
    const option = getOption(e.target.value);
    onSelect(option);
  };

  const renderValue: SelectProps['renderValue'] = value => {
    const option = getOption(value);
    return <b>{option.label}</b>;
  };

  return (
    <FormControl variant="outlined">
      <InputLabel shrink>Convert to:</InputLabel>
      <Select
        className={classes.select}
        variant="outlined"
        labelWidth={100}
        onChange={handleOnChange}
        value={currency.kind || NULL_VALUE}
        renderValue={renderValue}
      >
        {currencies.map((c: Currency) => (
          <MenuItem
            className={classes.menuItem}
            key={c.kind || NULL_VALUE}
            value={c.kind || NULL_VALUE}
          >
            <span role="img" aria-label={c.label}>
              {c.label}
            </span>
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

PeriodSelect = ({
  duration,
  onSelect,
  options,
}: PeriodSelectProps) => {
  const classes = useStyles();
  const lastCompleteBillingDate = useLastCompleteBillingDate();
  const optionsOrDefault =
    options ?? getDefaultOptions(lastCompleteBillingDate);

  const handleOnChange: SelectProps['onChange'] = e => {
    onSelect(e.target.value as Duration);
  };

  const renderValue: SelectProps['renderValue'] = value => {
    const option = findAlways(optionsOrDefault, o => o.value === value);
    return <b>{option.label}</b>;
  };

  return (
    <Select
      className={classes.select}
      variant="outlined"
      onChange={handleOnChange}
      value={duration}
      renderValue={renderValue}
      data-testid="period-select"
    >
      {optionsOrDefault.map(option => (
        <MenuItem
          className={classes.menuItem}
          key={option.value}
          value={option.value}
          data-testid={`period-select-option-${option.value}`}
        >
          {option.label}
        </MenuItem>
      ))}
    </Select>
  );
}

SortBar: React.FC<Props> = (props) => {
  const {
    sortField,
    sortDirection,
    setSort,
    saveSearch,
    children,
    existingSavedSearch
  } = props;

  const classes = useStyles(props);

  const toggleDirection = () => {
    setSort(sortField, sortDirection === 'asc' ? 'desc' : 'asc');
  };

  const onSetSortField: SelectProps['onChange'] = (e) => {
    setSort(e.target.value as string, 'asc');
  };

  return (
    <div className={classes.root}>
      <div className={classes.sortMenu}>
        <button className={classes.toggleDirection} onClick={toggleDirection}>
          {!sortDirection || sortDirection === 'desc' ? (
            <ArrowDownward />
          ) : (
            <ArrowUpward />
          )}
        </button>
        <span id="sort-by-label">Sort by: </span>
        <FormControl className={classes.openFields}>
          <Select
            disableUnderline
            labelId="sort-by-label"
            value={sortField}
            onChange={onSetSortField}
            classes={{ root: classes.selectInp }}
          >
            <MenuItem classes={{ root: classes.option }} value="name">
              Domain Name
            </MenuItem>
            <MenuItem classes={{ root: classes.option }} value="ip">
              IP
            </MenuItem>
            <MenuItem classes={{ root: classes.option }} value="updatedAt">
              Last Seen
            </MenuItem>
            <MenuItem classes={{ root: classes.option }} value="createdAt">
              First Seen
            </MenuItem>
          </Select>
        </FormControl>
      </div>
      {children}
      <div>
        {saveSearch && (
          <button onClick={saveSearch}>
            {existingSavedSearch ? 'Update Saved Search' : 'Save Search'}
          </button>
        )}
      </div>
    </div>
  );
}

SiteTable = ({
  isDrawerOpen,
  showCard,
  showSpottersOnlySwitch,
  isExtended,
  collection,
  scrollTableOnSelection,
  scrollPageOnSelection,
  classes,
}: SiteTableProps) => {
  const loading = useSelector(sitesListLoadingSelector);
  const siteOnMap = useSelector(siteOnMapSelector);
  const withSpotterOnly = useSelector(withSpotterOnlySelector);
  const dispatch = useDispatch();
  const { height } = useWindowSize() || {};

  const [order, setOrder] = useState<Order>("desc");
  const [orderBy, setOrderBy] = useState<OrderKeys>(OrderKeys.ALERT);

  const handleRequestSort = (event: unknown, property: OrderKeys) => {
    const isAsc = orderBy === property && order === "asc";
    setOrder(isAsc ? "desc" : "asc");
    setOrderBy(property);
  };

  const toggleSwitch = (event: ChangeEvent<HTMLInputElement>) => {
    const {
      target: { checked },
    } = event;
    dispatch(filterSitesWithSpotter(checked));
    dispatch(setWithSpotterOnly(checked));
  };

  // This function is used to prevent the drawer onClick close effect on mobile
  const onInteractiveClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    event.stopPropagation();
  };

  const onMobileSelectChange: SelectProps["onChange"] = (newValue) => {
    const value = newValue.target.value as string;
    const [newOrderBy, newOrder] = value.split("-") as [OrderKeys, Order];
    setOrder(newOrder);
    setOrderBy(newOrderBy);
  };
  return (
    <>
      {/* Holds drawer handle and site name text on mobile */}
      {showCard && (
        <Hidden mdUp>
          <Box
            width="100vw"
            display="flex"
            justifyContent="center"
            marginTop={2}
            marginBottom={3}
          >
            <Box
              className={classNames(classes.topHandle, {
                [classes.bounce]: !!siteOnMap && !isDrawerOpen,
              })}
            />
            {!isDrawerOpen && (
              <Typography
                className={classes.allSitesText}
                variant="h5"
                color="textSecondary"
              >
                {siteOnMap ? getSiteNameAndRegion(siteOnMap).name : "All Sites"}
              </Typography>
            )}
          </Box>
        </Hidden>
      )}
      {showCard && <SelectedSiteCard />}
      {showSpottersOnlySwitch && (
        <Box className={classes.switchWrapper}>
          <Switch
            checked={withSpotterOnly}
            onClick={onInteractiveClick}
            onChange={toggleSwitch}
            color="primary"
          />
          <Typography color="textSecondary" variant="h6">
            deployed buoys only
          </Typography>
        </Box>
      )}
      {/* Holds sort selector on mobile. Sorting on desktop uses table headers. */}
      {!isExtended && (
        <Hidden mdUp>
          <Box
            paddingX={2}
            paddingY={3}
            display="flex"
            alignItems="center"
            onClick={onInteractiveClick}
          >
            <Typography variant="h5">Sort By: </Typography>
            <Select
              value={`${orderBy}-${order}`}
              className={classes.mobileSortSelect}
              onChange={onMobileSelectChange}
            >
              {MOBILE_SELECT_MENU_ITEMS}
            </Select>
          </Box>
        </Hidden>
      )}
      <Box
        className={
          height && height > SMALL_HEIGHT
            ? `${classes.tableHolder} ${classes.scrollable}`
            : `${classes.tableHolder}`
        }
        display="flex"
        flexDirection="column"
        flex={1}
      >
        <TableContainer>
          <Table
            stickyHeader
            className={isExtended ? classes.extendedTable : classes.table}
          >
            <Hidden smDown={!isExtended}>
              <EnhancedTableHead
                order={order}
                orderBy={orderBy}
                onRequestSort={handleRequestSort}
                isExtended={isExtended}
              />
            </Hidden>
            <SiteTableBody
              order={order}
              orderBy={orderBy}
              isExtended={isExtended}
              collection={collection}
              scrollTableOnSelection={scrollTableOnSelection}
              scrollPageOnSelection={scrollPageOnSelection}
            />
          </Table>
        </TableContainer>
        {loading && (
          <Box
            display="flex"
            flex={1}
            alignItems="center"
            justifyContent="center"
          >
            <CircularProgress size="4rem" thickness={1} />
          </Box>
        )}
      </Box>
    </>
  );
}