-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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.
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
feat(pagination): add initial pagination component #5156
Changes from all commits
8fc6163
bcfbcd9
666d7d5
8181773
2151297
dd413cf
f36ba2d
e273307
9819db8
c4cce4c
96ccd54
8ae1ffc
0246d1b
3b6fb01
e77d043
7f57b5e
1a52793
746c3db
d52548a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,58 @@ | ||
import {CollectionViewer, DataSource} from '@angular/material'; | ||
import {CollectionViewer, DataSource, MdPaginator} from '@angular/material'; | ||
import {Observable} from 'rxjs/Observable'; | ||
import {PeopleDatabase, UserData} from './people-database'; | ||
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; | ||
|
||
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) { | ||
constructor(private _peopleDatabase: PeopleDatabase, | ||
private _paginator: MdPaginator) { | ||
super(); | ||
|
||
// Subscribe to page changes and database changes by clearing the cached data and | ||
// determining the updated display data. | ||
Observable.merge(this._paginator.page, this._peopleDatabase.dataChange).subscribe(() => { | ||
this._renderedData = []; | ||
this.updateDisplayData(); | ||
}); | ||
} | ||
|
||
connect(collectionViewer: CollectionViewer): Observable<UserData[]> { | ||
const changeStreams = Observable.combineLatest( | ||
collectionViewer.viewChange, | ||
this._peopleDatabase.dataChange); | ||
return changeStreams.map((result: any[]) => { | ||
const view: {start: number, end: number} = result[0]; | ||
this.updateDisplayData(); | ||
|
||
// 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 = this._peopleDatabase.data.length; | ||
const streams = [collectionViewer.viewChange, this._displayData]; | ||
return Observable.combineLatest(streams) | ||
.map((results: [{start: number, end: number}, UserData[]]) => { | ||
const [view, data] = results; | ||
|
||
const buffer = 20; | ||
let rangeStart = Math.max(0, view.start - buffer); | ||
let rangeEnd = Math.min(this._peopleDatabase.data.length, view.end + buffer); | ||
// 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; | ||
|
||
for (let i = rangeStart; i < rangeEnd; i++) { | ||
this._renderedData[i] = this._peopleDatabase.data[i]; | ||
} | ||
const buffer = 20; | ||
let rangeStart = Math.max(0, view.start - buffer); | ||
let rangeEnd = Math.min(data.length, view.end + buffer); | ||
|
||
return this._renderedData; | ||
}); | ||
for (let i = rangeStart; i < rangeEnd; i++) { | ||
this._renderedData[i] = data[i]; | ||
} | ||
|
||
return this._renderedData; | ||
}); | ||
} | ||
|
||
updateDisplayData() { | ||
const data = this._peopleDatabase.data.slice(); | ||
|
||
// 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); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
@import '../core/theming/palette'; | ||
@import '../core/theming/theming'; | ||
@import '../core/typography/typography-utils'; | ||
|
||
|
||
@mixin mat-paginator-theme($theme) { | ||
$foreground: map-get($theme, foreground); | ||
|
||
.mat-paginator, | ||
.mat-paginator-page-size .mat-select-trigger { | ||
color: mat-color($foreground, secondary-text); | ||
} | ||
|
||
.mat-paginator-increment, | ||
.mat-paginator-decrement { | ||
border-top: 2px solid mat-color($foreground, 'icon'); | ||
border-right: 2px solid mat-color($foreground, 'icon'); | ||
} | ||
|
||
.mat-icon-button[disabled] { | ||
.mat-paginator-increment, | ||
.mat-paginator-decrement { | ||
border-color: mat-color($foreground, 'disabled'); | ||
} | ||
} | ||
} | ||
|
||
@mixin mat-paginator-typography($config) { | ||
.mat-paginator { | ||
font: { | ||
family: mat-font-family($config); | ||
size: mat-font-size($config, caption); | ||
} | ||
} | ||
|
||
.mat-paginator-page-size .mat-select-trigger { | ||
font: { | ||
family: mat-font-family($config); | ||
size: mat-font-size($config, caption); | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/** | ||
* @license | ||
* Copyright Google Inc. All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {NgModule} from '@angular/core'; | ||
import {CommonModule} from '@angular/common'; | ||
import {FormsModule} from '@angular/forms'; | ||
import {MdCommonModule, OverlayModule} from '../core'; | ||
import {MdButtonModule} from '../button/index'; | ||
import {MdSelectModule} from '../select/index'; | ||
import {MdPaginator} from './paginator'; | ||
import {MdPaginatorIntl} from './paginator-intl'; | ||
import {MdTooltipModule} from '../tooltip/index'; | ||
|
||
|
||
@NgModule({ | ||
imports: [ | ||
CommonModule, | ||
FormsModule, | ||
MdButtonModule, | ||
MdSelectModule, | ||
MdTooltipModule, | ||
], | ||
exports: [MdPaginator], | ||
declarations: [MdPaginator], | ||
providers: [MdPaginatorIntl], | ||
}) | ||
export class MdPaginatorModule {} | ||
|
||
|
||
export * from './paginator'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
/** | ||
* @license | ||
* Copyright Google Inc. All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {Injectable} from '@angular/core'; | ||
|
||
/** | ||
* To modify the labels and text displayed, create a new instance of MdPaginatorIntl and | ||
* include it in a custom provider | ||
*/ | ||
@Injectable() | ||
export class MdPaginatorIntl { | ||
/** A label for the page size selector. */ | ||
itemsPerPageLabel = 'Items per page:'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Would having these as inputs to the paginator with default values make more sense? For my understanding of this class as well, if I only wanted to change the "Items per page" text, I can only override that one field? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. When looking at this from an internationalization point of view, I think the injected class makes more sense (e.g. when a RTL language should be displayed). Though from a customization point of view, an @jelbourn Paul and Erin both brought up some points about this class, any thoughts on renaming or changing? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. From my POV, the most common thing I will want to do is set the i18n text so that "next page" becomes "Página siguiente" or whatever language the user is in. I will never be able to use this default class, but for someone who just wants to render a table, it would be useful, although not sure if more useful than a default input. For RTL, we rely primarily on CSS, which you have covered. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We use injection for i18n because it's something that's defined once and doesn't need to be change-detected / have generated code. |
||
|
||
/** A label for the button that increments the current page. */ | ||
nextPageLabel = 'Next page'; | ||
|
||
/** A label for the button that decrements the current page. */ | ||
previousPageLabel = 'Previous page'; | ||
|
||
/** A label for the range of items within the current page and the length of the whole list. */ | ||
getRangeLabel = (page: number, pageSize: number, length: number) => { | ||
if (length == 0 || pageSize == 0) { return `0 of ${length}`; } | ||
|
||
length = Math.max(length, 0); | ||
|
||
const startIndex = page * pageSize; | ||
|
||
// If the start index exceeds the list length, do not try and fix the end index to the end. | ||
const endIndex = startIndex < length ? | ||
Math.min(startIndex + pageSize, length) : | ||
startIndex + pageSize; | ||
|
||
return `${startIndex + 1} - ${endIndex} of ${length}`; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<div class="mat-paginator-page-size"> | ||
<div class="mat-paginator-page-size-label"> | ||
{{_intl.itemsPerPageLabel}} | ||
</div> | ||
|
||
<md-select *ngIf="_displayedPageSizeOptions.length > 1" | ||
class="mat-paginator-page-size-select" | ||
[ngModel]="pageSize" | ||
[aria-label]="_intl.itemsPerPageLabel" | ||
(change)="_changePageSize($event.value)"> | ||
<md-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption"> | ||
{{pageSizeOption}} | ||
</md-option> | ||
</md-select> | ||
|
||
<div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div> | ||
</div> | ||
|
||
<div class="mat-paginator-range-label"> | ||
{{_intl.getRangeLabel(pageIndex, pageSize, length)}} | ||
</div> | ||
|
||
<button md-icon-button | ||
class="mat-paginator-navigation-previous" | ||
(click)="previousPage()" | ||
[attr.aria-label]="_intl.previousPageLabel" | ||
[mdTooltip]="_intl.previousPageLabel" | ||
[mdTooltipPosition]="'above'" | ||
[disabled]="!hasPreviousPage()"> | ||
<div class="mat-paginator-increment"></div> | ||
</button> | ||
<button md-icon-button | ||
class="mat-paginator-navigation-next" | ||
(click)="nextPage()" | ||
[attr.aria-label]="_intl.nextPageLabel" | ||
[mdTooltip]="_intl.nextPageLabel" | ||
[mdTooltipPosition]="'above'" | ||
[disabled]="!hasNextPage()"> | ||
<div class="mat-paginator-decrement"></div> | ||
</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this provider be treated as a singleton? Since we don't distinguish between
forRoot()
I think there would be multiple instances of this provider when lazy loading.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's correct, it'll have multiple instances though that may be desired for the user if they want to customize their paginator not on internationalization but on the type of data. E.g. instead of "Items per page:" they can put "Users per page:".
@jelbourn what do you think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's a good argument. Even though it kinda sounds confusing when the provider is called "Intl"