From 32d37ec45effc633d841392ea3c60e257b7a693b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 15 Mar 2023 10:59:43 +0530
Subject: [PATCH] refactor: custom search select component (#440)

---
 .../components/ui/custom-search-select.tsx    | 323 ++++++------------
 1 file changed, 109 insertions(+), 214 deletions(-)

diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 10e1091d1..a085e2e3b 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -1,10 +1,8 @@
 import React, { useState } from "react";
-
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
 import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-
 type CustomSearchSelectProps = {
   value: any;
   onChange: any;
@@ -25,7 +23,6 @@ type CustomSearchSelectProps = {
   multiple?: boolean;
   footerOption?: JSX.Element;
 };
-
 export const CustomSearchSelect = ({
   label,
   textAlignment,
@@ -49,221 +46,119 @@ export const CustomSearchSelect = ({
       ? options
       : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
+  const props: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) props.multiple = true;
+
   return (
-    <>
-      {/* TODO: Improve this multiple logic */}
-      {multiple ? (
-        <Combobox
-          as="div"
-          value={value}
-          onChange={onChange}
-          className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
-          disabled={disabled}
-          multiple
-        >
-          {({ open }: any) => (
-            <>
-              {customButton ? (
-                <Combobox.Button as="div">{customButton}</Combobox.Button>
-              ) : (
-                <Combobox.Button
-                  className={`flex w-full ${
-                    disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border px-2.5 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                    textAlignment === "right"
-                      ? "text-right"
-                      : textAlignment === "center"
-                      ? "text-center"
-                      : "text-left"
-                  }`}
-                >
-                  {label}
-                  {!noChevron && !disabled && (
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                  )}
-                </Combobox.Button>
+    <Combobox
+      as="div"
+      className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+      {...props}
+    >
+      {({ open }: any) => (
+        <>
+          {customButton ? (
+            <Combobox.Button as="div">{customButton}</Combobox.Button>
+          ) : (
+            <Combobox.Button
+              className={`flex w-full ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+              } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                textAlignment === "right"
+                  ? "text-right"
+                  : textAlignment === "center"
+                  ? "text-center"
+                  : "text-left"
+              }`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
               )}
-
-              <Transition
-                show={open}
-                as={React.Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Combobox.Options
-                  className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
-                    position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
-                >
-                  <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
-                    <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
-                    <Combobox.Input
-                      className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Type to search..."
-                      displayValue={(assigned: any) => assigned?.name}
-                    />
-                  </div>
-                  <div
-                    className={`mt-2 space-y-1 ${
-                      height === "sm"
-                        ? "max-h-28"
-                        : height === "md"
-                        ? "max-h-44"
-                        : height === "rg"
-                        ? "max-h-56"
-                        : height === "lg"
-                        ? "max-h-80"
-                        : ""
-                    } overflow-y-scroll`}
-                  >
-                    {filteredOptions ? (
-                      filteredOptions.length > 0 ? (
-                        filteredOptions.map((option) => (
-                          <Combobox.Option
-                            key={option.value}
-                            value={option.value}
-                            className={({ active, selected }) =>
-                              `${active || selected ? "bg-hover-gray" : ""} ${
-                                selected ? "font-medium" : ""
-                              } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
-                            }
-                          >
-                            {({ active, selected }) => (
-                              <>
-                                {option.content}
-                                <div
-                                  className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
-                                    active || selected ? "opacity-100" : "opacity-0"
-                                  }`}
-                                >
-                                  <CheckIcon
-                                    className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                  />
-                                </div>
-                              </>
-                            )}
-                          </Combobox.Option>
-                        ))
-                      ) : (
-                        <p className="text-center text-gray-500">No matching results</p>
-                      )
-                    ) : (
-                      <p className="text-center text-gray-500">Loading...</p>
-                    )}
-                  </div>
-                  {footerOption}
-                </Combobox.Options>
-              </Transition>
-            </>
+            </Combobox.Button>
           )}
-        </Combobox>
-      ) : (
-        <Combobox
-          as="div"
-          value={value}
-          onChange={onChange}
-          className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
-          disabled={disabled}
-        >
-          {({ open }: any) => (
-            <>
-              {customButton ? (
-                <Combobox.Button as="div">{customButton}</Combobox.Button>
-              ) : (
-                <Combobox.Button
-                  className={`flex w-full ${
-                    disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border px-2.5 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                    textAlignment === "right"
-                      ? "text-right"
-                      : textAlignment === "center"
-                      ? "text-center"
-                      : "text-left"
-                  }`}
-                >
-                  {label}
-                  {!noChevron && !disabled && (
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                  )}
-                </Combobox.Button>
-              )}
-
-              <Transition
-                show={open}
-                as={React.Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
+          <Transition
+            show={open}
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Combobox.Options
+              className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
+                position === "right" ? "right-0" : "left-0"
+              } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+            >
+              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+                <Combobox.Input
+                  className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Type to search..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div
+                className={`mt-2 space-y-1 ${
+                  height === "sm"
+                    ? "max-h-28"
+                    : height === "md"
+                    ? "max-h-44"
+                    : height === "rg"
+                    ? "max-h-56"
+                    : height === "lg"
+                    ? "max-h-80"
+                    : ""
+                } overflow-y-scroll`}
               >
-                <Combobox.Options
-                  className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
-                    position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
-                >
-                  <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
-                    <MagnifyingGlassIcon className="h-3 w-3" />
-                    <Combobox.Input
-                      className="w-full  bg-transparent py-1 px-2 text-xs focus:outline-none"
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Type to search..."
-                      displayValue={(assigned: any) => assigned?.name}
-                    />
-                  </div>
-                  <div
-                    className={`mt-2 space-y-1 ${
-                      height === "sm"
-                        ? "max-h-28"
-                        : height === "md"
-                        ? "max-h-44"
-                        : height === "rg"
-                        ? "max-h-56"
-                        : height === "lg"
-                        ? "max-h-80"
-                        : ""
-                    } overflow-y-scroll`}
-                  >
-                    {filteredOptions ? (
-                      filteredOptions.length > 0 ? (
-                        filteredOptions.map((option) => (
-                          <Combobox.Option
-                            key={option.value}
-                            value={option.value}
-                            className={({ active, selected }) =>
-                              `${active || selected ? "bg-hover-gray" : ""} ${
-                                selected ? "font-medium" : ""
-                              } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
-                            }
-                          >
-                            {({ selected }) => (
-                              <>
-                                {option.content}
-                                {selected && <CheckIcon className="h-4 w-4" />}
-                              </>
-                            )}
-                          </Combobox.Option>
-                        ))
-                      ) : (
-                        <p className="text-center text-gray-500">No matching results</p>
-                      )
-                    ) : (
-                      <p className="text-center text-gray-500">Loading...</p>
-                    )}
-                  </div>
-                  {footerOption}
-                </Combobox.Options>
-              </Transition>
-            </>
-          )}
-        </Combobox>
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `${active || selected ? "bg-hover-gray" : ""} ${
+                            selected ? "font-medium" : ""
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
+                        }
+                      >
+                        {({ active, selected }) => (
+                          <>
+                            {option.content}
+                            <div
+                              className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
+                                active || selected ? "opacity-100" : "opacity-0"
+                              }`}
+                            >
+                              <CheckIcon
+                                className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                              />
+                            </div>
+                          </>
+                        )}
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-center text-gray-500">No matching results</p>
+                  )
+                ) : (
+                  <p className="text-center text-gray-500">Loading...</p>
+                )}
+              </div>
+              {footerOption}
+            </Combobox.Options>
+          </Transition>
+        </>
       )}
-    </>
+    </Combobox>
   );
 };