From 10bbdc0d5d6ca98198159ed2e65284a97a964c9f Mon Sep 17 00:00:00 2001 From: Simon Seyock Date: Wed, 15 Jan 2025 14:04:35 +0100 Subject: [PATCH] feat: update ag-grid and use theming via js api BREAKING CHANGE: The theme property of the AgFeatureGrid has changed to an AG-Grid Theme object. Any CSS imports from AG-Grid have to be removed. --- package-lock.json | 73 +++++++++--------------- package.json | 4 +- src/Grid/AgFeatureGrid/AgFeatureGrid.tsx | 62 +++++++------------- 3 files changed, 49 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index c856e4ce0..80198b0fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,6 @@ "version": "26.2.1", "license": "BSD-2-Clause", "dependencies": { - "@ag-grid-community/client-side-row-model": "^32.3.2", - "@ag-grid-community/react": "^32.3.2", - "@ag-grid-community/styles": "^32.3.2", "@dnd-kit/core": "^6.1.0", "@dnd-kit/modifiers": "^8.0.0", "@dnd-kit/sortable": "^9.0.0", @@ -23,6 +20,7 @@ "@terrestris/base-util": "^3.0.0", "@terrestris/react-util": "^10.0.1", "@types/lodash": "^4.17.4", + "ag-grid-react": "^33.0.4", "jspdf": "^2.5.1", "lodash": "^4.17.21", "moment": "^2.30.1", @@ -116,45 +114,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@ag-grid-community/client-side-row-model": { - "version": "32.3.2", - "resolved": "https://registry.npmjs.org/@ag-grid-community/client-side-row-model/-/client-side-row-model-32.3.2.tgz", - "integrity": "sha512-ulDslHzoZ3nkBcSEiEXYoULLzhZ6lVnTTL/J7xeFV8esBaDkP4+heesG+0oAG2qKKWSRorsJyTTCJMrNodxerQ==", - "license": "MIT", - "dependencies": { - "@ag-grid-community/core": "32.3.2", - "tslib": "^2.3.0" - } - }, - "node_modules/@ag-grid-community/core": { - "version": "32.3.2", - "resolved": "https://registry.npmjs.org/@ag-grid-community/core/-/core-32.3.2.tgz", - "integrity": "sha512-m9+x9y1hFoXGklaXxN474pxYc7B/M/hH6pcBtBl+mQpCC4TwUAy516rDsFRH6WqpYiakfBdx1A3mhQbavNEDAQ==", - "license": "MIT", - "dependencies": { - "ag-charts-types": "10.3.1", - "tslib": "^2.3.0" - } - }, - "node_modules/@ag-grid-community/react": { - "version": "32.3.2", - "resolved": "https://registry.npmjs.org/@ag-grid-community/react/-/react-32.3.2.tgz", - "integrity": "sha512-ItPrOOfXgPEtzEH0BVuB9LigH5AAejsdDgASfe17Js4zkvRxvAwekg8evIpk1EEnmwfr0CWQ6wZjOPnzd4nDcg==", - "license": "MIT", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@ag-grid-community/core": "32.3.2", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, - "node_modules/@ag-grid-community/styles": { - "version": "32.3.3", - "resolved": "https://registry.npmjs.org/@ag-grid-community/styles/-/styles-32.3.3.tgz", - "integrity": "sha512-QAJc1CPbmFsAAq5M/8r0IOm8HL4Fb3eVK6tZXKzV9zibIereBjUwvvJRaSJa8iwtTlgxCtaULAQyE2gJcctphA==" - }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "dev": true, @@ -11277,11 +11236,31 @@ "node": ">= 10.0.0" } }, - "node_modules/ag-charts-types": { - "version": "10.3.1", - "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.1.tgz", - "integrity": "sha512-oZvu9vJLk6lmzaYi0TmVVmHFZJpVNFziU0bnllx4wR3muXCmnxz5LouKIZ8CYnNiC7VO5HmHNlFu+0DmEO5zxg==", - "license": "MIT" + "node_modules/ag-grid-community": { + "version": "33.0.4", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.0.4.tgz", + "integrity": "sha512-iBD8g8bNIl95w9CzCQpDid+eTdmOoT39204sPUOhE9eE50vfoDHIaF5U4fRYQHbLsT4bwbXfQYdsqBAOLJL24w==", + "dependencies": { + "ag-charts-types": "11.0.4" + } + }, + "node_modules/ag-grid-community/node_modules/ag-charts-types": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.0.4.tgz", + "integrity": "sha512-K/Mi7FXvSCoABLSrqQ70k1QrIL5R6RNCt2NAppOxMEir+DVFPqKZtghruobc2MGVUUKkT9MCn6Dun+fL6yZjfA==" + }, + "node_modules/ag-grid-react": { + "version": "33.0.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-33.0.4.tgz", + "integrity": "sha512-0Y54BmY03athtqfpO5kTR/gjyP6Qw4LP+EQD2duBZ3yj4SWWlwE1Ob7Lc7OuZRHxl2dxLQy2edagJHrqnmopKw==", + "dependencies": { + "ag-grid-community": "33.0.4", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } }, "node_modules/agent-base": { "version": "6.0.2", diff --git a/package.json b/package.json index 51b629a68..78e09b859 100644 --- a/package.json +++ b/package.json @@ -65,9 +65,6 @@ "typecheck": "tsc --noEmit --project tsconfig.json" }, "dependencies": { - "@ag-grid-community/client-side-row-model": "^32.3.2", - "@ag-grid-community/react": "^32.3.2", - "@ag-grid-community/styles": "^32.3.2", "@dnd-kit/core": "^6.1.0", "@dnd-kit/modifiers": "^8.0.0", "@dnd-kit/sortable": "^9.0.0", @@ -79,6 +76,7 @@ "@terrestris/base-util": "^3.0.0", "@terrestris/react-util": "^10.0.1", "@types/lodash": "^4.17.4", + "ag-grid-react": "^33.0.4", "jspdf": "^2.5.1", "lodash": "^4.17.21", "moment": "^2.30.1", diff --git a/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx b/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx index 3af116312..9262bcf25 100644 --- a/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx +++ b/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx @@ -1,14 +1,9 @@ -/* eslint-disable simple-import-sort/imports */ -import '@ag-grid-community/styles/ag-grid.css'; -import '@ag-grid-community/styles/ag-theme-balham.css'; -/* eslint-enable simple-import-sort/imports */ - import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap'; import useOlLayer from '@terrestris/react-util/dist/Hooks/useOlLayer/useOlLayer'; -import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'; import { + AllCommunityModule, CellMouseOutEvent, CellMouseOverEvent, ColDef, @@ -21,15 +16,16 @@ import { RowClickedEvent, RowNode, RowStyle, - SelectionChangedEvent -} from '@ag-grid-community/core'; + SelectionChangedEvent, + themeBalham, + Theme +} from 'ag-grid-community'; import { AgGridReact, AgGridReactProps -} from '@ag-grid-community/react'; +} from 'ag-grid-react'; import _differenceWith from 'lodash/differenceWith'; -import _has from 'lodash/has'; import _isFunction from 'lodash/isFunction'; import _isNil from 'lodash/isNil'; import _isNumber from 'lodash/isNumber'; @@ -65,11 +61,11 @@ interface OwnProps { */ height?: number | string; /** - * The theme to use for the grid. See - * https://www.ag-grid.com/javascript-grid-styling/ for available options. - * Note: CSS must be loaded to use the theme! + * The theme to use for the grid. See https://www.ag-grid.com/angular-data-grid/theming/ for available options + * and customization possibilities. Default is the balham theme. + * NOTE: AG-Grid CSS should *not* be imported. */ - theme?: string; + theme?: Theme; /** * Custom column definitions to apply to the given column (mapping via key). */ @@ -117,7 +113,7 @@ const defaultClassName = `${CSS_PREFIX}ag-feature-grid`; export type AgFeatureGridProps = OwnProps & RgCommonGridProps & Omit; ModuleRegistry.registerModules([ - ClientSideRowModelModule + AllCommunityModule ]); /** @@ -143,7 +139,7 @@ export function AgFeatureGrid({ rowStyleFn, selectStyle = defaultSelectStyle, selectable = false, - theme = 'ag-theme-balham', + theme = themeBalham, width, zoomToExtent = false, ...agGridPassThroughProps @@ -190,8 +186,7 @@ export function AgFeatureGrid({ return []; } - const sr = gridApi.getSelectedRows(); - return sr.map(row => row.key); + return gridApi.getSelectedRows()?.map(row => row.key) ?? []; }, [gridApi]); /** @@ -585,28 +580,12 @@ export function AgFeatureGrid({ const colDefs = useMemo(() => { if (!_isNil(columnDefs)) { - if (!selectable) { - return columnDefs; - } - // check for checkbox column - if not present => add - const checkboxSelectionPresent = columnDefs?. - some((colDef: ColDef>) => - _has(colDef, 'checkboxSelection') && !_isNil(colDef.checkboxSelection) - ); - if (checkboxSelectionPresent) { - return columnDefs; - } - return [ - checkBoxColumnDefinition, - ...columnDefs - ]; + return columnDefs; } return getColumnDefsFromFeature(); }, [ - checkBoxColumnDefinition, columnDefs, - getColumnDefsFromFeature, - selectable + getColumnDefsFromFeature ]); const passedRowData = useMemo(() => !_isNil(rowData) ? rowData : getRowData(), [ @@ -615,8 +594,8 @@ export function AgFeatureGrid({ ]); const finalClassName = className - ? `${className} ${defaultClassName} ${theme}` - : `${defaultClassName} ${theme}`; + ? `${className} ${defaultClassName}` + : `${defaultClassName}`; return (
({ onRowClicked={onRowClickInner} onSelectionChanged={onSelectionChanged} rowData={passedRowData} - rowSelection="multiple" - suppressRowClickSelection + rowSelection={{ + mode: "multiRow", + enableClickSelection: false + }} + theme={theme} {...agGridPassThroughProps} />