87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Eye, MoreHorizontal } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import type * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
|
|
import { ComponentProps, PropsWithChildren } from "react";
|
|
|
|
interface DropdownMenuActionsProps<Id>
|
|
extends ComponentProps<typeof DropdownMenuPrimitive.Root> {
|
|
id: Id;
|
|
showDetail?: boolean | "dropdown-menu";
|
|
showEdit?: boolean;
|
|
showDelete?: boolean;
|
|
onDetail?: (id: Id) => void;
|
|
onDelete?: (id: Id) => void;
|
|
onEdit?: (id: Id) => void;
|
|
}
|
|
|
|
export function DropdownMenuActions<Id>({
|
|
id,
|
|
showDetail,
|
|
showDelete,
|
|
showEdit,
|
|
onDetail,
|
|
onDelete,
|
|
onEdit,
|
|
children,
|
|
...rest
|
|
}: PropsWithChildren<DropdownMenuActionsProps<Id>>) {
|
|
return (
|
|
<div className="flex gap-2 items-center justify-center">
|
|
{showDetail === true && (
|
|
<Button
|
|
variant="ghost"
|
|
className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
|
|
onClick={() => onDetail?.(id)}
|
|
>
|
|
<Eye />
|
|
<span className="sr-only">Detail</span>
|
|
</Button>
|
|
)}
|
|
<DropdownMenu {...rest}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
|
|
>
|
|
<MoreHorizontal />
|
|
<span className="sr-only">Open menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-[160px]">
|
|
{children}
|
|
{showDetail === "dropdown-menu" && (
|
|
<DropdownMenuItem onClick={() => onDetail?.(id)}>
|
|
Detail
|
|
</DropdownMenuItem>
|
|
)}
|
|
{showEdit && (
|
|
<DropdownMenuItem onClick={() => onEdit?.(id)}>
|
|
Edit
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(showDetail === "dropdown-menu" || showEdit || children) &&
|
|
showDelete && <DropdownMenuSeparator />}
|
|
{showDelete && (
|
|
<DropdownMenuItem onClick={() => onDelete?.(id)}>
|
|
Delete
|
|
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
}
|