Merge pull request 'added SearchBar for MainSection' (#117) from feature/search-bar into develop

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

src/components/SearchBar.tsx

@@ -7,6 +7,7 @@ import "../index.css";
 import { Combobox, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
 import { Scrollbar } from "react-scrollbars-custom";
+import { Function } from "lodash";
 
 /* -------------------------------------------------------------------------- */
 /*                               Component props                              */
@@ -16,15 +17,18 @@ type Hint = {
   caption: string;
 };
 
-type Props = {
+type Props<T> = {
   onChange: (query: string) => void;
-  onSelected?: (value: Hint) => void;
+  onSelected: (value: Hint) => void;
+  IsEmptyItems: () => React.ReactNode;
   hints: Hint[];
+  displayValueResolver?: (element: T) => any;
   disabled?: boolean;
   inGroup?: boolean;
   className?: string;
   maxScrollSize?: number;
   elementScrollSize?: number;
+  placeHolder?: string;
 };
 /* -------------------------------------------------------------------------- */
 /*                                 styles                                     */
@@ -67,17 +71,20 @@ const inputInGroup = [
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 
-export default function TextInputBox({
+export default function SearchBar<T>({
   onChange,
   onSelected,
   hints,
+  displayValueResolver,
   disabled,
-  inGroup,
+  inGroup = false,
   className,
   maxScrollSize = 140,
   elementScrollSize = 36,
+  placeHolder = "Search...",
+  IsEmptyItems,
   ...props
-}: Props) {
+}: Props<T>) {
   const [selected, setSelected] = useState<any>(hints);
   const [query, setQuery] = useState("");
 
@@ -90,7 +97,7 @@ export default function TextInputBox({
     onSelected && onSelected(value);
   };
   return (
-    <div className={classNames("w-60", className)}>
+    <div>
       <Combobox value={selected} {...props} onChange={handleSelected}>
         <div className="relative">
           <div className="relative w-full  bg-white text-left focus:outline-none sm:text-sm">
@@ -101,8 +108,10 @@ export default function TextInputBox({
                 className,
               ])}
               onChange={(event) => setQuery(event.target.value)}
-              placeholder={"Search..."}
-              displayValue={(hint: Hint | undefined) => hint?.caption ?? ""}
+              placeholder={placeHolder}
+              displayValue={(value: T) =>
+                displayValueResolver ? displayValueResolver(value) : value
+              }
             />
           </div>
           <div>
@@ -113,11 +122,10 @@ export default function TextInputBox({
                   leave="transition ease-in duration-100"
                   leaveFrom="opacity-100"
                   leaveTo="opacity-0"
+                  afterLeave={() => setQuery("")}
                 >
                   <Combobox.Options>
-                    {hints.length === 0 && query !== "" ? (
-                      <p className="">Nothing found.</p>
-                    ) : null}
+                    {hints.length === 0 && query !== "" ? IsEmptyItems() : null}
                     {/* <Scrollbar
                       style={{
                         height: hints.length * elementScrollSize,