aboutsummaryrefslogtreecommitdiff
path: root/modern/src/form
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-30 22:43:57 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-30 22:43:57 -0700
commit66d2b91dfdcfb4b5c5fe90ddb7a3e3e66e01e502 (patch)
tree1817859d1baab737de93e433315b9e549e6f0895 /modern/src/form
parent542f96da0ef323f286aa9caa8cfffaa98094467e (diff)
downloadtrackermap-web-66d2b91dfdcfb4b5c5fe90ddb7a3e3e66e01e502.tar.gz
trackermap-web-66d2b91dfdcfb4b5c5fe90ddb7a3e3e66e01e502.tar.bz2
trackermap-web-66d2b91dfdcfb4b5c5fe90ddb7a3e3e66e01e502.zip
Migrate Select to SelectField
Diffstat (limited to 'modern/src/form')
-rw-r--r--modern/src/form/SelectField.js33
1 files changed, 24 insertions, 9 deletions
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
index 78a16887..fa51a366 100644
--- a/modern/src/form/SelectField.js
+++ b/modern/src/form/SelectField.js
@@ -1,14 +1,27 @@
-import { FormControl, InputLabel, Select } from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
import React, { useState } from 'react';
import { useEffectAsync } from '../reactHelper';
-const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint }) => {
- const [items, setItems] = useState();
+const SelectField = ({
+ margin,
+ variant,
+ label,
+ multiple,
+ defaultValue,
+ onChange,
+ endpoint,
+ data,
+ keyGetter = item => item.id,
+ titleGetter = item => item.name,
+}) => {
+ const [items, setItems] = useState(data);
useEffectAsync(async () => {
- const response = await fetch(endpoint);
- if (response.ok) {
- setItems(await response.json());
+ if (endpoint) {
+ const response = await fetch(endpoint);
+ if (response.ok) {
+ setItems(await response.json());
+ }
}
}, []);
@@ -17,12 +30,14 @@ const SelectField = ({ margin, variant, label, defaultValue, onChange, endpoint
<FormControl margin={margin} variant={variant}>
<InputLabel>{label}</InputLabel>
<Select
- native
+ multiple={multiple}
defaultValue={defaultValue}
onChange={onChange}>
- <option value={0}></option>
+ {!multiple &&
+ <MenuItem value={0}>&nbsp;</MenuItem>
+ }
{items.map(item => (
- <option key={item.id} value={item.id}>{item.name}</option>
+ <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
))}
</Select>
</FormControl>