From 5e3b000bd65978e0eb7e3909693e68c993d04fbe Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Wed, 24 Aug 2022 15:32:48 +0300
Subject: [PATCH] fix style and add inGroup props for InputGroup

---
 src/components/Select.tsx | 74 +++++++++++++++++++++++++++------------
 1 file changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 752939c..1670d5d 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -7,18 +7,22 @@ import { Listbox, Transition } from "@headlessui/react";
 import classNames from "classnames";
 import "../index.css";
 import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg";
+import { Scrollbar } from "react-scrollbars-custom";
 
 /* -------------------------------------------------------------------------- */
 /*                               Component props                              */
 /* -------------------------------------------------------------------------- */
 
 type Props<T> = {
+  inGroup?: boolean;
   options?: T[];
   disabled?: boolean;
   className?: string;
   value: T;
   displayValueResolver?: (element: T) => any;
   onChange: (element: T) => void;
+  maxScrollSize?: number;
+  elementScrollSize?: number;
 } & Omit<React.ComponentPropsWithRef<"select">, "value" | "onChange">;
 
 /* -------------------------------------------------------------------------- */
@@ -43,7 +47,7 @@ const SelectOptionsStyle = `
     absolute z-10 mt-1 w-full max-h-56
     bg-white shadow-lg
     rounded py-1
-    overflow-auto
+    overflow-hidden
     focus:outline-none
     text-base 
     sm:text-sm
@@ -54,23 +58,40 @@ const SelectIconStyle = `
     absolute inset-y-0 right-0
     flex items-center pr-2
     `;
+
+const inputInGroup = [
+  ` border-none
+    hover:none
+    active:none
+    focus:none
+    `,
+];
 /* -------------------------------------------------------------------------- */
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 function Select<T>({
+  inGroup = false, // We should use this flag to choose how we will style our component
   className,
   options = [],
   value,
   onChange,
   displayValueResolver,
   disabled,
+  maxScrollSize = 140,
+  elementScrollSize = 36,
   ...props
 }: Props<T>): JSX.Element {
   return (
-    <div className={classNames("fixed top-16 w-60", className)}>
+    <div className={classNames("top-16 w-60", className)}>
       <Listbox value={value} {...props} onChange={onChange}>
-        <div className="relative mt-1">
-          <Listbox.Button className={`${SelectButtonStyle}`}>
+        <div className="relative">
+          <Listbox.Button
+            className={classNames([
+              [`${SelectButtonStyle}`],
+              { [`${inputInGroup}`]: inGroup },
+              className,
+            ])}
+          >
             {({ open }) => (
               <>
                 <span className="block truncate">{`${
@@ -86,7 +107,6 @@ function Select<T>({
               </>
             )}
           </Listbox.Button>
-
           <Transition
             as={Fragment}
             leave="transition ease-in duration-100"
@@ -94,28 +114,38 @@ function Select<T>({
             leaveTo="opacity-0"
           >
             <Listbox.Options className={`${SelectOptionsStyle}`}>
-              {options.map((option, id) => (
-                <Listbox.Option
-                  key={id}
-                  className={({ active, selected }) =>
-                    classNames(
-                      active ? "text-gray-900 bg-blue-50" : "font-normal ",
-                      "cursor-default select-none relative py-2 pl-3 pr-9",
-                      selected ? "text-gray-900 bg-blue-100" : "font-normal "
-                    )
-                  }
-                  value={option}
-                >
-                  {`${
-                    displayValueResolver ? displayValueResolver(option) : option
-                  }`}
-                </Listbox.Option>
-              ))}
+              <Scrollbar
+                style={{
+                  height: options.length * elementScrollSize,
+                  maxHeight: maxScrollSize,
+                }}
+              >
+                {options.map((option, id) => (
+                  <Listbox.Option
+                    key={id}
+                    className={({ active, selected }) =>
+                      classNames(
+                        active ? "text-gray-900 bg-blue-50" : "font-normal ",
+                        "cursor-default select-none relative py-2 pl-3 pr-9",
+                        selected ? "text-gray-900 bg-blue-100" : "font-normal "
+                      )
+                    }
+                    value={option}
+                  >
+                    {`${
+                      displayValueResolver
+                        ? displayValueResolver(option)
+                        : option
+                    }`}
+                  </Listbox.Option>
+                ))}
+              </Scrollbar>
             </Listbox.Options>
           </Transition>
         </div>
       </Listbox>
     </div>
+    //
   );
 }
 export default Select;