Merge pull request #5368 from IgniteUI/rkaraivanov/remove-raf-81x

kdinev · web-flow · commit 9d39cb5fccb8 · 2019-07-11T12:07:22.000+03:00
refactor(igx-grid): Remove rAF calls from dimension setters - master
diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/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.markForCheck();
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/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;
     }
 
     /**
@@ -2608,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());
         };
@@ -2621,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$);
 
@@ -2672,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();
     }
@@ -2827,6 +2820,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 }
             });
         });
+        this._init = false;
+        this.cdr.reattach();
     }
 
     private combineForOfCollections(dataList, summaryList) {
@@ -3965,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;
     }
 
     /**
@@ -3988,6 +3983,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                     column.defaultWidth = columnWidthCombined + 'px';
                 } else {
                     column.defaultWidth = this._columnWidth;
+                    column.resetCaches();
                 }
             });
             this.resetCachedWidths();
@@ -4189,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) {
@@ -4348,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;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -394,6 +394,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
     @Input()
     set dropAreaMessage(value: string) {
         this._dropAreaMessage = value;
+        this.cdr.markForCheck();
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/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;
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -346,6 +346,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
             this.hierarchicalState = this.data.map((rec) => {
                 return { rowID: this.primaryKey ? rec[this.primaryKey] : rec };
             });
+            this.cdr.detectChanges();
         }
 
         this.verticalScrollContainer.onBeforeViewDestroyed.pipe(takeUntil(this.destroy$)).subscribe((view) => {
@@ -372,9 +373,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
                 });
             });
             this.childLayoutKeys = this.parentIsland.children.map((item) => item.key);
-        } else {
-            this.childLayoutKeys = this.childLayoutList.map((item) => item.key);
-            this.cdr.detectChanges();
         }
 
         this.toolbarCustomContentTemplates = this.parentIsland ?
@@ -398,6 +396,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
      */
     ngAfterContentInit() {
         this.updateColumnList(false);
+        this.childLayoutKeys = this.parent ?
+        this.parentIsland.children.map((item) => item.key) :
+        this.childLayoutKeys = this.childLayoutList.map((item) => item.key);
         this.childLayoutList.notifyOnChanges();
         this.childLayoutList.changes.pipe(takeUntil(this.destroy$))
         .subscribe(() => this.onRowIslandChange());
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts
@@ -274,6 +274,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseComponent
         } else {
             this.rootGrid.hgridAPI.registerChildRowIsland(this);
         }
+        this._init = false;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/watch-changes.ts b/projects/igniteui-angular/src/lib/grids/watch-changes.ts
@@ -14,10 +14,11 @@ export function WatchChanges(): PropertyDecorator {
         const originalSetter = propDesc.set || (function (this: any, val: any) { this[privateKey] = val; });
 
         propDesc.set = function (this: any, val: any) {
+            const init = this._init;
             const oldValue = this[key];
             if (val !== oldValue || (typeof val === 'object' && val === oldValue)) {
                 originalSetter.call(this, val);
-                if (this.ngOnChanges) {
+                if (this.ngOnChanges && !init) {
                     // in case wacthed prop changes trigger ngOnChanges manually
                     const changes: SimpleChanges = {
                         [key]: new SimpleChange(oldValue, val, false)

Original file line number	Diff line number	Diff line change
`@@ -394,6 +394,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB`
`394`	`394`	`@Input()`
`395`	`395`	`set dropAreaMessage(value: string) {`
`396`	`396`	`this._dropAreaMessage = value;`
	`397`	`+ this.cdr.markForCheck();`
`397`	`398`	`}`
`398`	`399`
`399`	`400`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -274,6 +274,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseComponent`
`274`	`274`	`} else {`
`275`	`275`	`this.rootGrid.hgridAPI.registerChildRowIsland(this);`
`276`	`276`	`}`
	`277`	`+ this._init = false;`
`277`	`278`	`}`
`278`	`279`
`279`	`280`	`/**`