Action Menu

1import * as React from 'react';
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuTrigger,
7  DropdownMenuSeparator,
8} from '@/components/ui/dropdown-menu';
9import { LucideIcon } from 'lucide-react';
10import { cn } from '@/lib/utils/deso';
11import {
12  ConfirmationDialog,
13  ConfirmationDialogProps,
14} from './confirmation-dialog';
15 
16type ConfirmationProps = Omit<ConfirmationDialogProps, 'trigger' | 'children'>;
17 
18interface ActionMenuItemProps {
19  children: React.ReactNode;
20  icon?: LucideIcon;
21  onClick?: (e: Event) => void;
22  variant?: 'default' | 'destructive';
23  className?: string;
24  disabled?: boolean;
25  confirmation?: ConfirmationProps;
26}
27 
28export function ActionMenuItem({
29  children,
30  icon: Icon,
31  onClick,
32  variant,
33  className,
34  disabled,
35  confirmation,
36}: ActionMenuItemProps) {
37  const [dialogOpen, setDialogOpen] = React.useState(false);
38 
39  const handleSelect = (e: Event) => {
40    if (confirmation) {
41      e.preventDefault();
42      setDialogOpen(true);
43    } else if (onClick) {
44      onClick(e);
45    }
46  };
47 
48  const item = (
49    <DropdownMenuItem
50      onSelect={handleSelect}
51      variant={variant}
52      disabled={disabled}
53      className={cn('flex cursor-pointer items-center gap-2', className)}
54    >
55      {Icon && <Icon className="h-4 w-4" />}
56      {children}
57    </DropdownMenuItem>
58  );
59 
60  if (confirmation) {
61    return (
62      <ConfirmationDialog
63        {...confirmation}
64        open={dialogOpen}
65        onOpenChange={setDialogOpen}
66        trigger={<>{item}</>}
67        onConfirm={() => {
68          if (onClick) {
69            onClick(new Event('click'));
70          }
71          if (confirmation.onConfirm) {
72            confirmation.onConfirm();
73          }
74        }}
75      />
76    );
77  }
78 
79  return item;
80}
81 
82interface ActionMenuProps {
83  trigger: React.ReactNode;
84  children: React.ReactNode;
85  align?: 'center' | 'start' | 'end';
86}
87 
88export function ActionMenu({
89  trigger,
90  children,
91  align = 'end',
92}: ActionMenuProps) {
93  return (
94    <DropdownMenu>
95      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
96      <DropdownMenuContent align={align} className="border border-border">
97        {children}
98      </DropdownMenuContent>
99    </DropdownMenu>
100  );
101}
102 
103export { DropdownMenuSeparator as ActionMenuSeparator };