inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1714] added selection mechanism for enter key pressed on datatable (#3157)

Browse Source
This commit is contained in:
Vito
2018-04-09 16:07:16 +01:00
committed by Eugenio Romano
parent 89b56e9e66
commit bc979ad661
3 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -85,6 +85,7 @@
[attr.filename]="getFilename(row)"
tabindex="0"
(click)="onRowClick(row, $event)"
(keydown.enter)="onEnterKeyPressed(row, $event)"
[context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu">
<div *ngIf="!col.template" class="cell-container">

44
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -234,6 +234,50 @@ describe('DataTable', () => {
expect(rows[1].isSelected).toBeTruthy();
});
it('should select only one row with [single] selection mode pressing enter key', () => {
dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '2' }
],
[ new ObjectDataColumn({ key: 'name'}) ]
);
const rows = dataTable.data.getRows();
dataTable.ngOnChanges({});
dataTable.onEnterKeyPressed(rows[0], null);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
dataTable.onEnterKeyPressed(rows[1], null);
expect(rows[0].isSelected).toBeFalsy();
expect(rows[1].isSelected).toBeTruthy();
});
it('should select multiple rows with [multiple] selection mode pressing enter key', () => {
dataTable.selectionMode = 'multiple';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '2' }
],
[ new ObjectDataColumn({ key: 'name'}) ]
);
const rows = dataTable.data.getRows();
const event = new KeyboardEvent('enter', {
metaKey: true
});
dataTable.ngOnChanges({});
dataTable.onEnterKeyPressed(rows[0], event);
dataTable.onEnterKeyPressed(rows[1], event);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeTruthy();
});
it('should not unselect the row with [single] selection mode', () => {
dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter(

49
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -292,31 +292,40 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
}
if (row) {
if (this.data) {
if (this.isSingleSelectionMode()) {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
}
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
const newValue = modifier ? !row.isSelected : true;
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
}
}
this.handleRowSelection(row, e);
const dataRowEvent = new DataRowEvent(row, e, this);
this.clickObserver.next(dataRowEvent);
}
}
onEnterKeyPressed(row: DataRow, e: KeyboardEvent) {
if (row) {
this.handleRowSelection(row, e);
}
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (this.data) {
if (this.isSingleSelectionMode()) {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
}
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
const newValue = modifier ? !row.isSelected : true;
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
}
}
}
resetSelection(): void {
if (this.data) {
const rows = this.data.getRows();