mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1714] added selection mechanism for enter key pressed on datatable (#3157)
This commit is contained in:
@@ -85,6 +85,7 @@
|
|||||||
[attr.filename]="getFilename(row)"
|
[attr.filename]="getFilename(row)"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
(click)="onRowClick(row, $event)"
|
(click)="onRowClick(row, $event)"
|
||||||
|
(keydown.enter)="onEnterKeyPressed(row, $event)"
|
||||||
[context-menu]="getContextMenuActions(row, col)"
|
[context-menu]="getContextMenuActions(row, col)"
|
||||||
[context-menu-enabled]="contextMenu">
|
[context-menu-enabled]="contextMenu">
|
||||||
<div *ngIf="!col.template" class="cell-container">
|
<div *ngIf="!col.template" class="cell-container">
|
||||||
|
@@ -234,6 +234,50 @@ describe('DataTable', () => {
|
|||||||
expect(rows[1].isSelected).toBeTruthy();
|
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', () => {
|
it('should not unselect the row with [single] selection mode', () => {
|
||||||
dataTable.selectionMode = 'single';
|
dataTable.selectionMode = 'single';
|
||||||
dataTable.data = new ObjectDataTableAdapter(
|
dataTable.data = new ObjectDataTableAdapter(
|
||||||
|
@@ -292,6 +292,19 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (row) {
|
if (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.data) {
|
||||||
if (this.isSingleSelectionMode()) {
|
if (this.isSingleSelectionMode()) {
|
||||||
this.resetSelection();
|
this.resetSelection();
|
||||||
@@ -311,10 +324,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
|
|||||||
this.emitRowSelectionEvent(domEventName, row);
|
this.emitRowSelectionEvent(domEventName, row);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const dataRowEvent = new DataRowEvent(row, e, this);
|
|
||||||
this.clickObserver.next(dataRowEvent);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
resetSelection(): void {
|
resetSelection(): void {
|
||||||
|
Reference in New Issue
Block a user