[ADF-4498] Disable Sticky header on Datatable if header is not visible (#4701)

* [ADF-4498] Disable Sticky header on Datatable if header is not visible

* [ADF-4498] Improve flag check
This commit is contained in:
davidcanonieto
2019-05-13 07:02:36 +01:00
committed by Eugenio Romano
parent 898e3b5a80
commit fc9f04c6c6
3 changed files with 72 additions and 1 deletions

View File

@@ -3,7 +3,7 @@
*ngIf="data" class="adf-full-width"
[class.adf-datatable-card]="display === 'gallery'"
[class.adf-datatable-list]="display === 'list'"
[class.adf-sticky-header]="stickyHeader"
[class.adf-sticky-header]="isStickyHeaderEnabled()"
[class.adf-datatable--empty]="!isHeaderVisible()">
<div *ngIf="showHeader && isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
<div class="adf-datatable-row" *ngIf="display === 'list'" role="row">

View File

@@ -978,6 +978,73 @@ describe('DataTable', () => {
expect(emitted).toBe(2);
});
it('should enable sticky header if the stickyHeader is set to true and header is visible', () => {
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '2' },
{ name: '3' },
{ name: '4' }
],
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
);
dataTable.stickyHeader = true;
dataTable.loading = false;
dataTable.noPermission = false;
fixture.detectChanges();
expect(element.querySelector('.adf-sticky-header')).not.toBeNull();
});
it('should disable sticky header if component is loading', () => {
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '2' },
{ name: '3' },
{ name: '4' }
],
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
);
dataTable.stickyHeader = true;
dataTable.loading = true;
dataTable.noPermission = false;
fixture.detectChanges();
expect(element.querySelector('.adf-sticky-header')).toBeNull();
});
it('should disable sticky header if user has no permissions', () => {
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '2' },
{ name: '3' },
{ name: '4' }
],
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
);
dataTable.stickyHeader = true;
dataTable.loading = false;
dataTable.noPermission = true;
fixture.detectChanges();
expect(element.querySelector('.adf-sticky-header')).toBeNull();
});
it('should disable sticky header if user has no content', () => {
dataTable.data = new ObjectDataTableAdapter(
[],
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
);
dataTable.stickyHeader = true;
dataTable.loading = false;
dataTable.noPermission = false;
fixture.detectChanges();
expect(element.querySelector('.adf-sticky-header')).toBeNull();
});
});
describe('Accesibility', () => {

View File

@@ -645,6 +645,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
return !this.loading && !this.isEmpty() && !this.noPermission;
}
isStickyHeaderEnabled() {
return this.stickyHeader && this.isHeaderVisible();
}
private emitRowSelectionEvent(name: string, row: DataRow) {
const domEvent = new CustomEvent(name, {
detail: {