Merge pull request #4171 from terrestris/ag-grid-update-theming

Ag grid update theming

Author: simonseyock

README.md

@@ -23,12 +23,23 @@ For a full list of available components, their properties and examples see [here
 
 The `react-geo` package includes TypeScript declarations as `*.d.ts` files. The build itself is included in ESM format (currently ES2022).
 
-### Styling
-
-`react-geo` supports dynamic theming [via CSS variables](https://4x.ant.design/docs/react/customize-theme-variable) and requires the following import inside your project.
-
-```css
-@import '~antd/dist/antd.variable.min.css';
+### Ant-Design ConfigProvider
+
+`react-geo` supports [dynamic theming](https://ant.design/docs/react/customize-theme) of the Toggle Button via the antd `ConfigProvider`.
+
+```tsx
+<ConfigProvider
+  theme={{
+    cssVar: true,
+    Component: {
+      Button: {
+        primaryActive: '#0958d9'
+      }
+    }
+  }}
+>
+  //...
+</ConfigProvider>
 ```
 
 ## Workshop

package-lock.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",

package.json

@@ -1,14 +1,8 @@
-/* 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,28 +15,25 @@ import {
   RowClickedEvent,
   RowNode,
   RowStyle,
-  SelectionChangedEvent
-} from '@ag-grid-community/core';
+  SelectionChangedEvent,
+  Theme,
+  themeBalham} 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';
 import _isString from 'lodash/isString';
-
 import { getUid } from 'ol';
 import OlFeature from 'ol/Feature';
 import OlGeometry from 'ol/geom/Geometry';
 import OlLayerBase from 'ol/layer/Base';
 import OlLayerVector from 'ol/layer/Vector';
 import OlMapBrowserEvent from 'ol/MapBrowserEvent';
 import OlSourceVector from 'ol/source/Vector';
-
 import React, { Key, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { CSS_PREFIX } from '../../constants';
@@ -65,11 +56,11 @@ interface OwnProps<T> {
    */
   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 +108,7 @@ const defaultClassName = `${CSS_PREFIX}ag-feature-grid`;
 export type AgFeatureGridProps<T> = OwnProps<T> & RgCommonGridProps<T> & Omit<AgGridReactProps, 'theme'>;
 
 ModuleRegistry.registerModules([
-  ClientSideRowModelModule
+  AllCommunityModule
 ]);
 
 /**
@@ -143,7 +134,7 @@ export function AgFeatureGrid<T>({
   rowStyleFn,
   selectStyle = defaultSelectStyle,
   selectable = false,
-  theme = 'ag-theme-balham',
+  theme = themeBalham,
   width,
   zoomToExtent = false,
   ...agGridPassThroughProps
@@ -169,17 +160,6 @@ export function AgFeatureGrid<T>({
     style: featureStyle
   }), [features, layerName], true);
 
-  const checkBoxColumnDefinition: ColDef<WithKey<T>> = useMemo(() => ({
-    checkboxSelection: true,
-    headerCheckboxSelection: true,
-    headerName: '',
-    lockPosition: true,
-    pinned: 'left',
-    suppressHeaderMenuButton: true,
-    suppressMovable: true,
-    width: 40
-  }), []);
-
   /**
    * Returns the currently selected row keys.
    *
@@ -190,8 +170,7 @@ export function AgFeatureGrid<T>({
       return [];
     }
 
-    const sr = gridApi.getSelectedRows();
-    return sr.map(row => row.key);
+    return gridApi.getSelectedRows()?.map(row => row.key) ?? [];
   }, [gridApi]);
 
   /**
@@ -326,11 +305,6 @@ export function AgFeatureGrid<T>({
     const feature = features[0];
     const props = feature.getProperties();
 
-    if (selectable) {
-      // adds select checkbox column
-      columns.push(checkBoxColumnDefinition);
-    }
-
     const colDefsFromFeature = Object.keys(props).map((key: string): ColDef<WithKey<T>> | undefined => {
       if (attributeBlacklist.includes(key)) {
         return;
@@ -363,7 +337,7 @@ export function AgFeatureGrid<T>({
       ...columns,
       ...(colDefsFromFeature.filter(c => !_isNil(c)) as ColDef<WithKey<T>>[])
     ];
-  }, [attributeBlacklist, features, selectable, checkBoxColumnDefinition]);
+  }, [attributeBlacklist, features]);
 
   /**
    * Returns the table row data from all the given features.
@@ -585,28 +559,12 @@ export function AgFeatureGrid<T>({
 
   const colDefs = useMemo(() => {
     if (!_isNil(columnDefs)) {
-      if (!selectable) {
-        return columnDefs;
-      }
-      // check for checkbox column - if not present => add
-      const checkboxSelectionPresent = columnDefs?.
-        some((colDef: ColDef<WithKey<T>>) =>
-          _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 +573,8 @@ export function AgFeatureGrid<T>({
   ]);
 
   const finalClassName = className
-    ? `${className} ${defaultClassName} ${theme}`
-    : `${defaultClassName} ${theme}`;
+    ? `${className} ${defaultClassName}`
+    : `${defaultClassName}`;
 
   return (
     <div
@@ -632,8 +590,11 @@ export function AgFeatureGrid<T>({
         onRowClicked={onRowClickInner}
         onSelectionChanged={onSelectionChanged}
         rowData={passedRowData}
-        rowSelection="multiple"
-        suppressRowClickSelection
+        rowSelection={selectable ? {
+          mode: 'multiRow',
+          enableClickSelection: false
+        } : undefined}
+        theme={theme}
         {...agGridPassThroughProps}
       />
     </div>