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

68
src/components/SearchBar.tsx
View File

@ -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,36 +122,35 @@ 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,
maxHeight: maxScrollSize,
}}
> */}
{hints.map((item: any, id: number) => (
<Combobox.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={item}
>
<div>{item.caption}</div>
</Combobox.Option>
))}
{hints.map((item: any, id: number) => (
<Combobox.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={item}
>
<div>{item.caption}</div>
</Combobox.Option>
))}
{/* </Scrollbar> */}
</Combobox.Options>
</Transition>