You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
860 B
TypeScript
41 lines
860 B
TypeScript
2 years ago
|
import clsx from "clsx";
|
||
2 years ago
|
import { useDevice } from "../App";
|
||
2 years ago
|
|
||
|
const MenuTrigger = ({
|
||
|
className = "",
|
||
|
children,
|
||
|
onToggle,
|
||
2 years ago
|
title,
|
||
|
...rest
|
||
2 years ago
|
}: {
|
||
|
className?: string;
|
||
|
children: React.ReactNode;
|
||
|
onToggle: () => void;
|
||
2 years ago
|
title?: string;
|
||
|
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
|
||
2 years ago
|
const device = useDevice();
|
||
|
const classNames = clsx(
|
||
|
`dropdown-menu-button ${className}`,
|
||
|
"zen-mode-transition",
|
||
|
{
|
||
1 year ago
|
"dropdown-menu-button--mobile": device.editor.isMobile,
|
||
2 years ago
|
},
|
||
|
).trim();
|
||
|
return (
|
||
|
<button
|
||
|
data-prevent-outside-click
|
||
|
className={classNames}
|
||
|
onClick={onToggle}
|
||
|
type="button"
|
||
|
data-testid="dropdown-menu-button"
|
||
2 years ago
|
title={title}
|
||
|
{...rest}
|
||
2 years ago
|
>
|
||
|
{children}
|
||
|
</button>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default MenuTrigger;
|
||
|
MenuTrigger.displayName = "DropdownMenuTrigger";
|