blob: 3dec29cbb9cf3d1f76e43373774fc31af3363e0a [file] [log] [blame]
// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import React from 'react';
import {createTheme, Theme} from '@material-ui/core/styles';
import {makeStyles} from '@material-ui/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import {SelectMenuOption} from './IssueWizardTypes.tsx';
const theme: Theme = createTheme();
const useStyles = makeStyles((theme: Theme) => ({
container: {
display: 'flex',
flexWrap: 'wrap',
maxWidth: '65%',
marginRight: '1rem',
},
textField: {
margin: '0',
},
menu: {
width: '100%',
minWidth: '300px',
},
description: {
fontSize: 'small',
color: 'gray',
},
}), {defaultTheme: theme});
/**
* Select menu component that is located on the landing step if the
* Issue Wizard. The menu is used for the user to indicate the category
* of their bug when filing an issue.
*
* @return ReactElement.
*/
type Props = {
optionsList: SelectMenuOption[] | null,
selectedOption: SelectMenuOption | null,
setOption: Function,
};
export default function SelectMenu(props: Props) {
const classes = useStyles();
const {optionsList, selectedOption, setOption} = props;
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setOption(event.target.value as string);
};
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-select-category"
select
label=''
className={classes.textField}
value={selectedOption}
onChange={handleChange}
InputLabelProps={{shrink: false}}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
margin="normal"
variant="outlined"
fullWidth={true}
>
{
optionsList?.map(option => (
<MenuItem
className={classes.menu}
key={option.name}
value={option.name}
data-testid="select-menu-item"
>
<div>
<div>{option.name}</div>
{
option.description ?
<div className={classes.description}>{option.description}</div>
: null
}
</div>
</MenuItem>))
}
</TextField>
</form>
);
}