Removed Avatar from AutoCompleteField (ohcnetwork#8959)

i0am0arunava · Oct 30, 2024 · a971668 · a971668
1 parent 0925884
commit a971668
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 41 deletions.
diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
@@ -80,8 +80,6 @@ export default function UserAutocomplete(props: UserSearchProps) {
         )}
         optionLabel={formatName}
         optionIcon={userOnlineDot}
-        optionImage={(option) => option.read_profile_picture_url}
-        avatar
         optionDescription={(option) =>
           `${option.user_type} - ${option.username}`
         }

diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
@@ -14,7 +14,6 @@ import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
 import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
 import { useTranslation } from "react-i18next";
-import { Avatar } from "@/components/Common/Avatar";
 type OptionCallback<T, R> = (option: T) => R;
 
 type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
@@ -24,7 +23,6 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionImage?: OptionCallback<T, string | undefined>;
   optionDisabled?: OptionCallback<T, boolean>;
   minQueryLength?: number;
   onQuery?: (query: string) => void;
@@ -51,7 +49,6 @@ const AutocompleteFormField = <T, V>(
         placeholder={props.placeholder}
         optionLabel={props.optionLabel}
         optionIcon={props.optionIcon}
-        optionImage={props.optionImage}
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
@@ -76,7 +73,6 @@ type AutocompleteProps<T, V = T> = {
   placeholder?: string;
   optionLabel: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionImage?: OptionCallback<T, string | undefined>;
   optionValue?: OptionCallback<T, V>;
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
@@ -122,7 +118,6 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       description,
       search: label.toLowerCase(),
       icon: props.optionIcon?.(option),
-      image: props.optionImage?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
       disabled: props.optionDisabled?.(option),
     };
@@ -142,7 +137,6 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
         description: undefined,
         search: query.toLowerCase(),
         icon: <CareIcon icon="l-plus" />,
-        image: undefined,
         value: query,
         disabled: undefined,
       },
@@ -242,41 +236,24 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   >
                     {({ focus }) => (
                       <div className="flex flex-col">
-                        <div className="flex items-center">
-                          <div className="flex flex-col">
-                            <div className="relative">
-                              {(option.image || props.avatar) && (
-                                <Avatar
-                                  className="mr-2 h-11 w-11 rounded-full"
-                                  name={option.label}
-                                  imageUrl={option.image}
-                                />
-                              )}
-                              <span className="absolute bottom-0 right-0 z-10">
-                                {option.icon}
-                              </span>
-                            </div>
-                          </div>
-                          <div className="w-full">
-                            <div className="flex justify-between">
-                              <span>{option.label}</span>
-                            </div>
-                            {option.description && (
-                              <div
-                                className={classNames(
-                                  "text-sm font-normal",
-                                  option.disabled
-                                    ? "text-secondary-700"
-                                    : focus
-                                      ? "text-primary-200"
-                                      : "text-secondary-700",
-                                )}
-                              >
-                                {option.description}
-                              </div>
+                        <div className="flex justify-between">
+                          <span>{option.label}</span>
+                          <span>{option.icon}</span>
+                        </div>
+                        {option.description && (
+                          <div
+                            className={classNames(
+                              "text-sm font-normal",
+                              option.disabled
+                                ? "text-secondary-700"
+                                : focus
+                                  ? "text-primary-200"
+                                  : "text-secondary-700",
                             )}
+                          >
+                            {option.description}
                           </div>
-                        </div>
+                        )}
                       </div>
                     )}
                   </ComboboxOption>