CEC-5751 - Flashpack UI: Make a picklist for the ECU names

src/components/Controls/ECUDropDown/index.jsx

@@ -1,32 +1,52 @@
 import React from "react";
-import { Select } from "@material-ui/core";
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+import useStyles from "../../useStyles";
 
 const ECUDropDown = (props) => {
   const changeHandler = (e) => {
     if (!props.changeHandler) return;
     props.changeHandler(e);
   };
+  const classes = useStyles();
 
   return (
-    <Select
-      id={props.id}
-      native
+    <FormControl
       variant="outlined"
-      value={props.value}
-      onChange={changeHandler}
+      margin="normal"
+      fullWidth={false}
     >
-      {ECUs.map((item, index) => (
-        <option key={index} value={item[0]}>
-          {item[1]}
-        </option>
-      ))}
-    </Select>
+      <InputLabel
+        className={classes.whiteBackground}
+        required={props.required}
+        disabled={props.disabled}
+      >
+        {props.label}
+      </InputLabel>
+      <Select
+        id={props.id}
+        name={props.name}
+        variant={"outlined"}
+        native
+        value={props.value}
+        onChange={changeHandler}
+        disabled={props.disabled}
+      >
+        {
+          ECUs.map((item, index) => (
+            <option key={index} value={item && item[0] ? item[0] : null}>
+              {item && item[0] ? item[0] : null}
+            </option>
+          ))
+        }
+      </Select >
+    </FormControl>
   );
 };
 
 export default ECUDropDown;
 
 const ECUs = [
+  null,
   ["AGS", "Active Grille Shutter"],
   ["ADB", "Adaptive Driving Beam"],
   ["ADAS", "Advanced Driver Assist System"],