@material-ui/core#MenuItem JavaScript Examples

ElementSelect = () => {
    return (
        <TextField
            select
            data-testid='testId'
            value='0'>
            <MenuItem key='0' value='0'>Option 1</MenuItem>
            <MenuItem key='1' value='1'>Option 2</MenuItem>
        </TextField>
    );
}

CustomMenuItem = React.forwardRef(({ onClick, icon, text, className = "" }, ref) => {
  const classes = useStyles();

  return (
    <MenuItem onClick={onClick} className={clsx(classes.menuItem, className)} ref={ref}>
      {icon}
      <Typography variant="body1" className={classes.menuItemText}>
        {text}
      </Typography>
    </MenuItem>
  );
})

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

export default function BlogPostsSort({ options, onSort }) {
  return (
    <TextField select size="small" value="latest" onChange={onSort}>
      {options.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </TextField>
  );
}

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

DarkModeMenuItem = ({ closeMenu, navItem }) => {
  const { darkMode } = useSelector((state) => state);
  const dispatch = useDispatch();

  const handleDarkMode = () => {
    dispatch(toggleDarkMode(!darkMode));
    closeMenu();
  };

  if (navItem) {
    return (
      <IconButton color="primary" onClick={handleDarkMode}>
        {darkMode ? <Brightness4Icon /> : <Brightness7Icon />}
      </IconButton>
    );
  }

  return (
    <MenuItem onClick={handleDarkMode}>
      <ListItemIcon>
        {darkMode ? (
          <Brightness4Icon style={{ marginRight: 7 }} />
        ) : (
          <Brightness7Icon style={{ marginRight: 7 }} />
        )}
        Dark Mode: {darkMode ? ' ON' : ' OFF'}
      </ListItemIcon>
    </MenuItem>
  );
}

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

SwitchLanguage = forwardRef((props, ref) => {
    const locale = useLocale();
    const setLocale = useSetLocale();
    const classes = useStyles();
    return (
        <MenuItem
            ref={ref}
            className={classes.menuItem}
            onClick={() => {
                setLocale(locale === 'en' ? 'fr' : 'en');
                props.onClick();
            }}
        >
            <ListItemIcon className={classes.icon}>
                <Language />
            </ListItemIcon>
            Switch Language
        </MenuItem>
    );
})

StyledMenuItem = withStyles(theme => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
      '.MuiButton-contained': {
        backgroundColor: theme.secondary,
      },
    },
  },
}))(MenuItem)

renderSuggestion({ suggestion, index, itemProps, highlightedIndex }) {
        const isHighlighted = highlightedIndex === index;
        const { classes } = this.props;
        return (
            <MenuItem
                {...itemProps}
                key={suggestion}
                selected={isHighlighted}
                component="div"
                className={classes.menuItem}
            >
                {suggestion}
            </MenuItem>
        );
    }

render() {
    return (
      <MenuItem>
        <TextField
          disabled={this.state.isDirty}
          label="Channel Mapping"
          value={this.state.mapping}
          onBlur={() => this.handleUpdate()}
          type="text"
          onChange={event => {
            this.setState({ mapping: event.target.value });
          }}
        />
      </MenuItem>
    );
  }

JoinMenu = () => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };
  return (
    <div>
      <Button onClick={handleClick} className="join-button">
        {plusIcon}
        <span className="text">Долучитися</span>
        <ArrowDropDownIcon />
      </Button>
      <Menu
        id="join-menu"
        className="join-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose} className="join-menu-item">
          <Icon style={{ color: '#1540A4' }}>store</Icon>
          <span>Як Організація</span>
        </MenuItem>
        <MenuItem onClick={handleClose} className="join-menu-item">
          <Icon style={{ color: '#1540A4' }}>person</Icon>
          <span>Як Волонтер</span>
        </MenuItem>
      </Menu>
    </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>
  );
}

render() {

    const {
      classes,
      handleClose,
      anchorEl
    } = this.props

    return (
      <Menu
        anchorEl={ anchorEl }
        keepMounted
        open={ Boolean(anchorEl) }
        onClose={ handleClose }
      >
        { this.renderMenuItems() }
        <MenuItem onClick={ () => { this.handleDisconnect() } } className={ classes.text }>
          <ExitToAppIcon className={ classes.icon } />
          Disconnect
        </MenuItem>
      </Menu>
    )
  }

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

StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
    },
  },
}))(MenuItem)

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

ListMenu = ({ listId }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const dispatch = useDispatch();

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const archive = async () => {
    dispatch(archiveList(listId, true));
  };

  return (
    <div>
      <Button onClick={handleClick}>
        <MoreHorizIcon />
      </Button>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>
          <MoreHorizIcon />
        </MenuItem>
        <MenuItem
          onClick={() => {
            archive();
            handleClose();
          }}
        >
          Archive This List
        </MenuItem>
        <MenuItem>
          <MoveList listId={listId} closeMenu={handleClose} />
        </MenuItem>
      </Menu>
    </div>
  );
}

PostMenu = ({ post, setEditing }) => {
	const dispatch = useDispatch();
	const [modalOpen, setModalOpen] = useState(false);
	const [anchorEl, setAnchorEl] = useState(null);
	const isOpen = Boolean(anchorEl);

	const handleAnchorEl = (e) => {
		setAnchorEl(e.currentTarget);
	};

	const handleClose = () => {
		setAnchorEl(null);
	};

	const handleEdit = () => {
		setEditing();
	};

	const handleDeleteClick = () => {
		setModalOpen(true);
		handleClose();
	};

	const handleDeleteConfirmation = async () => {
		dispatch(deletePost(post));
		handleClose();
	};

	return (
		<>
			<Modal
				open={modalOpen}
				handleClose={() => setModalOpen(false)}
				title="Delete this post?"
				handleConfirmation={handleDeleteConfirmation}
			/>
			<IconButton
				aria-label="account of current user"
				aria-controls="menu-appbar"
				aria-haspopup="true"
				onClick={handleAnchorEl}
				color="inherit"
			>
				<MoreHorizIcon fontSize="small" />
			</IconButton>

			<Menu
				id="menu-appbar"
				anchorEl={anchorEl}
				getContentAnchorEl={null}
				anchorOrigin={{
					vertical: "bottom",
					horizontal: "right",
				}}
				keepMounted
				transformOrigin={{
					vertical: "top",
					horizontal: "right",
				}}
				open={isOpen}
				onClose={handleClose}
			>
				{!post.posted && (
					<MenuItem onClick={handleEdit}>
						<ListItemIcon>
							<EditIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText primary="Edit" />
					</MenuItem>
				)}
				<MenuItem onClick={handleDeleteClick}>
					<ListItemIcon>
						<DeleteIcon fontSize="small" />
					</ListItemIcon>
					<ListItemText primary="Delete" />
				</MenuItem>
			</Menu>
		</>
	);
}

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 {
      setMobile,
      darkMode,
      setDarkMode,
      menuItems,
      session,
      myAccountUrl,
      openDialog,
      hideAds,
      setHideAds,
    } = this.props;

    return (
      <>
        {navigation.map(navLink => <NavMenu key={navLink.name} {...navLink} />)}
        {session.isAuthenticated && !session.verified &&
        <Tooltip title="E-mail is not verified. Click to verify.">
          <MuiLink href={myAccountUrl}>
            <WarningIcon className="verify-warn" />
          </MuiLink>
        </Tooltip>}
        <NavMenu
          name="My Account"
          button={
            <IconButton
              className="user-menu-icon"
              aria-controls="user-menu"
              aria-haspopup="true"
            >
              <Avatar src={session.avatarSrc} className={cn('avatar', { [session.avatarPlatform]: true })}>
                {!session.avatarSrc && <PersonIcon />}
              </Avatar>
            </IconButton>
          }
        >
          <>
            <ListItem dense divider>
              <ListItemText primary={<Typography variant="overline">{session.isAuthenticated ? session.username
                : 'Account'}</Typography>} />
            </ListItem>
            {menuItems}
            <MenuItem button onClick={() => openDialog(DIALOG_MY_GAME)}>My ArcheAge</MenuItem>
            <Divider />
            <MenuItem onClick={() => setDarkMode(!darkMode)}>
              <div className="menu-item-icon">
                <span>{darkMode ? 'Light' : 'Dark'} Mode</span>
                {darkMode ? <BrightnessHighIcon /> : <Brightness4Icon />}
              </div>
            </MenuItem>
            {isMobileBrowser() &&
            <MenuItem onClick={() => setMobile(true)}>
              <div className="menu-item-icon">
                <span>Switch to Mobile</span>
                <PhoneIphoneIcon />
              </div>
            </MenuItem>}
            <MenuItem onClick={() => setHideAds(!hideAds)}>
              <div className="menu-item-icon">
                <span>{hideAds ? 'Show' : 'Hide'} Ads</span>
                {hideAds ? <VisibilityIcon /> : <VisibilityOffIcon />}
              </div>
            </MenuItem>
          </>
        </NavMenu>
      </>
    );
  }

export default function ShopProductSort() {
  const [open, setOpen] = useState(null);

  const handleOpen = (event) => {
    setOpen(event.currentTarget);
  };

  const handleClose = () => {
    setOpen(null);
  };

  return (
    <>
      <Button
        color="inherit"
        disableRipple
        onClick={handleOpen}
        endIcon={<Icon icon={open ? chevronUpFill : chevronDownFill} />}
      >
        Sort By:&nbsp;
        <Typography component="span" variant="subtitle2" sx={{ color: 'text.secondary' }}>
          Newest
        </Typography>
      </Button>
      <Menu
        keepMounted
        anchorEl={open}
        open={Boolean(open)}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        {SORT_BY_OPTIONS.map((option) => (
          <MenuItem
            key={option.value}
            selected={option.value === 'newest'}
            onClick={handleClose}
            sx={{ typography: 'body2' }}
          >
            {option.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
}

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

AuthFormModal = ({ closeMobileMenu, type }) => {
  const classes = useDialogStyles();
  const classesBtn = useNavStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleMobileMenu = () => {
    handleClickOpen();
    closeMobileMenu();
  };

  return (
    <div>
      {type === 'upvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowUpwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : type === 'downvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowDownwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : isMobile ? (
        <MenuItem onClick={handleMobileMenu}>
          <ListItemIcon>
            <ExitToAppIcon style={{ marginRight: 7 }} />
            Login/Register
          </ListItemIcon>
        </MenuItem>
      ) : (
        <Button
          color="primary"
          onClick={handleClickOpen}
          className={classesBtn.navButtons}
        >
          Login/Register
        </Button>
      )}
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="md"
        classes={{ paper: classes.dialogWrapper }}
      >
        <DialogTitle onClose={handleClose}></DialogTitle>
        <DialogContent>
          <AuthForm />
        </DialogContent>
      </Dialog>
    </div>
  );
}