Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf(table): Do column name string interpolation once per column instead of once per cell #19801

Merged
merged 7 commits into from
Aug 5, 2020
Merged

perf(table): Do column name string interpolation once per column instead of once per cell #19801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e324ffe
perf(table): Use only one column classname and do string interpolatio…
kseamon Jun 24, 2020
a22b160
missed a couple
kseamon Jun 26, 2020
37bf934
lint
kseamon Jun 26, 2020
973e7ca
update api
kseamon Jun 27, 2020
1dbc413
For now, just share the css classname across cells, but keep same beh…
kseamon Jun 29, 2020
7aeca62
lint
kseamon Jun 29, 2020
b0720f1
update api
kseamon Jun 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 24 additions & 2 deletions src/cdk/table/cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export interface CdkCellOutletRowContext<T> {
}

export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
_columnCssClassName: string[];
_name: string;
_stickyEnd: boolean;
_table?: any;
Expand All @@ -87,6 +88,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
Open in desktop
Original file line number Diff line number Diff line change
@@ -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