From 230d7d277d0386101dfcf88d8fabed58e4adde3d Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Wed, 30 Sep 2020 22:17:42 -0700
Subject: Implement common select field component

---
 modern/src/form/SelectField.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 modern/src/form/SelectField.js

(limited to 'modern/src/form/SelectField.js')

diff --git a/modern/src/form/SelectField.js b/modern/src/form/SelectField.js
new file mode 100644
index 0000000..78a1688
--- /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;
-- 
cgit v1.2.3