From d2a3c6cb729b4cac2f060c1f30b341ce5a59e836 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:14:16 +0200 Subject: [PATCH] [data grid] Add default reset value in row edit mode (#14050) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Bilal Shafi --- .../features/editing/useGridCellEditing.ts | 20 +- .../features/editing/useGridRowEditing.ts | 7 +- .../src/hooks/features/editing/utils.ts | 17 ++ .../src/tests/keyboard.DataGrid.test.tsx | 184 +++++++++--------- 4 files changed, 122 insertions(+), 106 deletions(-) create mode 100644 packages/x-data-grid/src/hooks/features/editing/utils.ts 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 9a25971f2323..bb2224185e8e 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts @@ -39,6 +39,7 @@ import { GridCellEditStartReasons, GridCellEditStopReasons, } from '../../../models/params/gridEditCellParams'; +import { getDefaultCellValue } from './utils'; export const useGridCellEditing = ( apiRef: React.MutableRefObject, @@ -337,24 +338,7 @@ export const useGridCellEditing = ( let newValue = apiRef.current.getCellValue(id, field); if (deleteValue) { - const fieldType = apiRef.current.getColumn(field).type; - switch (fieldType) { - case 'boolean': - newValue = false; - break; - case 'date': - case 'dateTime': - case 'number': - newValue = undefined; - break; - case 'singleSelect': - newValue = null; - break; - case 'string': - default: - newValue = ''; - break; - } + newValue = getDefaultCellValue(apiRef.current.getColumn(field)); } else if (initialValue) { newValue = initialValue; } 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 ff755e43b9b6..3953006c4b33 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts @@ -46,6 +46,7 @@ import { GridRowEditStartReasons, } from '../../../models/params/gridRowParams'; import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef'; +import { getDefaultCellValue } from './utils'; export const useGridRowEditing = ( apiRef: React.MutableRefObject, @@ -433,7 +434,11 @@ export const useGridRowEditing = ( let newValue = apiRef.current.getCellValue(id, field); if (fieldToFocus === field && (deleteValue || initialValue)) { - newValue = deleteValue ? '' : initialValue; + if (deleteValue) { + newValue = getDefaultCellValue(apiRef.current.getColumn(field)); + } else if (initialValue) { + newValue = initialValue; + } } acc[field] = { diff --git a/packages/x-data-grid/src/hooks/features/editing/utils.ts b/packages/x-data-grid/src/hooks/features/editing/utils.ts new file mode 100644 index 000000000000..8b3df8808b13 --- /dev/null +++ b/packages/x-data-grid/src/hooks/features/editing/utils.ts @@ -0,0 +1,17 @@ +import { GridColDef } from '../../../models/colDef/gridColDef'; + +export const getDefaultCellValue = (colDef: GridColDef) => { + switch (colDef.type) { + case 'boolean': + return false; + case 'date': + case 'dateTime': + case 'number': + return undefined; + case 'singleSelect': + return null; + case 'string': + default: + return ''; + } +}; diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index c27dbaf58942..a83f17033416 100644 --- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -849,6 +849,7 @@ describe(' - Keyboard', () => { function setupTest( rows: Record[], columns: GridColDef[], + editMode: DataGridProps['editMode'], ) { const valueSetterMock = spy>( (value, row, column) => { @@ -862,23 +863,26 @@ describe(' - Keyboard', () => { column.valueSetter = valueSetterMock; }); - render(); + render(); return { valueSetterMock }; } - function testResetValue( - keyType: 'Delete' | 'Backspace', - field: string, - type: GridColType, - value: string | number | Date | boolean, - ) { + type TestResetValueParams = { + editMode: DataGridProps['editMode']; + keyType: 'Delete' | 'Backspace'; + field: string; + type: GridColType; + value: string | number | Date | boolean; + }; + + function testResetValue({ editMode, keyType, field, type, value }: TestResetValueParams) { const columns: GridColDef[] = [ { field: 'id', editable: true }, { field, editable: true, type }, ]; const rows = [{ id: 1, [field]: value }]; - const { valueSetterMock } = setupTest(rows, columns); + const { valueSetterMock } = setupTest(rows, columns, editMode); const cell = getCell(0, 1); cell.focus(); @@ -890,85 +894,91 @@ describe(' - Keyboard', () => { }; } - it(`should reset value on Backspace key press for number type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'age', 'number', 24); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for date type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'birthdate', 'date', new Date()); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for dateTime type`, () => { - const { cell, deletedValue } = testResetValue( - 'Backspace', - 'appointment', - 'dateTime', - new Date(), - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Backspace key press for boolean type`, () => { - const { cell, deletedValue } = testResetValue('Backspace', 'isVerified', 'boolean', true); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(false); - }); - - it(`should reset value on Backspace key press for singleSelect type`, () => { - const { cell, deletedValue } = testResetValue( - 'Backspace', - 'status', - 'singleSelect', - 'active', - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(null); - }); - - it(`should reset value on Delete key press for string type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'name', 'string', 'John Doe'); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(''); - }); - - it(`should reset value on Delete key press for number type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'age', 'number', 24); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for date type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'birthdate', 'date', new Date()); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for dateTime type`, () => { - const { cell, deletedValue } = testResetValue( - 'Delete', - 'appointment', - 'dateTime', - new Date(), - ); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(undefined); - }); - - it(`should reset value on Delete key press for boolean type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'isVerified', 'boolean', true); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(false); - }); + const testWithEditmodeAndKeytype = ({ + editMode, + keyType, + }: Pick) => { + describe(`editMode="${editMode}" and ${keyType} key`, () => { + const defaultParams: TestResetValueParams = { + editMode, + keyType, + field: 'name', + type: 'string', + value: 'John Doe', + }; + + it(`should reset value for string type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + keyType: 'Delete', + field: 'name', + type: 'string', + value: 'John Doe', + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(''); + }); + + it(`should reset value for number type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'age', + type: 'number', + value: 24, + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value for date type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'birthdate', + type: 'date', + value: new Date(), + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value dateTime type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'appointment', + type: 'dateTime', + value: new Date(), + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(undefined); + }); + + it(`should reset value boolean type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'isVerified', + type: 'boolean', + value: true, + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(false); + }); + + it(`should reset value singleSelect type`, () => { + const { cell, deletedValue } = testResetValue({ + ...defaultParams, + field: 'status', + type: 'singleSelect', + value: 'active', + }); + expect(cell).to.equal(''); + expect(deletedValue).to.equal(null); + }); + }); + }; - it(`should reset value on Delete key press for singleSelect type`, () => { - const { cell, deletedValue } = testResetValue('Delete', 'status', 'singleSelect', 'active'); - expect(cell).to.equal(''); - expect(deletedValue).to.equal(null); - }); + testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Delete' }); + testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Backspace' }); + testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Delete' }); + testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Backspace' }); }); });