diff options
author | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:58:45 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:59:07 -0700 |
commit | d3c7705bedebd65c94f9eea691aaf2fe03b0cafe (patch) | |
tree | 5f98b3d9bbbd4fe8067b5a334e84aff008b8db22 /modern/src/common/components/SelectField.jsx | |
parent | 0161ae449d4a7bd0781c0665d663353663ab0faf (diff) | |
download | trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.gz trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.bz2 trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.zip |
Move to Vite
Diffstat (limited to 'modern/src/common/components/SelectField.jsx')
-rw-r--r-- | modern/src/common/components/SelectField.jsx | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx new file mode 100644 index 00000000..35f817a0 --- /dev/null +++ b/modern/src/common/components/SelectField.jsx @@ -0,0 +1,56 @@ +import { + FormControl, InputLabel, MenuItem, Select, +} from '@mui/material'; +import React, { useState } from 'react'; +import { useEffectAsync } from '../../reactHelper'; + +const SelectField = ({ + label, + fullWidth, + multiple, + value, + emptyValue = 0, + emptyTitle = '\u00a0', + onChange, + endpoint, + data, + keyGetter = (item) => item.id, + titleGetter = (item) => item.name, +}) => { + const [items, setItems] = useState(data); + + useEffectAsync(async () => { + if (endpoint) { + const response = await fetch(endpoint); + if (response.ok) { + setItems(await response.json()); + } else { + throw Error(await response.text()); + } + } + }, []); + + if (items) { + return ( + <FormControl fullWidth={fullWidth}> + <InputLabel>{label}</InputLabel> + <Select + label={label} + multiple={multiple} + value={value} + onChange={onChange} + > + {!multiple && emptyValue !== null && ( + <MenuItem value={emptyValue}>{emptyTitle}</MenuItem> + )} + {items.map((item) => ( + <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem> + ))} + </Select> + </FormControl> + ); + } + return null; +}; + +export default SelectField; |