Presupuestador_web/client/src/components/DataTable/DataTableRowActions.tsx

"use client";

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/ui";
import { CellContext, Row } from "@tanstack/react-table";
import { t } from "i18next";
import { MoreHorizontalIcon } from "lucide-react";

type DataTableRowActionContext<TData, TValue> = CellContext<TData, TValue> & {
  row: Row<TData>;
};

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> = {
  actions?: DataTablaRowActionFunction<TData, TValue>;
  row?: DataTableRowActionContext<TData, TValue>;
};

export function DataTableRowActions<TData = any, TValue = any>({
  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'>{t("common.open_menu")}</span>
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align='end'>
        <DropdownMenuLabel>{t("common.actions")} </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>
  );
}