From 638f5769309341d7e5fcbb339049acd373beeb40 Mon Sep 17 00:00:00 2001 From: Rajat Date: Tue, 8 Oct 2024 02:55:11 +0530 Subject: [PATCH] [DataGrid] Pass `rowId` param to `processRowUpdate` (#14821) Co-authored-by: Andrew Cherniavskyi --- docs/data/data-grid/editing/editing.md | 3 ++- docs/pages/x/api/data-grid/data-grid-premium.json | 4 ++-- docs/pages/x/api/data-grid/data-grid-pro.json | 4 ++-- docs/pages/x/api/data-grid/data-grid.json | 4 ++-- .../data-grid/data-grid-premium/data-grid-premium.json | 1 + .../api-docs/data-grid/data-grid-pro/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid/data-grid.json | 1 + .../src/DataGridPremium/DataGridPremium.tsx | 1 + .../src/hooks/features/clipboard/useGridClipboardImport.ts | 2 +- .../src/tests/clipboard.DataGridPremium.test.tsx | 4 ++++ packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx | 1 + packages/x-data-grid/src/DataGrid/DataGrid.tsx | 1 + .../src/hooks/features/editing/useGridCellEditing.ts | 2 +- .../src/hooks/features/editing/useGridRowEditing.ts | 2 +- packages/x-data-grid/src/models/props/DataGridProps.ts | 6 ++++-- 15 files changed, 25 insertions(+), 12 deletions(-) diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md index 74e94a5790d8..9c729f4965b2 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -155,10 +155,11 @@ The editable cells have a green background for better visibility. When the user performs an action to [stop editing](#stop-editing), the `processRowUpdate` callback is triggered. Use it to send the new values to the server and save them into a database or other storage method. -The callback is called with two arguments: +The callback is called with three arguments: 1. The updated row with the new values returned by the [`valueSetter`](#value-parser-and-value-setter). 2. The original values of the row before editing. +3. An object with additional properties such as `rowId`. Please note that the `processRowUpdate` must return the row object to update the Data Grid internal state. The value returned is used later as an argument on a call to `apiRef.current.updateRows`. diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 832c3d4eec29..5ec4bde002d7 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -566,8 +566,8 @@ "processRowUpdate": { "type": { "name": "func" }, "signature": { - "type": "function(newRow: R, oldRow: R) => Promise | R", - "describedArgs": ["newRow", "oldRow"], + "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise | R", + "describedArgs": ["newRow", "oldRow", "params"], "returned": "Promise | R" } }, diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index ee04a078942e..3495fff530f2 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -506,8 +506,8 @@ "processRowUpdate": { "type": { "name": "func" }, "signature": { - "type": "function(newRow: R, oldRow: R) => Promise | R", - "describedArgs": ["newRow", "oldRow"], + "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise | R", + "describedArgs": ["newRow", "oldRow", "params"], "returned": "Promise | R" } }, diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 69eefb68767b..a00ba2cb6ebd 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -422,8 +422,8 @@ "processRowUpdate": { "type": { "name": "func" }, "signature": { - "type": "function(newRow: R, oldRow: R) => Promise | R", - "describedArgs": ["newRow", "oldRow"], + "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise | R", + "describedArgs": ["newRow", "oldRow", "params"], "returned": "Promise | R" } }, diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index a5f876df50d1..66fb60f7bef3 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -589,6 +589,7 @@ "typeDescriptions": { "newRow": "Row object with the new values.", "oldRow": "Row object with the old values.", + "params": "Additional parameters.", "Promise | R": "The final values to update the row." } }, diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 3e24702b10cd..978a1ab42b33 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -535,6 +535,7 @@ "typeDescriptions": { "newRow": "Row object with the new values.", "oldRow": "Row object with the old values.", + "params": "Additional parameters.", "Promise | R": "The final values to update the row." } }, diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 6acf12ef9509..9c28109e2519 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -437,6 +437,7 @@ "typeDescriptions": { "newRow": "Row object with the new values.", "oldRow": "Row object with the old values.", + "params": "Additional parameters.", "Promise | R": "The final values to update the row." } }, diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 4df3406d73a3..2299884dbfa8 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -917,6 +917,7 @@ DataGridPremiumRaw.propTypes = { * @template R * @param {R} newRow Row object with the new values. * @param {R} oldRow Row object with the old values. + * @param {{ rowId: GridRowId }} params Additional parameters. * @returns {Promise | R} The final values to update the row. */ processRowUpdate: PropTypes.func, diff --git a/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts index 90b061ae5396..8b20678940d7 100644 --- a/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts +++ b/packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts @@ -180,7 +180,7 @@ class CellValueUpdater { try { const oldRow = apiRef.current.getRow(rowId); - const finalRowUpdate = await processRowUpdate(newRow, oldRow); + const finalRowUpdate = await processRowUpdate(newRow, oldRow, { rowId }); this.updateRow(finalRowUpdate); } catch (error) { handleError(error); diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 6653971f3ae4..b0c31797af37 100644 --- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -615,6 +615,7 @@ describe(' - Clipboard', () => { expect(processRowUpdateSpy.args[0]).to.deep.equal([ { id: 1, firstName: 'John', lastName: 'Doe' }, { id: 1, firstName: 'Cersei', lastName: 'Lannister' }, + { rowId: '1' }, ]); }); @@ -725,14 +726,17 @@ describe(' - Clipboard', () => { [ { id: 0, currencyPair: '12', price1M: '12' }, // new row { id: 0, currencyPair: 'USDGBP', price1M: 1 }, // old row + { rowId: '0' }, // row id ], [ { id: 1, currencyPair: '12', price1M: '12' }, // new row { id: 1, currencyPair: 'USDEUR', price1M: 11 }, // old row + { rowId: '1' }, // row id ], [ { id: 2, currencyPair: '12', price1M: '12' }, // new row { id: 2, currencyPair: 'GBPEUR', price1M: 21 }, // old row + { rowId: '2' }, // row id ], ]); }); diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index cc4801eda0c9..766e52ceea87 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -833,6 +833,7 @@ DataGridProRaw.propTypes = { * @template R * @param {R} newRow Row object with the new values. * @param {R} oldRow Row object with the old values. + * @param {{ rowId: GridRowId }} params Additional parameters. * @returns {Promise | R} The final values to update the row. */ processRowUpdate: PropTypes.func, diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index 48052121dd1a..e2bb8529b9dc 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -699,6 +699,7 @@ DataGridRaw.propTypes = { * @template R * @param {R} newRow Row object with the new values. * @param {R} oldRow Row object with the old values. + * @param {{ rowId: GridRowId }} params Additional parameters. * @returns {Promise | R} The final values to update the row. */ processRowUpdate: PropTypes.func, diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts index 2fe01488b6d7..01ff64fa4383 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts @@ -423,7 +423,7 @@ export const useGridCellEditing = ( try { const row = apiRef.current.getRow(id)!; - Promise.resolve(processRowUpdate(rowUpdate, row)) + Promise.resolve(processRowUpdate(rowUpdate, row, { rowId: id })) .then((finalRowUpdate) => { apiRef.current.updateRows([finalRowUpdate]); finishCellEditMode(); diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts index 1add4f0a64ad..7649958efa5d 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts @@ -530,7 +530,7 @@ export const useGridRowEditing = ( }; try { - Promise.resolve(processRowUpdate(rowUpdate, row)) + Promise.resolve(processRowUpdate(rowUpdate, row, { rowId: id })) .then((finalRowUpdate) => { apiRef.current.updateRows([finalRowUpdate]); finishRowEditMode(); diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 8d4495333596..4f7cde8b3b5f 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -8,7 +8,7 @@ import { GridFeatureMode } from '../gridFeatureMode'; import { Logger } from '../logger'; import { GridSortDirection, GridSortModel } from '../gridSortModel'; import { GridSlotsComponent } from '../gridSlotsComponent'; -import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows'; +import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows'; import { GridEventListener } from '../events'; import { GridCallbackDetails, GridLocaleText } from '../api'; import { GridApiCommunity } from '../api/gridApiCommunity'; @@ -782,14 +782,16 @@ export interface DataGridPropsWithoutDefaultValue; + // eslint-disable-next-line jsdoc/require-param /** * Callback called before updating a row with new values in the row and cell editing. * @template R * @param {R} newRow Row object with the new values. * @param {R} oldRow Row object with the old values. + * @param {{ rowId: GridRowId }} params Additional parameters. * @returns {Promise | R} The final values to update the row. */ - processRowUpdate?: (newRow: R, oldRow: R) => Promise | R; + processRowUpdate?: (newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise | R; /** * Callback called when `processRowUpdate` throws an error or rejects. * @param {any} error The error thrown.