From 334c1a252dd4c70bea90015e0f4c77eeb633ea53 Mon Sep 17 00:00:00 2001 From: Borislav Kulov Date: Mon, 19 Nov 2018 17:13:49 +0200 Subject: [PATCH] chore(filtering): Change filtering components strategy to OnPush (#2938) --- .../grid-filtering-cell.component.ts | 11 +++++-- .../filtering/grid-filtering-row.component.ts | 31 ++++++++----------- .../src/lib/grids/grid-base.component.ts | 7 ++++- .../grids/grid-header-group.component.html | 14 ++++----- .../lib/grids/grid-header-group.component.ts | 20 ++++++------ .../src/lib/grids/grid-header.component.ts | 4 +-- 6 files changed, 47 insertions(+), 40 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts index 506073ba23b..ffe836665ae 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts @@ -8,7 +8,9 @@ import { AfterViewInit, ElementRef, HostListener, - OnInit + OnInit, + ChangeDetectionStrategy, + DoCheck } from '@angular/core'; import { IgxColumnComponent } from '../column.component'; import { IFilteringExpression } from '../../data-operations/filtering-expression.interface'; @@ -22,11 +24,12 @@ import { IgxGridGroupByRowComponent } from '../grid'; * @hidden */ @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, selector: 'igx-grid-filtering-cell', templateUrl: './grid-filtering-cell.component.html' }) -export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { +export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck { private baseClass = 'igx-grid__filtering-cell-indicator'; private currentTemplate = null; @@ -73,6 +76,10 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit { this.updateFilterCellArea(); } + public ngDoCheck() { + this.updateFilterCellArea(); + } + @HostListener('keydown.tab', ['$event']) public onTabKeyDown(eventArgs) { const pinnedColumns = this.filteringService.grid.pinnedColumns; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts index 508ad04c055..fd6986f25eb 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts @@ -5,12 +5,12 @@ import { Input, TemplateRef, ViewChild, - OnDestroy, ViewChildren, QueryList, ElementRef, HostBinding, - HostListener + HostListener, + ChangeDetectionStrategy } from '@angular/core'; import { Subject } from 'rxjs'; import { DataType } from '../../data-operations/data-util'; @@ -20,7 +20,6 @@ import { IFilteringOperation } from '../../data-operations/filtering-condition'; import { FilteringLogic, IFilteringExpression } from '../../data-operations/filtering-expression.interface'; import { HorizontalAlignment, VerticalAlignment, OverlaySettings } from '../../services/overlay/utilities'; import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy'; -import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IChipSelectEventArgs, IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips'; import { ExpressionUI } from './grid-filtering.service'; import { IgxDropDownItemComponent } from '../../drop-down/drop-down-item.component'; @@ -32,11 +31,12 @@ import { AbsoluteScrollStrategy } from '../../services/overlay/scroll'; * @hidden */ @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, selector: 'igx-grid-filtering-row', templateUrl: './grid-filtering-row.component.html' }) -export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { +export class IgxGridFilteringRowComponent implements AfterViewInit { private _positionSettings = { horizontalStartPoint: HorizontalAlignment.Left, @@ -59,8 +59,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { private chipsAreaWidth: number; private chipAreaScrollOffset = 0; - private conditionChanged = new Subject(); - private unaryConditionChanged = new Subject(); private _column = null; public showArrows: boolean; @@ -140,10 +138,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { @HostBinding('class.igx-grid__filtering-row') public cssClass = 'igx-grid__filtering-row'; - constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) { - this.unaryConditionChanged.subscribe(() => this.unaryConditionChangedCallback()); - this.conditionChanged.subscribe(() => this.conditionChangedCallback()); - } + constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) {} ngAfterViewInit() { this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective; @@ -157,11 +152,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.input.nativeElement.focus(); } - ngOnDestroy() { - this.conditionChanged.unsubscribe(); - this.unaryConditionChanged.unsubscribe(); - } - @HostListener('keydown.shift.tab', ['$event']) @HostListener('keydown.tab', ['$event']) public onTabKeydown(event) { @@ -395,9 +385,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { const value = (eventArgs.newSelection as IgxDropDownItemComponent).value; this.expression.condition = this.getCondition(value); if (this.expression.condition.isUnary) { - this.unaryConditionChanged.next(value); + // update grid's filtering on the next cycle to ensure the drop-down is closed + // if the drop-down is not closed this event handler will be invoked multiple times + requestAnimationFrame(() => this.unaryConditionChangedCallback()); } else { - this.conditionChanged.next(value); + requestAnimationFrame(() => this.conditionChangedCallback()); } if (this.input) { @@ -464,7 +456,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { if (eventArgs.oldSelection) { expression.afterOperator = (eventArgs.newSelection as IgxDropDownItemComponent).value; this.expressionsList[this.expressionsList.indexOf(expression) + 1].beforeOperator = expression.afterOperator; - this.filter(); + + // update grid's filtering on the next cycle to ensure the drop-down is closed + // if the drop-down is not closed this event handler will be invoked multiple times + requestAnimationFrame(() => this.filter()); } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index c10102ccb82..ffc5eb79f5c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -1165,7 +1165,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ get headerGroupsList(): IgxGridHeaderGroupComponent[] { - return flatten(this.headerGroups.toArray()); + return this.headerGroups ? flatten(this.headerGroups.toArray()) : []; } /** @@ -2758,6 +2758,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (this.rowList) { this.rowList.forEach((row) => row.cdr.markForCheck()); } + + if (this.filterCellList) { + this.filterCellList.forEach((c) => c.cdr.markForCheck()); + } + this.cdr.detectChanges(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html index f59a18f2df0..ccd97e3af47 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html @@ -13,16 +13,16 @@ - -
+ [style.height.px]="colResizingService.resizerHeight" + [restrictHResizeMax]="colResizingService.restrictResizeMax" + [restrictHResizeMin]="colResizingService.restrictResizeMin" + [resizeEndTimeout]="colResizingService.resizeEndTimeout" + (resizeEnd)="colResizingService.resizeColumn($event)">
diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts index b858c1b3b71..f79a8b610a6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts @@ -123,31 +123,31 @@ export class IgxGridHeaderGroupComponent implements DoCheck { constructor(private cdr: ChangeDetectorRef, public gridAPI: GridBaseAPIService, - public colReszingService: IgxColumnResizingService, + public colResizingService: IgxColumnResizingService, public filteringService: IgxFilteringService) { } public onResizeAreaMouseOver() { if (this.column.resizable) { - this.colReszingService.resizeCursor = 'col-resize'; + this.colResizingService.resizeCursor = 'col-resize'; } } public onResizeAreaMouseDown(event) { if (event.button === 0 && this.column.resizable) { - this.colReszingService.column = this.column; - this.colReszingService.showResizer = true; - this.colReszingService.isColumnResizing = true; - this.colReszingService.resizerHeight = this.column.grid.calcResizerHeight; - this.colReszingService.startResizePos = event.clientX; + this.colResizingService.column = this.column; + this.colResizingService.showResizer = true; + this.colResizingService.isColumnResizing = true; + this.colResizingService.resizerHeight = this.column.grid.calcResizerHeight; + this.colResizingService.startResizePos = event.clientX; } else { - this.colReszingService.resizeCursor = null; + this.colResizingService.resizeCursor = null; } } public autosizeColumnOnDblClick(event) { if (event.button === 0 && this.column.resizable) { - this.colReszingService.column = this.column; - this.colReszingService.autosizeColumnOnDblClick(); + this.colResizingService.column = this.column; + this.colResizingService.autosizeColumnOnDblClick(); } } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index 3ed8319ace9..718532aecf8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -106,7 +106,7 @@ export class IgxGridHeaderComponent implements OnInit, DoCheck { constructor( public gridAPI: GridBaseAPIService, - public colReszingService: IgxColumnResizingService, + public colResizingService: IgxColumnResizingService, public cdr: ChangeDetectorRef, public elementRef: ElementRef, public zone: NgZone, @@ -125,7 +125,7 @@ export class IgxGridHeaderComponent implements OnInit, DoCheck { @HostListener('click', ['$event']) public onClick(event) { - if (!this.colReszingService.isColumnResizing) { + if (!this.colResizingService.isColumnResizing) { event.stopPropagation(); if (this.grid.filteringService.isFilterRowVisible) { if (this.column.filterable && !this.column.columnGroup &&