feat(data-table): Set progress indicator styles based on table body h…

…eight

PiperOrigin-RevId: 306655910

packages/mdc-data-table/_mixins.scss

@@ -414,13 +414,6 @@
       height: $height;
     }
   }
-
-  .mdc-data-table__progress-indicator {
-    @include feature-targeting-mixins.targets($feat-structure) {
-      height: calc(100% - #{$height});
-      top: $height;
-    }
-  }
 }
 
 @mixin cell-height($height, $query: feature-targeting-functions.all()) {

packages/mdc-data-table/adapter.ts

@@ -22,7 +22,7 @@
  */
 
 
-import {MDCDataTableRowSelectionChangedEventDetail, SortActionEventDetail} from './types';
+import {MDCDataTableRowSelectionChangedEventDetail, ProgressIndicatorStyles, SortActionEventDetail} from './types';
 
 /**
  * Defines the shape of the adapter expected by the foundation.
@@ -208,4 +208,19 @@ export interface MDCDataTableAdapter {
    * Notifies when column is sorted.
    */
   notifySortAction(data: SortActionEventDetail): void;
+
+  /**
+   * @return Returns computed styles height of table's body element.
+   */
+  getTableBodyHeight(): string;
+
+  /**
+   * @return Returns computed styles height of table's header element.
+   */
+  getTableHeaderHeight(): string;
+
+  /**
+   * Sets progress indicator CSS styles to position it on top of table body.
+   */
+  setProgressIndicatorStyles(styles: ProgressIndicatorStyles): void;
 }

packages/mdc-data-table/foundation.ts

@@ -31,7 +31,6 @@ export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
   static get defaultAdapter(): MDCDataTableAdapter {
     return {
       addClass: () => undefined,
-      removeClass: () => undefined,
       addClassAtRowIndex: () => undefined,
       getAttributeByHeaderCellIndex: () => '',
       getHeaderCellCount: () => 0,
@@ -41,6 +40,8 @@ export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
       getRowIdAtIndex: () => '',
       getRowIndexByChildElement: () => 0,
       getSelectedRowCount: () => 0,
+      getTableBodyHeight: () => '',
+      getTableHeaderHeight: () => '',
       isCheckboxAtRowIndexChecked: () => false,
       isHeaderRowCheckboxChecked: () => false,
       isRowsSelectable: () => false,
@@ -50,13 +51,15 @@ export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
       notifyUnselectedAll: () => undefined,
       registerHeaderRowCheckbox: () => undefined,
       registerRowCheckboxes: () => undefined,
+      removeClass: () => undefined,
       removeClassAtRowIndex: () => undefined,
       removeClassNameByHeaderCellIndex: () => undefined,
       setAttributeAtRowIndex: () => undefined,
       setAttributeByHeaderCellIndex: () => undefined,
       setClassNameByHeaderCellIndex: () => undefined,
       setHeaderRowCheckboxChecked: () => undefined,
       setHeaderRowCheckboxIndeterminate: () => undefined,
+      setProgressIndicatorStyles: () => undefined,
       setRowCheckboxCheckedAtIndex: () => undefined,
     };
   }
@@ -125,6 +128,18 @@ export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
     this.setHeaderRowCheckboxState_();
   }
 
+  /**
+   * @return Returns array of all row ids.
+   */
+  getRowIds(): Array<string|null> {
+    const rowIds = [];
+    for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) {
+      rowIds.push(this.adapter_.getRowIdAtIndex(rowIndex));
+    }
+
+    return rowIds;
+  }
+
   /**
    * @return Returns array of selected row ids.
    */
@@ -234,9 +249,17 @@ export class MDCDataTableFoundation extends MDCFoundation<MDCDataTableAdapter> {
   }
 
   /**
-   * Shows progress indicator when data table is in loading state.
+   * Shows progress indicator blocking only the table body content when in
+   * loading state.
    */
   showProgress() {
+    const height = this.adapter_.getTableBodyHeight();
+    const top = this.adapter_.getTableHeaderHeight();
+
+    this.adapter_.setProgressIndicatorStyles({
+      height,
+      top,
+    });
     this.adapter_.addClass(cssClasses.IN_PROGRESS);
   }
 

packages/mdc-data-table/test/foundation.test.ts

@@ -30,7 +30,6 @@ describe('MDCDataTableFoundation', () => {
   it('default adapter returns a complete adapter implementation', () => {
     verifyDefaultAdapter(MDCDataTableFoundation, [
       'addClass',
-      'removeClass',
       'addClassAtRowIndex',
       'getAttributeByHeaderCellIndex',
       'getHeaderCellCount',
@@ -40,6 +39,8 @@ describe('MDCDataTableFoundation', () => {
       'getRowIdAtIndex',
       'getRowIndexByChildElement',
       'getSelectedRowCount',
+      'getTableBodyHeight',
+      'getTableHeaderHeight',
       'isCheckboxAtRowIndexChecked',
       'isHeaderRowCheckboxChecked',
       'isRowsSelectable',
@@ -49,13 +50,15 @@ describe('MDCDataTableFoundation', () => {
       'notifyUnselectedAll',
       'registerHeaderRowCheckbox',
       'registerRowCheckboxes',
+      'removeClass',
       'removeClassAtRowIndex',
       'removeClassNameByHeaderCellIndex',
       'setAttributeAtRowIndex',
       'setAttributeByHeaderCellIndex',
       'setClassNameByHeaderCellIndex',
       'setHeaderRowCheckboxChecked',
       'setHeaderRowCheckboxIndeterminate',
+      'setProgressIndicatorStyles',
       'setRowCheckboxCheckedAtIndex',
     ]);
   });
@@ -138,12 +141,25 @@ describe('MDCDataTableFoundation', () => {
        expect(mockAdapter.setHeaderRowCheckboxChecked).toHaveBeenCalledTimes(1);
      });
 
+  it('#getHeaderCells should return array of header cell elements', () => {
+    const {foundation, mockAdapter} = setupTest();
+    foundation.getHeaderCells();
+    expect(mockAdapter.getHeaderCellElements).toHaveBeenCalledTimes(1);
+  });
+
   it('#getRows should return array of row elements', () => {
     const {foundation, mockAdapter} = setupTest();
     foundation.getRows();
     expect(mockAdapter.getRowElements).toHaveBeenCalledTimes(1);
   });
 
+  it('#getRowIds should return array of row ids', () => {
+    const {foundation, mockAdapter} = setupTest();
+    mockAdapter.getRowCount.and.returnValue(5);
+    foundation.getRowIds();
+    expect(mockAdapter.getRowIdAtIndex).toHaveBeenCalledTimes(5);
+  });
+
   it('#setSelectedRowIds Sets the row checkbox checked by id and sets selected class name to row',
      () => {
        const {foundation, mockAdapter} = setupTest();
@@ -435,9 +451,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');
 
        foundation.showProgress();
 
+       expect(mockAdapter.setProgressIndicatorStyles)
+           .toHaveBeenCalledWith({height: '100px', top: '20px'});
        expect(mockAdapter.addClass)
            .toHaveBeenCalledWith(cssClasses.IN_PROGRESS);
      });

packages/mdc-data-table/types.ts

@@ -50,3 +50,12 @@ export interface SortActionEventDetail {
   headerCell: HTMLElement;
   sortValue: SortValue;
 }
+
+/**
+ * Styles used to dynamically set dimensions of progress indicator based on
+ * table header & body.
+ */
+export interface ProgressIndicatorStyles {
+  height: string;
+  top: string;
+}