76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuShortcut,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@/ui";
|
||
|
|
import { CellContext } from "@tanstack/react-table";
|
||
|
|
import { MoreHorizontalIcon } from "lucide-react";
|
||
|
|
|
||
|
|
type DataTableRowActionContext<TData, TValue> = CellContext<TData, TValue>;
|
||
|
|
|
||
|
|
export type DataTablaRowActionFunction<TData, TValue> = (
|
||
|
|
props: DataTableRowActionContext<TData, TValue>,
|
||
|
|
) => DataTableRowActionDefinition<TData, TValue>[];
|
||
|
|
|
||
|
|
export type DataTableRowActionDefinition<TData, TValue> = {
|
||
|
|
label: string | "-";
|
||
|
|
shortcut?: string;
|
||
|
|
onClick?: (
|
||
|
|
props: DataTableRowActionContext<TData, TValue>,
|
||
|
|
e: React.BaseSyntheticEvent,
|
||
|
|
) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export type DataTableRowActionsProps<TData, TValue> = {
|
||
|
|
props: DataTableRowActionContext<TData, TValue>;
|
||
|
|
actions?: DataTablaRowActionFunction<TData, TValue>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function DataTableRowActions<TData, TValue>({
|
||
|
|
actions,
|
||
|
|
...props
|
||
|
|
}: DataTableRowActionsProps<TData, TValue>) {
|
||
|
|
return (
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<Button
|
||
|
|
aria-haspopup="true"
|
||
|
|
size="icon"
|
||
|
|
variant="link"
|
||
|
|
className="w-4 h-4 translate-y-[2px]"
|
||
|
|
>
|
||
|
|
<MoreHorizontalIcon className="w-4 h-4" />
|
||
|
|
<span className="sr-only">Abrir menú</span>
|
||
|
|
</Button>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
|
||
|
|
<DropdownMenuContent align="end">
|
||
|
|
<DropdownMenuLabel>Acciones</DropdownMenuLabel>
|
||
|
|
{actions &&
|
||
|
|
actions(props).map((action, index) =>
|
||
|
|
action.label === "-" ? (
|
||
|
|
<DropdownMenuSeparator key={index} />
|
||
|
|
) : (
|
||
|
|
<DropdownMenuItem
|
||
|
|
key={index}
|
||
|
|
onClick={(event) =>
|
||
|
|
action.onClick ? action.onClick(props, event) : null
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{action.label}
|
||
|
|
<DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
);
|
||
|
|
}
|