71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect, useState } from "react";
|
|
import Button from "./Button";
|
|
import { useClickAway } from "@uidotdev/usehooks";
|
|
import ArrowDownIcon from "./icons/ArrowDownIcon";
|
|
|
|
interface Props {
|
|
options: string[]; // ["StroyProject"]
|
|
onChange: (option: string | undefined) => void;
|
|
}
|
|
|
|
export default function Select({ options, onChange }: Props) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [selectedOption, setSelectedOption] = useState<string | undefined>();
|
|
const ref = useClickAway<HTMLDivElement>(() => setIsOpen(false));
|
|
|
|
function handleClickOption(option: string) {
|
|
setSelectedOption(option);
|
|
onChange(option);
|
|
setIsOpen(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (selectedOption && !options.includes(selectedOption)) {
|
|
setSelectedOption(undefined);
|
|
}
|
|
}, [options]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="relative outline-black/10 outline w-[13.889vw] rounded-[0.556vw]"
|
|
>
|
|
<Button
|
|
onlyIcon
|
|
variant="tertiary"
|
|
className="px-[0.833vw] py-[0.417vw] !justify-between w-full"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<p className="text-[0.972vw] leading-[115%]">
|
|
{selectedOption || "Выберите из списка"}
|
|
</p>
|
|
<div
|
|
className={`w-[1.389vw] transition-transform h-[1.389vw]${
|
|
isOpen ? "rotate-180" : ""
|
|
}`}
|
|
>
|
|
<ArrowDownIcon />
|
|
</div>
|
|
</Button>
|
|
{isOpen && (
|
|
<div className="absolute top-full w-full bg-white rounded-[0.556vw] outline outline-black/10">
|
|
{options.map((option) => (
|
|
<Button
|
|
key={option}
|
|
onlyIcon
|
|
variant="tertiary"
|
|
className="px-[0.833vw] py-[0.417vw] !justify-start w-full !first:rounded-t-[0.556vw] !last:rounded-b-[0.556vw]"
|
|
onClick={() => handleClickOption(option)}
|
|
>
|
|
<div className="flex gap-[0.278vw] items-center">
|
|
<p className="text-[0.972vw] leading-[115%]">{option}</p>
|
|
</div>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|