diff options
author | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2024-04-06 09:22:10 -0700 |
commit | f418231b6b2f5e030a0d2dcc390c314602b1f740 (patch) | |
tree | 10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /modern/src/common/components/SelectField.jsx | |
parent | b392a4af78e01c8e0f50aad5468e9583675b24be (diff) | |
download | trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2 trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip |
Move modern to the top
Diffstat (limited to 'modern/src/common/components/SelectField.jsx')
-rw-r--r-- | modern/src/common/components/SelectField.jsx | 77 |
1 files changed, 0 insertions, 77 deletions
diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx deleted file mode 100644 index db8c30b0..00000000 --- a/modern/src/common/components/SelectField.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import { - FormControl, InputLabel, MenuItem, Select, Autocomplete, TextField, -} from '@mui/material'; -import React, { useState } from 'react'; -import { useEffectAsync } from '../../reactHelper'; - -const SelectField = ({ - label, - fullWidth, - multiple, - value = null, - emptyValue = null, - emptyTitle = '', - onChange, - endpoint, - data, - keyGetter = (item) => item.id, - titleGetter = (item) => item.name, -}) => { - const [items, setItems] = useState(data); - - const getOptionLabel = (option) => { - if (typeof option !== 'object') { - option = items.find((obj) => keyGetter(obj) === option); - } - return option ? titleGetter(option) : emptyTitle; - }; - - 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}> - {multiple ? ( - <> - <InputLabel>{label}</InputLabel> - <Select - label={label} - multiple - value={value} - onChange={onChange} - > - {items.map((item) => ( - <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem> - ))} - </Select> - </> - ) : ( - <Autocomplete - size="small" - options={items} - getOptionLabel={getOptionLabel} - renderOption={(props, option) => ( - <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem> - )} - isOptionEqualToValue={(option, value) => keyGetter(option) === value} - value={value} - onChange={(_, value) => onChange({ target: { value: value ? keyGetter(value) : emptyValue } })} - renderInput={(params) => <TextField {...params} label={label} />} - /> - )} - </FormControl> - ); - } - return null; -}; - -export default SelectField; |