@material-ui/core#Select TypeScript Examples

SortMethodSelector = ({
  sortMethodNbr,
  handleSortMethodChange,
}: Props) => {
  const classes = useStyles();
  return (
    <FormControl fullWidth>
      <Select
        className={classes.select}
        disableUnderline
        value={sortMethodNbr}
        onChange={handleSortMethodChange}
      >
        <MenuItem value={0}>Latest updated</MenuItem>
        <MenuItem value={1}>A-Z</MenuItem>
        <MenuItem value={2}>Most members</MenuItem>
      </Select>
    </FormControl>
  );
}

StatusInputComponent = (props: GridFilterInputValueProps) => {
  const { item, applyValue } = props;
  const { testRuns } = useTestRunState();

  const handleFilterChange = (event: any) => {
    applyValue({ ...item, value: event.target.value as string });
  };

  const filterOptions: Array<TestStatus> = Array.from(
    new Set(testRuns.map((item) => item.status))
  );

  return (
    <FormControl fullWidth>
      <InputLabel shrink id="statusFilter">
        Value
      </InputLabel>
      <Select
        id="statusFilter"
        native
        displayEmpty
        value={item.value}
        onChange={handleFilterChange}
      >
        <option aria-label="All" value="" />
        {filterOptions.map((item) => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </Select>
    </FormControl>
  );
}

SelectFieldWithFormState = observer(
  (props: SelectWithFormStateProps) => {
    const { fieldState, selectItems, ...otherProps } = props;
    return (
      <Select
        value={fieldState?.value}
        onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
          fieldState?.onChange((e.target.value as string) || '');
        }}
        error={fieldState?.hasError}
        {...otherProps}
      >
        {selectItems.map(item => {
          return (
            <MenuItem key={item.value} value={item.value}>
              {item.text}
            </MenuItem>
          );
        })}
      </Select>
    );
  }
)

export default function SimpleDropdown<OptionValue extends number | string>({
  options,
  value,
  onChange,
  ...rest
}: {
  options: [OptionValue, OptionLabel][];
  value: OptionValue;
  onChange: (value: OptionValue) => void;
}) {
  const { t } = useSafeTranslation();
  return (
    <FormControl {...rest}>
      <Select
        value={value === undefined ? '' : value}
        onChange={e => {
          onChange(e.target.value as OptionValue);
        }}
      >
        {options.map(([val, text]) => (
          <MenuItem key={val} value={val}>
            {t(text)}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

CameraSetting = () => {
  const { t } = useTranslation("camera_setting");
  const { preferredCameraId, setPreferredCameraId, cameraList } = useCamera();

  return (
    <PageWrapper>
      <Header backPath="/" name={t("name")} />
      <FormWrapper>
        <StyledFormControl>
          <InputLabel id="cameraId">{t("form.camera_choice.label")}</InputLabel>
          <Select
            labelId="cameraId"
            id="demo-simple-select"
            value={preferredCameraId}
            onChange={(e) => {
              setPreferredCameraId((e.target.value as string) || "AUTO");
            }}
          >
            <MenuItem value="AUTO">{t("form.camera_choice.auto")}</MenuItem>
            {cameraList.map(({ deviceId, label }) => (
              <MenuItem value={deviceId} key="deviceId">
                {isNil(label) || isEmpty(label) ? deviceId : label}
              </MenuItem>
            ))}
          </Select>
          <FormHelperText>{t("form.camera_choice.explain")}</FormHelperText>
        </StyledFormControl>
      </FormWrapper>
      <VideoContainer>
        <MediaStream suppressError />
      </VideoContainer>
    </PageWrapper>
  );
}

SelectApplicationView = () => {
  const { applicationsById, selectedApplicationId } = useAppState()
  const { selectApplication, editApplication, editDeployment } = useActions()
  const sortedApplications = orderBy(applicationsById, (x) =>
    x.name.toLowerCase()
  )
  return size(sortedApplications) ? (
    <Box display="flex" alignItems="center" style={{ gap: '1rem' }}>
      <FormControl variant="outlined" style={{ flex: 1 }}>
        <InputLabel id="application-select-label">Application</InputLabel>
        <Select
          labelId="application-select-label"
          label="Application"
          onChange={(event) => {
            selectApplication(event.target.value as string)
          }}
          value={selectedApplicationId}>
          {map(sortedApplications, (app) => (
            <MenuItem value={app.id} key={app.id}>
              {app.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <Button color="secondary" variant="contained" onClick={editApplication}>
        Edit App
      </Button>
      <Button color="secondary" variant="contained" onClick={editDeployment}>
        Edit Deploy
      </Button>
    </Box>
  ) : null
}

_ControlsOptionsLanguage: FunctionComponent<ControlsOptionsLanguageProps> = ({
  overrideLang,
  setOverrideLang,
}) => {
  const classes = useStyles();

  const currentLangCode = overrideLang !== null ? overrideLang : getShortLocale();
  const langOptions = getLanguageOptions(currentLangCode);

  const onLangChange: SelectInputProps['onChange'] = (event) => {
    const langCode = event.target.value;
    if (!distinguishLanguageCode(langCode)) return;

    setOverrideLang(langCode);
  };

  return (
    <BorderBox grow={false} direction="row" alignItems="center">
      <Typography className={classes.label}>{t('language')}</Typography>
      <Select value={currentLangCode} onChange={onLangChange}>
        {_.map(langOptions, (lang) => (
          <MenuItem key={lang.value} value={lang.value}>
            <img className={classes.flag} src={getLanguageFlag(lang.value)} />
            {lang.label}
          </MenuItem>
        ))}
      </Select>
    </BorderBox>
  );
}

export default function AudioSelector() {
  const { t } = useTranslation();
  const [sound, setSound] = React.useState('');

  const handleSoundChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setSound(event.target.value as string);
    localStorage.setItem('soundFileName', event.target.value as string);
  };

  const classes = useStyles();
  return (
    <div>
      <FormControl className={classes.root}>
        <InputLabel id="demo-simple-select-label">
          {t('Speech Sound')}
        </InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={sound}
          autoWidth
          onChange={handleSoundChange}
        >
          {options.map((option) => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

export default function TemplatesForm() {
    const templateGroups = getTemplateGroups();
    const flattenedTemplates = getFlattenedTemplates();

    const dispatch = useDispatch();

    return <Box>
        <form onSubmit={(event) => {
            event.preventDefault();
            const elements: FormElements = event.currentTarget.elements as FormElements;
            const template = flattenedTemplates.find((template) => template.id === elements.templateId.value);
            if (template === undefined) {
                return;
            }
            dispatch(loadTemplate(template.actionPayload))
            dispatch(cleanExampleList());
        }}>
            <FormControl style={{minWidth: '100%'}}>
                <Select native defaultValue="" id="template-select" name="templateId">
                    {templateGroups.map((templateGroup, ind) => (
                        <optgroup key={ind} label={templateGroup.name}>
                            {templateGroup.templates.map(template => (
                                <option key={template.id} value={template.id}>{template.name}</option>
                            ))}
                        </optgroup>
                    ))}
                </Select>
            </FormControl>
            <Box mt={1}>
                <Grid container spacing={1} alignItems="center">
                    <Grid item>
                        <Button type="submit" variant="contained" color="primary">Load</Button>
                    </Grid>
                </Grid>

            </Box>
        </form>
    </Box>;
}

DropdownInput: FunctionComponent<Props> = ({
  value,
  onChange,
  label,
  disabled,
  tooltip = '',
}) => {
  const [mainLabel, falseLabel, trueLabel] = label.split('|');

  return (
    <Tooltip title={tooltip} placement="bottom">
      <ListItem disabled={disabled}>
        <Box mr={2}>
          <Typography>{mainLabel}</Typography>
        </Box>
        <Select
          variant="outlined"
          margin="dense"
          color="secondary"
          value={value ? 'true' : 'false'}
          onChange={(event) => {
            event.preventDefault();
            onChange(event.target.value === 'true');
          }}
        >
          <MenuItem value="false">{falseLabel}</MenuItem>
          <MenuItem value="true">{trueLabel}</MenuItem>
        </Select>
      </ListItem>
    </Tooltip>
  );
}

export default function WorkspaceSelector() {
    const styles = useStyles();
    const dispatch = useDispatch();
    const workspaceId = useSelector(selectCurrentWorkspaceId);
    const workspaces = useSelector(selectWorkspacesList);

    const handleSelectChange = (event: React.ChangeEvent<{ value: unknown }>) => {
        dispatch(updateWorkspaceId(event.target.value as string));
        dispatch(ActionCreators.clearHistory())
    }
    return <Grid container alignItems={'center'} spacing={1}>
        <Grid item className={styles.selectGridItem}>
            <Select
                native
                value={workspaceId}
                fullWidth={true}
                onChange={handleSelectChange}
            >
                {workspaces.map((workspace) => (
                    <option key={workspace.id} value={workspace.id}>{workspace.name}</option>
                ))}
            </Select>
        </Grid>
        <Grid item>
            <CreateButton/>
        </Grid>
        <Grid item>
            <EditButton/>
        </Grid>
        <Grid item>
            <DeleteButton/>
        </Grid>

    </Grid>;
}

export default function LanguageSelector() {
  const { t, i18n } = useTranslation();
  const classes = useStyles();

  const [lang, setLang] = React.useState(i18n.language);

  const handleLanguageChange = (
    event: React.ChangeEvent<{ value: unknown }>
  ) => {
    const selectedLang = event.target.value as string;
    setLang(selectedLang);
    i18n.changeLanguage(selectedLang);
    localStorage.setItem('selectedLang', selectedLang);
  };

  return (
    <div>
      <FormControl className={classes.root}>
        <InputLabel id="demo-simple-select-label">{t('Language')}</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={lang}
          autoWidth
          onChange={handleLanguageChange}
        >
          {options.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.text}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

CustomSelect = <T extends string | number | readonly string[] | undefined>(props: CustomSelectProps<T>) => {
    const classes = useCustomSelectStyles({ height: props.height, fontsize: props.fontsize, labelFontsize: props.labelFontsize });
    const [value, setValue] = useState<T | undefined>(props.defaultValue);
    const items = props.items.map((x) => {
        return (
            <MenuItem style={{ fontSize: props.fontsize }} key={x.label} value={x.value}>
                <em>{x.label}</em>
            </MenuItem>
        );
    });

    return (
        <FormControl>
            <InputLabel
                shrink={true}
                classes={{
                    root: classes.inputLabel,
                    focused: classes.inputLabelFocused,
                }}
            >
                {props.label}
            </InputLabel>
            <Select
                onChange={(e) => {
                    props.onChange(e.target.value as T);
                    setValue(e.target.value as T);
                }}
                defaultValue={value}
                inputProps={{
                    classes: {
                        root: classes.input,
                    },
                }}
            >
                {items}
            </Select>
        </FormControl>
    );
}

render(): React.ReactElement {
    return (
      <FormControl
        className={classes(setupItemClass)}
        disabled={this.state.disabled}
        variant="outlined"
      >
        <FormHelperText className={setupHelperTextClass}>Branch</FormHelperText>
        <Select
          className={classes(setupItemInnerClass)}
          value={this.state.currBranch}
          onChange={event => this._onChange(event)}
        >
          {this._renderBranches()}
        </Select>
      </FormControl>
    );
  }

export function BasicSelect(props: Props) {
  const classes = useStyles();
  const { filter_item_label } = useContext(NotionFilterContext)

  return <FormControl className={classes.formControl}>
    {filter_item_label && <InputLabel>{props.label}</InputLabel>}
    <Select
      value={props.value}
      onChange={props.onChange}
    >
      {props.items.map(({ value, label, icon = null }) => <MenuItem key={value} value={value}>{icon} {label}</MenuItem>)}
    </Select>
  </FormControl>
}

SelectRange = ({
  open,
  value,
  setOpen,
  onRangeChange,
  classes,
}: SelectRangeProps) => {
  return (
    <Grid item className={classes.selectorWrapper}>
      <Box display="flex" alignItems="flex-end">
        <Typography variant="h6" color="textSecondary">
          Time range:
        </Typography>
        <Select
          className={classes.selector}
          open={open}
          onClose={() => setOpen(false)}
          onOpen={() => setOpen(true)}
          value={value}
          onChange={onRangeChange}
        >
          <MenuItem value="day">
            <Typography color="textSecondary">One day</Typography>
          </MenuItem>
          <MenuItem value="week">
            <Typography color="textSecondary">One week</Typography>
          </MenuItem>
        </Select>
      </Box>
    </Grid>
  );
}

DepartmentSelector: FC<{
    value?: string,
    onChange: (value?: string) => void
}> = memo(({value, onChange}) => {

    const [data, setData] = useState<ModelType<typeof DEPARTMENT_LIST_FETCHER>>();
    const [error, setError] = useState<Error>();
    const [loading, setLoading] = useState(false);

    const findDepartments = useCallback(async () => {
        setLoading(true);
        setData(undefined);
        setError(undefined);
        try {
            const data = await execute(DEPARTMENT_LIST_FETCHER);
            setData(data);
        } catch (e) {
            setError(e);
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        findDepartments();
    }, [findDepartments]);

    const onSelectChange = useCallback((e: ChangeEvent<{value: any}>) => {
        const v = e.target.value;
        onChange(v === "" ? undefined : v);
    }, [onChange]);

    return (
        <FormControl fullWidth={true}>
            <InputLabel>
                Department
                { loading && <CircularProgress size="1rem"/> }
                { error && <span style={{color:"red"}}>Load failed...</span>}
            </InputLabel>
            <Select 
            disabled={data === undefined} 
            error={false}
            value={value ?? ""}
            onChange={onSelectChange}
            fullWidth={true}>
                <MenuItem key="Nonde" value="">
                    <em>Unspecified</em>
                </MenuItem>
                {
                    data?.connection?.edges?.map(edge =>
                        <MenuItem key={edge.node.id} value={edge.node.id}>{edge.node.name}</MenuItem>
                    )
                }
            </Select>
        </FormControl>
    );
})

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

/** @public */
export function CatalogKindHeader(props: CatalogKindHeaderProps) {
  const { initialFilter = 'component', allowedKinds } = props;
  const classes = useStyles();
  const catalogApi = useApi(catalogApiRef);
  const { value: allKinds } = useAsync(async () => {
    return await catalogApi
      .getEntityFacets({ facets: ['kind'] })
      .then(response => response.facets.kind?.map(f => f.value).sort() || []);
  });
  const {
    updateFilters,
    queryParameters: { kind: kindParameter },
  } = useEntityList();

  const queryParamKind = useMemo(
    () => [kindParameter].flat()[0]?.toLocaleLowerCase('en-US'),
    [kindParameter],
  );
  const [selectedKind, setSelectedKind] = useState(
    queryParamKind ?? initialFilter,
  );

  useEffect(() => {
    updateFilters({
      kind: selectedKind ? new EntityKindFilter(selectedKind) : undefined,
    });
  }, [selectedKind, updateFilters]);

  // Set selected Kind on query parameter updates; this happens at initial page load and from
  // external updates to the page location.
  useEffect(() => {
    if (queryParamKind) {
      setSelectedKind(queryParamKind);
    }
  }, [queryParamKind]);

  // Before allKinds is loaded, or when a kind is entered manually in the URL, selectedKind may not
  // be present in allKinds. It should still be shown in the dropdown, but may not have the nice
  // enforced casing from the catalog-backend. This makes a key/value record for the Select options,
  // including selectedKind if it's unknown - but allows the selectedKind to get clobbered by the
  // more proper catalog kind if it exists.
  const availableKinds = [capitalize(selectedKind)].concat(
    allKinds?.filter(k =>
      allowedKinds
        ? allowedKinds.some(
            a => a.toLocaleLowerCase('en-US') === k.toLocaleLowerCase('en-US'),
          )
        : true,
    ) ?? [],
  );
  const options = availableKinds.sort().reduce((acc, kind) => {
    acc[kind.toLocaleLowerCase('en-US')] = kind;
    return acc;
  }, {} as Record<string, string>);

  return (
    <Select
      input={<InputBase value={selectedKind} />}
      value={selectedKind}
      onChange={e => setSelectedKind(e.target.value as string)}
      classes={classes}
    >
      {Object.keys(options).map(kind => (
        <MenuItem value={kind} key={kind}>
          {`${options[kind]}s`}
        </MenuItem>
      ))}
    </Select>
  );
}

render() {
    var anySelected = false;
    const items = this.props.links.map(link => {
      if (this.props.selectedValue === link.val) anySelected = true;
      return (
        <MenuItem
          component={Link as any}
          to={link.val}
          key={link.name + link.val}
          value={link.val}
        >
          {link.icon && (<DynamicMuiIcon name={link.icon} />)}
          {link.name}
        </MenuItem>
      );
    });
    const id = `dropdowntab-${this.props.key}`;
    return (
      <div className={this.props.classes.outer}>
        <FormControl className={this.props.classes.inner}>
          <Select
            className={this.props.classes.select}
            classes={{
              icon: this.props.classes.selectIcon
            }}
            value={anySelected ? this.props.selectedValue : '__NOT_SELECTED__'}
            key={this.props.key}
            onChange={e => this.props.onDropdownTabSelect(e.target.value as string)}
            inputProps={{
              className: classNames(
                this.props.classes.tabButton,
                anySelected && this.props.classes.tabButtonSelected,
                this.props.className
              ),
              id: id,
            }}
            displayEmpty
            MenuProps={{
              anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'center',
              },
              transformOrigin: {
                vertical: 'top',
                horizontal: 'center',
              },
              anchorReference: 'anchorEl',
            }}
          >
            {this.props.label && (<MenuItem style={{ display: 'none' }} divider disabled value='__NOT_SELECTED__'>
              {this.props.icon}
              {this.props.label}
            </MenuItem>)}
            {items}
          </Select>
        </FormControl>
      </div>
    );
  }

export function SelectWorkflow({
  workflowId,
  onChange,
  FormControlProps = {},
}: {
  workflowId: number
  onChange: (workflowId: number) => void
  FormControlProps?: FormControlProps
}) {
  const workflows = useFetchWorkflows()
  const { selectedApplication } = useAppState()

  if (!selectedApplication) return null

  if (workflows.error) {
    return <Alert severity="error">Could not load workflows</Alert>
  }

  const workflowsSorted = (workflows.data ?? []).orderBy(
    [
      (workflow) => {
        const containsName = workflow.name
          .toLowerCase()
          .includes(selectedApplication.name.toLowerCase().split(' ')[0])
        const containsDeploy = workflow.name.toLowerCase().includes('deploy')
        return containsDeploy && containsName
          ? WorkflowRelevance.NameAndDeploy
          : containsName
          ? WorkflowRelevance.Name
          : containsDeploy
          ? WorkflowRelevance.Deploy
          : WorkflowRelevance.None
      },
      (w) => w.name,
    ],
    ['desc', 'asc']
  )
  return (
    <FormControl variant="outlined" {...FormControlProps}>
      <InputLabel id="workflow-select-label">Workflow</InputLabel>
      {workflows.isLoading ? (
        <CircularProgress />
      ) : workflows.data ? (
        <Select
          labelId="workflow-select-label"
          id="workflow-select"
          value={workflowId}
          label="Workflow"
          onChange={(e) => {
            const workflowId =
              typeof e.target.value === 'number'
                ? (e.target.value as number)
                : 0
            onChange(workflowId)
          }}>
          <MenuItem value={0}>
            <em>None</em>
          </MenuItem>
          {workflowsSorted.map((workflow) => (
            <MenuItem key={workflow.id} value={workflow.id}>
              {workflow.name}
            </MenuItem>
          ))}
        </Select>
      ) : null}
    </FormControl>
  )
}

Dropdown: React.SFC<DropdownProps> = (props) => {
  const { options, placeholder, field, helperText, disabled, form, fieldValue, fieldChange } =
    props;

  const { onChange, value, ...rest } = field;

  let optionsList = null;
  if (options) {
    optionsList = options.map((option: any) => (
      <MenuItem value={option.id} key={option.id}>
        {option.label ? option.label : option.name}
      </MenuItem>
    ));
  }

  return (
    <div className={styles.Dropdown} data-testid="dropdown">
      <FormControl
        variant="outlined"
        fullWidth
        error={form && form.errors[field.name] && form.touched[field.name]}
      >
        {placeholder ? (
          <InputLabel id="simple-select-outlined-label" data-testid="inputLabel">
            {placeholder}
          </InputLabel>
        ) : null}
        <Select
          onChange={(event) => {
            onChange(event);
            if (fieldChange) {
              fieldChange(event);
            }
          }}
          MenuProps={{
            classes: {
              paper: styles.Paper,
            },
          }}
          value={fieldValue !== undefined ? fieldValue : value}
          {...rest}
          label={placeholder !== '' ? placeholder : undefined}
          fullWidth
          disabled={disabled}
        >
          {optionsList}
        </Select>
        {form && form.errors[field.name] && form.touched[field.name] ? (
          <FormHelperText>{form.errors[field.name]}</FormHelperText>
        ) : null}
        {helperText ? (
          <FormHelperText className={styles.HelperText}>{helperText}</FormHelperText>
        ) : null}
      </FormControl>
    </div>
  );
}

SortSelect = styled(Select)`
  border-radius: 4px;
  border: 1px solid #9e9e9e;
  padding: 0.25rem;
  padding-left: 1rem;
  background-color: white;
`

export default function FeePaySelector() {
  const classes = useStyles();
  const sourceTargetDetails = useSourceTarget();
  const { dispatchTransaction } = useUpdateTransactionContext();
  const { payFee } = useTransactionContext();
  const { isBridged } = useGUIContext();

  const {
    sourceChainDetails: { chain: sourceChain },
    targetChainDetails: { chain: targetChain }
  } = sourceTargetDetails;

  const onChange = useCallback(
    (event) => {
      dispatchTransaction(TransactionActionCreators.changeDispatchFeePayChain(event.target.value));
    },
    [dispatchTransaction]
  );

  const chain = payFee === PayFee.AtSourceChain ? sourceChain : targetChain;

  if (!isBridged) {
    return null;
  }

  return (
    <div className={classes.container}>
      <Typography variant="body1" color="secondary">
        Dispatch fee payed on
      </Typography>
      <div className={classes.item}>
        <ChainLogo chain={chain} />
      </div>

      <div className={classes.item}>
        <Select
          onChange={onChange}
          value={payFee}
          disableUnderline
          renderValue={(): React.ReactNode => (
            <Typography variant="body1" color="secondary" className={classes.item}>
              {chain}
            </Typography>
          )}
        >
          <MenuItem value={PayFee.AtSourceChain}>Source Chain </MenuItem>
          <MenuItem value={PayFee.AtTargetChain}>Target Chain </MenuItem>
        </Select>
      </div>
    </div>
  );
}

export function Languages(props: Partial<ISectionProps> & { languageSelectorOnly?: boolean }): JSX.Element {
  const { t } = useTranslation();

  const preference = usePreferenceObservable();
  const [platform, supportedLanguagesMap]: [string | undefined, Record<string, string> | undefined] = usePromiseValue(
    async (): Promise<[string | undefined, Record<string, string> | undefined]> =>
      await Promise.all([window.service.context.get('platform'), window.service.context.get('supportedLanguagesMap')]),
    [undefined, undefined],
  );

  return (
    <>
      <SectionTitle ref={props.sections?.languages?.ref}>{t('Preference.Languages')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          {preference === undefined || platform === undefined || supportedLanguagesMap === undefined || preference.language === undefined ? (
            <ListItem>{t('Loading')}</ListItem>
          ) : (
            <>
              <ListItem sx={{ justifyContent: 'space-between' }}>
                <ListItemText primary={t('Preference.ChooseLanguage')} />
                <InputLabel sx={{ flex: 1 }} id="demo-simple-select-label">
                  {t('Preference.Languages')}
                </InputLabel>
                <Select
                  sx={{ flex: 2 }}
                  labelId="demo-simple-select-label"
                  value={preference.language}
                  onChange={async (event) => {
                    await window.service.preference.set('language', event.target.value);
                  }}
                  autoWidth>
                  {Object.keys(supportedLanguagesMap).map((languageID) => (
                    <MenuItem value={languageID} key={languageID}>
                      {supportedLanguagesMap[languageID]}
                    </MenuItem>
                  ))}
                </Select>
              </ListItem>
              {props.languageSelectorOnly !== true && (
                <>
                  <Divider />
                  <ListItem>
                    <ListItemText primary={t('Preference.SpellCheck')} />
                    <ListItemSecondaryAction>
                      <Switch
                        edge="end"
                        color="primary"
                        checked={preference.spellcheck}
                        onChange={async (event) => {
                          await window.service.preference.set('spellcheck', event.target.checked);
                          props?.requestRestartCountDown?.();
                        }}
                      />
                    </ListItemSecondaryAction>
                  </ListItem>
                  {platform !== 'darwin' && (
                    <>
                      <Divider />
                      <ListItem button onClick={async () => await window.service.window.open(WindowNames.spellcheck)}>
                        <ListItemText
                          primary={t('Preference.SpellCheckLanguages')}
                          secondary={preference.spellcheckLanguages.map((code) => hunspellLanguagesMap[code]).join(' | ')}
                        />
                        <ChevronRightIcon color="action" />
                      </ListItem>
                    </>
                  )}
                </>
              )}
            </>
          )}
        </List>
      </Paper>
    </>
  );
}

CreateMeetingRoom = () => {
    const { chimeClientState, setMessage, setStage } = useAppState();
    const [meetingName, setMeetingName] = useState(chimeClientState.meetingName || "");
    const [region, setRegion] = useState(DEFAULT_REGION);
    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onCreateMeetingClicked = async () => {
        setIsLoading(true);
        try {
            await chimeClientState.createMeeting(meetingName, region);
            setMessage("Info", "Room created", [`room created, please join.`]);
            setIsLoading(false);
            setStage(STAGE.ENTRANCE);
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "Creating meeting room failed", [`room(${e.meetingName}) exist?: ${!e.created}`]);
            setIsLoading(false);
        }
    };

    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setMeetingName(e.target.value)} label="meeting name" secret={false} height={20} fontsize={16} defaultValue={meetingName} autofocus />
                <FormControl className={classes.formControl}>
                    <InputLabel>Region</InputLabel>
                    <Select value={region} onChange={(e: any) => setRegion(e.target.value)}>
                        <MenuItem disabled value="Video">
                            <em>Region</em>
                        </MenuItem>
                        {Object.keys(AVAILABLE_AWS_REGIONS).map((key) => {
                            return (
                                <MenuItem value={key} key={key}>
                                    {AVAILABLE_AWS_REGIONS[key]}
                                </MenuItem>
                            );
                        })}
                    </Select>
                </FormControl>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onCreateMeetingClicked} id="submit">
                        Create Meeting
                    </Button>
                )}
            </div>
        </>
    );

    const links = [
        {
            title: "Join Meeting",
            onClick: () => {
                setStage(STAGE.ENTRANCE);
            },
        },
        {
            title: "Sign out",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
    ];

    return (
        <>
            <Questionnaire avatorIcon={<MeetingRoom />} title="Create Meeting" forms={forms} links={links} />
        </>
    );
}

ModNameSelect: React.FunctionComponent<Props> = ({
  value,
  onChange,
  logLines,
}) => {
  const styles = useStyles();
  const [modNames, setModNames] = useState<string[]>([]);

  useEffect(() => {
    debugConsole.log('useEffect: ModNameSelect set mod names');
    setModNames(uniq(logLines.map((line) => line.modName)));
  }, [logLines]);

  const handleModNameChange = ({
    target,
  }: React.ChangeEvent<{
    name?: string | undefined;
    value: unknown;
  }>) => {
    onChange(target.value as string);
  };

  return (
    <Select
      variant="outlined"
      margin="dense"
      className={styles.root}
      value={value}
      onChange={handleModNameChange}
      displayEmpty
    >
      <MenuItem value={''}>{logsText.allMods}</MenuItem>
      {modNames.map((modName) => (
        <MenuItem value={modName} key={modName}>
          {modName}
        </MenuItem>
      ))}
    </Select>
  );
}

TestVariationMergeForm: React.FunctionComponent<IProps> = ({
  projectId,
  items,
}) => {
  const navigate = useNavigate();
  const buildDispatch = useBuildDispatch();
  const { enqueueSnackbar } = useSnackbar();
  const [fromBranch, setFromBranch] = React.useState("");
  const [toBranch, setToBranch] = React.useState("");

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    testVariationService
      .merge(projectId, fromBranch, toBranch)
      .then((build) => {
        enqueueSnackbar(`Merge started in build: ${build.id}`, {
          variant: "success",
        });
        navigate({
          pathname: buildProjectPageUrl(projectId),
          ...buildTestRunLocation(build.id),
        });
        selectBuild(buildDispatch, build.id);
      })
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  return (
    <form onSubmit={handleSubmit}>
      <Grid container spacing={2} alignItems="flex-end">
        <Grid item xs>
          <Select
            required
            fullWidth
            displayEmpty
            value={fromBranch}
            onChange={(event) => setFromBranch(event.target.value as string)}
          >
            <MenuItem value="">
              <em>From branch</em>
            </MenuItem>
            {items.map((i) => (
              <MenuItem key={i} value={i}>
                {i}
              </MenuItem>
            ))}
          </Select>
        </Grid>
        <Grid item xs>
          <Autocomplete
            id="toBranch"
            options={items.map((i) => ({ title: i }))}
            getOptionLabel={(option) => option.title}
            freeSolo
            fullWidth
            renderInput={(params) => (
              <TextField {...params} required label="To branch" />
            )}
            onInputChange={(_, value) => {
              setToBranch(value);
            }}
          />
        </Grid>
        <Grid item>
          <Button type="submit" color="primary" variant="contained" id={LOCATOR_TEST_VARIATION_SELECT_BRANCH}>
            Merge
          </Button>
        </Grid>
      </Grid>
    </form>
  );
}

function App() {
    const classes = useStyles()

    const [values, setValues] = React.useState({
        timeCost: { value: 25, unit: 'dollars', period: 'hour' },
        serviceCost: { value: 125, unit: 'dollars', period: 'month' },
        trainingTime: { value: 2, unit: 'hour', period: null },
        timeSavings: { value: 60, unit: 'min', period: 'day' },
        peopleCount: { value: 1, unit: null, period: null },

        savingPeriodCost: 'year',
        savingPeriodPeople: 'day',
        paybackPeriod: 'day',
    })

    const [costs, setCosts] = React.useState({
        employeePerYear: 0,
        servicePerYear: 0,
        trainingPerYear: 0,
        savingsPerYear: 0,
        freeTimePerYear: 0,
        paybackTimePerYear: 0,
    })

    const handleChange = (prop: string, key: string | null = null) => (
        event: ChangeEvent<HTMLInputElement | { value: unknown }>,
    ): void => {
        let val: any = event.target.value
        if (key === null) {
            setValues({
                ...values,
                [prop]: val,
            })
        } else {
            if (key === 'value' && (val < 0 || isNaN(val))) {
                val = 0
            }
            setValues({
                ...values,
                [prop]: {
                    //@ts-ignore
                    value: values[prop].value,
                    //@ts-ignore
                    unit: values[prop].unit,
                    //@ts-ignore
                    period: values[prop].period,
                    //@ts-ignore
                    [key]: val,
                },
            })
        }
    }

    useEffect(() => {
        // save this to state for now for ease of visibility
        const employeePerYear =
            values.timeCost.value * periodToYear(values.timeCost.period, 1)
        const servicePerYear =
            values.serviceCost.value *
            periodToYear(values.serviceCost.period, 1)

        // assumes amortisation period of 1 year
        const trainingPerYear =
            unitToYear(values.trainingTime.unit, values.trainingTime.value) *
            employeePerYear *
            values.peopleCount.value

        const freeTimePerYear =
            periodToYear(
                values.timeSavings.period,
                unitToYear(values.timeSavings.unit, values.timeSavings.value),
            ) * values.peopleCount.value

        const savingsPerYear =
            employeePerYear * freeTimePerYear - servicePerYear - trainingPerYear

        const paybackTimePerYear =
            (trainingPerYear + servicePerYear) / employeePerYear

        setCosts({
            employeePerYear,
            servicePerYear,
            trainingPerYear,
            savingsPerYear,
            freeTimePerYear,
            paybackTimePerYear,
        })
    }, [values])

    return (
        <Container maxWidth={'md'}>
            <Paper className={classes.root} variant={'outlined'}>
                <div className={classes.heading}>
                    <TopControls />
                    <Typography variant="h2" component="h1">
                        Is it worth the cost?
                    </Typography>
                    <Typography variant="h5" component="p" gutterBottom>
                        A simple check on whether purchasing a service is worth
                        the cost.
                    </Typography>
                </div>
                <Grid container>
                    <Grid item xs={12} md={6}>
                        <h2>Basics</h2>
                        <p>1. Cost of your time or an employees time.</p>
                        <FormControl
                            className={clsx(classes.margin, classes.textField)}
                            variant="outlined"
                        >
                            <InputLabel htmlFor="time-cost">
                                Time Cost
                            </InputLabel>
                            <OutlinedInput
                                id="time-cost"
                                value={values.timeCost.value}
                                type="number"
                                onChange={handleChange('timeCost', 'value')}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <AttachMoneyIcon />
                                    </InputAdornment>
                                }
                                labelWidth={80}
                            />
                        </FormControl>
                        <FormControl
                            variant="outlined"
                            className={classes.margin}
                        >
                            <InputLabel htmlFor="time-cost-unit">
                                per
                            </InputLabel>
                            <Select
                                native
                                value={values.timeCost.period}
                                onChange={handleChange('timeCost', 'period')}
                                labelWidth={40}
                                inputProps={{
                                    name: 'per',
                                    id: 'time-cost-unit',
                                }}
                            >
                                <option value={'hour'}>hour</option>
                                <option value={'day'}>day</option>
                                <option value={'week'}>week</option>
                                <option value={'month'}>month</option>
                                <option value={'year'}>year</option>
                            </Select>
                        </FormControl>
                        <p>2. Cost of the service under consideration.</p>
                        <FormControl
                            className={clsx(classes.margin, classes.textField)}
                            variant="outlined"
                        >
                            <InputLabel htmlFor="service-cost">
                                Service Cost
                            </InputLabel>
                            <OutlinedInput
                                id="service-cost"
                                value={values.serviceCost.value}
                                type="number"
                                onChange={handleChange('serviceCost', 'value')}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <AttachMoneyIcon />
                                    </InputAdornment>
                                }
                                labelWidth={95}
                            />
                        </FormControl>
                        <FormControl
                            variant="outlined"
                            className={classes.margin}
                        >
                            <InputLabel htmlFor="service-cost-period">
                                per
                            </InputLabel>
                            <Select
                                native
                                value={values.serviceCost.period}
                                onChange={handleChange('serviceCost', 'period')}
                                labelWidth={40}
                                inputProps={{
                                    name: 'per',
                                    id: 'service-cost-period',
                                }}
                            >
                                {/*<option value={'hour'}>hour</option>*/}
                                <option value={'day'}>day</option>
                                <option value={'week'}>week</option>
                                <option value={'month'}>month</option>
                                <option value={'year'}>year</option>
                            </Select>
                        </FormControl>
                        <p>
                            3. Estimate the training time required (one person).
                        </p>
                        <FormControl
                            fullWidth
                            className={clsx(classes.margin, classes.textField)}
                            variant="outlined"
                        >
                            <InputLabel htmlFor="training-time">
                                Training Time
                            </InputLabel>
                            <OutlinedInput
                                id="training-time"
                                value={values.trainingTime.value}
                                type="number"
                                onChange={handleChange('trainingTime', 'value')}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <AccessTimeIcon />
                                    </InputAdornment>
                                }
                                labelWidth={105}
                            />
                        </FormControl>
                        <FormControl
                            variant="outlined"
                            className={classes.margin}
                        >
                            <Select
                                native
                                value={values.trainingTime.unit}
                                onChange={handleChange('trainingTime', 'unit')}
                                inputProps={{
                                    name: 'per',
                                    id: 'training-time-unit',
                                }}
                            >
                                <option value={'hour'}>hours</option>
                                <option value={'day'}>days</option>
                                <option value={'week'}>weeks</option>
                                <option value={'month'}>months</option>
                                {/*<option value={'year'}>years</option>*/}
                            </Select>
                        </FormControl>
                        <p>
                            4. Estimate the time this service will save (one
                            person).
                        </p>
                        <FormControl
                            className={clsx(classes.margin, classes.textField)}
                            variant="outlined"
                        >
                            <InputLabel htmlFor="time-savings">
                                Time Saved
                            </InputLabel>
                            <OutlinedInput
                                id="time-savings"
                                type="number"
                                value={values.timeSavings.value}
                                onChange={handleChange('timeSavings', 'value')}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <AccessTimeIcon />
                                    </InputAdornment>
                                }
                                labelWidth={80}
                            />
                        </FormControl>
                        <FormControl
                            variant="outlined"
                            className={classes.margin}
                        >
                            <Select
                                native
                                value={values.timeSavings.unit}
                                onChange={handleChange('timeSavings', 'unit')}
                            >
                                <option value={'minute'}>minutes</option>
                                <option value={'hour'}>hours</option>
                                <option value={'day'}>days</option>
                                <option value={'week'}>weeks</option>
                                <option value={'month'}>months</option>
                            </Select>
                        </FormControl>
                        <FormControl
                            variant="outlined"
                            className={classes.margin}
                        >
                            <InputLabel htmlFor="time-savings-period">
                                per
                            </InputLabel>
                            <Select
                                id={'time-savings-period'}
                                native
                                value={values.timeSavings.period}
                                onChange={handleChange('timeSavings', 'period')}
                                labelWidth={40}
                            >
                                <option value={'hour'}>hour</option>
                                <option value={'day'}>day</option>
                                <option value={'week'}>week</option>
                                <option value={'month'}>month</option>
                                <option value={'year'}>year</option>
                            </Select>
                        </FormControl>
                        <p>5. Number of people using the service.</p>
                        <FormControl
                            className={clsx(classes.margin, classes.textField)}
                            variant="outlined"
                        >
                            <InputLabel htmlFor="people-count">
                                People
                            </InputLabel>
                            <OutlinedInput
                                id="people-count"
                                type="number"
                                value={values.peopleCount.value}
                                onChange={handleChange('peopleCount', 'value')}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <EmojiPeopleIcon />
                                    </InputAdornment>
                                }
                                labelWidth={50}
                            />
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Breakdown
                            values={values}
                            costs={costs}
                            handleChange={handleChange}
                        />
                    </Grid>
                </Grid>
            </Paper>
        </Container>
    )
}