Skip to content

Commit

Permalink
perf(table): Do column name string interpolation once per column inst…
Browse files Browse the repository at this point in the history 
…ead 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 bf953e9)
  • Loading branch information
@kseamon @mmalerba
kseamon authored and mmalerba committed Aug 5, 2020
1 parent 7e2079a commit 19dd8bb
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 49 deletions.
26 changes: 24 additions & 2 deletions src/cdk/table/cell.ts
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -115,19 +116,40 @@ 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;
}

/** 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);
}
}
}

Expand Down
37 changes: 15 additions & 22 deletions src/material-experimental/mdc-table/cell.ts
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

Expand All @@ -73,13 +84,7 @@ export class MatColumnDef extends CdkColumnDef {
'role': 'columnheader',
},
})
export class MatHeaderCell extends CdkHeaderCell {
constructor(columnDef: CdkColumnDef,
elementRef: ElementRef<HTMLElement>) {
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({
Expand All @@ -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({
Expand All @@ -105,10 +104,4 @@ export class MatFooterCell extends CdkFooterCell {
'role': 'gridcell',
},
})
export class MatCell extends CdkCell {
constructor(columnDef: CdkColumnDef,
elementRef: ElementRef<HTMLElement>) {
super(columnDef, elementRef);
elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
}
}
export class MatCell extends CdkCell {}
37 changes: 15 additions & 22 deletions src/material/table/cell.ts
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

Expand All @@ -73,13 +84,7 @@ export class MatColumnDef extends CdkColumnDef {
'role': 'columnheader',
},
})
export class MatHeaderCell extends CdkHeaderCell {
constructor(columnDef: CdkColumnDef,
elementRef: ElementRef<HTMLElement>) {
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({
Expand All @@ -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({
Expand All @@ -105,10 +104,4 @@ export class MatFooterCell extends CdkFooterCell {
'role': 'gridcell',
},
})
export class MatCell extends CdkCell {
constructor(columnDef: CdkColumnDef,
elementRef: ElementRef<HTMLElement>) {
super(columnDef, elementRef);
elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
}
}
export class MatCell extends CdkCell {}
2 changes: 2 additions & 0 deletions tools/public_api_guard/cdk/table.d.ts
View file
Expand Up @@ -89,6 +89,7 @@ export interface CdkCellOutletRowContext<T> {
}

export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
_columnCssClassName: string[];
_name: string;
_stickyEnd: boolean;
_table?: any;
Expand All @@ -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<CdkColumnDef, "[cdkColumnDef]", never, { "sticky": "sticky"; "name": "cdkColumnDef"; "stickyEnd": "stickyEnd"; }, {}, ["cell", "headerCell", "footerCell"]>;
Expand Down
4 changes: 1 addition & 3 deletions tools/public_api_guard/material/table.d.ts
View file
@@ -1,5 +1,4 @@
export declare class MatCell extends CdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>);
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatCell, "mat-cell, td[mat-cell]", never, {}, {}, never>;
static ɵfac: i0.ɵɵFactoryDef<MatCell, never>;
}
Expand All @@ -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<MatColumnDef, "[matColumnDef]", never, { "sticky": "sticky"; "name": "matColumnDef"; }, {}, never>;
static ɵfac: i0.ɵɵFactoryDef<MatColumnDef, never>;
}

export declare class MatFooterCell extends CdkFooterCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef);
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatFooterCell, "mat-footer-cell, td[mat-footer-cell]", never, {}, {}, never>;
static ɵfac: i0.ɵɵFactoryDef<MatFooterCell, never>;
}
Expand All @@ -39,7 +38,6 @@ export declare class MatFooterRowDef extends CdkFooterRowDef {
}

export declare class MatHeaderCell extends CdkHeaderCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>);
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatHeaderCell, "mat-header-cell, th[mat-header-cell]", never, {}, {}, never>;
static ɵfac: i0.ɵɵFactoryDef<MatHeaderCell, never>;
}
Expand Down

0 comments on commit 19dd8bb

Please sign in to comment.