Skip to content

Commit

Permalink
[data grid] Add default reset value in row edit mode (#14050)
Browse files Browse the repository at this point in the history 
Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
  • Loading branch information
@michelengelen @MBilalShafi
michelengelen and MBilalShafi authored Sep 17, 2024
1 parent 6f6a7fe commit d2a3c6c
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 106 deletions.
20 changes: 2 additions & 18 deletions packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
GridCellEditStartReasons,
GridCellEditStopReasons,
} from '../../../models/params/gridEditCellParams';
import { getDefaultCellValue } from './utils';

export const useGridCellEditing = (
apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
Expand Down Expand Up @@ -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;
}
Expand Down
7 changes: 6 additions & 1 deletion packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<GridPrivateApiCommunity>,
Expand Down Expand Up @@ -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] = {
Expand Down
17 changes: 17 additions & 0 deletions packages/x-data-grid/src/hooks/features/editing/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -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 '';
}
};
184 changes: 97 additions & 87 deletions packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -849,6 +849,7 @@ describe('<DataGrid /> - Keyboard', () => {
function setupTest(
rows: Record<string, string | number | Date | boolean>[],
columns: GridColDef[],
editMode: DataGridProps['editMode'],
) {
const valueSetterMock = spy<GridValueSetter<(typeof columns)[number]>>(
(value, row, column) => {
Expand All @@ -862,23 +863,26 @@ describe('<DataGrid /> - Keyboard', () => {
column.valueSetter = valueSetterMock;
});

render(<DataGrid rows={rows} columns={columns} autoHeight />);
render(<DataGrid rows={rows} columns={columns} editMode={editMode} autoHeight />);

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();
Expand All @@ -890,85 +894,91 @@ describe('<DataGrid /> - 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<TestResetValueParams, 'editMode' | 'keyType'>) => {
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' });
});
});

0 comments on commit d2a3c6c

Please sign in to comment.