Merge pull request #10110 from IgniteUI/rkaraivanov/row-classes-bindings

ddincheva · web-flow · commit f6666c24478d · 2021-09-14T09:15:10.000+03:00
perf(grid-rows): Cleaned row style bindings
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -7,8 +7,16 @@ import { GridType } from './grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
-import { IgxGridRow, IgxSummaryOperand, IgxSummaryResult } from '../grid/public_api';
 import { IgxAddRow } from './crud.service';
+import { IgxGridRow } from '../grid-public-row';
+import { IgxTreeGridRowComponent } from '../tree-grid/tree-grid-row.component';
+import { IgxGridRowComponent } from '../grid/grid-row.component';
+import { IgxHierarchicalRowComponent } from '../hierarchical-grid/hierarchical-row.component';
+import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
+
+interface CSSProp {
+    [prop: string]: any;
+}
 
 /**
  * @hidden
@@ -19,7 +27,7 @@ import { IgxAddRow } from './crud.service';
 })
 export class IgxGridCellStyleClassesPipe implements PipeTransform {
 
-    public transform(cssClasses: { [prop: string]: any }, _: any, data: any, field: string, index: number, __: number): string {
+    public transform(cssClasses: CSSProp, _: any, data: any, field: string, index: number, __: number): string {
         if (!cssClasses) {
             return '';
         }
@@ -48,8 +56,7 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform {
 })
 export class IgxGridCellStylesPipe implements PipeTransform {
 
-    public transform(styles: { [prop: string]: any }, _: any, data: any, field: string, index: number, __: number):
-     { [prop: string]: any } {
+    public transform(styles: CSSProp, _: any, data: any, field: string, index: number, __: number): CSSProp {
         const css = {};
         if (!styles) {
             return css;
@@ -64,53 +71,81 @@ export class IgxGridCellStylesPipe implements PipeTransform {
     }
 }
 
+type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalRowComponent;
+
 /**
  * @hidden
  * @internal
  */
- @Pipe({
-    name: 'igxGridRowClasses'
-})
+@Pipe({ name: 'igxGridRowClasses' })
 export class IgxGridRowClassesPipe implements PipeTransform {
+    public row: IgxGridRow;
 
-    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {
+        this.row = new IgxGridRow(this.gridAPI.grid as any, -1, {});
+    }
 
-    public transform(cssClasses: { [prop: string]: any }, rowData: any, index: number, __: number): string {
-        if (!cssClasses) {
-            return '';
+    public transform(
+        cssClasses: CSSProp,
+        row: _RowType,
+        editMode: boolean,
+        selected: boolean,
+        dirty: boolean,
+        deleted: boolean,
+        dragging: boolean,
+        index: number,
+        mrl: boolean,
+        filteredOut: boolean,
+        _: number
+    ) {
+        const result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
+        const mapping = [
+            [selected, 'igx-grid__tr--selected'],
+            [editMode, 'igx-grid__tr--edit'],
+            [dirty, 'igx-grid__tr--edited'],
+            [deleted, 'igx-grid__tr--deleted'],
+            [dragging, 'igx-grid__tr--drag'],
+            [mrl, 'igx-grid__tr--mrl'],
+            // Tree grid only
+            [filteredOut, 'igx-grid__tr--filtered']
+        ];
+
+        for (const [state, _class] of mapping) {
+            if (state) {
+                result.add(_class as string);
+            }
         }
-        const result = [];
-        for (const cssClass of Object.keys(cssClasses)) {
+
+        for (const cssClass of Object.keys(cssClasses ?? {})) {
             const callbackOrValue = cssClasses[cssClass];
-            const row =  new IgxGridRow((this.gridAPI.grid as any), index, rowData);
-            const apply = typeof callbackOrValue === 'function' ? callbackOrValue(row) : callbackOrValue;
+            this.row.index = index;
+            (this.row as any)._data = row.rowData;
+            const apply = typeof callbackOrValue === 'function' ? callbackOrValue(this.row) : callbackOrValue;
             if (apply) {
-                result.push(cssClass);
+                result.add(cssClass);
             }
         }
-        return result.join(' ');
+        return result;
     }
 }
 
 /**
  * @hidden
  * @internal
  */
- @Pipe({
-    name: 'igxGridRowStyles'
-})
+@Pipe({ name: 'igxGridRowStyles' })
 export class IgxGridRowStylesPipe implements PipeTransform {
 
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
 
-    public transform(styles: { [prop: string]: any }, rowData: any, index: number, __: number): { [prop: string]: any } {
+    public transform(styles: CSSProp, rowData: any, index: number, __: number): CSSProp {
         const css = {};
         if (!styles) {
             return css;
         }
         for (const prop of Object.keys(styles)) {
             const cb = styles[prop];
-            const row =  new IgxGridRow((this.gridAPI.grid as any), index, rowData);
+            const row = new IgxGridRow((this.gridAPI.grid as any), index, rowData);
             css[prop] = typeof cb === 'function' ? cb(row) : cb;
         }
         return css;
@@ -394,7 +429,7 @@ export class IgxGridAddRowPipe implements PipeTransform {
 @Pipe({ name: 'igxHeaderGroupWidth' })
 export class IgxHeaderGroupWidthPipe implements PipeTransform {
 
-    public transform(width: any, minWidth: any, hasLayout: boolean ) {
+    public transform(width: any, minWidth: any, hasLayout: boolean) {
         return hasLayout ? '' : `${Math.max(parseFloat(width), minWidth)}px`;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import { IgxGridComponent } from './grid.component';
 import { IgxRowDirective } from '../row.directive';
 
@@ -10,11 +10,6 @@ import { IgxRowDirective } from '../row.directive';
 })
 export class IgxGridRowComponent extends IgxRowDirective<IgxGridComponent> {
 
-    @HostBinding('class.igx-grid__tr--mrl')
-    public get hasColumnLayouts(): boolean {
-        return this.grid.hasColumnLayouts;
-    }
-
     public getContext(col, row) {
         return {
             $implicit: col,
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -94,13 +94,13 @@
         </ng-container>
         <ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-grid-row>
         </ng-template>
         <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-grid-row>
         </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -68,14 +68,14 @@
         </ng-template>
         <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
             <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-hierarchical-grid-row>
         </ng-template>
 
         <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
             <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row #pinnedRow>
             </igx-hierarchical-grid-row>
         </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -211,14 +211,6 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
         return this.index;
     }
 
-    /**
-     * @hidden
-     */
-    @HostBinding('class')
-    get styleClasses(): string {
-        return this.resolveClasses();
-    }
-
     /**
      * @hidden
      */
@@ -583,21 +575,6 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
         this.addAnimationEnd.emit(this);
     }
 
-    /**
-     * @hidden
-     */
-    protected resolveClasses(): string {
-        const indexClass = this.index % 2 ? this.grid.evenRowCSS : this.grid.oddRowCSS;
-        const selectedClass = this.selected ? 'igx-grid__tr--selected' : '';
-        const editClass = this.inEditMode ? 'igx-grid__tr--edit' : '';
-        const dirtyClass = this.dirty ? 'igx-grid__tr--edited' : '';
-        const deletedClass = this.deleted ? 'igx-grid__tr--deleted' : '';
-        const mrlClass = this.grid.hasColumnLayouts ? 'igx-grid__tr--mrl' : '';
-        const dragClass = this.dragging ? 'igx-grid__tr--drag' : '';
-        return `${this.defaultCssClass} ${indexClass} ${selectedClass} ${editClass} ${dirtyClass}
-         ${deletedClass} ${mrlClass} ${dragClass}`.trim();
-    }
-
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts
@@ -159,13 +159,4 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
     public beginAddChild() {
         this.grid.crudService.enterAddRowMode(this, true);
     }
-
-    /**
-     * @hidden
-     */
-    protected resolveClasses(): string {
-        const classes = super.resolveClasses();
-        const filteredClass = this.treeRow.isFilteredOutParent ? 'igx-grid__tr--filtered' : '';
-        return `${classes} ${filteredClass}`;
-    }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -70,13 +70,13 @@
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
         <ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
             <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-tree-grid-row>
         </ng-template>
         <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
             <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:rowData:rowIndex:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-tree-grid-row>
         </ng-template>

Original file line number	Diff line number	Diff line change
`@@ -159,13 +159,4 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen`
`159`	`159`	`public beginAddChild() {`
`160`	`160`	`this.grid.crudService.enterAddRowMode(this, true);`
`161`	`161`	`}`
`162`		`-`
`163`		`- /**`
`164`		`- * @hidden`
`165`		`- */`
`166`		`- protected resolveClasses(): string {`
`167`		`- const classes = super.resolveClasses();`
`168`		`- const filteredClass = this.treeRow.isFilteredOutParent ? 'igx-grid__tr--filtered' : '';`
`169`		- return `${classes} ${filteredClass}`;
`170`		`- }`
`171`	`162`	`}`