155 lines
5 KiB
TypeScript
155 lines
5 KiB
TypeScript
import * as React from "react";
|
|
|
|
// react-poppper
|
|
import { usePopper } from "react-popper";
|
|
// headless ui
|
|
import { Menu } from "@headlessui/react";
|
|
// type
|
|
import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
|
|
// icons
|
|
import { ChevronDown, MoreHorizontal } from "lucide-react";
|
|
|
|
const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
|
const {
|
|
buttonClassName = "",
|
|
customButtonClassName = "",
|
|
placement,
|
|
children,
|
|
className = "",
|
|
customButton,
|
|
disabled = false,
|
|
ellipsis = false,
|
|
label,
|
|
maxHeight = "md",
|
|
noBorder = false,
|
|
noChevron = false,
|
|
optionsClassName = "",
|
|
verticalEllipsis = false,
|
|
width = "auto",
|
|
menuButtonOnClick,
|
|
} = props;
|
|
|
|
const [referenceElement, setReferenceElement] =
|
|
React.useState<HTMLButtonElement | null>(null);
|
|
const [popperElement, setPopperElement] =
|
|
React.useState<HTMLDivElement | null>(null);
|
|
|
|
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
|
placement: placement ?? "auto",
|
|
});
|
|
return (
|
|
<Menu as="div" className={`relative w-min text-left ${className}`}>
|
|
{({ open }) => (
|
|
<>
|
|
{customButton ? (
|
|
<Menu.Button as={React.Fragment}>
|
|
<button
|
|
ref={setReferenceElement}
|
|
type="button"
|
|
onClick={menuButtonOnClick}
|
|
className={customButtonClassName}
|
|
>
|
|
{customButton}
|
|
</button>
|
|
</Menu.Button>
|
|
) : (
|
|
<>
|
|
{ellipsis || verticalEllipsis ? (
|
|
<Menu.Button as={React.Fragment}>
|
|
<button
|
|
ref={setReferenceElement}
|
|
type="button"
|
|
onClick={menuButtonOnClick}
|
|
disabled={disabled}
|
|
className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
|
|
disabled
|
|
? "cursor-not-allowed"
|
|
: "cursor-pointer hover:bg-custom-background-80"
|
|
} ${buttonClassName}`}
|
|
>
|
|
<MoreHorizontal
|
|
className={`h-3.5 w-3.5 ${
|
|
verticalEllipsis ? "rotate-90" : ""
|
|
}`}
|
|
/>
|
|
</button>
|
|
</Menu.Button>
|
|
) : (
|
|
<Menu.Button as={React.Fragment}>
|
|
<button
|
|
ref={setReferenceElement}
|
|
type="button"
|
|
className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
|
|
open
|
|
? "bg-custom-background-90 text-custom-text-100"
|
|
: "text-custom-text-200"
|
|
} ${
|
|
noBorder
|
|
? ""
|
|
: "border border-custom-border-300 shadow-sm focus:outline-none"
|
|
} ${
|
|
disabled
|
|
? "cursor-not-allowed text-custom-text-200"
|
|
: "cursor-pointer hover:bg-custom-background-80"
|
|
} ${buttonClassName}`}
|
|
>
|
|
{label}
|
|
{!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
|
|
</button>
|
|
</Menu.Button>
|
|
)}
|
|
</>
|
|
)}
|
|
<Menu.Items className="fixed z-10">
|
|
<div
|
|
className={`overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
|
|
maxHeight === "lg"
|
|
? "max-h-60"
|
|
: maxHeight === "md"
|
|
? "max-h-48"
|
|
: maxHeight === "rg"
|
|
? "max-h-36"
|
|
: maxHeight === "sm"
|
|
? "max-h-28"
|
|
: ""
|
|
} ${
|
|
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
|
|
} ${optionsClassName}`}
|
|
ref={setPopperElement}
|
|
style={styles.popper}
|
|
{...attributes.popper}
|
|
>
|
|
{children}
|
|
</div>
|
|
</Menu.Items>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
|
|
const { children, onClick, className = "" } = props;
|
|
return (
|
|
<Menu.Item as="div">
|
|
{({ active, close }) => (
|
|
<button
|
|
type="button"
|
|
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
|
|
active ? "bg-custom-background-80" : ""
|
|
} ${className}`}
|
|
onClick={(e) => {
|
|
close();
|
|
onClick && onClick(e);
|
|
}}
|
|
>
|
|
{children}
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
);
|
|
};
|
|
|
|
CustomMenu.MenuItem = MenuItem;
|
|
|
|
export { CustomMenu };
|