@material-ui/core#Select JavaScript Examples

Examples = ({ selected, setSelected, className }) => {
  const classes = useStyles();
  const handleChange = event => {
    setSelected(event.target.value);
  };
  return (
    <FormControl className={`${classes.formControl} ${className}`}>
      <InputLabel htmlFor="native-simple">{D.labelExample}</InputLabel>
      <Select
        native
        value={selected}
        onChange={handleChange}
        inputProps={{
          name: 'questionnaire',
          id: 'native-simple',
        }}
      >
        <option value="">{D.labelExamples}</option>
        {QUESTIONNAIRE_EXAMPLES.map(v => {
          return (
            <option key={v} value={v}>
              {v.toUpperCase()}
            </option>
          );
        })}
      </Select>
    </FormControl>
  );
}

render() {
        return (
            <FormControl>
                <InputLabel htmlFor={this.props.name}>{this.props.name}</InputLabel>
                <Select
                    {...this.props}
                    inputProps={{
                        name: this.props.name,
                    }}
                >
                    {this.props.options.map(option => (
                        <option value={option.value}>{option.text}</option>
                    ))}
                </Select>
            </FormControl>
        );
    }

render() {
    const { id, label, value, renderValue, controlClassName } = this.props;
    let { options } = this.props;

    const entry = (key, value) => (
      <MenuItem key={`${id}-${key}`} value={key}>{value}</MenuItem>
    );

    if (options instanceof Map) {
      const opts = [];
      options.forEach((value, key) => opts.push(entry(key, value)));
      options = opts;
    } else if (Array.isArray(options)) {
      options = options.map(value => entry(value, value));
    } else {
      options = Object.entries(options).map(([key, value]) => entry(key, value));
    }

    return (
      <FormControl className={controlClassName}>
        {label &&
        <InputLabel htmlFor={id}>{label}</InputLabel>}
        <Select
          value={value}
          onChange={this.handleChange}
          inputProps={{
            name: id,
            id,
          }}
          renderValue={renderValue}
        >
          {options}
        </Select>
      </FormControl>
    );
  }

StatefulSelectField = ({ field }) => {
  const { label, property, onChange, disabled, choices } = field;

  const [value, setValue] = useState("");

  const handleChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);

    if (onChange) {
      onChange(newValue);
    }
  };

  return (
    <Box>
      <InputLabel shrink>{label}</InputLabel>
      <FormControl
        style={{
          width: "100%",
        }}
        variant="outlined"
        size="small"
      >
        <Select
          labelId={`label-${property}`}
          id={`select-${property}`}
          value={value}
          disabled={!!disabled}
          onChange={handleChange}
        >
          {choices.map((c, index) => (
            <MenuItem key={index} value={c.value}>
              {c.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

SortMenu = () => {
  const [{ sortBy }, dispatch] = useEntryContext();
  const classes = useSortStyles();

  const handleSelectChange = (e) => {
    dispatch(sortEntries(e.target.value));
  };

  return (
    <div className={classes.root}>
      <Typography variant="subtitle1" className={classes.label}>
        <SortIcon className={classes.sortIcon} />
        Sort by:
      </Typography>
      <form>
        <FormControl>
          <Select
            value={sortBy}
            displayEmpty
            onChange={handleSelectChange}
            className={classes.select}
          >
            <MenuItem value="newest">Newest first</MenuItem>
            <MenuItem value="oldest">Oldest first</MenuItem>
            <MenuItem value="a-z">Title: A - Z</MenuItem>
            <MenuItem value="z-a">Title: Z - A</MenuItem>
          </Select>
        </FormControl>
      </form>
    </div>
  );
}

SelectSource = () => {
  const classes = useStyles();
  const { playback } = useContext(ClientContext);
  const [state, setState] = playback;
  const [source, setSource] = useState(0);

  const handleChange = (event) => {
    setSource(event.target.value);
  };
  return (
    <div>
      <div className={classes.formControl}>
        <Select
          disabled={state.playing}
          value={source}
          name="Source"
          onChange={handleChange}
          className={classes.selectEmpty}
          style={{ fontSize: "0.9rem" }}
        >
          <option value={0}>System Output</option>
          <option value={1}>Mic/AUX</option>
        </Select>
      </div>
    </div>
  );
}

MySelect = ({
  label,
  labelTitle,
  options,
  variant,
  classes,
  ...props
}) => {
  const [field] = useField(props);
  const inputLabel = useRef(null);
  const [labelWidth, setLabelWidth] = useState(0);

  useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  return (
    <FormControl className={classes} variant={variant}>
      <InputLabel id={label} ref={inputLabel}>
        {labelTitle}
      </InputLabel>
      <Select
        labelId={label}
        labelWidth={labelWidth}
        {...field}
        {...props}
      >
        {options.map(option => (
          <MenuItem key={option} value={option}>
            {option || <em>всі</em>}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

NavSort = ({ sortOptions }) => {
  const styles = useStyles();
  const { setSorting, sortLabel: sortLabelValue } = sortOptions;

  const selectOptions = _.map(sortOptions.labels, ({ label, value }) => (
    <MenuItem key={label} value={value}>
      {label}
    </MenuItem>
  ));

  const { optionHandler } = useSort(sortOptions.labels, setSorting);

  return (
    <div className={styles.sort}>
      <FormControl className={styles.formControl}>
        <InputLabel id={materialUiConstants.checkBoxLabel}>
          {sortLabel}
        </InputLabel>
        <Select
          data-cy='user-sorting'
          labelId='checkbox-label'
          id='checkbox'
          value={sortLabelValue}
          onChange={optionHandler}
          defaultValue={0}
        >
          {selectOptions}
        </Select>
      </FormControl>
    </div>
  );
}

Dropdown = ({ mappedItems, handler, defaultValue, value, fromSideBar }) => {
  const styles = dropdownStyles({ fromSideBar });
  const [sticky, setSticky] = useState(false);
  const stickyLang = clsx({
    [styles.rootSelect]: true,
    [styles.sticky]: sticky
  });

  useLayoutEffect(() => {
    let componentMounted = true;
    window.addEventListener('scroll', () => {
      if (componentMounted) {
        window.scrollY > 50 ? setSticky(true) : setSticky(false);
      }
    });
    return () => {
      componentMounted = false;
    };
  }, []);

  return (
    <div className={styles.rootItem}>
      <Select
        className={stickyLang}
        defaultValue={defaultValue}
        value={value}
        onChange={handler}
        IconComponent={KeyboardArrowDown}
      >
        {mappedItems}
      </Select>
    </div>
  );
}

LanguageSelector = ({ language, changeLanguage, drawerOpen }) => {
    const classes = useStyles()
    const iconComponent = !drawerOpen ? { IconComponent: EmptyElement } : {}

    return (
        <Select
            className={classes.langSelectorContainer}
            classes={{ selectMenu: classes.langSelectMenu, icon: classes.langSelectCaret }}
            value={language}
            onChange={changeLanguage}
            {...iconComponent}
        >
            <ListItem button value='ro' className={classes.langSelectorItem}>
                <Flag name='RO' format='png' pngSize={32} shiny={true} basePath='/static/flags' />
                {drawerOpen && <Typography className={classes.langSelectorText}>{'Romana'}</Typography>}
            </ListItem>
            <ListItem button value='en' className={classes.langSelectorItem}>
                <Flag name='GB' format='png' pngSize={32} shiny={true} basePath='/static/flags' />
                {drawerOpen && <Typography className={classes.langSelectorText}>{'English'}</Typography>}
            </ListItem>
        </Select>
    )
}

export default function AudioInputList() {
  const classes = useStyles();
  const audioInputDevices = useAudioInputDevices();
  const { localTracks } = useVideoContext();

  const localAudioTrack = localTracks.find(track => track.kind === 'audio');
  const mediaStreamTrack = useMediaStreamTrack(localAudioTrack);
  const localAudioInputDeviceId = mediaStreamTrack ? mediaStreamTrack.getSettings().deviceId : undefined;

  function replaceTrack(newDeviceId) {
    localAudioTrack && localAudioTrack.restart({ deviceId: { exact: newDeviceId } });
  }

  return (
    <div className={classes.container}>
      <div className="inputSelect">
        {audioInputDevices.length > 1 ? (
          <FormControl fullWidth>
            <Typography variant="h6">Audio Input:</Typography>
            <Select onChange={e => replaceTrack(e.target.value)} value={localAudioInputDeviceId || ''}>
              {audioInputDevices.map(device => (
                <MenuItem value={device.deviceId} key={device.deviceId}>
                  {device.label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        ) : (
          <>
            <Typography variant="h6">Audio Input:</Typography>
            <Typography>{localAudioTrack && localAudioTrack.mediaStreamTrack.label || 'No Local Audio'}</Typography>
          </>
        )}
      </div>
      <LocalAudioLevelIndicator />
    </div>
  );
}

InputSelect = ({
  searchType,
  onSearchTypeChange,
  children,
  ...selectProps
}) => {
  return (
    <Select
      value={searchType}
      onChange={({ target: { value } }) => onSearchTypeChange(value)}
      input={<BootstrapInput />}
      style={{ minWidth: '115px' }}
      MenuProps={{
        getContentAnchorEl: null,
        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
        transformOrigin: { vertical: 'top', horizontal: 'center' },
        disableScrollLock: true,
      }}
      {...selectProps}
    >
      {children}
    </Select>
  );
}

render() {
    const { classes, t, location } = this.props;
    const {
      languages,
      language
    } = this.state

    if(!location.pathname.includes('/open') && !location.pathname.includes('/close')) {
      return null
    }

    return (
      <div className={classes.footer}>
        <div className={classes.footerLinks}>
          <Link to={"/"} className={ classes.link }>
            <Typography className={ classes.footerText } variant={ 'h6'}>{ t('Footer.Home') }</Typography>
          </Link>
        </div>
        <div className={ classes.languageContainer }>
          <FormControl variant="outlined">
            <Select
              id="language"
              value={ language }
              onChange={ this.handleLanguageChange }
              inputProps={{ className: classes.selectInput }}
              color="primary"
              fullWidth
            >
              { languages.map((language) => {
                return <MenuItem key={ language.code } value={ language.code }>{ language.language }</MenuItem>
              })}
            </Select>
          </FormControl>
        </div>
      </div>
    )
  }

render() {
    const { classes, t, location } = this.props;
    const {
      languages,
      language
    } = this.state

    if(!location.pathname.includes('/liquidate') && !location.pathname.includes('/liquidationCandidates')) {
      return null
    }

    return (
      <div className={classes.footer}>
        <div className={classes.footerLinks}>
          <Link to={"/"} className={ classes.link }>
            <Typography className={ classes.footerText } variant={ 'h6'}>{ t('Footer.Home') }</Typography>
          </Link>
        </div>
        <div className={ classes.languageContainer }>
          <FormControl variant="outlined">
            <Select
              id="language"
              value={ language }
              onChange={ this.handleLanguageChange }
              inputProps={{ className: classes.selectInput }}
              color="primary"
              fullWidth
            >
              { languages.map((language) => {
                return <MenuItem key={ language.code } value={ language.code }>{ language.language }</MenuItem>
              })}
            </Select>
          </FormControl>
        </div>
      </div>
    )
  }

export default function OperationForm(props) {
  const classes = useStyles();
  const operation = props.operation;

  return (
    <div className={classes.formContainer}>
      <div className={classes.formGroup}>
        <FormControl fullWidth={true}>
          <InputLabel htmlFor="operation-title">오퍼레이션 명칭</InputLabel>
          <Input id="operation-title" value={operation.title}></Input>
        </FormControl>
      </div>

      <div className={classes.formGroup}>
        <FormControl fullWidth={true}>
          <TextField
            id="operation-description"
            label="오퍼레이션 설명"
            multiline
            rows={5}
            value={operation.desc}
            aria-describedby="description-helper-text"
            name="description"
            placeholder="API 이용자에게 안내되는 설명글 입니다. 데이터의 이해를 위한 설명을 친절히 작성해 주세요."
          />
        </FormControl>
      </div>

      <div className={classes.formGroup}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={3}>
            <FormControl fullWidth={true}>
              <InputLabel width="100%" htmlFor="operation-method">
                호출 방식
              </InputLabel>
              <Select
                labelId="operation-method"
                id="namespace-input"
                name="method"
                value={operation.method || 'GET'}
              >
                <MenuItem value={"GET"}>GET</MenuItem>
              </Select>
              <FormHelperText id="operation-method-text">Http metod를 선택해주세요. 현재 GET 기능만 지원합니다.</FormHelperText>
            </FormControl>
          </Grid>

          <Grid item xs={12} sm={9}>
            <FormControl fullWidth={true}>
              <InputLabel width="100%" htmlFor="operation-end-point">호출 주소</InputLabel>
              <Input id="operation-end-point" value={operation.endPoint || ''} aria-describedby="entityName-helper-text" name="entityName" />
              <FormHelperText id="operation-end-point-text">{`https://OOOOOO.go.kr/api/APINAME/v1/TEST`}</FormHelperText>
            </FormControl>  
          </Grid>
        </Grid>
      </div>
    </div>
  )
}

function Waifu() {
  const listInnerRef = useRef(null);
  const [picsList, setPicsList] = useState([]);
  const [refreshKey, setRefreshKey] = useState(0);
  const [keyword, setKeyword] = useState("waifu");
  const classes = useStyles();

  const getWaifuPics = () => {
    axios
      .post(`https://api.waifu.pics/many/sfw/${keyword}`, {})
      .then((res) => setPicsList(res.data))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getWaifuPics();
  }, [refreshKey, keyword]);

  let temp = [];
  if (picsList.length !== 0) {
    picsList.files.map((img) => {
      temp.push({
        src: img,
        width: 4,
        height: 4,
      });
    });
  }

  const handleChange = (event) => {
    setKeyword(event.target.value);
  };

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        console.log("reached bottom");
      }
    }
  };

  return (
    <div className={classes.root} ref={listInnerRef} onScroll={onScroll}>
      <Gallery photos={temp ? temp : ""} />
      <Select
        value={keyword}
        onChange={handleChange}
        className={classes.select}
        color="secondary"
        variant="outlined"
        autoFocus={true}
      >
        <MenuItem value={"waifu"}>Waifu</MenuItem>
        <MenuItem value={"neko"}>Neko</MenuItem>
        <MenuItem value={"megumin"}>Megumin</MenuItem>
        <MenuItem value={"cuddle"}>Cuddle</MenuItem>
        <MenuItem value={"pat"}>Pat</MenuItem>
        <MenuItem value={"slap"}>Slap</MenuItem>
        <MenuItem value={"dance"}>Dance</MenuItem>
      </Select>
      <Fab
        color="secondary"
        aria-label="refresh"
        className={classes.fab}
        onClick={() => setRefreshKey((prev) => prev + 1)}
      >
        <RefreshRounded />
      </Fab>
    </div>
  );
}

export default function LinRegToolbox() {
  const classes = useStyles();
  const { state } = useState();
  const { model_state, model_dispatch } = useModelState();
  const [indVar, setIndVar] = React.useState(model_state.linreg_x_name);

  React.useEffect(() => {
    setIndVar(model_state.linreg_x_name);
  }, [model_state.linreg_x_name]);

  function shouldRetrain() {
    return model_state.linreg_x_name !== indVar;
  }

  function onUpdatePlot() {
    model_dispatch({
      type: ModelActions.LINREG_SET_IND_VAR,
      linreg_x_name: indVar,
    });
    invokeLinReg(model_dispatch, state.sample_dataset, indVar, false);
  }

  return (
    <Card style={{ border: "none", boxShadow: "none" }}>
      <Grid direction="column" container>
        {/* Column 1 */}
        <Grid item className={classes.actionItem}>
          <FormControl className={classes.actionWidth}>
            <InputLabel id="demo-simple-select-label">
              Independent Variable
            </InputLabel>
            <Select
              value={indVar !== "" ? indVar : ""}
              onChange={(event) => setIndVar(event.target.value)}
            >
              {model_state.linreg_columns.map((column, index) => (
                <MenuItem key={index} value={column}>
                  {column}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Grid>
        <Grid item>
          <Button
            color="primary"
            className={classes.button}
            variant="outlined"
            onClick={onUpdatePlot}
            disabled={!shouldRetrain()}
          >
            {"Re-Train Model"}
          </Button>
        </Grid>
      </Grid>
    </Card>
  );
}

render() {
    const { classes } = this.props;
    const { open, category, amount } = this.state;
    return (
      <Fragment>
        <Button
          variant='contained'
          className={classes.newBudgetBtn}
          color='primary'
          onClick={this.handleOpen}
        >
          Create New Budget
        </Button>
        <Modal
          aria-labelledby='Create New Budget'
          aria-describedby="Create's a new budget"
          open={open}
          onClose={this.handleClose}
        >
          <div className={classes.paper}>
            <Typography variant='body1' id='modal-title'>
              Select a category and enter a budget amount.
            </Typography>

            <FormControl
              style={{
                width: '181px',
                marginTop: '10px',
                marginBottom: '20px',
              }}
            >
              <InputLabel htmlFor='category-native-simple'>Category</InputLabel>
              <Select
                native
                value={category}
                onChange={this.handleChange}
                inputProps={{
                  name: 'category',
                  id: 'category-native-simple',
                }}
              >
                <option value='' />
                {this.renderBudgetOptions()}
              </Select>
            </FormControl>

            <FormControl style={{ display: 'block', marginBottom: '20px' }}>
              <InputLabel htmlFor='adornment-amount'>Amount</InputLabel>
              <Input
                type='number'
                inputProps={{
                  name: 'amount',
                  id: 'amount-native-simple',
                }}
                placeholder='Enter a number'
                onChange={this.handleChange}
                startAdornment={
                  <InputAdornment position='start'>$</InputAdornment>
                }
              />
              <Typography color='error' variant='body1'>
                * Budgets must be in increments of 5. {<br />}* Amounts less
                than 5 will default to $5.
              </Typography>
            </FormControl>
            <Button
              disabled={amount && category ? false : true}
              fullWidth
              variant='contained'
              color='secondary'
              onClick={this.handleAddNewBudget}
            >
              Add Budget
            </Button>
          </div>
        </Modal>
      </Fragment>
    );
  }

SubthreaderDropdown = ({
  retrievedSubthreaders,
  changeSubthread,
  pass,
  updateSubthreadersList,
}) => {
  const [thread, setThread] = React.useState('All');
  const [showModal, setModal] = useState(false);

  const handleChange = event => {
    setThread(event.target.value);
    changeSubthread(event.target.value);
  };
  let button;
  if (!pass) {
    button = (
      <div>
        <IconButton
          key="addButton"
          onClick={() => {
            setModal(true);
          }}
        >
          <AddOutlinedIcon id="add-button" />
        </IconButton>
        <CreateSubthreadModalServiced
          showModal={showModal}
          setModal={setModal}
          updateSubthreadersList={updateSubthreadersList}
        />
      </div>
    );
  }

  // Only loads on the home page
  if (!(window.location.pathname === '/')) return null;

  return (
    <div className="dropbox-parent">
      {button}
      <InputLabel className="child-elements" id="label">
        Subthreaders
      </InputLabel>
      <Select className="child-elements" labelId="label" value={thread} onChange={handleChange}>
        <MenuItem value="All"> All </MenuItem>
        {retrievedSubthreaders.map(sub => (
          <MenuItem value={sub.title}> {sub.title} </MenuItem>
        ))}
      </Select>
    </div>
  );
}

export default function AddViewDialog(props) {
  return (
    <Dialog
      open={props.open}
      onClose={props.closeDialog}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth={'lg'}
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent style={{ width: 400 }}>
        <div class="dialog-input">
          <Select
            displayEmpty
            onChange={(e) => props.setCollection(e.target.value)}
            style={{ width: '100%' }}
          >
            {props.collectionArr.map((value) => {
              return <MenuItem value={value}>{value}</MenuItem>;
            })}
          </Select>
        </div>
        <div class="dialog-input">
          <input
            value="Position generated on publish"
            readonly
            style={{ width: '97%' }}
          />
        </div>
        <div class="dialog-input">
          <input
            placeholder="Enter view name here"
            type="text"
            style={{ width: '97%' }}
            onChange={(e) => props.setName(e.target.value)}
          />
        </div>
        <div class="dialog-input">
          <input
            placeholder="Enter description here"
            type="text"
            style={{ width: '97%' }}
            onChange={(e) => props.setDescription(e.target.value)}
          />
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.action} color="primary" autoFocus>
          {props.actionProcess && <CircularProgress size={24} />}
          {!props.actionProcess && 'Add'}
        </Button>
        <Button onClick={props.closeDialog} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

Header = ({ user, onLanguageSelect, lang, langCode, classes }) => {
  const handleLanguageChange = (e) => {
    onLanguageSelect(e.target.value);
  };

  const renderLanguageSelector = () => {
    const supportedLanguages = langUtil.getSupportedLanguages(lang);

    return (
      <div>
        <InputLabel shrink>Language:</InputLabel>
        <FormControl
          style={{
            width: "100%",
          }}
          size="small"
        >
          <Select value={langCode} onChange={handleLanguageChange}>
            {supportedLanguages.map((s, index) => (
              <MenuItem key={index} value={s.value}>
                <Typography>{s.label}</Typography>
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
    );
  };

  // <img src="/Flag.png" style={{ verticalAlign: 'middle', marginRight: 10 }} alt="flag"/>

  return (
    <AppBar
      position="static"
      style={{
        color: "white",
        backgroundColor: "#0040B7",
        justifyContent: "middle",
      }}
    >
      <Toolbar variant="dense">
        <Typography variant="h6" style={{ flexGrow: 1 }}>
          {lang.t("headerTitle")}
        </Typography>
        {renderLanguageSelector()}
      </Toolbar>
    </AppBar>
  );
}

SortCommentsMenu = () => {
  const classes = useSortCommentsStyles();
  const dispatch = useDispatch();
  const [sortBy, setSortBy] = useState('old');

  const handleSortComments = (value) => {
    setSortBy(value);
    dispatch(sortComments(value));
  };

  return (
    <div className={classes.root}>
      <Typography variant="button" className={classes.label}>
        <SortIcon style={{ marginRight: '8px' }} color="primary" />
        Sort By
      </Typography>
      <form>
        <Select value={sortBy}>
          <MenuItem value="old" onClick={() => handleSortComments('old')}>
            Old
          </MenuItem>
          <MenuItem value="new" onClick={() => handleSortComments('new')}>
            New
          </MenuItem>
          <MenuItem
            value="upvoted"
            onClick={() => handleSortComments('upvoted')}
          >
            Most Upvoted
          </MenuItem>
          <MenuItem
            value="downvoted"
            onClick={() => handleSortComments('downvoted')}
          >
            Most Downvoted
          </MenuItem>
          <MenuItem
            value="replied"
            onClick={() => handleSortComments('replied')}
          >
            Most Replied
          </MenuItem>
        </Select>
      </form>
    </div>
  );
}

render() {
    let { filterIndex, column } = this.props
    return (
      <Grid xs={12}>
        <InputLabel shrink>Price</InputLabel>
        <FormGroup row style={{ justifyContent: "space-between", marginTop: 16 }}>
          <Select
            style={{
              flex: "0 1 20%",
              textAlign: "center",
            }}
            value={this.state.operator}
            onChange={evt => {
              this.setState({ operator: evt.target.value })
              this.debouncedChange(
                [evt.target.value, this.state.amount],
                filterIndex,
                column
              )
            }}
          >
            <MenuItem value={PriceFilterOperator.GT}>&gt;</MenuItem>
            <MenuItem value={PriceFilterOperator.GTE}>&gt;=</MenuItem>
            <MenuItem value={PriceFilterOperator.LT}>&lt;</MenuItem>
            <MenuItem value={PriceFilterOperator.LTE}>&lt;=</MenuItem>
          </Select>
          <TextField
            style={{ flex: "0 1 75%" }}
            type="number"
            value={this.state.amount}
            onChange={evt => {
              this.setState({ amount: evt.target.value })
              this.debouncedChange(
                [this.state.operator, evt.target.value],
                filterIndex,
                column
              )
            }}
          />
        </FormGroup>
      </Grid>
    )
  }

export default function CheckoutItem({ cost, description, name, onChange, quantity }) {
  const classes = useStyles();
  const [open, setOpen] = useState(false);

  const [width, setWidth] = useState(0);
  const ref = useCallback((node) => node && setWidth(node.offsetWidth), []);

  const crop = width / CHAR_WIDTH;
  const formatedDescription =
    description.length > crop ? description.slice(0, crop) + "..." : description;

  return (
    <>
      <Divider />
      <ListItem className={classes.listItem}>
        {onChange ? (
          <Select
            className={classes.select}
            native
            variant="outlined"
            value={quantity}
            onChange={onChange}
            inputProps={{
              name: "quantity",
              id: "quantity",
            }}
          >
            {[...Array(MAX_ORDER + 1)].map((e, i) => (
              <option value={i} key={i}>
                {i}
              </option>
            ))}
          </Select>
        ) : (
          <Typography className={classes.quantity} variant="h4">
            {quantity}
          </Typography>
        )}
        <RootRef rootRef={ref}>
          <Box onClick={() => setOpen(!open)} flex={1} display="flex" flexDirection="column">
            <Typography variant="h4" color="textPrimary">
              {name}
            </Typography>
            {!open && formatedDescription}
            <Collapse in={open} timeout={0}>
              {description}
            </Collapse>
            <Expand open={open} />
          </Box>
        </RootRef>
        <ListItemText className={classes.cost}>
          <Typography variant={onChange ? "h4" : "body1"} color="textPrimary">
            ${parseFloat(cost).toFixed(2)}
          </Typography>
        </ListItemText>
      </ListItem>
    </>
  );
}

function ChangeStatus ({ project, changedStatus }) {
  const dispatch = useDispatch()
  const [status, setStatus] = React.useState(null)
  const [note, setNote] = React.useState('')
  const handleSelectChange = (event) => {
    setStatus(event.target.value)
  }
  const clickChangeStatus = () => {
    dispatch(changeStatus(project.details.project_id, status, note))
    changedStatus()
  }
  const onChangeNote = (e) => {
    setNote(e.target.value)
  }
  useEffect(() => {
    dispatch(getStatus(project.details?.project_id))
  }, [dispatch, project.details])
  return (
    <Paper>
      {project.states &&
                <div style={{ padding: ' 0 1% 1% 1%', textAlign: 'left' }}>
                  <br />
                  <h3 style={{ marginTop: '0' }}>Review the project and change it&apos;s state</h3>
                  <h3 style={{ marginTop: '0' }}>Current State : {project.details?.status_name}</h3>
                  <TextField
                    style={{ width: '50%', marginBottom: '2%' }}
                    placeholder='Reviewer Notes'
                    multiline
                    value={note}
                    onChange={onChangeNote}
                    rows={2} />
                  <InputLabel style={{ marginTop: '0' }}>Select and Change the status of this project</InputLabel>
                  <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    style={{ width: '50%' }}
                    onChange={handleSelectChange}
                    value={status}
                  >
                    {project.states.map((item, index) =>
                      (
                        <MenuItem key={item} value={item}>{item}</MenuItem>
                      ))}
                  </Select>
                  <Button style={{ float: 'right' }} variant='contained' color='primary' onClick={clickChangeStatus}>Change Status</Button>
                </div>
      }
    </Paper>
  )
}

ApplicationPage = () => {
  const classes = useStyles();
  const [handlePageChange,
    handleChangeRowsPerPage,
    pagination, paginateData] = usePaginateHandlers(applications);
  return (
    <>
      <Box mb={2}>
        <Typography variant="h4">Applications</Typography>
      </Box>
      <Box>
        <Paper elevation={2}>
          <Table>
            <TableHead>
              <TableRow>
                {columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
              </TableRow>
            </TableHead>
            <TableBody>
              {paginateData.map((x) => (
                <TableRow key={x.id}>
                  <TableCell>
                    {x.requestId}
                  </TableCell>
                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                  <TableCell>{x.phone}</TableCell>
                  <TableCell>{x.help}</TableCell>
                  <TableCell>
                    {x.status
                      ? (
                        <Select
                          value={x.status}
                          classes={{ root: classes[x.status], select: classes[x.status] }}
                        >
                          <MenuItem value="on_hold">On hold</MenuItem>
                          <MenuItem value="in_progress">In progress</MenuItem>
                          <MenuItem value="receieved">Received</MenuItem>
                          <MenuItem value="closed">Closed</MenuItem>
                        </Select>
                      ) : 'Pending'}
                  </TableCell>
                  <TableCell align="right">
                    {!x.approved && (
                    <>
                      <IconButton color="primary">
                        <Icon>check</Icon>
                      </IconButton>
                      <IconButton color="secondary">
                        <Icon>clear</Icon>
                      </IconButton>
                    </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  count={applications.length}
                  onChangePage={handlePageChange}
                  page={pagination.page}
                  rowsPerPage={pagination.limit}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </Paper>
      </Box>
    </>
  );
}

NavFilterByValues = ({
  filterByMultipleOptions: {
    filters,
    setFilterHandler,
    label,
    selectItems,
    objForTranslateRenderItems
  }
}) => {
  const styles = useStyles();

  const { optionHandler, setRenderValue } = useFilter(
    selectItems,
    setFilterHandler
  );

  return (
    <div className={styles.formblock}>
      <Badge
        badgeContent={filters.length}
        color={materialUiConstants.styleError}
        anchorOrigin={badgePosition}
      >
        <FormControl style={{ minWidth: 170 }} className={styles.formControl}>
          <InputLabel id={materialUiConstants.checkBoxLabel}>
            {label}
          </InputLabel>
          <Select
            labelId={materialUiConstants.checkBoxLabel}
            id={materialUiConstants.checkBoxId}
            multiple
            value={filters}
            onChange={optionHandler}
            renderValue={(selected) =>
              setRenderValue(selected, objForTranslateRenderItems)
            }
            input={<Input />}
            autoWidth
            MenuProps={MenuProps}
          >
            {selectItems.map((item) => (
              <MenuItem key={item.key} value={item.key}>
                <Checkbox checked={filters.indexOf(item.key) > -1} />
                <ListItemText primary={item.value} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Badge>
    </div>
  );
}

Header = () => {
  const classes = useStyles();
  const [languageCode, setLanguageCode] = useState('en');

  const handleChangeLanguage = ({ target: { value } }) => {
    setLanguageCode(value);
    i18n.changeLanguage(value);

    if (
      window
      && window.localStorage
    ) {
      window.localStorage.setItem('REACT_GITHUB_PROFILE_LANG', value);
    }
  }

  useEffect(() => {
    if (
      window
      && window.localStorage
    ) {
      const lang = window.localStorage.getItem('REACT_GITHUB_PROFILE_LANG');
      setLanguageCode(lang || 'en');
    }
  }, []);

  useEffect(() => {
    i18n.changeLanguage(languageCode);
  }, [languageCode]);

  return (
    <Grid
      container
      className={classes.container}
    >
      <Grid
        className={classes.languageWrapper}
      >
        <InputLabel
          id="demo-simple-select-label"
          className={classes.languageLabel}
        >
            Languages
        </InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={languageCode}
          onChange={handleChangeLanguage}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {
            languages.length > 0
            ?
              languages.map((item, index) => {
                return (
                  <MenuItem
                    key={index.toString()}
                    value={item.code}
                  >
                    {item.nativeName}
                  </MenuItem>
                )
              })
            : null
          }
        </Select>
      </Grid>
    </Grid>
  )
}

UserEmail = () => {
  const classes = useStyles();

  const [primaryEmail, setPrimaryEmail] = useState(data.primaryEmail);
  const [backupEmail, setBackupEmail] = useState(data.backupEmail);

  const handleChangePrimaryEmail = (event) => {
    setPrimaryEmail(event.target.value);
  };

  const handleChangeBackupEmail = (event) => {
    setBackupEmail(event.target.value);
  };

  return (
    <Card className={classes.card}>
      <Box
        component="form"
        noValidate
        sx={{
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Typography style={{ margin: "5px 0" }}>
          {data.primaryEmail} -{" "}
          <Typography variant="span" style={{ color: "#039500" }}>
            Primary
          </Typography>
        </Typography>
        <Box>
          <Typography style={{ margin: "5px 0" }}>Add email address</Typography>
          <Box
            style={{ display: "flex", alignItems: "center", margin: "10px 0" }}
          >
            <Input placeholder="email" className={classes.input} />
            <Typography>Add</Typography>
          </Box>
        </Box>
        <Box className={classes.email}>
          <Typography className={classes.text} style={{ marginRight: 30 }}>
            Primary email address
          </Typography>
          <FormControl>
            <Select
              value={primaryEmail}
              onChange={handleChangePrimaryEmail}
              input={<OutlinedInput style={{ height: 40, width: 250 }} />}
              displayEmpty
              inputProps={{ "aria-label": "Without label" }}
            >
              {data.primaryEmailOptions.map((email) => (
                <MenuItem value={email}>{email}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>
        <Box className={classes.email}>
          <Typography className={classes.text} style={{ marginRight: 30 }}>
            Backup email address
          </Typography>
          <FormControl>
            <Select
              value={backupEmail}
              onChange={handleChangeBackupEmail}
              input={<OutlinedInput style={{ height: 40, width: 250 }} />}
              displayEmpty
              inputProps={{ "aria-label": "Without label" }}
            >
              {data.backupEmailOptions.map((email) => (
                <MenuItem value={email}>{email}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>
      </Box>
    </Card>
  );
}