[NG] fix(datagrid): Removes width calculation from datagrid render cy…

…cle (#2938) - fixes #2926 Signed-off-by: Matt Hippely <[email protected]>
vmware-archive · Dec 13, 2018 · ec1cc18 · ec1cc18
1 parent b190277
commit ec1cc18
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 86 deletions.
diff --git a/src/clr-angular/data/datagrid/_datagrid.clarity.scss b/src/clr-angular/data/datagrid/_datagrid.clarity.scss
@@ -24,7 +24,7 @@
     border-bottom-right-radius: 0;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     overflow: auto;
-    height: 100%;
+    flex: 1 1 auto;
     margin-top: 0.5rem;
   }
 
@@ -73,13 +73,11 @@
   }
 
   .datagrid-row {
-    display: block;
-    width: auto;
-
     &:hover {
       .datagrid-row-sticky,
       .datagrid-row-scrollable,
-      .datagrid-row-detail {
+      .datagrid-row-detail,
+      .datagrid-cell {
         background-color: $clr-datagrid-row-hover;
       }
     }
@@ -299,13 +297,18 @@
     }
   }
 
+  .datagrid-table-wrapper {
+    display: flex;
+  }
+
   .datagrid-table {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
     align-content: flex-start;
-    width: auto;
     min-height: 3rem; // Includes header and space for a single (non existing) row
     position: relative;
+    height: 100%;
 
     .datagrid-body {
       width: auto;
@@ -843,6 +846,10 @@
         margin: 0;
         outline-offset: $clr-datagrid-compact-outline-offset;
       }
+
+      .clr-form-control-disabled .datagrid-footer-select.clr-checkbox-wrapper input[type='checkbox']:checked + label {
+        top: 0;
+      }
     }
   }
 
@@ -954,7 +961,8 @@
     // Hide parts of the display table not used for calculation.
     .datagrid,
     .datagrid-footer,
-    .datagrid-row-master {
+    .datagrid-row-master,
+    .datagrid-row-clickable {
       display: none;
     }
 

diff --git a/src/clr-angular/data/datagrid/datagrid.html b/src/clr-angular/data/datagrid/datagrid.html
@@ -6,47 +6,49 @@
 
 <ng-content select="clr-dg-action-bar"></ng-content>
 <div class="datagrid" #datagrid>
-    <div role="grid" class="datagrid-table">
+    <div class="datagrid-table-wrapper">
+      <div role="grid" class="datagrid-table">
         <div role="rowgroup" class="datagrid-header">
-            <div role="row" class="datagrid-row">
-                <div class="datagrid-row-master datagrid-row-flex">
-                    <div class="datagrid-row-sticky">
-                        <!-- Sticky elements here -->
-                    </div>
-                    <div class="datagrid-row-scrollable">
-                        <!--header for datagrid where you can select multiple rows -->
-                        <div role="columnheader" class="datagrid-column datagrid-select datagrid-fixed-column"
-                             *ngIf="selection.selectionType === SELECTION_TYPE.Multi">
+          <div role="row" class="datagrid-row">
+            <div class="datagrid-row-master datagrid-row-flex">
+              <div class="datagrid-row-sticky">
+                <!-- Sticky elements here -->
+              </div>
+              <div class="datagrid-row-scrollable">
+                <!--header for datagrid where you can select multiple rows -->
+                <div role="columnheader" class="datagrid-column datagrid-select datagrid-fixed-column"
+                     *ngIf="selection.selectionType === SELECTION_TYPE.Multi">
                             <span class="datagrid-column-title">
                                 <input clrCheckbox type="checkbox" [(ngModel)]="allSelected"
                                        [attr.aria-label]="commonStrings.selectAll">
                             </span>
-                            <div class="datagrid-column-separator"></div>
-                        </div>
-                        <!-- header for datagrid where you can select one row only -->
-                        <div role="columnheader" class="datagrid-column datagrid-select datagrid-fixed-column"
-                             *ngIf="selection.selectionType === SELECTION_TYPE.Single">
-                            <div class="datagrid-column-separator"></div>
-                        </div>
-                        <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->
-                        <div role="columnheader" class="datagrid-column datagrid-row-actions datagrid-fixed-column"
-                             *ngIf="rowActionService.hasActionableRow">
-                            <div class="datagrid-column-separator"></div>
-                        </div>
-                        <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->
-                        <div role="columnheader" class="datagrid-column datagrid-expandable-caret datagrid-fixed-column"
-                             *ngIf="expandableRows.hasExpandableRow">
-                            <div class="datagrid-column-separator"></div>
-                        </div>
-                        <ng-container #projectedDisplayColumns></ng-container>
-                    </div>
+                  <div class="datagrid-column-separator"></div>
                 </div>
+                <!-- header for datagrid where you can select one row only -->
+                <div role="columnheader" class="datagrid-column datagrid-select datagrid-fixed-column"
+                     *ngIf="selection.selectionType === SELECTION_TYPE.Single">
+                  <div class="datagrid-column-separator"></div>
+                </div>
+                <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->
+                <div role="columnheader" class="datagrid-column datagrid-row-actions datagrid-fixed-column"
+                     *ngIf="rowActionService.hasActionableRow">
+                  <div class="datagrid-column-separator"></div>
+                </div>
+                <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->
+                <div role="columnheader" class="datagrid-column datagrid-expandable-caret datagrid-fixed-column"
+                     *ngIf="expandableRows.hasExpandableRow">
+                  <div class="datagrid-column-separator"></div>
+                </div>
+                <ng-container #projectedDisplayColumns></ng-container>
+              </div>
             </div>
+          </div>
         </div>
         <ng-container #displayedRows></ng-container>
         <!-- Custom placeholder overrides the default empty one -->
         <ng-content select="clr-dg-placeholder"></ng-content>
         <clr-dg-placeholder *ngIf="!placeholder"></clr-dg-placeholder>
+      </div>
     </div>
 </div>
 <ng-content select="clr-dg-footer"></ng-content>

diff --git a/src/clr-angular/data/datagrid/datagrid.spec.ts b/src/clr-angular/data/datagrid/datagrid.spec.ts
@@ -372,7 +372,7 @@ export default function(): void {
         });
         expect(resizeSteps).toBe(0);
         context.clarityDirective.resize();
-        expect(resizeSteps).toBe(7);
+        expect(resizeSteps).toBe(6);
       });
     });
 

diff --git a/src/clr-angular/data/datagrid/enums/render-step.enum.ts b/src/clr-angular/data/datagrid/enums/render-step.enum.ts
@@ -11,5 +11,4 @@ export enum DatagridRenderStep {
   CLEAR_WIDTHS, // Note this is listened to by both cells and columns
   COMPUTE_COLUMN_WIDTHS,
   DETECT_STRICT_WIDTHS,
-  UPDATE_ROW_WIDTH,
 }
diff --git a/src/clr-angular/data/datagrid/providers/table-size.service.spec.ts b/src/clr-angular/data/datagrid/providers/table-size.service.spec.ts
@@ -71,12 +71,6 @@ export default function(): void {
       expect(this.sizeService.tableRef).toBeDefined();
     });
 
-    it('updates row width with the correct size', function(this: TestContext) {
-      expect(this.table.style.width).toBeFalsy();
-      this.sizeService.updateRowWidth();
-      expect(this.table.style.width).toBe('668px');
-    });
-
     it('calculates the correct column drag height', function(this: TestContext) {
       expect(this.sizeService.getColumnDragHeight()).toEqual('300px');
       this.fixture.componentInstance.height = 422;

diff --git a/src/clr-angular/data/datagrid/providers/table-size.service.ts b/src/clr-angular/data/datagrid/providers/table-size.service.ts
@@ -4,20 +4,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 import { isPlatformBrowser } from '@angular/common';
-import { ElementRef, Inject, Injectable, OnDestroy, PLATFORM_ID, Renderer2 } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { DatagridRenderStep } from './../enums/render-step.enum';
-import { DatagridRenderOrganizer } from './../render/render-organizer';
+import { ElementRef, Inject, Injectable, PLATFORM_ID } from '@angular/core';
 
 /**
  * @description
  * Internal datagrid service that holds a reference to the clr-dg-table element and exposes a method to get height.
  */
 @Injectable()
-export class TableSizeService implements OnDestroy {
+export class TableSizeService {
   private _tableRef: HTMLElement;
-  private columns: Element[];
 
   public get tableRef(): HTMLElement {
     return this._tableRef;
@@ -27,19 +22,7 @@ export class TableSizeService implements OnDestroy {
     this._tableRef = element;
   }
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-    renderOrganizer: DatagridRenderOrganizer,
-    private renderer: Renderer2
-  ) {
-    this.subscriptions.push(
-      renderOrganizer.renderStep.subscribe(step => {
-        if (step === DatagridRenderStep.UPDATE_ROW_WIDTH) {
-          this.updateRowWidth();
-        }
-      })
-    );
-  }
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
   public set table(table: ElementRef) {
     if (isPlatformBrowser(this.platformId) && table.nativeElement) {
       this.tableRef = table.nativeElement.querySelector('.datagrid-table');
@@ -53,23 +36,4 @@ export class TableSizeService implements OnDestroy {
     }
     return `${this.tableRef.clientHeight}px`;
   }
-
-  private subscriptions: Subscription[] = [];
-
-  ngOnDestroy() {
-    this.subscriptions.forEach(sub => sub.unsubscribe());
-  }
-
-  updateRowWidth(): void {
-    if (!this.tableRef) {
-      return;
-    }
-    let newWidth: number = 0;
-    this.renderer.removeStyle(this.tableRef, 'width');
-    this.columns = Array.from(this.tableRef.querySelectorAll('.datagrid-column'));
-    this.columns.forEach(item => {
-      newWidth += item.clientWidth;
-    });
-    this.renderer.setStyle(this.tableRef, 'width', newWidth + 'px');
-  }
 }
diff --git a/src/clr-angular/data/datagrid/render/render-organizer.spec.ts b/src/clr-angular/data/datagrid/render/render-organizer.spec.ts
@@ -48,7 +48,6 @@ export default function(): void {
         DatagridRenderStep.COMPUTE_COLUMN_WIDTHS,
         DatagridRenderStep.ALIGN_COLUMNS,
         DatagridRenderStep.CALCULATE_MODE_OFF,
-        DatagridRenderStep.UPDATE_ROW_WIDTH,
       ]);
     });
 

diff --git a/src/clr-angular/data/datagrid/render/render-organizer.ts b/src/clr-angular/data/datagrid/render/render-organizer.ts
@@ -36,6 +36,5 @@ export class DatagridRenderOrganizer {
     this._renderStep.next(DatagridRenderStep.ALIGN_COLUMNS);
     this.alreadySized = true;
     this._renderStep.next(DatagridRenderStep.CALCULATE_MODE_OFF);
-    this._renderStep.next(DatagridRenderStep.UPDATE_ROW_WIDTH);
   }
 }
diff --git a/src/clr-angular/utils/_components.clarity.scss b/src/clr-angular/utils/_components.clarity.scss
@@ -131,7 +131,7 @@
 @import '../data/tree-view/tree-view.clarity';
 
 //Datagrid
-//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity
+//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity, forms.clarity
 @import '../data/datagrid/datagrid.clarity';
 
 //Animations