101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import {
|
|
DataTablaRowActionFunction,
|
|
DataTableRowActions,
|
|
} from "@/components";
|
|
import { Checkbox } from "@/ui";
|
|
import { ColumnDef, Row } from "@tanstack/react-table";
|
|
|
|
import { useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { QuoteItemsSortableDragHandleCell } from "../components/QuoteItemsSortableDragHandleCell";
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
export function useDetailColumns<TData = unknown, TValue = unknown>(
|
|
columns: ColumnDef<TData>[],
|
|
options: {
|
|
enableDragHandleColumn?: boolean;
|
|
enableSelectionColumn?: boolean;
|
|
enableActionsColumn?: boolean;
|
|
rowActionFn?: DataTablaRowActionFunction<TData>;
|
|
} = {}
|
|
): ColumnDef<TData, TValue>[] {
|
|
const { t } = useTranslation();
|
|
const {
|
|
enableDragHandleColumn = false,
|
|
enableSelectionColumn = false,
|
|
enableActionsColumn = false,
|
|
rowActionFn = undefined,
|
|
} = options;
|
|
|
|
// const lastSelectedId = "";
|
|
|
|
return useMemo(() => {
|
|
const result = [...columns];
|
|
if (enableDragHandleColumn) {
|
|
result.unshift({
|
|
id: "row_drag_handle",
|
|
/*header: () => (
|
|
<UnfoldVertical aria-label='Mover fila' className='items-center justify-center w-4 h-4' />
|
|
),*/
|
|
header: () => null,
|
|
cell: () => <QuoteItemsSortableDragHandleCell />,
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
size: 40,
|
|
});
|
|
}
|
|
|
|
if (enableSelectionColumn) {
|
|
result.unshift({
|
|
id: "select",
|
|
header: ({ table }) => (
|
|
<Checkbox
|
|
id='select-all'
|
|
checked={
|
|
table.getIsAllPageRowsSelected() ||
|
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
|
}
|
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
aria-label={t("common.select_all")}
|
|
className='translate-y-[0px]'
|
|
/>
|
|
),
|
|
|
|
cell: ({ row }: { row: Row<TData> }) => (
|
|
<Checkbox
|
|
id={`select-row-${row.id}`}
|
|
checked={row.getIsSelected()}
|
|
disabled={!row.getCanSelect()}
|
|
onCheckedChange={(value) => row.toggleSelected(Boolean(value))}
|
|
aria-label={t("common.select_row")}
|
|
className='mt-2'
|
|
/>
|
|
),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
size: 40,
|
|
});
|
|
}
|
|
|
|
if (enableActionsColumn) {
|
|
result.push({
|
|
id: "row_actions",
|
|
/*header: () => (
|
|
<MoreHorizontalIcon
|
|
aria-label='Acciones'
|
|
className='items-center justify-center w-4 h-4'
|
|
/>
|
|
),*/
|
|
cell: (props) => {
|
|
return <DataTableRowActions rowContext={props} actions={rowActionFn} />;
|
|
},
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
size: 48,
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}, [columns, enableActionsColumn, enableDragHandleColumn, enableSelectionColumn, rowActionFn, t]);
|
|
}
|