Skip to content

Commit becdd68

Browse files
chenc041simplejason
chenc041
and
simplejason
authored
fix(module:pagination): add ul tag (#7500)
* fix(module:pagination): add ul tag * fix(module:pagination): sync dom structure with antd * fix(module:pagination): resolve test case failed * fix(module:pagination): resolve reviewed change requested * fix(module:pagination): pagination-simple add ant-pagination class name * fix(module:pagination): rollback pagination class Co-authored-by: simplejason <simplejason.coder@gmail.com>
1 parent a142eb2 commit becdd68

4 files changed

Lines changed: 74 additions & 67 deletions

File tree

‎components/pagination/pagination-default.component.ts‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,40 +38,42 @@ import { PaginationItemRenderContext } from './pagination.types';
3838
changeDetection: ChangeDetectionStrategy.OnPush,
3939
template: `
4040
<ng-template #containerTemplate>
41-
<li class="ant-pagination-total-text" *ngIf="showTotal">
42-
<ng-template
43-
[ngTemplateOutlet]="showTotal"
44-
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
45-
></ng-template>
46-
</li>
47-
<li
48-
*ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
49-
nz-pagination-item
50-
[locale]="locale"
51-
[type]="page.type"
52-
[index]="page.index"
53-
[disabled]="!!page.disabled"
54-
[itemRender]="itemRender"
55-
[active]="pageIndex === page.index"
56-
(gotoIndex)="jumpPage($event)"
57-
(diffIndex)="jumpDiff($event)"
58-
[direction]="dir"
59-
></li>
60-
<div
61-
nz-pagination-options
62-
*ngIf="showQuickJumper || showSizeChanger"
63-
[total]="total"
64-
[locale]="locale"
65-
[disabled]="disabled"
66-
[nzSize]="nzSize"
67-
[showSizeChanger]="showSizeChanger"
68-
[showQuickJumper]="showQuickJumper"
69-
[pageIndex]="pageIndex"
70-
[pageSize]="pageSize"
71-
[pageSizeOptions]="pageSizeOptions"
72-
(pageIndexChange)="onPageIndexChange($event)"
73-
(pageSizeChange)="onPageSizeChange($event)"
74-
></div>
41+
<ul>
42+
<li class="ant-pagination-total-text" *ngIf="showTotal">
43+
<ng-template
44+
[ngTemplateOutlet]="showTotal"
45+
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
46+
></ng-template>
47+
</li>
48+
<li
49+
*ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
50+
nz-pagination-item
51+
[locale]="locale"
52+
[type]="page.type"
53+
[index]="page.index"
54+
[disabled]="!!page.disabled"
55+
[itemRender]="itemRender"
56+
[active]="pageIndex === page.index"
57+
(gotoIndex)="jumpPage($event)"
58+
(diffIndex)="jumpDiff($event)"
59+
[direction]="dir"
60+
></li>
61+
<li
62+
nz-pagination-options
63+
*ngIf="showQuickJumper || showSizeChanger"
64+
[total]="total"
65+
[locale]="locale"
66+
[disabled]="disabled"
67+
[nzSize]="nzSize"
68+
[showSizeChanger]="showSizeChanger"
69+
[showQuickJumper]="showQuickJumper"
70+
[pageIndex]="pageIndex"
71+
[pageSize]="pageSize"
72+
[pageSizeOptions]="pageSizeOptions"
73+
(pageIndexChange)="onPageIndexChange($event)"
74+
(pageSizeChange)="onPageSizeChange($event)"
75+
></li>
76+
</ul>
7577
</ng-template>
7678
`
7779
})

‎components/pagination/pagination-options.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { toNumber } from 'ng-zorro-antd/core/util';
1818
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
1919

2020
@Component({
21-
selector: 'div[nz-pagination-options]',
21+
selector: 'li[nz-pagination-options]',
2222
preserveWhitespaces: false,
2323
encapsulation: ViewEncapsulation.None,
2424
changeDetection: ChangeDetectionStrategy.OnPush,

‎components/pagination/pagination-simple.component.ts‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,29 +38,31 @@ import { PaginationItemRenderContext } from './pagination.types';
3838
changeDetection: ChangeDetectionStrategy.OnPush,
3939
template: `
4040
<ng-template #containerTemplate>
41-
<li
42-
nz-pagination-item
43-
[attr.title]="locale.prev_page"
44-
[disabled]="isFirstIndex"
45-
[direction]="dir"
46-
(click)="prePage()"
47-
type="prev"
48-
[itemRender]="itemRender"
49-
></li>
50-
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
51-
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
52-
<span class="ant-pagination-slash">/</span>
53-
{{ lastIndex }}
54-
</li>
55-
<li
56-
nz-pagination-item
57-
[attr.title]="locale?.next_page"
58-
[disabled]="isLastIndex"
59-
[direction]="dir"
60-
(click)="nextPage()"
61-
type="next"
62-
[itemRender]="itemRender"
63-
></li>
41+
<ul>
42+
<li
43+
nz-pagination-item
44+
[attr.title]="locale.prev_page"
45+
[disabled]="isFirstIndex"
46+
[direction]="dir"
47+
(click)="prePage()"
48+
type="prev"
49+
[itemRender]="itemRender"
50+
></li>
51+
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
52+
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
53+
<span class="ant-pagination-slash">/</span>
54+
{{ lastIndex }}
55+
</li>
56+
<li
57+
nz-pagination-item
58+
[attr.title]="locale?.next_page"
59+
[disabled]="isLastIndex"
60+
[direction]="dir"
61+
(click)="nextPage()"
62+
type="next"
63+
[itemRender]="itemRender"
64+
></li>
65+
</ul>
6466
</ng-template>
6567
`
6668
})

‎components/pagination/pagination.spec.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,21 @@ describe('pagination', () => {
3939
let testComponent: NzTestPaginationComponent;
4040
let pagination: DebugElement;
4141
let paginationElement: HTMLElement;
42+
let paginationRootElement: HTMLElement;
4243

4344
beforeEach(() => {
4445
fixture = TestBed.createComponent(NzTestPaginationComponent);
4546
testComponent = fixture.debugElement.componentInstance;
4647
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
4748
fixture.detectChanges();
48-
paginationElement = pagination.nativeElement;
49+
paginationRootElement = pagination.nativeElement;
50+
paginationElement = pagination.nativeElement.querySelector('ul')!;
4951
});
5052

5153
describe('not simple mode', () => {
5254
it('should className correct', () => {
5355
fixture.detectChanges();
54-
expect(paginationElement.classList.contains('ant-pagination')).toBe(true);
56+
expect(paginationRootElement.classList.contains('ant-pagination')).toBe(true);
5557
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
5658
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-disabled')).toBe(true);
5759
expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
@@ -64,7 +66,7 @@ describe('pagination', () => {
6466
it('should small size className correct', () => {
6567
testComponent.size = 'small';
6668
fixture.detectChanges();
67-
expect(paginationElement.classList.contains('mini')).toBe(true);
69+
expect(paginationRootElement.classList.contains('mini')).toBe(true);
6870
});
6971

7072
it('should pageIndex change work', () => {
@@ -237,18 +239,19 @@ describe('pagination', () => {
237239
fixture.detectChanges();
238240
testComponent.disabled = true;
239241
fixture.detectChanges();
240-
expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
242+
expect(paginationRootElement.classList.contains('ant-pagination-disabled')).toBe(true);
241243
});
242244
});
243245

244246
describe('simple mode', () => {
245247
beforeEach(() => {
246248
testComponent.simple = true;
247249
fixture.detectChanges();
248-
paginationElement = pagination.nativeElement;
250+
paginationRootElement = pagination.nativeElement;
251+
paginationElement = pagination.nativeElement.querySelector('ul')!;
249252
});
250253
it('should simple className work', () => {
251-
expect(paginationElement.classList.contains('ant-pagination-simple')).toBe(true);
254+
expect(paginationRootElement.classList.contains('ant-pagination-simple')).toBe(true);
252255
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
253256
expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
254257
});
@@ -313,7 +316,7 @@ describe('pagination', () => {
313316
fixture = TestBed.createComponent(NzTestPaginationRenderComponent);
314317
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
315318
fixture.detectChanges();
316-
paginationElement = pagination.nativeElement;
319+
paginationElement = pagination.nativeElement.querySelector('ul')!;
317320
});
318321
it('should render correct', () => {
319322
fixture.detectChanges();
@@ -334,7 +337,7 @@ describe('pagination', () => {
334337
testComponent = fixture.debugElement.componentInstance;
335338
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
336339
fixture.detectChanges();
337-
paginationElement = pagination.nativeElement;
340+
paginationElement = pagination.nativeElement.querySelector('ul')!;
338341
});
339342

340343
it('should render correct', () => {
@@ -389,7 +392,7 @@ describe('pagination', () => {
389392
fixture = TestBed.createComponent(NzTestPaginationRtlComponent);
390393
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
391394
fixture.detectChanges();
392-
paginationElement = pagination.nativeElement;
395+
paginationElement = pagination.nativeElement.querySelector('ul')!;
393396
});
394397

395398
it('should pagination className correct on dir change', () => {

0 commit comments

Comments
 (0)