From 19dd8bbd31fd519ef722a4938987dd097bd9e53f Mon Sep 17 00:00:00 2001 From: Karl Seamon Date: Wed, 5 Aug 2020 14:41:59 -0400 Subject: [PATCH] perf(table): Do column name string interpolation once per column instead of once per cell (#19801) * perf(table): Use only one column classname and do string interpolation once per column * missed a couple * lint * update api * For now, just share the css classname across cells, but keep same behavior. * lint * update api (cherry picked from commit bf953e936121af876726182eceebc16bf8da12bc) --- src/cdk/table/cell.ts | 26 +++++++++++++-- src/material-experimental/mdc-table/cell.ts | 37 +++++++++------------ src/material/table/cell.ts | 37 +++++++++------------ tools/public_api_guard/cdk/table.d.ts | 2 ++ tools/public_api_guard/material/table.d.ts | 4 +-- 5 files changed, 57 insertions(+), 49 deletions(-) diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index d91acbc4f249..3255f58a061a 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -79,6 +79,7 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick { if (name) { this._name = name; this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-'); + this._updateColumnCssClassName(); } } _name: string; @@ -115,10 +116,27 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick { */ cssClassFriendlyName: string; + /** + * Class name for cells in this column. + * @docs-private + */ + _columnCssClassName: string[]; + constructor(@Inject(CDK_TABLE) @Optional() public _table?: any) { super(); } + /** + * Overridable method that sets the css classes that will be added to every cell in this + * column. + * In the future, columnCssClassName will change from type string[] to string and this + * will set a single string value. + * @docs-private + */ + protected _updateColumnCssClassName() { + this._columnCssClassName = [`cdk-column-${this.cssClassFriendlyName}`]; + } + static ngAcceptInputType_sticky: BooleanInput; static ngAcceptInputType_stickyEnd: BooleanInput; } @@ -126,8 +144,12 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick { /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */ export class BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { - const columnClassName = `cdk-column-${columnDef.cssClassFriendlyName}`; - elementRef.nativeElement.classList.add(columnClassName); + // If IE 11 is dropped before we switch to setting a single class name, change to multi param + // with destructuring. + const classList = elementRef.nativeElement.classList; + for (const className of columnDef._columnCssClassName) { + classList.add(className); + } } } diff --git a/src/material-experimental/mdc-table/cell.ts b/src/material-experimental/mdc-table/cell.ts index 98b5ac48c63b..3114588891bd 100644 --- a/src/material-experimental/mdc-table/cell.ts +++ b/src/material-experimental/mdc-table/cell.ts @@ -7,7 +7,7 @@ */ import {BooleanInput} from '@angular/cdk/coercion'; -import {Directive, ElementRef, Input} from '@angular/core'; +import {Directive, Input} from '@angular/core'; import { CdkCell, CdkCellDef, @@ -62,6 +62,17 @@ export class MatColumnDef extends CdkColumnDef { /** Unique name for this column. */ @Input('matColumnDef') name: string; + /** + * Add "mat-column-" prefix in addition to "cdk-column-" prefix. + * In the future, this will only add "mat-column-" and columnCssClassName + * will change from type string[] to string. + * @docs-private + */ + protected _updateColumnCssClassName() { + super._updateColumnCssClassName(); + this._columnCssClassName!.push(`mat-column-${this.cssClassFriendlyName}`); + } + static ngAcceptInputType_sticky: BooleanInput; } @@ -73,13 +84,7 @@ export class MatColumnDef extends CdkColumnDef { 'role': 'columnheader', }, }) -export class MatHeaderCell extends CdkHeaderCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatHeaderCell extends CdkHeaderCell {} /** Footer cell template container that adds the right classes and role. */ @Directive({ @@ -89,13 +94,7 @@ export class MatHeaderCell extends CdkHeaderCell { 'role': 'gridcell', }, }) -export class MatFooterCell extends CdkFooterCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatFooterCell extends CdkFooterCell {} /** Cell template container that adds the right classes and role. */ @Directive({ @@ -105,10 +104,4 @@ export class MatFooterCell extends CdkFooterCell { 'role': 'gridcell', }, }) -export class MatCell extends CdkCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatCell extends CdkCell {} diff --git a/src/material/table/cell.ts b/src/material/table/cell.ts index b915785339f4..89650b2b96c9 100644 --- a/src/material/table/cell.ts +++ b/src/material/table/cell.ts @@ -7,7 +7,7 @@ */ import {BooleanInput} from '@angular/cdk/coercion'; -import {Directive, ElementRef, Input} from '@angular/core'; +import {Directive, Input} from '@angular/core'; import { CdkCell, CdkCellDef, @@ -62,6 +62,17 @@ export class MatColumnDef extends CdkColumnDef { /** Unique name for this column. */ @Input('matColumnDef') name: string; + /** + * Add "mat-column-" prefix in addition to "cdk-column-" prefix. + * In the future, this will only add "mat-column-" and columnCssClassName + * will change from type string[] to string. + * @docs-private + */ + protected _updateColumnCssClassName() { + super._updateColumnCssClassName(); + this._columnCssClassName!.push(`mat-column-${this.cssClassFriendlyName}`); + } + static ngAcceptInputType_sticky: BooleanInput; } @@ -73,13 +84,7 @@ export class MatColumnDef extends CdkColumnDef { 'role': 'columnheader', }, }) -export class MatHeaderCell extends CdkHeaderCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatHeaderCell extends CdkHeaderCell {} /** Footer cell template container that adds the right classes and role. */ @Directive({ @@ -89,13 +94,7 @@ export class MatHeaderCell extends CdkHeaderCell { 'role': 'gridcell', }, }) -export class MatFooterCell extends CdkFooterCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatFooterCell extends CdkFooterCell {} /** Cell template container that adds the right classes and role. */ @Directive({ @@ -105,10 +104,4 @@ export class MatFooterCell extends CdkFooterCell { 'role': 'gridcell', }, }) -export class MatCell extends CdkCell { - constructor(columnDef: CdkColumnDef, - elementRef: ElementRef) { - super(columnDef, elementRef); - elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`); - } -} +export class MatCell extends CdkCell {} diff --git a/tools/public_api_guard/cdk/table.d.ts b/tools/public_api_guard/cdk/table.d.ts index 7d68d6eb4810..aa1abeac5695 100644 --- a/tools/public_api_guard/cdk/table.d.ts +++ b/tools/public_api_guard/cdk/table.d.ts @@ -89,6 +89,7 @@ export interface CdkCellOutletRowContext { } export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick { + _columnCssClassName: string[]; _name: string; _stickyEnd: boolean; _table?: any; @@ -101,6 +102,7 @@ export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick get stickyEnd(): boolean; set stickyEnd(v: boolean); constructor(_table?: any); + protected _updateColumnCssClassName(): void; static ngAcceptInputType_sticky: BooleanInput; static ngAcceptInputType_stickyEnd: BooleanInput; static ɵdir: i0.ɵɵDirectiveDefWithMeta; diff --git a/tools/public_api_guard/material/table.d.ts b/tools/public_api_guard/material/table.d.ts index b0c1c397a07e..20d2f60600fb 100644 --- a/tools/public_api_guard/material/table.d.ts +++ b/tools/public_api_guard/material/table.d.ts @@ -1,5 +1,4 @@ export declare class MatCell extends CdkCell { - constructor(columnDef: CdkColumnDef, elementRef: ElementRef); static ɵdir: i0.ɵɵDirectiveDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; } @@ -11,13 +10,13 @@ export declare class MatCellDef extends CdkCellDef { export declare class MatColumnDef extends CdkColumnDef { name: string; + protected _updateColumnCssClassName(): void; static ngAcceptInputType_sticky: BooleanInput; static ɵdir: i0.ɵɵDirectiveDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; } export declare class MatFooterCell extends CdkFooterCell { - constructor(columnDef: CdkColumnDef, elementRef: ElementRef); static ɵdir: i0.ɵɵDirectiveDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; } @@ -39,7 +38,6 @@ export declare class MatFooterRowDef extends CdkFooterRowDef { } export declare class MatHeaderCell extends CdkHeaderCell { - constructor(columnDef: CdkColumnDef, elementRef: ElementRef); static ɵdir: i0.ɵɵDirectiveDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; }