1 files changed, 53 insertions, 0 deletions
diff --git a/modern/src/common/components/SelectField.js b/modern/src/common/components/SelectField.js
new file mode 100644
index 00000000..98473b16
--- /dev/null
+++ b/modern/src/common/components/SelectField.js
@@ -0,0 +1,53 @@
+import {
+  FormControl, InputLabel, MenuItem, Select,
+} from '@material-ui/core';
+import React, { useState } from 'react';
+import { useEffectAsync } from '../../reactHelper';
+
+const SelectField = ({
+  margin,
+  variant,
+  label,
+  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());
+      }
+    }
+  }, []);
+
+  if (items) {
+    return (
+      <FormControl margin={margin} variant={variant}>
+        <InputLabel>{label}</InputLabel>
+        <Select
+          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;