added chip color variations

pagevamp · Feb 5, 2024 · ef9cfdc · ef9cfdc
1 parent 5c884ec
commit ef9cfdc
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 33 deletions.
diff --git a/src/app/manage/views/ManagePageContainer.tsx b/src/app/manage/views/ManagePageContainer.tsx
@@ -3,7 +3,6 @@
 import { FooterSave } from '@/components/footerSave/FooterSave';
 import { MultiSelect } from '@/components/multiSelect/MultiSelect';
 import { StyledTextInput } from '@/components/styled/StyledTextInput';
-import { apiUrl } from '@/config';
 import { Stack, Typography, styled } from '@mui/material';
 import { useMemo, useState } from 'react';
 
@@ -142,7 +141,6 @@ export const ManagePageContainer = ({
                   <MultiSelect<{ label: string }>
                     key={key}
                     data={field.options}
-                    chipColor="rgb(0, 0, 255)"
                     nameField={(item) => item.label}
                     value={profileData && profileData[field.key]}
                     getSelectedValue={(value) => {

diff --git a/src/components/multiSelect/MultiSelect.tsx b/src/components/multiSelect/MultiSelect.tsx
@@ -1,25 +1,16 @@
 import { Autocomplete, Chip } from '@mui/material';
 import { StyledTextInput } from '../styled/StyledTextInput';
 import { ClearOutlined, FiberManualRecord } from '@mui/icons-material';
+import { updateColor } from '@/utils/updateColor';
 
 interface IMultiSelect<T extends object> {
   data: T[];
-  chipColor: string;
   nameField: (item: T) => string; // Function to extract the name from the item
   value: any;
   getSelectedValue: (value: any) => void;
 }
 
-export const MultiSelect = <T extends object>({ data, chipColor, nameField, value, getSelectedValue }: IMultiSelect<T>) => {
-  const reducedOpacityColor = (opacity: number) => {
-    const match = chipColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-    if (match) {
-      const [, r, g, b] = match;
-      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-    }
-    return chipColor;
-  };
-
+export const MultiSelect = <T extends object>({ data, nameField, value, getSelectedValue }: IMultiSelect<T>) => {
   return (
     <Autocomplete
       onChange={(event: any, newValue: any) => {
@@ -34,7 +25,7 @@ export const MultiSelect = <T extends object>({ data, chipColor, nameField, valu
       autoHighlight
       renderInput={(params) => <StyledTextInput {...params} />}
       renderTags={(value: T[], getTagProps) =>
-        value.map((option: T, index: number) => (
+        value.map((option: any, index: number) => (
           <Chip
             variant="outlined"
             label={nameField(option)}
@@ -44,17 +35,17 @@ export const MultiSelect = <T extends object>({ data, chipColor, nameField, valu
             avatar={<FiberManualRecord />}
             sx={{
               '&.MuiChip-root': {
-                borderColor: reducedOpacityColor(0.3),
+                borderColor: updateColor(option.color, 0.3),
                 border: '2px solid',
-                background: reducedOpacityColor(0.1),
-                color: reducedOpacityColor(0.9),
+                background: updateColor(option.color, 0.1),
+                color: option.color,
                 fontWeight: 500,
               },
               '& .MuiChip-deleteIcon': {
-                color: 'rgba(0, 0, 255, 1)',
+                color: option.color,
               },
               '& .MuiChip-avatar': {
-                color: 'rgba(0, 0, 255, 1)',
+                color: option.color,
               },
             }}
           />

diff --git a/src/components/table/cellRenderers/HistoryCellRenderer.tsx b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
@@ -1,4 +1,5 @@
 import { useAppState } from '@/hooks/useAppState';
+import { updateColor } from '@/utils/updateColor';
 import { Box, CircularProgress, Popper, Stack, Typography } from '@mui/material';
 import React, { useState } from 'react';
 
@@ -17,7 +18,9 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
   const key = value.row[value.key].key;
 
   const showDot = data.isChanged;
+
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [multiSelectAnchor, setMultiSelectAnchor] = React.useState<null | HTMLElement>(null);
 
   const fetchHistory = async () => {
     setLoading(true);
@@ -43,15 +46,26 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
     }
   };
 
+  const handleMouseEnterMultiSelect = (event: React.MouseEvent<HTMLElement>) => {
+    setMultiSelectAnchor(multiSelectAnchor ? null : event.currentTarget);
+  };
+
+  const handleMouseLeaveMultiSelect = (event: React.MouseEvent<HTMLElement>) => {
+    if (multiSelectAnchor === event.currentTarget) {
+      setMultiSelectAnchor(null);
+    }
+  };
+
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popper' : undefined;
 
+  const multiSelectAnchorOpen = Boolean(multiSelectAnchor);
+  const multiSelectAnchorId = multiSelectAnchorOpen ? 'multiselect-popper' : undefined;
+
   if (data.value === null) {
     return null;
   }
 
-  console.log(updateHistory);
-
   if (data.type === 'multiSelect') {
     return (
       <Box position="relative">
@@ -63,7 +77,7 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
             sx={{
               position: 'absolute',
               left: -15,
-              top: 0,
+              top: 5,
             }}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
@@ -84,10 +98,10 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
             alignItems="center"
             sx={{
               padding: '4px 8px',
-              border: `1px solid rgba(255, 120, 0, 1)`,
-              // backgroundColor: value.value[0].color,
-              backgroundColor: 'rgba(255, 120, 0, 0.3)',
-              color: 'rgba(255, 120, 0, 1)',
+              borderColor: updateColor(data.value[0].color, 0.3),
+              border: '2px solid',
+              backgroundColor: updateColor(data.value[0].color, 0.1),
+              color: data.value[0].color,
               fontWeight: '600',
               borderRadius: '35px',
               width: 'fit-content',
@@ -101,11 +115,55 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
             </Typography>
           </Stack>
 
-          <Typography variant="bodyMd">{data.value.length > 1 && `+ ${data.value.length - 1}`}</Typography>
+          <Typography onMouseEnter={handleMouseEnterMultiSelect} onMouseLeave={handleMouseLeaveMultiSelect} variant="bodyMd">
+            {data.value.length > 1 && `+ ${data.value.length - 1}`}
+          </Typography>
         </Stack>
         <Popper id={id} open={open} anchorEl={anchorEl}>
           {loading ? <CircularProgress size={20} color="inherit" /> : <HistoryList updateHistory={updateHistory} />}
         </Popper>
+        <Popper id={multiSelectAnchorId} open={multiSelectAnchorOpen} anchorEl={multiSelectAnchor}>
+          <Stack
+            direction="row"
+            sx={(theme) => ({
+              border: `1px solid ${theme.color.borders.border}`,
+              borderRadius: theme.shape.radius100,
+              backgroundColor: theme.color.base.white,
+              boxShadow: '0px 8px 24px 0px rgba(0, 0, 0, 0.12)',
+              padding: 4,
+              minWidth: '200px',
+              columnGap: '10px',
+            })}
+          >
+            {data.value.map((el: any, key: number) => {
+              if (key === 0) return null;
+              return (
+                <Stack
+                  key={key}
+                  direction="row"
+                  alignItems="center"
+                  sx={{
+                    padding: '4px 8px',
+                    borderColor: updateColor(el.color, 0.3),
+                    border: '2px solid',
+                    backgroundColor: updateColor(el.color, 0.1),
+                    color: el.color,
+                    fontWeight: '600',
+                    borderRadius: '35px',
+                    width: 'fit-content',
+                    minWidth: '40px',
+                  }}
+                >
+                  <Typography variant="bodyMd">&#x2022;</Typography>
+
+                  <Typography variant="bodySm" fontWeight={500}>
+                    {el.label}
+                  </Typography>
+                </Stack>
+              );
+            })}
+          </Stack>
+        </Popper>
       </Box>
     );
   }
@@ -120,7 +178,7 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
           sx={{
             position: 'absolute',
             left: -15,
-            top: 10,
+            top: 15,
           }}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
@@ -138,7 +196,6 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
 };
 
 const HistoryList = ({ updateHistory }: { updateHistory: any }) => {
-  console.log(updateHistory);
   return (
     <Box
       sx={(theme) => ({
@@ -166,10 +223,10 @@ const HistoryList = ({ updateHistory }: { updateHistory: any }) => {
                         alignItems="center"
                         sx={{
                           padding: '4px 8px',
-                          border: `1px solid rgba(255, 120, 0, 1)`,
-                          // backgroundColor: value.value[0].color,
-                          backgroundColor: 'rgba(255, 120, 0, 0.3)',
-                          color: 'rgba(255, 120, 0, 1)',
+                          borderColor: updateColor(el.color, 0.3),
+                          border: '2px solid',
+                          backgroundColor: updateColor(el.color, 0.1),
+                          color: el.color,
                           fontWeight: '600',
                           borderRadius: '35px',
                           width: 'fit-content',

diff --git a/src/utils/updateColor.ts b/src/utils/updateColor.ts
@@ -0,0 +1,18 @@
+export function updateColor(rgbaColor: any, newOpacity: number) {
+  // Parse the input RGBA color string
+  const colorRegex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/;
+  const match = rgbaColor.match(colorRegex);
+
+  if (!match) {
+    // Invalid input format, return the original color
+    return rgbaColor;
+  }
+
+  // Extract color components
+  const [, red, green, blue] = match;
+
+  // Build the updated RGBA color string with the new opacity
+  const updatedColor = `rgba(${red}, ${green}, ${blue}, ${newOpacity})`;
+
+  return updatedColor;
+}