diff --git a/.changeset/brave-hornets-dance.md b/.changeset/brave-hornets-dance.md new file mode 100644 index 00000000..d99a7acc --- /dev/null +++ b/.changeset/brave-hornets-dance.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react-table': patch +--- + +Fix table actions diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx index efdba565..7ff4f937 100644 --- a/packages/haring-react-table/src/Components/Table/Table.tsx +++ b/packages/haring-react-table/src/Components/Table/Table.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ITableAction, ITableConfirmAction } from '../../types'; +import type { ITableAction } from '../../types'; import type { FloatingPosition } from '@mantine/core'; import type { IPaginationProps } from '@smile/haring-react'; import type { MRT_Row, MRT_TableOptions } from 'mantine-react-table'; @@ -52,6 +52,11 @@ const tooltipProps = { withinPortal: true, }; +interface IConfirmAction> { + actionIndex: number; + item: MRT_Row | MRT_Row[]; +} + /** Additional props will be forwarded to the [Mantine React Table useMantineReactTable hook](https://www.mantine-react-table.com/docs/api/table-options) */ export function Table>( props: ITableProps, @@ -68,7 +73,7 @@ export function Table>( } = props; const { enablePagination = true, manualPagination } = mantineTableProps; const [confirmAction, setConfirmAction] = - useState | null>(null); + useState | null>(null); const [openedMenuRowIndex, setOpenedMenuRowIndex] = useState( null, ); @@ -90,35 +95,40 @@ export function Table>( function handleAction( item: MRT_Row | MRT_Row[], - action: ITableAction, + actionIndex: number, ): void { + const action = actions[actionIndex]; if (action.confirmation) { - setConfirmAction({ ...action, item }); + setConfirmAction({ actionIndex, item }); } else { action.onAction?.(item); } } function handleCancel(): void { - if ( - confirmAction?.confirmModalProps?.onCancel?.(confirmAction.item) !== false - ) { - setConfirmAction(null); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + if (action.confirmModalProps?.onCancel?.(confirmAction.item) !== false) { + setConfirmAction(null); + } } } function handleClose(): void { setConfirmAction(null); - confirmAction?.confirmModalProps?.onClose?.(); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + action.confirmModalProps?.onClose?.(); + } } function handleConfirm(): void { - if ( - confirmAction?.confirmModalProps?.onConfirm?.(confirmAction.item) !== - false - ) { - setConfirmAction(null); - confirmAction?.onAction?.(confirmAction.item); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + if (action.confirmModalProps?.onConfirm?.(confirmAction.item) !== false) { + setConfirmAction(null); + action.onAction?.(confirmAction.item); + } } } @@ -187,7 +197,7 @@ export function Table>( > handleAction(row, action)} + onClick={() => handleAction(row, index)} radius={4} type="button" variant="transparent" @@ -226,7 +236,7 @@ export function Table>( key={index} color={action.color} leftSection={getActionIcon(action, row)} - onClick={() => handleAction(row, action)} + onClick={() => handleAction(row, index)} {...getActionComponentProps(action, row)} > {getActionLabel(action, row)} @@ -252,7 +262,7 @@ export function Table>( key={index} color={action.color} leftSection={getActionIcon(action, rows)} - onClick={() => handleAction(rows, action)} + onClick={() => handleAction(rows, index)} variant="default" > {getActionLabel(action, rows)} @@ -313,6 +323,11 @@ export function Table>( paginationProps?.onPageChange?.(value - 1); } + let action: ITableAction | undefined = undefined; + if (confirmAction) { + action = actions[confirmAction.actionIndex]; + } + return ( <> @@ -335,17 +350,16 @@ export function Table>( )} )} - + {action ? ( + + ) : null} ); }