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;