From 5875aeb726fe18e835ba001531eb49b8db1b7803 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Wed, 28 Aug 2024 00:00:46 +0200 Subject: [PATCH] Add row context --- src/frontend/package.json | 3 +- src/frontend/src/contexts/ThemeContext.tsx | 31 +++++++++++---------- src/frontend/src/main.tsx | 1 + src/frontend/src/tables/InvenTreeTable.tsx | 32 ++++++++++++++++++++++ src/frontend/yarn.lock | 7 ++++- 5 files changed, 58 insertions(+), 16 deletions(-) diff --git a/src/frontend/package.json b/src/frontend/package.json index 2c4ea515cd..1c499bcf1f 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -46,12 +46,13 @@ "@uiw/react-split": "^5.9.3", "@vanilla-extract/css": "^1.15.5", "axios": "^1.7.5", - "clsx": "^2.1.0", + "clsx": "^2.1.1", "codemirror": ">=6.0.0", "dayjs": "^1.11.13", "embla-carousel-react": "^8.2.0", "fuse.js": "^7.0.0", "html5-qrcode": "^2.3.8", + "mantine-contextmenu": "^7.11.3", "mantine-datatable": "^7.11.3", "qrcode": "^1.5.4", "react": "^18.3.1", diff --git a/src/frontend/src/contexts/ThemeContext.tsx b/src/frontend/src/contexts/ThemeContext.tsx index e5562c58fa..0d734c1392 100644 --- a/src/frontend/src/contexts/ThemeContext.tsx +++ b/src/frontend/src/contexts/ThemeContext.tsx @@ -2,6 +2,7 @@ import { t } from '@lingui/macro'; import { MantineProvider, createTheme } from '@mantine/core'; import { ModalsProvider } from '@mantine/modals'; import { Notifications } from '@mantine/notifications'; +import { ContextMenuProvider } from 'mantine-contextmenu'; import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal'; import { LicenseModal } from '../components/modals/LicenseModal'; @@ -38,20 +39,22 @@ export function ThemeContext({ children }: { children: JSX.Element }) { return ( - - - - {children} - - + + + + + {children} + + + ); } diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index 3a3be69dc7..bf22faedcd 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -5,6 +5,7 @@ import '@mantine/dates/styles.css'; import '@mantine/notifications/styles.css'; import '@mantine/spotlight/styles.css'; import * as Sentry from '@sentry/react'; +import 'mantine-contextmenu/styles.layer.css'; import 'mantine-datatable/styles.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index c5164e1946..f72496b4b7 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -12,11 +12,18 @@ import { } from '@mantine/core'; import { IconBarcode, + IconEdit, + IconEye, IconFilter, IconRefresh, IconTrash } from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; +import { + ContextMenuContent, + ContextMenuItemOptions, + useContextMenu +} from 'mantine-contextmenu'; import { DataTable, DataTableCellClickHandler, @@ -112,6 +119,7 @@ export type InvenTreeTableProps = { modelType?: ModelType; rowStyle?: (record: T, index: number) => any; modelField?: string; + onRowContextMenu?: (record: T, event: any) => void; }; /** @@ -158,6 +166,7 @@ export function InvenTreeTable({ const [fieldNames, setFieldNames] = useState>({}); const navigate = useNavigate(); + const { showContextMenu } = useContextMenu(); // Construct table filters - note that we can introspect filter labels from column names const filters: TableFilter[] = useMemo(() => { @@ -587,6 +596,28 @@ export function InvenTreeTable({ [props.onRowClick, props.onCellClick] ); + // Callback when a row is right-clicked + const handleRowContextMenu = ({ + record, + event + }: { + record: any; + event: any; + }) => { + if (props.onRowContextMenu) { + return props.onRowContextMenu(record, event); + } else if (props.rowActions) { + const rowActions = props.rowActions(record); + return showContextMenu( + rowActions.map((action) => ({ + key: action.title ?? '', + icon: action.icon, + onClick: action.onClick + })) + )(event); + } + }; + // pagination refresth table if pageSize changes function updatePageSize(newData: number) { tableState.setPageSize(newData); @@ -741,6 +772,7 @@ export function InvenTreeTable({ }} recordsPerPageOptions={PAGE_SIZES} onRecordsPerPageChange={updatePageSize} + onRowContextMenu={handleRowContextMenu} /> diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index 8e1fec119d..b7a9ec3217 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -3260,7 +3260,7 @@ clsx@^1.1.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== -clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1: +clsx@^2.0.0, clsx@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== @@ -4533,6 +4533,11 @@ make-dir@^4.0.0: dependencies: semver "^7.5.3" +mantine-contextmenu@^7.11.3: + version "7.11.3" + resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.11.3.tgz#ce2243dd5069aa3acc6aae4fb8e169e90b3af5bf" + integrity sha512-E2YfK5AggpxBCAMRn6T/XDeq4fArJqNWmT78azrJSvB1ox/8v+oBznOxh4A2bgHJabp908M5puw+pnjGZ/AC5A== + mantine-datatable@^7.11.3: version "7.11.3" resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa"