inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-01 14:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2990] Datatable - row navigation (#5198)

Browse Source 
* datatable row component

* add to module

* implement datatable row component

* use FocusKeyManager for arrows navigation

* tests

* prevent screen reader to announce undefined value

* prevent from bubbling up

* fix unit test

* fix row locator

* fix locator reference

* fix row reference locators

* fix locator xpath
This commit is contained in:
Cilibiu Bogdan
2019-10-30 09:39:43 +02:00
committed by Denys Vuika
parent a150e74366
commit af6bd0892c
17 changed files with 320 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,9 +16,11 @@
*/
import {
ViewChildren, QueryList, HostListener,
AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation, OnDestroy
} from '@angular/core';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { MatCheckboxChange } from '@angular/material';
import { Subscription, Observable, Observer } from 'rxjs';
import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
@@ -27,6 +29,7 @@ import { DataRowEvent } from '../../data/data-row-event.model';
import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
import { DataTableRowComponent } from './datatable-row.component';
import { ObjectDataRow } from '../../data/object-datarow.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@@ -48,6 +51,9 @@ export enum DisplayMode {
})
export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck, OnDestroy {
@ViewChildren(DataTableRowComponent)
rowsList: QueryList<DataTableRowComponent>;
@ContentChild(DataColumnListComponent)
columnList: DataColumnListComponent;
@@ -178,6 +184,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
/** This array of fake rows fix the flex layout for the gallery view */
fakeRows = [];
private keyManager: FocusKeyManager<DataTableRowComponent>;
private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>;
@@ -189,6 +196,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
private multiClickStreamSub: Subscription;
private dataRowsChanged: Subscription;
@HostListener('keyup', ['$event'])
onKeydown(event: KeyboardEvent): void {
this.keyManager.onKeydown(event);
}
constructor(private elementRef: ElementRef,
differs: IterableDiffers) {
if (differs) {
@@ -210,6 +222,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.setTableSchema();
}
ngAfterViewInit() {
this.keyManager = new FocusKeyManager(this.rowsList).withWrap();
}
ngOnChanges(changes: SimpleChanges) {
this.initAndSubscribeClickStream();
if (this.isPropertyChanged(changes['data'])) {
@@ -390,6 +406,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
}
if (row) {
this.keyManager.setActiveItem(this.data.getRows().indexOf(row));
const dataRowEvent = new DataRowEvent(row, mouseEvent, this);
this.clickObserver.next(dataRowEvent);
}