/
Tool.jsx
58 lines (52 loc) · 1.62 KB
/
Tool.jsx
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
import React from 'react';
import ReactPropTypes from 'prop-types';
import { PropTypes } from 'mobx-react';
// @material-ui/core components
import makeStyles from '@material-ui/core/styles/makeStyles';
import {
FormControl, InputLabel, MenuItem, Select,
} from '@material-ui/core';
// core component
import BootstrapInput from '../commons/BootstrapInput';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
margin: {
margin: theme.spacing(1),
minWidth: 100,
},
}));
const Tool = ({ ...props }) => {
const { array, store } = props;
const classes = useStyles();
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<InputLabel htmlFor="name-input" shrink>Name</InputLabel>
<BootstrapInput id="name-input" name="name" onChange={e => store.handParamSearch(e)} />
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="status-select" shrink>Status</InputLabel>
<Select
value={store.queryParam.status}
onChange={e => store.handParamSearch(e)}
input={<BootstrapInput name="status" id="status-select" />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{array.map(item => (
<MenuItem key={item.value} value={item.value}>{item.name}</MenuItem>
))}
</Select>
</FormControl>
</form>
);
};
Tool.propTypes = {
array: ReactPropTypes.arrayOf(ReactPropTypes.shape()).isRequired,
store: PropTypes.observableObject.isRequired,
};
export default Tool;