From 1e63c5b1b3078f908a06237d6aefe77b495ea024 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Thu, 23 Feb 2023 17:02:26 +0530
Subject: [PATCH] style: added direction for multi-level drop-down (#328)

* feat: made new multi-level select listbox

* refractor: changeds Multi-level-select component and added direction props

* style: added direction for multi-level drop-down
---
 .../components/core/multi-level-select.tsx    | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/apps/app/components/core/multi-level-select.tsx b/apps/app/components/core/multi-level-select.tsx
index db74f8bd2..68a76ae91 100644
--- a/apps/app/components/core/multi-level-select.tsx
+++ b/apps/app/components/core/multi-level-select.tsx
@@ -20,10 +20,11 @@ type TMultipleSelectProps = {
   selected: TSelectOption | null;
   setSelected: (value: any) => void;
   label: string;
+  direction?: "left" | "right";
 };
 
-export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
-  const { options, selected, setSelected, label } = props;
+export const MultiLevelSelect: React.FC<TMultipleSelectProps> = (props) => {
+  const { options, selected, setSelected, label, direction = "right" } = props;
 
   const [openChildFor, setOpenChildFor] = useState<TSelectOption | null>(null);
 
@@ -42,7 +43,7 @@ export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
           <div className="relative mt-1">
             <Listbox.Button
               onClick={() => setOpenChildFor(null)}
-              className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+              className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -58,35 +59,41 @@ export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
             >
               <Listbox.Options
                 static
-                className="absolute mt-1 max-h-60 w-full overflowa-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                className="absolute mt-1 max-h-60 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
               >
                 {options.map((option) => (
                   <Listbox.Option
                     key={option.id}
-                    className={({ active }) =>
-                      `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                        active ? "bg-amber-100 text-amber-900" : "text-gray-900"
-                      }`
+                    className={
+                      "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
                     }
                     onClick={(e: any) => {
                       if (option.children !== null) {
                         e.preventDefault();
                         setOpenChildFor(option);
                       }
+                      if (option.id === openChildFor?.id) {
+                        e.preventDefault();
+                        setOpenChildFor(null);
+                      }
                     }}
                     value={option}
                   >
                     {({ selected }) => (
                       <>
                         {openChildFor?.id === option.id && (
-                          <div className="w-72 h-auto max-h-72 bg-white border border-gray-200 rounded-lg rounded-tl-none shadow-md absolute left-full translate-x-2">
+                          <div
+                            className={`w-72 h-auto max-h-72 bg-white border border-gray-200 absolute rounded-lg ${
+                              direction === "right"
+                                ? "rounded-tl-none shadow-md left-full translate-x-2"
+                                : "rounded-tr-none shadow-md right-full -translate-x-2"
+                            }`}
+                          >
                             {option.children?.map((child) => (
                               <Listbox.Option
                                 key={child.id}
-                                className={({ active }) =>
-                                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                                    active ? "bg-amber-100 text-amber-900" : "text-gray-900"
-                                  }`
+                                className={
+                                  "relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
                                 }
                                 as="div"
                                 value={child}
@@ -101,7 +108,7 @@ export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
                                       {child.label}
                                     </span>
                                     {selected ? (
-                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
                                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
@@ -110,7 +117,13 @@ export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
                               </Listbox.Option>
                             ))}
 
-                            <div className="w-0 h-0 absolute top-0 left-0 -translate-x-2 border-t-8 border-gray-300 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent" />
+                            <div
+                              className={`w-0 h-0 absolute border-t-8 border-gray-300 ${
+                                direction === "right"
+                                  ? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
+                                  : "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
+                              }`}
+                            />
                           </div>
                         )}
                         <span
@@ -119,7 +132,7 @@ export const MultiSelect: React.FC<TMultipleSelectProps> = (props) => {
                           {option.label}
                         </span>
                         {selected ? (
-                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}