refactor(igx-grid): Remove rAF calls from dimension setters - master

Author: rkaraivanov

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -55,6 +55,8 @@ import { DisplayDensity } from '../core/displayDensity';
     template: ``
 })
 export class IgxColumnComponent implements AfterContentInit {
+    private _filterable = true;
+    private _groupable = false;
     /**
      * Sets/gets the `field` value.
      * ```typescript
@@ -105,7 +107,15 @@ export class IgxColumnComponent implements AfterContentInit {
      * @memberof IgxColumnComponent
      */
     @Input()
-    public groupable = false;
+    public get groupable() {
+        return this._groupable;
+    }
+    public set groupable(val) {
+        this._groupable = val;
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
+    }
     /**
      * Sets/gets whether the column is editable.
      * Default value is `false`.
@@ -131,7 +141,15 @@ export class IgxColumnComponent implements AfterContentInit {
      * @memberof IgxColumnComponent
      */
     @Input()
-    public filterable = true;
+    public get filterable() {
+        return this._filterable;
+    }
+    public set filterable(val) {
+        this._filterable = val;
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
+    }
     /**
      * Sets/gets whether the column is resizable.
      * Default value is `false`.
@@ -300,6 +318,8 @@ export class IgxColumnComponent implements AfterContentInit {
             this._width = value;
             if (this.grid) {
                 this.cacheCalcWidth();
+                (this.grid as any)._derivePossibleWidth();
+                this.grid.cdr.detectChanges();
             }
         }
     }

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -23,7 +23,9 @@ import {
     ViewChildren,
     ViewContainerRef,
     InjectionToken,
-    Optional
+    Optional,
+    OnChanges,
+    SimpleChanges
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil, first, filter } from 'rxjs/operators';
@@ -233,8 +235,10 @@ export enum GridKeydownTargetType {
     hierarchicalRow = 'hierarchicalRow'
 }
 
-export abstract class IgxGridBaseComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
+export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
+    OnInit, OnChanges, OnDestroy, AfterContentInit, AfterViewInit {
     private _scrollWidth: number;
+    protected _init = true;
 
     public get scrollWidth() {
         return this._scrollWidth;
@@ -634,12 +638,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (this._height !== value) {
             this._height = value;
             this._autoSize = false;
-            requestAnimationFrame(() => {
-                if (!this._destroyed) {
-                    this.reflow();
-                    this.cdr.markForCheck();
-                }
-            });
+            this.nativeElement.style.height = value;
         }
     }
 
@@ -653,28 +652,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @WatchChanges()
     @HostBinding('style.width')
     @Input()
-    public get width() {
+    get width() {
         return this._width;
     }
-
-    /**
-     * Sets the width of the `IgxGridComponent`.
-     * ```html
-     * <igx-grid #grid [data]="Data" [width]="'305px'" [autoGenerate]="true"></igx-grid>
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    public set width(value: string) {
+    set width(value) {
         if (this._width !== value) {
             this._width = value;
-            requestAnimationFrame(() => {
-                // Calling reflow(), because the width calculation
-                // might make the horizontal scrollbar appear/disappear.
-                // This will change the height, which should be recalculated.
-                if (!this._destroyed) {
-                    this.reflow();
-                }
-            });
+            this.nativeElement.style.width = value;
         }
     }
 
@@ -686,7 +670,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     get headerWidth() {
-        return parseInt(this._width, 10) - 17;
+        return parseInt(this.width, 10) - 17;
     }
 
     /**
@@ -1986,49 +1970,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.cdr.markForCheck();
     }
 
-    /**
-     * Returns the state of the grid virtualization, including the start index and how many records are rendered.
-     * ```typescript
-     * const gridVirtState = this.grid1.virtualizationState;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    get virtualizationState() {
-        return this.verticalScrollContainer.state;
-    }
-
-    /**
-     * @hidden
-     */
-    set virtualizationState(state) {
-        this.verticalScrollContainer.state = state;
-    }
-
-    /**
-     * Returns the total number of records in the data source.
-     * Works only with remote grid virtualization.
-     * ```typescript
-     * const itemCount = this.grid1.totalItemCount;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    get totalItemCount() {
-        return this.verticalScrollContainer.totalItemCount;
-    }
-
-    /**
-     * Sets the total number of records in the data source.
-     * This property is required for virtualization to function when the grid is bound remotely.
-     * ```typescript
-     * this.grid1.totalItemCount = 55;
-     * ```
-	 * @memberof IgxGridBaseComponent
-     */
-    set totalItemCount(count) {
-        this.verticalScrollContainer.totalItemCount = count;
-        this.cdr.detectChanges();
-    }
-
     /**
      * @hidden
      */
@@ -2651,6 +2592,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         public summaryService: IgxGridSummaryService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
+        this.cdr.detach();
         this.resizeHandler = () => {
             this.zone.run(() => this.calculateGridSizes());
         };
@@ -2664,6 +2606,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.summaryService.grid = this;
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (this._init) { return; }
+        const { height, width } = changes;
+        if (height || width) {
+            this.calculateGridSizes();
+        }
+    }
+
     _setupListeners() {
         const destructor = takeUntil(this.destroy$);
 
@@ -2715,7 +2665,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this._setupServices();
         this._setupListeners();
         this.columnListDiffer = this.differs.find([]).create(null);
-        this.calcWidth = this._width && this._width.indexOf('%') === -1 ? parseInt(this._width, 10) : 0;
+        this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
         this.shouldGenerate = this.autoGenerate;
         this._scrollWidth = this.getScrollWidth();
     }
@@ -2870,6 +2820,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 }
             });
         });
+        this._init = false;
+        this.cdr.reattach();
     }
 
     private combineForOfCollections(dataList, summaryList) {
@@ -4008,7 +3960,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     protected get isPercentWidth() {
-        return this._width && this._width.indexOf('%') !== -1;
+        return this.width && this.width.indexOf('%') !== -1;
     }
 
     /**
@@ -4031,6 +3983,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                     column.defaultWidth = columnWidthCombined + 'px';
                 } else {
                     column.defaultWidth = this._columnWidth;
+                    column.resetCaches();
                 }
             });
             this.resetCachedWidths();
@@ -4041,7 +3994,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     protected get defaultTargetBodyHeight(): number {
-        const allItems = this.totalItemCount || this.dataLength;
+        const allItems = this.dataLength;
         return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber,
             this.paging ? Math.min(allItems, this.perPage) : allItems);
     }
@@ -4232,7 +4185,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             width = computed.getPropertyValue('width').indexOf('%') === -1 ?
                 parseInt(computed.getPropertyValue('width'), 10) : null;
         } else {
-            width = parseInt(this._width, 10);
+            width = parseInt(this.width, 10);
         }
 
         if (!width && el) {
@@ -4391,7 +4344,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected getUnpinnedWidth(takeHidden = false) {
         let width = this.isPercentWidth ?
             this.calcWidth :
-            parseInt(this._width, 10);
+            parseInt(this.width, 10);
         if (this.hasVerticalSroll() && !this.isPercentWidth) {
             width -= this.scrollWidth;
         }

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -1899,6 +1899,7 @@ describe('IgxGrid Component Tests', () => {
 
                 cell.inEditMode = true;
                 cell.update('IG');
+                fix.detectChanges();
                 cell.inEditMode = false;
 
                 await wait(DEBOUNCETIME);

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -117,7 +117,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
      * ```html
      * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
      * ```
-     * @memberof IgxGridBaseComponent
+     * @memberof IgxGridComponent
     */
     @Input()
     public get data(): any[] {
@@ -163,6 +163,49 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
         }
     }
 
+    /**
+     * Returns the state of the grid virtualization, including the start index and how many records are rendered.
+     * ```typescript
+     * const gridVirtState = this.grid1.virtualizationState;
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    get virtualizationState() {
+        return this.verticalScrollContainer.state;
+    }
+
+    /**
+     * @hidden
+     */
+    set virtualizationState(state) {
+        this.verticalScrollContainer.state = state;
+    }
+
+    /**
+     * Sets the total number of records in the data source.
+     * This property is required for remote grid virtualization to function when it is bound to remote data.
+     * ```typescript
+     * this.grid1.totalItemCount = 55;
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    set totalItemCount(count) {
+        this.verticalScrollContainer.totalItemCount = count;
+        this.cdr.detectChanges();
+    }
+
+    /**
+     * Returns the total number of records in the data source.
+     * Works only with remote grid virtualization.
+     * ```typescript
+     * const itemCount = this.grid1.totalItemCount;
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    get totalItemCount() {
+        return this.verticalScrollContainer.totalItemCount;
+    }
+
     private _gridAPI: IgxGridAPIService;
     private _filteredData = null;
 
@@ -351,6 +394,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
     @Input()
     set dropAreaMessage(value: string) {
         this._dropAreaMessage = value;
+        this.cdr.markForCheck();
     }
 
     /**
@@ -780,6 +824,15 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
         }
     }
 
+    /**
+     * @hidden
+     */
+    protected get defaultTargetBodyHeight(): number {
+        const allItems = this.totalItemCount || this.dataLength;
+        return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber,
+            this.paging ? Math.min(allItems, this.perPage) : allItems);
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -2242,7 +2242,7 @@ describe('IgxGrid - GroupBy', () => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();
 
-        fix.componentInstance.instance.dropAreaTemplate = fix.componentInstance.dropAreaTemplate;
+        fix.componentInstance.currentDropArea = fix.componentInstance.dropAreaTemplate;
         await wait();
         fix.detectChanges();
 
@@ -2591,6 +2591,7 @@ describe('IgxGrid - GroupBy', () => {
         <igx-grid
             [width]='width'
             [height]='height'
+            [dropAreaTemplate]='currentDropArea'
             [data]="data"
             [autoGenerate]="true" (onColumnInit)="columnsCreated($event)" (onGroupingDone)="onGroupingDoneHandler($event)">
         </igx-grid>
@@ -2602,6 +2603,7 @@ describe('IgxGrid - GroupBy', () => {
 export class DefaultGridComponent extends DataParent {
     public width = '800px';
     public height = null;
+    public currentDropArea;
 
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public instance: IgxGridComponent;