Skip to content

Commit e430a4c

Browse files
cleanup
1 parent 9eee000 commit e430a4c

File tree

15 files changed

+30
-26
lines changed

15 files changed

+30
-26
lines changed

src/cdk-experimental/config.bzl

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ CDK_EXPERIMENTAL_ENTRYPOINTS = [
66
"menu",
77
"listbox",
88
"popover-edit",
9-
"scrollable-table-body",
9+
"table",
1010
"scrolling",
1111
"selection",
1212
"table-scroll-container",

src/cdk-experimental/table/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ ng_test_library(
2424
exclude = ["**/*.e2e.spec.ts"],
2525
),
2626
deps = [
27-
":scrollable-table-body",
27+
":table",
2828
"//src/cdk/table",
2929
],
3030
)

src/cdk-experimental/table/scrollable-table-body-layout.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import {
1919
* A {@link _TableLayoutStrategy} that enables scrollable body content for flex tables.
2020
*/
2121
@Injectable()
22-
class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
22+
export class ScrollableTableBodyLayoutStrategy<T> implements _TableLayoutStrategy<T> {
2323
private readonly _document: Document;
24-
private defaultLayout: _StandardTableLayoutStrategy;
24+
private defaultLayout: _StandardTableLayoutStrategy<T>;
2525
private _pendingMaxHeight = 'none';
2626
private _scrollViewport?: HTMLElement;
2727
readonly headerCssClass = 'cdk-table-scrollable-table-header';
@@ -37,7 +37,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
3737
* Returns the DOM structure for a native table. Scrollable body content is not supported for
3838
* native tables. Return `null` to use the default {@link CdkTable} native table layout.
3939
*/
40-
getNativeLayout(table: CdkTable<unknown>): DocumentFragment {
40+
getNativeLayout(table: CdkTable<T>): DocumentFragment {
4141
return this.defaultLayout.getNativeLayout(table);
4242
}
4343

@@ -46,7 +46,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
4646
* (header, body, footer) is wrapped in a separate container. The specified max height is applied
4747
* to the body row outlet to make its content scrollable.
4848
*/
49-
getFlexLayout(table: CdkTable<unknown>): DocumentFragment {
49+
getFlexLayout(table: CdkTable<T>): DocumentFragment {
5050
const documentFragment = this._document.createDocumentFragment();
5151
const sections = [
5252
{cssClass: this.headerCssClass, outlets: [table._headerRowOutlet]},
@@ -64,7 +64,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
6464
documentFragment.appendChild(element);
6565
}
6666

67-
this._scrollViewport = documentFragment.querySelector(`.${this.bodyCssClass}`);
67+
this._scrollViewport = documentFragment.querySelector(`.${this.bodyCssClass}`) as HTMLElement;
6868
this._scrollViewport!.style.overflow = 'auto';
6969
this._applyMaxHeight(this._scrollViewport!, this._pendingMaxHeight);
7070

@@ -94,7 +94,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
9494
{provide: _TABLE_LAYOUT_STRATEGY, useClass: ScrollableTableBodyLayoutStrategy},
9595
]
9696
})
97-
export class CdkScrollableTableBody {
97+
export class CdkScrollableTableBody<T> {
9898
/**
9999
* Show a scroll bar if the table's body exceeds this height. The height may be specified with
100100
* any valid CSS unit of measurement.
@@ -110,6 +110,6 @@ export class CdkScrollableTableBody {
110110
private _maxHeight = '';
111111

112112
constructor(@Inject(_TABLE_LAYOUT_STRATEGY)
113-
private readonly _layoutStrategy: ScrollableTableBodyLayoutStrategy) {
113+
private readonly _layoutStrategy: ScrollableTableBodyLayoutStrategy<T>) {
114114
}
115115
}

src/cdk/table/table-layout-strategy.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ import {CdkTable} from '@angular/cdk/table/table';
1111
import {DOCUMENT} from '@angular/common';
1212

1313
/** Interface for a service that constructs the DOM structure for a {@link CdkTable}. */
14-
export interface _TableLayoutStrategy {
14+
export interface _TableLayoutStrategy<T> {
1515
/** Constructs the DOM structure for a native table. */
16-
getNativeLayout(table: CdkTable<unknown>): DocumentFragment;
16+
getNativeLayout(table: CdkTable<T>): DocumentFragment;
1717
/** Constructs the DOM structure for a flex table. */
18-
getFlexLayout(table: CdkTable<unknown>): DocumentFragment;
18+
getFlexLayout(table: CdkTable<T>): DocumentFragment;
1919
}
2020

2121
/** Injection token for {@link _TableLayoutStrategy}. */
2222
export const _TABLE_LAYOUT_STRATEGY =
23-
new InjectionToken<_TableLayoutStrategy>('_TableLayoutStrategy');
23+
new InjectionToken<_TableLayoutStrategy<unknown>>('_TableLayoutStrategy');
2424

2525

26-
export class _StandardTableLayoutStrategy implements _TableLayoutStrategy {
26+
export class _StandardTableLayoutStrategy<T> implements _TableLayoutStrategy<T> {
2727
private readonly _document: Document;
2828

2929
constructor(@Inject(DOCUMENT) document: any) {

src/cdk/table/table.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
507507
// tslint:disable-next-line: lightweight-tokens
508508
@Optional() private readonly _viewportRuler?: ViewportRuler,
509509
@Optional() @Inject(_TABLE_LAYOUT_STRATEGY)
510-
@Optional() private readonly _layoutStrategy?: _TableLayoutStrategy|null) {
510+
@Optional() private readonly _layoutStrategy?: _TableLayoutStrategy<T>|null) {
511511
if (!role) {
512512
this._elementRef.nativeElement.setAttribute('role', 'grid');
513513
}

src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ ng_module(
1111
]),
1212
module_name = "@angular/components-examples/cdk-experimental/scrollable-table-body",
1313
deps = [
14-
"//src/cdk-experimental/scrollable-table-body",
14+
"//src/cdk-experimental/table",
1515
"//src/cdk/table",
1616
"//src/material/button",
1717
],

src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ ng_module(
1111
]),
1212
module_name = "@angular/components-examples/material-experimental/scrollable-table-body",
1313
deps = [
14-
"//src/cdk-experimental/scrollable-table-body",
14+
"//src/cdk-experimental/table",
15+
"//src/material-experimental/table",
1516
"//src/material/button",
1617
"//src/material/table",
1718
],

src/components-examples/material-experimental/scrollable-table-body/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from './mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example';
88
import {MatTableModule} from '@angular/material/table';
99
import {MatButtonModule} from '@angular/material/button';
10+
import {MatScrollableTableBodyModule} from '@angular/material-experimental/table';
1011

1112
export {
1213
MatScrollableTableBodyFlexExample,
@@ -19,6 +20,7 @@ const EXAMPLES = [
1920
@NgModule({
2021
imports: [
2122
CdkScrollableTableBodyModule,
23+
MatScrollableTableBodyModule,
2224
MatButtonModule,
2325
MatTableModule,
2426
],

src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<button mat-raised-button (click)="nextMaxHeight()">Change max height</button>
44

55
<p>Max Height: {{maxHeight}}</p>
6-
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" [scrollableBody]="maxHeight">
6+
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
77
<!-- Position Column -->
88
<ng-container matColumnDef="position">
99
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

src/dev-app/scrollable-table-body/BUILD

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ ng_module(
66
name = "scrollable-table-body",
77
srcs = glob(["**/*.ts"]),
88
deps = [
9-
"//src/components-examples/cdk-experimental/table",
10-
"//src/components-examples/material-experimental/table",
9+
"//src/components-examples/material-experimental/scrollable-table-body",
1110
"//src/dev-app/example",
1211
"@npm//@angular/forms",
1312
"@npm//@angular/router",

src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
import {NgModule} from '@angular/core';
1010
import {RouterModule} from '@angular/router';
1111
import {ScrollableTableBodyDemo} from './scrollable-table-body-demo';
12-
import {
12+
/*import {
1313
CdkScrollableTableBodyExamplesModule,
14-
} from '@angular/components-examples/cdk-experimental/scrollable-table-body';
14+
} from '@angular/components-examples/cdk-experimental/scrollable-table-body';*/
1515
import {
1616
MatScrollableTableBodyExamplesModule,
1717
} from '@angular/components-examples/material-experimental/scrollable-table-body';
1818

1919
@NgModule({
2020
imports: [
21-
CdkScrollableTableBodyExamplesModule,
21+
// CdkScrollableTableBodyExamplesModule,
2222
MatScrollableTableBodyExamplesModule,
2323
RouterModule.forChild([{path: '', component: ScrollableTableBodyDemo}]),
2424
],

src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {Component} from '@angular/core';
1111
@Component({
1212
template: `
1313
<h3 id="cdk-scrollable-table-body-flex">CDK scrollable-table-body with flex table</h3>
14-
<cdk-scrollable-table-body-flex-example></cdk-scrollable-table-body-flex-example>
14+
<!-- <cdk-scrollable-table-body-flex-example></cdk-scrollable-table-body-flex-example>-->
1515
1616
<h3 id="mat-scrollable-table-body-flex">Material scrollable-table-body with flex table</h3>
1717
<mat-scrollable-table-body-flex-example></mat-scrollable-table-body-flex-example>

src/material-experimental/config.bzl

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ entryPoints = [
4545
"mdc-tabs/testing",
4646
"menubar",
4747
"popover-edit",
48-
"scrollable-table-body",
48+
"table",
4949
"selection",
5050
]
5151

src/material-experimental/table/BUILD.bazel

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ ng_module(
1010
),
1111
module_name = "@angular/material-experimental/table",
1212
deps = [
13-
"//src/mat/table",
13+
"//src/material/table",
14+
"//src/cdk-experimental/table",
1415
"@npm//@angular/common",
1516
"@npm//@angular/core",
1617
"@npm//rxjs",

src/material-experimental/table/scrollable-table-body-layout.ts

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {Directive} from '@angular/core';
1010
import {
1111
_TABLE_LAYOUT_STRATEGY,
1212
} from '@angular/cdk/table/table-layout-strategy';
13+
import {ScrollableTableBodyLayoutStrategy} from '@angular/cdk-experimental/table';
1314

1415
/** A directive that enables scrollable body content for flex tables. */
1516
@Directive({

0 commit comments

Comments
 (0)