minio · bexsoft · Jan 10, 2024 · Jan 9, 2024
diff --git a/src/components/Autocomplete/Autocomplete.stories.tsx b/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 
 import Autocomplete from "./Autocomplete";
@@ -27,6 +27,7 @@ import DownloadIcon from "../Icons/DownloadIcon";
 import UploadIcon from "../Icons/UploadIcon";
 import UsersIcon from "../Icons/UsersIcon";
 import { SelectorType } from "../../global/global.types";
+import TestIcon from "../../utils/TestIcon";
 
 export default {
   title: "MDS/Forms/Autocomplete",
@@ -205,3 +206,23 @@ NoDropArrow.args = {
   ],
   displayDropArrow: false,
 };
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  options: [
+    {
+      label: "Option with Indicator",
+      value: "value1",
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};
diff --git a/src/components/Autocomplete/Autocomplete.tsx b/src/components/Autocomplete/Autocomplete.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { FC, Fragment, useEffect, useState } from "react";
+import React, { FC, Fragment, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import get from "lodash/get";
 import { AutocompleteProps } from "./Autocomplete.types";
@@ -47,6 +47,7 @@ const AutocompleteBase = styled.input(({ theme }) => {
     borderRadius: 3,
     outline: "none",
     transitionDuration: "0.1s",
+    transitionProperty: "border",
     backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
     userAutocomplete: "none",
     "&:placeholder": {
@@ -74,6 +75,9 @@ const AutocompleteBase = styled.input(({ theme }) => {
         borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
       },
     },
+    "&.withIcon": {
+      paddingLeft: 38,
+    },
   };
 });
 
@@ -82,6 +86,7 @@ const InputContainer = styled.div<InputContainerProps>(
     display: "flex",
     flexGrow: 1,
     width: "100%",
+    height: 38,
     position: "relative",
     "& .AutocompleteContainer": {
       width: "100%",
@@ -112,6 +117,18 @@ const InputContainer = styled.div<InputContainerProps>(
     "& .inputLabel": {
       marginBottom: error ? 18 : 0,
     },
+    "& .iconOption": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "absolute",
+      marginLeft: 15,
+      height: 38,
+      "& svg": {
+        width: 16,
+        height: 16,
+      },
+    },
     ...sx,
   }),
 );
@@ -136,23 +153,29 @@ const Autocomplete: FC<AutocompleteProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [searchBoxVal, setSearchBoxVal] = useState<string>("");
+  const [valueSelected, setValueSelected] = useState<number | null>(null);
   const [filterVal, setFilterVal] = useState<string>("");
   const [anchorEl, setAnchorEl] = React.useState<
     (EventTarget & HTMLDivElement) | null
   >(null);
 
   useEffect(() => {
     if (value !== "") {
-      const option = options.find((option) => option.value === value);
+      const index = options.findIndex((option) => option.value === value);
 
-      setSearchBoxVal(option?.label || "");
+      setValueSelected(index);
+      setSearchBoxVal(options[index]?.label || "");
     }
   }, []);
 
   const filteredOptions = options.filter((item) =>
     item.label.toLowerCase().includes(filterVal.toLowerCase()),
   );
 
+  const optionWithIcon =
+    valueSelected !== null &&
+    (options[valueSelected]?.icon || options[valueSelected]?.indicator);
+
   return (
     <InputContainer
       sx={sx}
@@ -195,6 +218,13 @@ const Autocomplete: FC<AutocompleteProps> = ({
           }
         }}
       >
+        {optionWithIcon && (
+          <Box className={"iconOption"}>
+            {options[valueSelected]?.indicator
+              ? options[valueSelected]?.indicator
+              : options[valueSelected].icon}
+          </Box>
+        )}
         <AutocompleteBase
           disabled={disabled}
           id={id}
@@ -205,6 +235,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
             setFilterVal(e.target.value);
           }}
           placeholder={placeholder}
+          className={`${optionWithIcon ? "withIcon" : ""}`}
         />
         {displayDropArrow && (
           <Box className={"overlayArrow"}>
@@ -213,12 +244,16 @@ const Autocomplete: FC<AutocompleteProps> = ({
         )}
 
         <DropdownSelector
-          id={`${id}-options-Autocompleteor`}
+          id={`${id}-options-Autocomplete`}
           options={filteredOptions}
           selectedOption={value}
-          onSelect={(nValue, extraValue, label) => {
+          onSelect={(nValue, extraValue, label, id) => {
+            console.log("Selected", id);
             setSearchBoxVal(label || "");
             setFilterVal("");
+            if (id !== undefined) {
+              setValueSelected(id);
+            }
             onChange(nValue, extraValue);
           }}
           hideTriggerAction={() => {

diff --git a/src/components/DropdownSelector/DropdownSelector.tsx b/src/components/DropdownSelector/DropdownSelector.tsx
@@ -144,7 +144,12 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
     const option = options[indexHover];
 
     if (!option.disabled) {
-      onSelect(option.value, option.extraValue || null, option.label);
+      onSelect(
+        option.value,
+        option.extraValue || null,
+        option.label,
+        indexHover,
+      );
     }
 
     hideTriggerAction();
@@ -229,6 +234,7 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
               >
                 {option.icon}
                 {option.label}
+                {option.indicator}
               </li>
             );
           })}

diff --git a/src/components/DropdownSelector/DropdownSelector.types.ts b/src/components/DropdownSelector/DropdownSelector.types.ts
@@ -21,7 +21,12 @@ export interface DropdownSelectorProps {
   id: string;
   options: SelectorType[];
   selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
   hideTriggerAction: () => void;
   open: boolean;
   anchorEl?: (EventTarget & HTMLElement) | null;

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import { Fragment, useState } from "react";
 import { Meta, Story } from "@storybook/react";
 
 import Select from "./Select";
@@ -27,6 +27,7 @@ import DownloadIcon from "../Icons/DownloadIcon";
 import UploadIcon from "../Icons/UploadIcon";
 import UsersIcon from "../Icons/UsersIcon";
 import { SelectorType } from "../../global/global.types";
+import TestIcon from "../../utils/TestIcon";
 
 export default {
   title: "MDS/Forms/Select",
@@ -186,3 +187,30 @@ WithPlaceholder.args = {
     { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
   ],
 };
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  placeholder: "This Select has placeholder",
+  options: [
+    {
+      label: "Option with indicator",
+      value: "value1",
+      icon: <DownloadIcon />,
+      extraValue: { anotherVar: "test1" },
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+      icon: <UploadIcon />,
+      extraValue: { anotherVar: "test2" },
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+      icon: <UsersIcon />,
+      extraValue: { anotherVar: "test3" },
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -49,6 +49,7 @@ const SelectBase = styled.div(({ theme }) => {
     transitionDuration: "0.1s",
     backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
     userSelect: "none",
+    gap: 8,
     "&:placeholder": {
       color: "#858585",
       opacity: 1,
@@ -74,6 +75,10 @@ const SelectBase = styled.div(({ theme }) => {
         borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
       },
     },
+    "& svg": {
+      width: 16,
+      height: 16,
+    },
   };
 });
 
@@ -181,15 +186,17 @@ const Select: FC<SelectProps> = ({
       >
         <SelectBase className={disabled ? "disabled" : ""}>
           <Fragment>
-            {fixedLabel !== "" ? (
+            {fixedLabel && fixedLabel !== "" ? (
               fixedLabel
             ) : (
               <Fragment>
+                {selectedLabel?.icon}
                 {selectedLabel?.label || (
                   <i style={{ opacity: 0.6 }}>
                     {placeholder !== "" ? placeholder : ""}
                   </i>
                 )}
+                {selectedLabel?.indicator}
               </Fragment>
             )}
           </Fragment>

diff --git a/src/global/global.types.ts b/src/global/global.types.ts
@@ -376,6 +376,7 @@ export interface SelectorType {
   label: string;
   value: string;
   icon?: React.ReactNode;
+  indicator?: React.ReactNode;
   extraValue?: any;
   disabled?: boolean;
 }