mirror of
https://github.com/inventree/InvenTree.git
synced 2025-04-28 19:46:46 +00:00
Improve row click handling for tables (#7779)
- Prevent clicks around "actions" icon from navigating away from table
This commit is contained in:
parent
97bef77d56
commit
8708028bcc
@ -281,7 +281,7 @@ export function InvenTreeTable<T = any>({
|
|||||||
// If row actions are available, add a column for them
|
// If row actions are available, add a column for them
|
||||||
if (tableProps.rowActions) {
|
if (tableProps.rowActions) {
|
||||||
cols.push({
|
cols.push({
|
||||||
accessor: 'actions',
|
accessor: '--actions--',
|
||||||
title: ' ',
|
title: ' ',
|
||||||
hidden: false,
|
hidden: false,
|
||||||
switchable: false,
|
switchable: false,
|
||||||
@ -540,19 +540,29 @@ export function InvenTreeTable<T = any>({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Callback when a row is clicked
|
// Callback when a cell is clicked
|
||||||
const handleRowClick = useCallback(
|
const handleCellClick = useCallback(
|
||||||
({
|
({
|
||||||
event,
|
event,
|
||||||
record,
|
record,
|
||||||
index
|
index,
|
||||||
|
column,
|
||||||
|
columnIndex
|
||||||
}: {
|
}: {
|
||||||
event: React.MouseEvent;
|
event: React.MouseEvent;
|
||||||
record: any;
|
record: any;
|
||||||
index: number;
|
index: number;
|
||||||
|
column: any;
|
||||||
|
columnIndex: number;
|
||||||
}) => {
|
}) => {
|
||||||
if (props.onRowClick) {
|
// Ignore any click on the 'actions' column
|
||||||
// If a custom row click handler is provided, use that
|
if (column.accessor == '--actions--') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.onCellClick) {
|
||||||
|
props.onCellClick({ event, record, index, column, columnIndex });
|
||||||
|
} else if (props.onRowClick) {
|
||||||
props.onRowClick(record, index, event);
|
props.onRowClick(record, index, event);
|
||||||
} else if (tableProps.modelType) {
|
} else if (tableProps.modelType) {
|
||||||
const accessor = tableProps.modelField ?? 'pk';
|
const accessor = tableProps.modelField ?? 'pk';
|
||||||
@ -566,7 +576,7 @@ export function InvenTreeTable<T = any>({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[props.onRowClick]
|
[props.onRowClick, props.onCellClick]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -705,8 +715,7 @@ export function InvenTreeTable<T = any>({
|
|||||||
noRecordsText={missingRecordsText}
|
noRecordsText={missingRecordsText}
|
||||||
records={tableState.records}
|
records={tableState.records}
|
||||||
columns={dataColumns}
|
columns={dataColumns}
|
||||||
onRowClick={handleRowClick}
|
onCellClick={handleCellClick}
|
||||||
onCellClick={tableProps.onCellClick}
|
|
||||||
defaultColumnProps={{
|
defaultColumnProps={{
|
||||||
noWrap: true,
|
noWrap: true,
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user