skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(table): simplify data source connect (#5384)

Browse Source
This commit is contained in:
Andrew Seguin
2017-06-29 10:38:18 -07:00
committed by tinayuangao
parent 17c4a44683
commit 4b9882310e
1 changed files with 14 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/data-table/person-data-source.ts
+14 -53
View File
@@ -1,70 +1,31 @@
import {CollectionViewer, DataSource, MdPaginator, MdSort} from '@angular/material';
import {DataSource, MdPaginator, MdSort} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import {PeopleDatabase, UserData} from './people-database';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/combineLatest';
export class PersonDataSource extends DataSource<any> {
/** Data that should be displayed by the table. */
_displayData = new BehaviorSubject<UserData[]>([]);
/** Cached data provided by the display data. */
_renderedData: any[] = [];
constructor(private _peopleDatabase: PeopleDatabase,
private _paginator: MdPaginator,
private _sort: MdSort) {
super();
}
// Subscribe to paging, sorting, and database changes by clearing the cached data and
// determining the updated display data.
Observable.merge(this._paginator.page,
this._peopleDatabase.dataChange,
this._sort.mdSortChange).subscribe(() => {
this._renderedData = [];
this.updateDisplayData();
connect(): Observable<UserData[]> {
const displayDataChanges = [
this._paginator.page,
this._sort.mdSortChange,
this._peopleDatabase.dataChange
];
return Observable.merge(...displayDataChanges).map(() => {
const data = this.getSortedData();
// Grab the page's slice of data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
});
}
connect(collectionViewer: CollectionViewer): Observable<UserData[]> {
this.updateDisplayData();
const streams = [collectionViewer.viewChange, this._displayData];
return Observable.combineLatest(streams)
.map((results: [{start: number, end: number}, UserData[]]) => {
const [view, data] = results;
// Set the rendered rows length to the virtual page size. Fill in the data provided
// from the index start until the end index or pagination size, whichever is smaller.
this._renderedData.length = data.length;
const buffer = 20;
let rangeStart = Math.max(0, view.start - buffer);
let rangeEnd = Math.min(data.length, view.end + buffer);
for (let i = rangeStart; i < rangeEnd; i++) {
this._renderedData[i] = data[i];
}
return this._renderedData;
});
}
updateDisplayData() {
const data = this.getSortedData();
// Grab the page's slice of data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
const paginatedData = data.splice(startIndex, this._paginator.pageSize);
this._displayData.next(paginatedData);
}
/** Returns a sorted copy of the database data. */
getSortedData(): UserData[] {
const data = this._peopleDatabase.data.slice();