diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-30 22:17:42 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-30 22:17:42 -0700 |
commit | 230d7d277d0386101dfcf88d8fabed58e4adde3d (patch) | |
tree | 055596a88e19157aa42b4ac65794e85fe49cee8b | |
parent | 739ca4cb813a7deb910f3dcb1655ae9d484e6487 (diff) | |
download | trackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.tar.gz trackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.tar.bz2 trackermap-web-230d7d277d0386101dfcf88d8fabed58e4adde3d.zip |
Implement common select field component
-rw-r--r-- | modern/src/form/SelectField.js | 35 | ||||
-rw-r--r-- | modern/src/settings/GroupPage.js | 33 |
2 files changed, 44 insertions, 24 deletions
diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js new file mode 100644 index 00000000..78a16887 --- /dev/null +++ b/modern/src/form/SelectField.js @@ -0,0 +1,35 @@ +import { FormControl, InputLabel, 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(); + + useEffectAsync(async () => { + const response = await fetch(endpoint); + if (response.ok) { + setItems(await response.json()); + } + }, []); + + if (items) { + return ( + <FormControl margin={margin} variant={variant}> + <InputLabel>{label}</InputLabel> + <Select + native + defaultValue={defaultValue} + onChange={onChange}> + <option value={0}></option> + {items.map(item => ( + <option key={item.id} value={item.id}>{item.name}</option> + ))} + </Select> + </FormControl> + ); + } else { + return null; + } +} + +export default SelectField; diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js index 0dc61e50..b6a28599 100644 --- a/modern/src/settings/GroupPage.js +++ b/modern/src/settings/GroupPage.js @@ -3,11 +3,11 @@ import TextField from '@material-ui/core/TextField'; import t from '../common/localization'; import EditItemView from '../EditItemView'; -import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select } from '@material-ui/core'; +import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from '../attributes/EditAttributesView'; -import { useEffectAsync } from '../reactHelper'; import deviceAttributes from '../attributes/deviceAttributes'; +import SelectField from '../form/SelectField'; const useStyles = makeStyles(() => ({ details: { @@ -19,14 +19,6 @@ const GroupPage = () => { const classes = useStyles(); const [item, setItem] = useState(); - const [groups, setGroups] = useState(); - - useEffectAsync(async () => { - const response = await fetch('/api/groups'); - if (response.ok) { - setGroups(await response.json()); - } - }, []); return ( <EditItemView endpoint="groups" item={item} setItem={setItem}> @@ -54,20 +46,13 @@ const GroupPage = () => { </Typography> </AccordionSummary> <AccordionDetails className={classes.details}> - {groups && - <FormControl margin="normal" variant="filled"> - <InputLabel>{t('groupParent')}</InputLabel> - <Select - native - defaultValue={item.groupId} - onChange={event => setItem({...item, groupId: Number(event.target.value)})}> - <option value={0}></option> - {groups.map(group => ( - <option key={group.id} value={group.id}>{group.name}</option> - ))} - </Select> - </FormControl> - } + <SelectField + margin="normal" + defaultValue={item.groupId} + onChange={event => setItem({...item, groupId: Number(event.target.value)})} + endpoint="/api/groups" + label={t('groupParent')} + variant="filled" /> </AccordionDetails> </Accordion> <Accordion> |