Skip to content

Commit c77a904

Browse files
crisbetocrisbeto
authored
fix(cdk/table): resolve breaking constructor changes (#20425)
In #19964 and #19750 some breaking constructor changes were made which eventually got released as a part of a patch branch which doesn't follow our breaking changes policy. These changes make the new constructor parameters optional and add fallbacks to the old behavior. Fixes #20422.
1 parent 541c942 commit c77a904

File tree

11 files changed

+96
-38
lines changed

11 files changed

+96
-38
lines changed

‎src/cdk-experimental/column-resize/resize-strategy.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {Inject, Injectable, OnDestroy, Provider} from '@angular/core';
1010
import {DOCUMENT} from '@angular/common';
1111
import {coerceCssPixelValue} from '@angular/cdk/coercion';
12-
import {CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
12+
import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table';
1313

1414
import {ColumnResize} from './column-resize';
1515

@@ -76,7 +76,8 @@ export abstract class ResizeStrategy {
7676
export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
7777
constructor(
7878
protected readonly columnResize: ColumnResize,
79-
protected readonly styleScheduler: _CoalescedStyleScheduler,
79+
@Inject(_COALESCED_STYLE_SCHEDULER)
80+
protected readonly styleScheduler: _CoalescedStyleScheduler,
8081
protected readonly table: CdkTable<unknown>) {
8182
super();
8283
}
@@ -131,7 +132,8 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
131132

132133
constructor(
133134
protected readonly columnResize: ColumnResize,
134-
protected readonly styleScheduler: _CoalescedStyleScheduler,
135+
@Inject(_COALESCED_STYLE_SCHEDULER)
136+
protected readonly styleScheduler: _CoalescedStyleScheduler,
135137
protected readonly table: CdkTable<unknown>,
136138
@Inject(DOCUMENT) document: any) {
137139
super();

‎src/cdk/table/coalesced-style-scheduler.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Injectable, NgZone, OnDestroy} from '@angular/core';
9+
import {Injectable, NgZone, OnDestroy, InjectionToken} from '@angular/core';
1010
import {from, Subject} from 'rxjs';
1111
import {take, takeUntil} from 'rxjs/operators';
1212

@@ -18,6 +18,10 @@ export class _Schedule {
1818
endTasks: (() => unknown)[] = [];
1919
}
2020

21+
/** Injection token used to provide a coalesced style scheduler. */
22+
export const _COALESCED_STYLE_SCHEDULER =
23+
new InjectionToken<_CoalescedStyleScheduler>('_COALESCED_STYLE_SCHEDULER');
24+
2125
/**
2226
* Allows grouping up CSSDom mutations after the current execution context.
2327
* This can significantly improve performance when separate consecutive functions are

‎src/cdk/table/sticky-styler.ts‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ export class StickyStyler {
4444
constructor(private _isNativeHtmlTable: boolean,
4545
private _stickCellCss: string,
4646
public direction: Direction,
47-
private _coalescedStyleScheduler: _CoalescedStyleScheduler,
47+
/**
48+
* @deprecated `_coalescedStyleScheduler` parameter to become required.
49+
* @breaking-change 11.0.0
50+
*/
51+
private _coalescedStyleScheduler?: _CoalescedStyleScheduler,
4852
private _isBrowser = true,
4953
private readonly _needsPositionStickyOnElement = true) { }
5054

@@ -70,7 +74,7 @@ export class StickyStyler {
7074
}
7175

7276
// Coalesce with sticky row/column updates (and potentially other changes like column resize).
73-
this._coalescedStyleScheduler.schedule(() => {
77+
this._scheduleStyleChanges(() => {
7478
for (const element of elementsToClear) {
7579
this._removeStickyStyle(element, stickyDirections);
7680
}
@@ -104,7 +108,7 @@ export class StickyStyler {
104108
const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
105109

106110
// Coalesce with sticky row updates (and potentially other changes like column resize).
107-
this._coalescedStyleScheduler.schedule(() => {
111+
this._scheduleStyleChanges(() => {
108112
const isRtl = this.direction === 'rtl';
109113
const start = isRtl ? 'right' : 'left';
110114
const end = isRtl ? 'left' : 'right';
@@ -168,7 +172,7 @@ export class StickyStyler {
168172

169173
// Coalesce with other sticky row updates (top/bottom), sticky columns updates
170174
// (and potentially other changes like column resize).
171-
this._coalescedStyleScheduler.schedule(() => {
175+
this._scheduleStyleChanges(() => {
172176
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
173177
if (!states[rowIndex]) {
174178
continue;
@@ -196,7 +200,7 @@ export class StickyStyler {
196200
const tfoot = tableElement.querySelector('tfoot')!;
197201

198202
// Coalesce with other sticky updates (and potentially other changes like column resize).
199-
this._coalescedStyleScheduler.schedule(() => {
203+
this._scheduleStyleChanges(() => {
200204
if (stickyStates.some(state => !state)) {
201205
this._removeStickyStyle(tfoot, ['bottom']);
202206
} else {
@@ -333,4 +337,17 @@ export class StickyStyler {
333337

334338
return positions;
335339
}
340+
341+
/**
342+
* Schedules styles to be applied when the style scheduler deems appropriate.
343+
* @breaking-change 11.0.0 This method can be removed in favor of calling
344+
* `CoalescedStyleScheduler.schedule` directly once the scheduler is a required parameter.
345+
*/
346+
private _scheduleStyleChanges(changes: () => void) {
347+
if (this._coalescedStyleScheduler) {
348+
this._coalescedStyleScheduler.schedule(changes);
349+
} else {
350+
changes();
351+
}
352+
}
336353
}

‎src/cdk/table/table.ts‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ import {
5858
} from 'rxjs';
5959
import {takeUntil} from 'rxjs/operators';
6060
import {CdkColumnDef} from './cell';
61-
import {_CoalescedStyleScheduler} from './coalesced-style-scheduler';
61+
import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from './coalesced-style-scheduler';
6262
import {
6363
BaseRowDef,
6464
CdkCellOutlet,
@@ -202,7 +202,7 @@ export interface RenderRow<T> {
202202
providers: [
203203
{provide: CDK_TABLE, useExisting: CdkTable},
204204
{provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
205-
_CoalescedStyleScheduler,
205+
{provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
206206
]
207207
})
208208
export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
@@ -476,18 +476,23 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
476476
constructor(
477477
protected readonly _differs: IterableDiffers,
478478
protected readonly _changeDetectorRef: ChangeDetectorRef,
479-
protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler,
480479
protected readonly _elementRef: ElementRef, @Attribute('role') role: string,
481480
@Optional() protected readonly _dir: Directionality, @Inject(DOCUMENT) _document: any,
482481
private _platform: Platform,
483-
// Optional for backwards compatibility, but a view repeater strategy will always
484-
// be provided.
482+
483+
/**
484+
* @deprecated `_coalescedStyleScheduler`, `_viewRepeater` and `_viewportRuler`
485+
* parameters to become required.
486+
* @breaking-change 11.0.0
487+
*/
485488
@Optional() @Inject(_VIEW_REPEATER_STRATEGY)
486-
protected readonly _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
489+
protected readonly _viewRepeater?: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
490+
@Optional() @Inject(_COALESCED_STYLE_SCHEDULER)
491+
protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler,
487492
// Optional for backwards compatibility. The viewport ruler is provided in root. Therefore,
488493
// this property will never be null.
489494
// tslint:disable-next-line: lightweight-tokens
490-
@Optional() private readonly _viewportRuler: ViewportRuler) {
495+
@Optional() private readonly _viewportRuler?: ViewportRuler) {
491496
if (!role) {
492497
this._elementRef.nativeElement.setAttribute('role', 'grid');
493498
}
@@ -512,9 +517,12 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
512517

513518
// Table cell dimensions may change after resizing the window. Signal the sticky styler to
514519
// refresh its cache of cell widths the next time sticky styles are updated.
515-
this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => {
516-
this._forceRecalculateCellWidths = true;
517-
});
520+
// @breaking-change 11.0.0 Remove null check for _viewportRuler once it's a required parameter.
521+
if (this._viewportRuler) {
522+
this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => {
523+
this._forceRecalculateCellWidths = true;
524+
});
525+
}
518526
}
519527

520528
ngAfterContentChecked() {
@@ -594,11 +602,14 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
594602
return;
595603
}
596604
const viewContainer = this._rowOutlet.viewContainer;
597-
this._viewRepeater.applyChanges(
605+
606+
// @breaking-change 11.0.0 Remove null check for `_viewRepeater`
607+
// once it's a required parameter in the constructor.
608+
this._viewRepeater?.applyChanges(
598609
changes,
599610
viewContainer,
600611
(record: IterableChangeRecord<RenderRow<T>>,
601-
adjustedPreviousIndex: number|null,
612+
_adjustedPreviousIndex: number|null,
602613
currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!),
603614
(record) => record.item.data,
604615
(change: _ViewRepeaterItemChange<RenderRow<T>, RowContext<T>>) => {

‎src/material-experimental/column-resize/overlay-handle.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import {
1515
ViewEncapsulation,
1616
} from '@angular/core';
1717
import {DOCUMENT} from '@angular/common';
18-
import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
18+
import {
19+
CdkColumnDef,
20+
_CoalescedStyleScheduler,
21+
_COALESCED_STYLE_SCHEDULER,
22+
} from '@angular/cdk/table';
1923
import {Directionality} from '@angular/cdk/bidi';
2024
import {
2125
ColumnResize,
@@ -49,7 +53,8 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
4953
protected readonly ngZone: NgZone,
5054
protected readonly resizeNotifier: ColumnResizeNotifierSource,
5155
protected readonly resizeRef: ResizeRef,
52-
protected readonly styleScheduler: _CoalescedStyleScheduler,
56+
@Inject(_COALESCED_STYLE_SCHEDULER)
57+
protected readonly styleScheduler: _CoalescedStyleScheduler,
5358
@Inject(DOCUMENT) document: any) {
5459
super();
5560
this.document = document;

‎src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ import {
1818
import {DOCUMENT} from '@angular/common';
1919
import {Directionality} from '@angular/cdk/bidi';
2020
import {Overlay} from '@angular/cdk/overlay';
21-
import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
21+
import {
22+
CdkColumnDef,
23+
_CoalescedStyleScheduler,
24+
_COALESCED_STYLE_SCHEDULER,
25+
} from '@angular/cdk/table';
2226
import {
2327
ColumnResize,
2428
ColumnResizeNotifierSource,
@@ -52,7 +56,8 @@ export class MatDefaultResizable extends AbstractMatResizable {
5256
protected readonly overlay: Overlay,
5357
protected readonly resizeNotifier: ColumnResizeNotifierSource,
5458
protected readonly resizeStrategy: ResizeStrategy,
55-
protected readonly styleScheduler: _CoalescedStyleScheduler,
59+
@Inject(_COALESCED_STYLE_SCHEDULER)
60+
protected readonly styleScheduler: _CoalescedStyleScheduler,
5661
protected readonly viewContainerRef: ViewContainerRef,
5762
protected readonly changeDetectorRef: ChangeDetectorRef) {
5863
super();

‎src/material-experimental/column-resize/resizable-directives/resizable.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ import {
1818
import {DOCUMENT} from '@angular/common';
1919
import {Directionality} from '@angular/cdk/bidi';
2020
import {Overlay} from '@angular/cdk/overlay';
21-
import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
21+
import {
22+
CdkColumnDef,
23+
_CoalescedStyleScheduler,
24+
_COALESCED_STYLE_SCHEDULER,
25+
} from '@angular/cdk/table';
2226
import {
2327
ColumnResize,
2428
ColumnResizeNotifierSource,
@@ -51,7 +55,8 @@ export class MatResizable extends AbstractMatResizable {
5155
protected readonly overlay: Overlay,
5256
protected readonly resizeNotifier: ColumnResizeNotifierSource,
5357
protected readonly resizeStrategy: ResizeStrategy,
54-
protected readonly styleScheduler: _CoalescedStyleScheduler,
58+
@Inject(_COALESCED_STYLE_SCHEDULER)
59+
protected readonly styleScheduler: _CoalescedStyleScheduler,
5560
protected readonly viewContainerRef: ViewContainerRef,
5661
protected readonly changeDetectorRef: ChangeDetectorRef) {
5762
super();

‎src/material-experimental/column-resize/resize-strategy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {Inject, Injectable, Provider} from '@angular/core';
1010
import {DOCUMENT} from '@angular/common';
11-
import {CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
11+
import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table';
1212

1313
import {
1414
ColumnResize,
@@ -26,7 +26,7 @@ export {TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER};
2626
export class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
2727
constructor(
2828
columnResize: ColumnResize,
29-
styleScheduler: _CoalescedStyleScheduler,
29+
@Inject(_COALESCED_STYLE_SCHEDULER) styleScheduler: _CoalescedStyleScheduler,
3030
table: CdkTable<unknown>,
3131
@Inject(DOCUMENT) document: any) {
3232
super(columnResize, styleScheduler, table, document);

‎src/material-experimental/mdc-table/table.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
*/
88

99
import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
10-
import {CDK_TABLE_TEMPLATE, CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
10+
import {
11+
CDK_TABLE_TEMPLATE,
12+
CdkTable,
13+
_CoalescedStyleScheduler,
14+
_COALESCED_STYLE_SCHEDULER,
15+
} from '@angular/cdk/table';
1116
import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
1217

1318
@Component({
@@ -21,7 +26,7 @@ import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cd
2126
},
2227
providers: [
2328
{provide: CdkTable, useExisting: MatTable},
24-
_CoalescedStyleScheduler,
29+
{provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
2530
// TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code
2631
// is only included in the build if used.
2732
{provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},

‎src/material/table/table.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
CDK_TABLE_TEMPLATE,
1111
CdkTable,
1212
CDK_TABLE,
13-
_CoalescedStyleScheduler
13+
_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER
1414
} from '@angular/cdk/table';
1515
import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
1616
import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
@@ -33,7 +33,7 @@ import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cd
3333
{provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
3434
{provide: CdkTable, useExisting: MatTable},
3535
{provide: CDK_TABLE, useExisting: MatTable},
36-
_CoalescedStyleScheduler,
36+
{provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
3737
],
3838
encapsulation: ViewEncapsulation.None,
3939
// See note on CdkTable for explanation on why this uses the default change detection strategy.

0 commit comments

Comments
 (0)