Merge pull request 'fix style and added inGroup props for InputGroup' (#105) from fix/select into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/105

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,6 +114,12 @@ function Select<T>({
             leaveTo="opacity-0"
           >
             <Listbox.Options className={`${SelectOptionsStyle}`}>
+              <Scrollbar
+                style={{
+                  height: options.length * elementScrollSize,
+                  maxHeight: maxScrollSize,
+                }}
+              >
                 {options.map((option, id) => (
                   <Listbox.Option
                     key={id}
@@ -107,15 +133,19 @@ function Select<T>({
                     value={option}
                   >
                     {`${
-                    displayValueResolver ? displayValueResolver(option) : option
+                      displayValueResolver
+                        ? displayValueResolver(option)
+                        : option
                     }`}
                   </Listbox.Option>
                 ))}
+              </Scrollbar>
             </Listbox.Options>
           </Transition>
         </div>
       </Listbox>
     </div>
+    //
   );
 }
 export default Select;