71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { createPopper } from "@popperjs/core";
|
|
|
|
export function DropDownItem(props) {
|
|
return <button
|
|
className={"text-sm text-left py-2 px-4 focus:outline-none block w-full whitespace-no-wrap bg-transparent hover:bg-secondary text-primary"}
|
|
onClick={(e) => e.preventDefault()}
|
|
>
|
|
{props.children}
|
|
</button>;
|
|
}
|
|
export default function Dropdown(props) {
|
|
// dropdown props
|
|
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
|
|
const btnDropdownRef = React.createRef();
|
|
const popoverDropdownRef = React.createRef();
|
|
const openDropdownPopover = () => {
|
|
createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
|
|
placement: props.placement ?? "left-start",
|
|
});
|
|
setDropdownPopoverShow(true);
|
|
};
|
|
const closeDropdownPopover = () => {
|
|
setDropdownPopoverShow(false);
|
|
};
|
|
|
|
function handleOutsideClick(event) {
|
|
let node = popoverDropdownRef?.current;
|
|
if (node && !node?.contains(event.target)) {
|
|
closeDropdownPopover();
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if ('ontouchend' in window) {
|
|
document.addEventListener('touchend', handleOutsideClick)
|
|
} else {
|
|
document.addEventListener('click', handleOutsideClick)
|
|
}
|
|
// Specify how to clean up after this effect:
|
|
return function cleanup() {
|
|
document.removeEventListener('touchend', handleOutsideClick)
|
|
document.removeEventListener('click', handleOutsideClick)
|
|
};
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
className="text-secondary py-1 px-3"
|
|
href="#pablo"
|
|
ref={btnDropdownRef}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
|
|
}}
|
|
>
|
|
{props.button}
|
|
</a>
|
|
<div
|
|
ref={popoverDropdownRef}
|
|
className={
|
|
(dropdownPopoverShow ? "block " : "hidden ") +
|
|
"bg-trinary text-base z-50 float-left overflow-hidden text-left rounded-xl shadow-lg min-w-48"
|
|
}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</>
|
|
);
|
|
}; |