From c678a9d34a3f694511f292c7a62e68749721b63c Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Mon, 29 Jun 2020 10:45:57 -0700 Subject: [PATCH] fix(data-table): Set progress indicator height to table body offset height Fixes progress indicator height to cover only table body height (excluding scroll content height). BREAKING CHANGE: New adapter method replacing `getTableBodyHeight()` => `getTableHeaderHeight()` and changed return types of this method. PiperOrigin-RevId: 318845959 --- packages/mdc-data-table/adapter.ts | 6 +++--- packages/mdc-data-table/component.ts | 14 +++++++------- packages/mdc-data-table/constants.ts | 1 + packages/mdc-data-table/foundation.ts | 15 +++++++++------ packages/mdc-data-table/test/foundation.test.ts | 8 ++++---- 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/mdc-data-table/adapter.ts b/packages/mdc-data-table/adapter.ts index 30443da2cce..619c3a7ab36 100644 --- a/packages/mdc-data-table/adapter.ts +++ b/packages/mdc-data-table/adapter.ts @@ -211,14 +211,14 @@ export interface MDCDataTableAdapter { notifySortAction(data: SortActionEventDetail): void; /** - * @return Returns computed styles height of table's body element. + * @return Returns computed styles height of table container element. */ - getTableBodyHeight(): string; + getTableContainerHeight(): number; /** * @return Returns computed styles height of table's header element. */ - getTableHeaderHeight(): string; + getTableHeaderHeight(): number; /** * Sets progress indicator CSS styles to position it on top of table body. diff --git a/packages/mdc-data-table/component.ts b/packages/mdc-data-table/component.ts index ca7ae9dd529..8b88c262f46 100644 --- a/packages/mdc-data-table/component.ts +++ b/packages/mdc-data-table/component.ts @@ -151,15 +151,15 @@ export class MDCDataTable extends MDCComponent { notifySortAction: (data) => { this.emit(events.SORTED, data, /** shouldBubble */ true); }, - getTableBodyHeight: () => { - const tableBody = - this.root.querySelector(selectors.CONTENT); + getTableContainerHeight: () => { + const tableContainer = + this.root.querySelector(`.${cssClasses.CONTAINER}`); - if (!tableBody) { - throw new Error('MDCDataTable: Table body element not found.'); + if (!tableContainer) { + throw new Error('MDCDataTable: Table container element not found.'); } - return `${tableBody.getBoundingClientRect().height}px`; + return tableContainer.getBoundingClientRect().height; }, getTableHeaderHeight: () => { const tableHeader = @@ -169,7 +169,7 @@ export class MDCDataTable extends MDCComponent { throw new Error('MDCDataTable: Table header element not found.'); } - return `${tableHeader.getBoundingClientRect().height}px`; + return tableHeader.getBoundingClientRect().height; }, setProgressIndicatorStyles: (styles) => { const progressIndicator = diff --git a/packages/mdc-data-table/constants.ts b/packages/mdc-data-table/constants.ts index 0c3a5972102..85ee7917b05 100644 --- a/packages/mdc-data-table/constants.ts +++ b/packages/mdc-data-table/constants.ts @@ -27,6 +27,7 @@ export const cssClasses = { CELL: 'mdc-data-table__cell', CELL_NUMERIC: 'mdc-data-table__cell--numeric', + CONTAINER: 'mdc-data-table__container', CONTENT: 'mdc-data-table__content', HEADER_CELL: 'mdc-data-table__header-cell', HEADER_CELL_LABEL: 'mdc-data-table__header-cell-label', diff --git a/packages/mdc-data-table/foundation.ts b/packages/mdc-data-table/foundation.ts index 9869c49e766..342f6c6c33a 100644 --- a/packages/mdc-data-table/foundation.ts +++ b/packages/mdc-data-table/foundation.ts @@ -44,8 +44,8 @@ export class MDCDataTableFoundation extends MDCFoundation { getRowIdAtIndex: () => '', getRowIndexByChildElement: () => 0, getSelectedRowCount: () => 0, - getTableBodyHeight: () => '', - getTableHeaderHeight: () => '', + getTableContainerHeight: () => 0, + getTableHeaderHeight: () => 0, isCheckboxAtRowIndexChecked: () => false, isHeaderRowCheckboxChecked: () => false, isRowsSelectable: () => false, @@ -262,12 +262,15 @@ export class MDCDataTableFoundation extends MDCFoundation { * loading state. */ showProgress() { - const height = this.adapter.getTableBodyHeight(); - const top = this.adapter.getTableHeaderHeight(); + const tableHeaderHeight = this.adapter.getTableHeaderHeight(); + // Calculate the height of table content (Not scroll content) excluding + // header row height. + const height = this.adapter.getTableContainerHeight() - tableHeaderHeight; + const top = tableHeaderHeight; this.adapter.setProgressIndicatorStyles({ - height, - top, + height: `${height}px`, + top: `${top}px`, }); this.adapter.addClass(cssClasses.IN_PROGRESS); } diff --git a/packages/mdc-data-table/test/foundation.test.ts b/packages/mdc-data-table/test/foundation.test.ts index 26c80c7c92a..353821cf6bd 100644 --- a/packages/mdc-data-table/test/foundation.test.ts +++ b/packages/mdc-data-table/test/foundation.test.ts @@ -39,7 +39,7 @@ describe('MDCDataTableFoundation', () => { 'getRowIdAtIndex', 'getRowIndexByChildElement', 'getSelectedRowCount', - 'getTableBodyHeight', + 'getTableContainerHeight', 'getTableHeaderHeight', 'isCheckboxAtRowIndexChecked', 'isHeaderRowCheckboxChecked', @@ -484,13 +484,13 @@ describe('MDCDataTableFoundation', () => { it('#showProgress Adds class name that makes the progress indicator visibile', () => { const {foundation, mockAdapter} = setupTest(); - mockAdapter.getTableHeaderHeight.and.returnValue('20px'); - mockAdapter.getTableBodyHeight.and.returnValue('100px'); + mockAdapter.getTableHeaderHeight.and.returnValue(20); + mockAdapter.getTableContainerHeight.and.returnValue(100); foundation.showProgress(); expect(mockAdapter.setProgressIndicatorStyles) - .toHaveBeenCalledWith({height: '100px', top: '20px'}); + .toHaveBeenCalledWith({height: '80px', top: '20px'}); expect(mockAdapter.addClass) .toHaveBeenCalledWith(cssClasses.IN_PROGRESS); });