@material-ui/core#NativeSelect TypeScript Examples

Component = (props: CollateralInputProps) => {
  const {
    className,
    placeholder,
    whitelist,
    collateral,
    amount,
    onCollateralChange,
    onAmountChange,
  } = props;

  const onCollateralChanged = useCallback(
    (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
      const found = whitelist.find(
        (c) => c.collateral_token === event.target.value,
      );
      if (found && onCollateralChange) {
        onCollateralChange(found);
      }
    },
    [onCollateralChange, whitelist],
  );

  return (
    <SelectAndTextInputContainer
      className={className}
      gridColumns={['1fr', 160]}
      gutters="none"
      disableColumnDivider={true}
    >
      <NumberInput
        label="COLLATERAL AMOUNT"
        placeholder={placeholder}
        disableBorder={true}
        disabled={collateral === undefined}
        value={amount ? demicrofy(amount, collateral?.decimals ?? 6) : ''}
        onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
          if (collateral) {
            const amount =
              target.value?.length === 0
                ? undefined
                : (Big(
                    microfy(Big(target.value), collateral.decimals ?? 6),
                  ) as u<CollateralAmount<Big>>);

            onAmountChange(amount);
          }
        }}
      />
      <LayoutSwitch
        desktop={
          <Select
            classes={{
              select: 'select',
              icon: 'icon',
            }}
            value={collateral?.collateral_token ?? ''}
            onChange={onCollateralChanged}
          >
            {whitelist.map((collateral) => {
              return (
                <MenuItem
                  key={collateral.symbol}
                  value={collateral.collateral_token}
                  disableRipple={true}
                >
                  <MenuItemContent collateral={collateral} />
                </MenuItem>
              );
            })}
          </Select>
        }
        mobile={
          <NativeSelect
            value={collateral?.collateral_token ?? ''}
            onChange={onCollateralChanged}
          >
            {whitelist.map((collateral) => {
              return (
                <option
                  key={collateral.symbol}
                  value={collateral.collateral_token}
                >
                  {collateral.symbol}
                </option>
              );
            })}
          </NativeSelect>
        }
      />
    </SelectAndTextInputContainer>
  );
}

Settings: React.FC = () => {
  const version = packJson['version']
  const [theme, setTheme] = useRecoilState<ThemeType>(ThemeState)
  const [anchorEl, setAnchorEl] = useState<Element | null | undefined>(null)

  const [isCacheClear, setIsCacheClear] = useState(() => {
    if (
      localStorage.getItem(BESTSCORE) ||
      localStorage.getItem(GAMESTATE) ||
      localStorage.getItem(THEME)
    ) {
      return false
    }
    return true
  })
  const cacheClearText = isCacheClear ? 'Cache is Clear' : 'Clear Cache'

  useEffect(() => {
    localStorage.setItem(THEME, theme)
  }, [theme])

  const removeLocalStorage = (): void => {
    localStorage.removeItem(THEME)
    localStorage.removeItem(GAMESTATE)
    localStorage.removeItem(BESTSCORE)
    setIsCacheClear(true)
  }

  const setSelectedTheme = (
    e: React.ChangeEvent<{ name?: string; value: unknown }>,
  ): void => {
    setTheme(e.target.value as ThemeType)
  }

  const getPopoverBody = (): React.ReactElement => {
    return (
      <div className={`popover-body popover-body-${theme}`}>
        <div className="settings-item center">
          <h3 onClick={removeLocalStorage}>{cacheClearText}</h3>
        </div>
        <Divider />
        <div className="settings-item">
          <h3>Theme:</h3>
          <div className="center-item">
            {theme === ThemeType.DARK ? (
              <GiMoonBats size="22px" className="theme-icon" />
            ) : (
              <GiUbisoftSun size="22px" className="theme-icon" />
            )}
            <FormControl className="no-decoration">
              <NativeSelect
                value={theme}
                className={`select-${theme}`}
                onChange={setSelectedTheme}
              >
                {Object.values(ThemeType).map((type, idx) => {
                  return (
                    <option key={idx} value={type}>
                      {type}
                    </option>
                  )
                })}
              </NativeSelect>
            </FormControl>
          </div>
        </div>
        <Divider />
        <div className="settings-item">
          <h3>Version:</h3>
          <h4 className="center-item">{version}</h4>
        </div>
        <Divider />
        <div className="settings-item ">
          <h3>Made with:</h3>
          <img src={logo} className="react-icon" />
        </div>
      </div>
    )
  }

  return (
    <>
      <div>
        <FiSettings
          id="settings-cog"
          className="settings-cog"
          size="30px"
          onClick={(e): void => setAnchorEl(e.currentTarget)}
        />
      </div>

      {/* Popover component: hidden until above button click */}
      <Popover
        open={anchorEl !== null}
        anchorEl={anchorEl}
        onClose={(): void => setAnchorEl(null)}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        {getPopoverBody()}
      </Popover>
    </>
  )
}