50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import map from "lodash/map";
|
|
import createComponent from "./base";
|
|
import { isDisabled, getValue } from "./utils";
|
|
|
|
import type { UIDropDown } from "config/flowtypes";
|
|
|
|
import Select from "@material-ui/core/Select";
|
|
import FormControl from "@material-ui/core/FormControl";
|
|
import InputLabel from "@material-ui/core/InputLabel";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import Input from "@material-ui/core/Input";
|
|
|
|
const componentId = (item: UIDropDown) => `dropdown-${item.topic}`;
|
|
|
|
const DropDownOptions = (options) =>
|
|
map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>);
|
|
|
|
const onChangeEvent = (item: UIDropDown, changeState) =>
|
|
(event) => changeState(item, event.target.value);
|
|
|
|
const BaseComponent = ({Icon}, item, state, changeState) => (
|
|
<React.Fragment>
|
|
<Icon item={item} state={state} />
|
|
<FormControl>
|
|
<InputLabel htmlFor={componentId(item)}>{item.text}</InputLabel>
|
|
<Select value={getValue(item, state)}
|
|
onChange={onChangeEvent(item, changeState)}
|
|
disabled={isDisabled(item, state)}
|
|
input={<Input id={componentId(item)} />}
|
|
>
|
|
{DropDownOptions(item.options)}
|
|
</Select>
|
|
</FormControl>
|
|
</React.Fragment>
|
|
);
|
|
|
|
export default createComponent({
|
|
id: "dropDown",
|
|
name: "Drop Down",
|
|
desc: `
|
|
The Drop Down can be used to select from a small range of different options.
|
|
`,
|
|
parameters: {
|
|
text: "A descriptive label for the drop down",
|
|
topic: "The topic id"
|
|
},
|
|
baseComponent: BaseComponent
|
|
});
|