excalidraw/src/components/dropdownMenu/DropdownMenuItem.tsx
2023-07-25 15:48:37 +02:00

45 lines
1.1 KiB
TypeScript

import { Button } from "../Button";
import {
getDropdownMenuItemClassName,
useHandleDropdownMenuItemClick,
} from "./common";
import MenuItemContent from "./DropdownMenuItemContent";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
const DropdownMenuItem = ({
icon,
onSelect,
children,
shortcut,
className,
...rest
}: {
icon?: JSX.Element;
onSelect: (event: Event) => void;
children: React.ReactNode;
shortcut?: string;
className?: string;
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
return (
<DropdownMenuPrimitive.Item className="radix-menu-item">
<Button
{...rest}
onClick={handleClick}
onSelect={() => {}}
className={getDropdownMenuItemClassName(className)}
title={rest.title ?? rest["aria-label"]}
>
<MenuItemContent icon={icon} shortcut={shortcut}>
{children}
</MenuItemContent>
</Button>
</DropdownMenuPrimitive.Item>
);
};
export default DropdownMenuItem;
DropdownMenuItem.displayName = "DropdownMenuItem";