From 957807738fde5560e2a602fea95f54640425ff6e Mon Sep 17 00:00:00 2001 From: Achour berrahma Date: Wed, 22 Jan 2025 16:42:05 +0100 Subject: [PATCH] migrate aggrid into v33 (#667) Signed-off-by: achour94 --- package-lock.json | 37 ++++++++++++------- package.json | 8 ++-- src/components/customAGGrid/customAggrid.tsx | 3 +- .../ExplicitNamingFilterForm.tsx | 14 ++++--- .../agGridTable/CustomAgGridTable.tsx | 21 +++-------- 5 files changed, 41 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index f577277d..b5290ab6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,8 +61,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", @@ -117,8 +117,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -6410,24 +6410,33 @@ "node": ">=0.4.0" } }, - "node_modules/ag-grid-community": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.0.tgz", - "integrity": "sha512-Ija6X171Iq3mFZASZlriQIIdEFqA71rZIsjQD6KHy5lMmxnoseZTX2neThBav1gvr6SA6n5B2PD6eUHdZnrUfw==", + "node_modules/ag-charts-types": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.0.3.tgz", + "integrity": "sha512-q7O2viQXPyO014QVH7KjFCUmQ/NvMBx9ReZtramQ44u+/aAa0ttLi/coK+V0Hse4/MG1eB/2XhgymdooQ0Kalg==", "dev": true }, + "node_modules/ag-grid-community": { + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.0.3.tgz", + "integrity": "sha512-HZeVmVieZ5Gm9j09Itecqm+OIX8X6cU4TJToUbsXv3DxdO9SK5/s8aAJAwBHtNRXOhHrhqQYwrY2yc3OtzWwcQ==", + "dev": true, + "dependencies": { + "ag-charts-types": "11.0.3" + } + }, "node_modules/ag-grid-react": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.0.tgz", - "integrity": "sha512-ObFdPmF3EC7/xWZX8NjrZjURePyFa72MWjb1ZgUqDP7Wq09OSXXyKBN1qXmfUIT3h4o5+os6tCQEqoo7Op+3ZA==", + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-33.0.3.tgz", + "integrity": "sha512-6IcraSVqsUG/hzTeZ0D0dtddAcZKcWdN75ek/O+lCA6r22abJPe33nHBYVezkTV8k6D3JhA24mlTwduzn0GZLQ==", "dev": true, "dependencies": { - "ag-grid-community": "31.2.0", + "ag-grid-community": "33.0.3", "prop-types": "^15.8.1" }, "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + "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": { diff --git a/package.json b/package.json index fd06df19..a906134f 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -101,8 +101,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 7e2708f6..d5b17ad9 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -31,7 +31,7 @@ const onColumnResized = (params: ColumnResizedEvent) => { if (column && colDefinedMinWidth && finished) { const newWidth = column?.getActualWidth(); if (newWidth < colDefinedMinWidth) { - column?.setActualWidth(colDefinedMinWidth, params.source); + params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source); } } }; @@ -66,7 +66,6 @@ export const CustomAGGrid = React.forwardRef((pr { const newColumnDefs: any[] = [ - ...ROW_DRAGGING_SELECTION_COLUMN_DEF, { headerName: intl.formatMessage({ id: FieldConstants.EQUIPMENT_ID, }), + rowDrag: true, field: FieldConstants.EQUIPMENT_ID, editable: true, singleClickEdit: true, @@ -246,7 +243,12 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi makeDefaultRowData={makeDefaultRowData} pagination paginationPageSize={100} - suppressRowClickSelection + rowSelection={{ + mode: 'multiRow', + enableClickSelection: false, + checkboxes: true, + headerCheckbox: true, + }} alwaysShowVerticalScroll stopEditingWhenCellsLoseFocus csvProps={{ diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx index 094fcd30..547a8ef3 100644 --- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx +++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx @@ -12,19 +12,10 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import { Box, useTheme } from '@mui/material'; import { useIntl } from 'react-intl'; -import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community'; +import { CellEditingStoppedEvent, ColumnState, RowSelectionOptions, SortChangedEvent } from 'ag-grid-community'; import { BottomRightButtons } from './BottomRightButtons'; import { FieldConstants } from '../../../../utils/constants/fieldConstants'; -export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [ - { - rowDrag: true, - headerCheckboxSelection: true, - checkboxSelection: true, - maxWidth: 50, - }, -]; - const style = (customProps: any) => ({ grid: (theme: any) => ({ width: 'auto', @@ -92,7 +83,7 @@ export interface CustomAgGridTableProps { defaultColDef: unknown; pagination: boolean; paginationPageSize: number; - suppressRowClickSelection: boolean; + rowSelection?: RowSelectionOptions | 'single' | 'multiple'; alwaysShowVerticalScroll: boolean; stopEditingWhenCellsLoseFocus: boolean; } @@ -106,11 +97,11 @@ export function CustomAgGridTable({ defaultColDef, pagination, paginationPageSize, - suppressRowClickSelection, + rowSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, ...props -}: CustomAgGridTableProps) { +}: Readonly) { // FIXME: right type => Theme --> not defined there ( gridStudy and gridExplore definition not the same ) const theme: any = useTheme(); const [gridApi, setGridApi] = useState(null); @@ -243,11 +234,10 @@ export function CustomAgGridTable({ onGridReady={onGridReady} getLocaleText={getLocaleText} cacheOverflowSize={10} - rowSelection="multiple" + rowSelection={rowSelection || 'multiple'} rowDragEntireRow rowDragManaged onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)} - suppressBrowserResizeObserver columnDefs={columnDefs} detailRowAutoHeight onSelectionChanged={() => { @@ -259,7 +249,6 @@ export function CustomAgGridTable({ getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]} pagination={pagination} paginationPageSize={paginationPageSize} - suppressRowClickSelection={suppressRowClickSelection} alwaysShowVerticalScroll={alwaysShowVerticalScroll} stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus} {...props}