147 lines
4.2 KiB
TypeScript
147 lines
4.2 KiB
TypeScript
|
import React, {
|
||
|
DetailedHTMLProps,
|
||
|
HTMLAttributes,
|
||
|
PropsWithChildren,
|
||
|
} from "react";
|
||
|
import { twMerge } from "tailwind-merge";
|
||
|
|
||
|
export const TWUIDropdownContentPositions = [
|
||
|
"left",
|
||
|
"right",
|
||
|
"center",
|
||
|
] as const;
|
||
|
|
||
|
export type TWUI_DROPDOWN_PROPS = PropsWithChildren &
|
||
|
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
|
||
|
target: React.ReactNode;
|
||
|
contentWrapperProps?: DetailedHTMLProps<
|
||
|
HTMLAttributes<HTMLDivElement>,
|
||
|
HTMLDivElement
|
||
|
>;
|
||
|
targetWrapperProps?: DetailedHTMLProps<
|
||
|
HTMLAttributes<HTMLDivElement>,
|
||
|
HTMLDivElement
|
||
|
>;
|
||
|
debounce?: number;
|
||
|
hoverOpen?: boolean;
|
||
|
position?: (typeof TWUIDropdownContentPositions)[number];
|
||
|
topOffset?: number;
|
||
|
externalSetOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
||
|
};
|
||
|
|
||
|
let timeout: any;
|
||
|
|
||
|
/**
|
||
|
* # Toggle Component
|
||
|
* @className_wrapper twui-dropdown-wrapper
|
||
|
* @className_wrapper twui-dropdown-target
|
||
|
* @className_wrapper twui-dropdown-content
|
||
|
*/
|
||
|
export default function Dropdown({
|
||
|
contentWrapperProps,
|
||
|
targetWrapperProps,
|
||
|
hoverOpen,
|
||
|
debounce = 500,
|
||
|
target,
|
||
|
position = "center",
|
||
|
topOffset,
|
||
|
externalSetOpen,
|
||
|
...props
|
||
|
}: TWUI_DROPDOWN_PROPS) {
|
||
|
const [open, setOpen] = React.useState(false);
|
||
|
|
||
|
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
||
|
|
||
|
const handleClickOutside = React.useCallback((e: MouseEvent) => {
|
||
|
const targetEl = e.target as HTMLElement;
|
||
|
const closestWrapper = targetEl.closest(".twui-dropdown-wrapper");
|
||
|
|
||
|
if (!closestWrapper) {
|
||
|
externalSetOpen?.(false);
|
||
|
return setOpen(false);
|
||
|
}
|
||
|
if (closestWrapper && closestWrapper !== dropdownRef.current) {
|
||
|
externalSetOpen?.(false);
|
||
|
return setOpen(false);
|
||
|
}
|
||
|
}, []);
|
||
|
|
||
|
React.useEffect(() => {
|
||
|
document.addEventListener("click", handleClickOutside);
|
||
|
return () => {
|
||
|
document.removeEventListener("click", handleClickOutside);
|
||
|
};
|
||
|
}, []);
|
||
|
|
||
|
return (
|
||
|
<div
|
||
|
{...props}
|
||
|
className={twMerge(
|
||
|
"flex flex-col items-center relative",
|
||
|
"twui-dropdown-wrapper",
|
||
|
props.className
|
||
|
)}
|
||
|
onMouseEnter={() => {
|
||
|
if (!hoverOpen) return;
|
||
|
window.clearTimeout(timeout);
|
||
|
externalSetOpen?.(true);
|
||
|
setOpen(true);
|
||
|
}}
|
||
|
onMouseLeave={() => {
|
||
|
if (!hoverOpen) return;
|
||
|
timeout = setTimeout(() => {
|
||
|
externalSetOpen?.(false);
|
||
|
setOpen(false);
|
||
|
}, debounce);
|
||
|
}}
|
||
|
onBlur={() => {
|
||
|
window.clearTimeout(timeout);
|
||
|
}}
|
||
|
ref={dropdownRef}
|
||
|
>
|
||
|
<div
|
||
|
onClick={() => {
|
||
|
externalSetOpen?.(!open);
|
||
|
setOpen(!open);
|
||
|
}}
|
||
|
className={twMerge(
|
||
|
"cursor-pointer",
|
||
|
"twui-dropdown-target",
|
||
|
targetWrapperProps?.className
|
||
|
)}
|
||
|
>
|
||
|
{target}
|
||
|
</div>
|
||
|
|
||
|
<div
|
||
|
{...contentWrapperProps}
|
||
|
className={twMerge(
|
||
|
"absolute z-10",
|
||
|
position == "left"
|
||
|
? "left-0"
|
||
|
: position == "right"
|
||
|
? "right-0"
|
||
|
: "",
|
||
|
open ? "flex" : "hidden",
|
||
|
"twui-dropdown-content",
|
||
|
contentWrapperProps?.className
|
||
|
)}
|
||
|
onMouseEnter={() => {
|
||
|
if (!hoverOpen) return;
|
||
|
window.clearTimeout(timeout);
|
||
|
}}
|
||
|
onBlur={() => {
|
||
|
if (!hoverOpen) return;
|
||
|
window.clearTimeout(timeout);
|
||
|
}}
|
||
|
style={{
|
||
|
top: `calc(100% + ${topOffset || 0}px)`,
|
||
|
...contentWrapperProps?.style,
|
||
|
}}
|
||
|
>
|
||
|
{props.children}
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
}
|