Chip colors now being added to config and being returned and consumed in app - last task; showing colors on chips

src/components/SelectColors/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FC, useState } from "react";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Menu from "@mui/material/Menu";
@@ -14,7 +14,12 @@ export interface SelectColorThemeOptions {
   dark: string;
 }
 
-const ColorSelect = () => {
+interface IColorSelect {
+  handleChange: (value: SelectColorThemeOptions) => void;
+  initialValue: SelectColorThemeOptions;
+}
+
+const ColorSelect: FC<IColorSelect> = ({ handleChange, initialValue }) => {
   /* Get current */
   const theme = useTheme();
   const mode = theme.palette.mode;
@@ -37,9 +42,14 @@ const ColorSelect = () => {
 
   /* Hold the current state of a given option defaults to `gray` from the color palette */
   const [color, setColor] = useState<SelectColorThemeOptions>(
-    paletteToMui(palette["gray"])
+    initialValue || paletteToMui(palette["gray"])
   );
 
+  const onChange = (color: SelectColorThemeOptions) => {
+    setColor(color);
+    handleChange(color);
+  };
+
   /* MUI Specific state for color context menu */
   const [colorSelectAnchor, setColorSelectAnchor] =
     useState<null | HTMLElement>(null);
@@ -121,7 +131,7 @@ const ColorSelect = () => {
                   },
                 }}
                 size="small"
-                onClick={() => setColor(paletteToMui(palettes[key]))}
+                onClick={() => onChange(paletteToMui(palettes[key]))}
                 key={index}
               />
             </Grid>
@@ -131,7 +141,7 @@ const ColorSelect = () => {
         <Box pt={1} px={2}>
           <CustomizeColorModal
             currentColor={color}
-            onChange={(color) => setColor(color)}
+            onChange={(color) => onChange(color)}
           />
         </Box>
 

src/components/fields/SingleSelect/Settings.tsx

@@ -14,12 +14,21 @@ import {
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/AddCircle";
 import RemoveIcon from "@mui/icons-material/CancelRounded";
-import ColorSelect from "@src/components/SelectColors";
+import ColorSelect, {
+  SelectColorThemeOptions,
+} from "@src/components/SelectColors";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   const listEndRef: any = useRef(null);
   const options = config.options ?? [];
   const [newOption, setNewOption] = useState("");
+
+  /* State for holding Chip Colors for Select and MultiSelect */
+  const colors = config.colors ?? [];
+  const [chipColors, setChipColors] = useState<{}>(
+    Object.assign({}, colors) || {}
+  );
+
   const handleAdd = () => {
     if (newOption.trim() !== "") {
       if (options.includes(newOption)) {
@@ -32,6 +41,14 @@ export default function Settings({ onChange, config }: ISettingsProps) {
     }
   };
 
+  const handleChipColorChange = (
+    index: number,
+    color: SelectColorThemeOptions
+  ) => {
+    setChipColors((current) => ({ ...current, [index]: color }));
+    onChange("colors")(Object.values(chipColors));
+  };
+
   return (
     <div>
       <InputLabel>Options</InputLabel>
@@ -43,7 +60,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
           marginBottom: 5,
         }}
       >
-        {options?.map((option: string) => (
+        {options?.map((option: string, index: number) => (
           <>
             <Grid
               container
@@ -54,7 +71,12 @@ export default function Settings({ onChange, config }: ISettingsProps) {
             >
               <Grid item>
                 <Grid container direction="row" alignItems="center" gap={2}>
-                  <ColorSelect />
+                  <ColorSelect
+                    initialValue={colors[index]}
+                    handleChange={(color) =>
+                      handleChipColorChange(index, color)
+                    }
+                  />
                   <Typography>{option}</Typography>
                 </Grid>
               </Grid>