Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Emit onSelectionModelChange when selection state changes #1966

Merged
merged 8 commits into from
Jul 7, 2021
Merged

[DataGrid] Emit onSelectionModelChange when selection state changes #1966

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6a4554a
Emit onSelectionModelChange when selection state changes
DanailH Jun 25, 2021
e5554b7
Update packages/grid/x-grid/src/tests/selection.XGrid.test.tsx
DanailH Jun 28, 2021
7a8724a
fix sky name
DanailH Jun 28, 2021
fbffd34
pull remote
DanailH Jun 28, 2021
e888a7f
extend test
DanailH Jun 28, 2021
f4fad7e
Update packages/grid/x-grid/src/tests/selection.XGrid.test.tsx
DanailH Jun 29, 2021
b36f24a
conflicts
DanailH Jul 7, 2021
1f929b0
remove unsed import
DanailH Jul 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,9 @@ export const useGridSelection = (apiRef: GridApiRef): void => {
}
});
if (hasChanged) {
apiRef.current.publishEvent(GRID_SELECTION_CHANGE, {
selectionModel: Object.values(newSelectionState),
});
return { ...state, selection: newSelectionState };
}
return state;
Expand All @@ -233,6 +236,9 @@ export const useGridSelection = (apiRef: GridApiRef): void => {
}
});
if (hasChanged) {
apiRef.current.publishEvent(GRID_SELECTION_CHANGE, {
selectionModel: Object.values(newSelectionState),
});
return { ...state, selection: newSelectionState };
}
return state;
Expand Down
59 changes: 40 additions & 19 deletions packages/grid/x-grid/src/tests/selection.XGrid.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,59 +68,59 @@ describe('<XGrid /> - Selection', () => {

describe('selectRow', () => {
it('should call onSelectionModelChange with the ids selected', () => {
const onSelectionModelChange = spy();
render(<Test onSelectionModelChange={onSelectionModelChange} />);
const handleSelectionModelChange = spy();
render(<Test onSelectionModelChange={handleSelectionModelChange} />);
apiRef!.current.selectRow(1);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1]);
apiRef!.current.selectRow(2);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2]);
// Keep old selection
apiRef!.current.selectRow(3, true, true);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2, 3]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2, 3]);
apiRef!.current.selectRow(3, false, true);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([2]);
});

it('should not call onSelectionModelChange if the row is unselectable', () => {
const onSelectionModelChange = spy();
const handleSelectionModelChange = spy();
render(
<Test
isRowSelectable={(params) => params.id > 0}
onSelectionModelChange={onSelectionModelChange}
onSelectionModelChange={handleSelectionModelChange}
/>,
);
apiRef!.current.selectRow(0);
expect(onSelectionModelChange.callCount).to.equal(0);
expect(handleSelectionModelChange.callCount).to.equal(0);
apiRef!.current.selectRow(1);
expect(onSelectionModelChange.callCount).to.equal(1);
expect(handleSelectionModelChange.callCount).to.equal(1);
});
});

describe('selectRows', () => {
it('should call onSelectionModelChange with the ids selected', () => {
const onSelectionModelChange = spy();
render(<Test onSelectionModelChange={onSelectionModelChange} />);
const handleSelectionModelChange = spy();
render(<Test onSelectionModelChange={handleSelectionModelChange} />);
apiRef!.current.selectRows([1, 2]);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2]);
apiRef!.current.selectRows([3]);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2, 3]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2, 3]);
apiRef!.current.selectRows([1, 2], false);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([3]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([3]);
// Deselect others
apiRef!.current.selectRows([4, 5], true, true);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([4, 5]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([4, 5]);
});

it('should filter out unselectable rows before calling onSelectionModelChange', () => {
const onSelectionModelChange = spy();
const handleSelectionModelChange = spy();
render(
<Test
isRowSelectable={(params) => params.id > 0}
onSelectionModelChange={onSelectionModelChange}
onSelectionModelChange={handleSelectionModelChange}
/>,
);
apiRef!.current.selectRows([0, 1, 2]);
expect(onSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2]);
expect(handleSelectionModelChange.lastCall.args[0].selectionModel).to.deep.equal([1, 2]);
});
});

Expand All @@ -138,6 +138,27 @@ describe('<XGrid /> - Selection', () => {
expect(getSelectedRows(apiRef)).to.deep.equal([0]);
});

it('should call onSelectionModelChange when selection state changes', () => {
const handleSelectionModelChange = spy();
const { setProps } = render(
<Test selectionModel={[0]} onSelectionModelChange={handleSelectionModelChange} />,
);
expect(getSelectedRows(apiRef)).to.deep.equal([0]);
expect(handleSelectionModelChange.getCall(0).args[0]).to.deep.equal({ selectionModel: [0] });
DanailH marked this conversation as resolved.
Show resolved Hide resolved
setProps({
rows: [
{
id: 1,
brand: 'Nike',
},
],
});
// TODO should only fire once
expect(handleSelectionModelChange.callCount).to.equal(2);
expect(getSelectedRows(apiRef)).to.deep.equal([]);
expect(handleSelectionModelChange.getCall(1).args[0]).to.deep.equal({ selectionModel: [] });
});

it('should select only filtered rows after filter is applied', () => {
render(<Test checkboxSelection />);
const selectAll = screen.getByRole('checkbox', {
Expand Down