gitscope
← marzneshin / v0.3.0-alpha11 / dashboard/src/components/data-table/actions-cell.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/data-table/actions-cell.tsx · TypeScript
Blame Raw
 1import {
 2    OpenInNewWindowIcon,
 3} from "@radix-ui/react-icons"
 4import { Row } from "@tanstack/react-table"
 5
 6import {
 7    Button,
 8    DropdownMenu,
 9    DropdownMenuContent,
10    DropdownMenuItem,
11    DropdownMenuLabel,
12    DropdownMenuSeparator,
13    DropdownMenuTrigger,
14} from "@marzneshin/components"
15import { MoreHorizontal, PencilIcon, TrashIcon } from "lucide-react"
16import { useTranslation } from "react-i18next"
17
18interface DataTableActionsCellProps<TData>
19    extends React.HTMLAttributes<HTMLDivElement> {
20    row: Row<TData>,
21    onDelete: (object: TData) => void,
22    onEdit: (object: TData) => void,
23    onOpen: (object: TData) => void,
24}
25
26export function DataTableActionsCell<TData>({
27    row, onDelete, onEdit, onOpen
28}: DataTableActionsCellProps<TData>) {
29    const { t } = useTranslation();
30
31    return (
32        <DropdownMenu>
33            <DropdownMenuTrigger asChild>
34                <Button variant="ghost" data-testid="action-menu-open" className="p-0 w-8 h-8">
35                    <span className="sr-only">Open menu</span>
36                    <MoreHorizontal className="w-4 h-4" />
37                </Button>
38            </DropdownMenuTrigger>
39            <DropdownMenuContent align="end">
40                <DropdownMenuLabel>{t('actions')}</DropdownMenuLabel>
41                <DropdownMenuItem data-testid="action-row-open" onClick={() => { onOpen(row.original) }}>
42                    <OpenInNewWindowIcon className="mr-1 w-4 h-4" /> {t('open')}
43                </DropdownMenuItem>
44                <DropdownMenuSeparator />
45                <DropdownMenuItem data-testid="action-row-edit" onClick={(e) => { e.stopPropagation(); onEdit(row.original) }}>
46                    <PencilIcon className="mr-1 w-4 h-4" />    {t('edit')}
47                </DropdownMenuItem>
48                <DropdownMenuItem data-testid="action-row-delete" onClick={(e) => { e.stopPropagation(); onDelete(row.original) }} className="text-destructive">
49                    <TrashIcon className="mr-1 w-4 h-4" />{t('delete')}
50                </DropdownMenuItem>
51            </DropdownMenuContent>
52        </DropdownMenu>
53    )
54}