-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.tsx
82 lines (76 loc) · 2.41 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// ToolSelect Component
/**
* Dropdown to filter invocation search on tooltype
* @packageDocumentation
*/
import React, { useEffect } from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { getInitialState } from '../../../api/client/client';
/** ToolSelect Props */
export interface ToolSelectProps {
/** List of tools available for selection in dropdown */
toolsList: Array<string>;
/** Set the list of tools available for selection in the dropdown */
setToolsList: (toolsList: Array<string>) => void;
/** Currently selected tool */
selectedTool: string;
/** Callback fired when a tool is selected from the dropdown */
setSelectedTool: (selectedTool: string) => void;
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
})
);
const createToolItems = (toolsList: ToolSelectProps['toolsList']) => {
return toolsList.map((tool, index) => (
<MenuItem value={tool} key={index}>
<em>{tool}</em>
</MenuItem>
));
};
/** Tool Select Component */
export const ToolSelect: React.FC<ToolSelectProps> = ({
selectedTool,
setSelectedTool,
toolsList,
setToolsList,
}) => {
const classes = useStyles();
useEffect(() => {
getInitialState(setToolsList);
}, [setToolsList]);
return (
<FormControl
variant="outlined"
className={classes.formControl}
id="tool-select"
>
<InputLabel id="demo-simple-select-outlined-label">
Tool Type
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={selectedTool}
onChange={(event) =>
setSelectedTool(event.target.value as string)
}
label="Tool Type"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{createToolItems(toolsList)}
</Select>
</FormControl>
);
};
export default ToolSelect;