Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/117
This commit is contained in:
Denis Gorbunov 2022-09-07 13:21:18 +00:00
commit 83ff35ce4f
1 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/SearchBar.tsx
View File

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