65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { useState } from "react";
|
|
import classNames from "classnames";
|
|
|
|
export type Props = {
|
|
className?: string;
|
|
selected?: string;
|
|
setSelected: (option: string) => void;
|
|
options: string[];
|
|
};
|
|
|
|
const Dropdown = ({ selected, setSelected, options, className }: Props) => {
|
|
const [isActive, setIsActive] = useState<boolean>(false);
|
|
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
const handleClickOutsideDropdown = (e: any) => {
|
|
if (isActive && !dropdownRef.current?.contains(e.target as Node)) {
|
|
setIsActive(false);
|
|
}
|
|
};
|
|
window.addEventListener("click", handleClickOutsideDropdown);
|
|
|
|
return (
|
|
<div className={classNames("", className)} ref={dropdownRef}>
|
|
<div
|
|
className="group border-gray-200 hover:border-gray-500 p-2
|
|
select-none rounded
|
|
flex items-center justify-between"
|
|
onClick={(e) => setIsActive(!isActive)}
|
|
>
|
|
{selected}
|
|
<span
|
|
className="border-r-4 border-l-4 border-t-4 border-b-4 border-r-transparent
|
|
border-l-transparent border-t-black border-b-transparent h-0 w-0 mt-1
|
|
transition-all duration-300
|
|
|
|
"
|
|
></span>
|
|
</div>
|
|
{isActive && (
|
|
<div
|
|
className="float-left mt-1 border border-gray-200 hover:border-gray-500
|
|
rounded"
|
|
>
|
|
{options.map((option) => (
|
|
<div
|
|
className="p-1 hover:bg-gray-200 select-none"
|
|
onClick={(e) => {
|
|
setSelected(option);
|
|
setIsActive(false);
|
|
}}
|
|
>
|
|
{option}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dropdown;
|
|
|
|
//group-active:border-t-transparent group-active:border-b-black group-active:mb-2
|