Skip to content

Commit

Permalink
fix(module:pagination): add ul tag (#7500)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
chenc041 and simplejason authored Aug 23, 2022
1 parent a142eb2 commit becdd68
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 67 deletions.
70 changes: 36 additions & 34 deletions components/pagination/pagination-default.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,40 +38,42 @@ import { PaginationItemRenderContext } from './pagination.types';
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #containerTemplate>
<li class="ant-pagination-total-text" *ngIf="showTotal">
<ng-template
[ngTemplateOutlet]="showTotal"
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
></ng-template>
</li>
<li
*ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
nz-pagination-item
[locale]="locale"
[type]="page.type"
[index]="page.index"
[disabled]="!!page.disabled"
[itemRender]="itemRender"
[active]="pageIndex === page.index"
(gotoIndex)="jumpPage($event)"
(diffIndex)="jumpDiff($event)"
[direction]="dir"
></li>
<div
nz-pagination-options
*ngIf="showQuickJumper || showSizeChanger"
[total]="total"
[locale]="locale"
[disabled]="disabled"
[nzSize]="nzSize"
[showSizeChanger]="showSizeChanger"
[showQuickJumper]="showQuickJumper"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(pageIndexChange)="onPageIndexChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
></div>
<ul>
<li class="ant-pagination-total-text" *ngIf="showTotal">
<ng-template
[ngTemplateOutlet]="showTotal"
[ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
></ng-template>
</li>
<li
*ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
nz-pagination-item
[locale]="locale"
[type]="page.type"
[index]="page.index"
[disabled]="!!page.disabled"
[itemRender]="itemRender"
[active]="pageIndex === page.index"
(gotoIndex)="jumpPage($event)"
(diffIndex)="jumpDiff($event)"
[direction]="dir"
></li>
<li
nz-pagination-options
*ngIf="showQuickJumper || showSizeChanger"
[total]="total"
[locale]="locale"
[disabled]="disabled"
[nzSize]="nzSize"
[showSizeChanger]="showSizeChanger"
[showQuickJumper]="showQuickJumper"
[pageIndex]="pageIndex"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(pageIndexChange)="onPageIndexChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
></li>
</ul>
</ng-template>
`
})
Expand Down
2 changes: 1 addition & 1 deletion components/pagination/pagination-options.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { toNumber } from 'ng-zorro-antd/core/util';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';

@Component({
selector: 'div[nz-pagination-options]',
selector: 'li[nz-pagination-options]',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down
48 changes: 25 additions & 23 deletions components/pagination/pagination-simple.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,29 +38,31 @@ import { PaginationItemRenderContext } from './pagination.types';
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template #containerTemplate>
<li
nz-pagination-item
[attr.title]="locale.prev_page"
[disabled]="isFirstIndex"
[direction]="dir"
(click)="prePage()"
type="prev"
[itemRender]="itemRender"
></li>
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
<span class="ant-pagination-slash">/</span>
{{ lastIndex }}
</li>
<li
nz-pagination-item
[attr.title]="locale?.next_page"
[disabled]="isLastIndex"
[direction]="dir"
(click)="nextPage()"
type="next"
[itemRender]="itemRender"
></li>
<ul>
<li
nz-pagination-item
[attr.title]="locale.prev_page"
[disabled]="isFirstIndex"
[direction]="dir"
(click)="prePage()"
type="prev"
[itemRender]="itemRender"
></li>
<li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
<input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
<span class="ant-pagination-slash">/</span>
{{ lastIndex }}
</li>
<li
nz-pagination-item
[attr.title]="locale?.next_page"
[disabled]="isLastIndex"
[direction]="dir"
(click)="nextPage()"
type="next"
[itemRender]="itemRender"
></li>
</ul>
</ng-template>
`
})
Expand Down
21 changes: 12 additions & 9 deletions components/pagination/pagination.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,21 @@ describe('pagination', () => {
let testComponent: NzTestPaginationComponent;
let pagination: DebugElement;
let paginationElement: HTMLElement;
let paginationRootElement: HTMLElement;

beforeEach(() => {
fixture = TestBed.createComponent(NzTestPaginationComponent);
testComponent = fixture.debugElement.componentInstance;
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
fixture.detectChanges();
paginationElement = pagination.nativeElement;
paginationRootElement = pagination.nativeElement;
paginationElement = pagination.nativeElement.querySelector('ul')!;
});

describe('not simple mode', () => {
it('should className correct', () => {
fixture.detectChanges();
expect(paginationElement.classList.contains('ant-pagination')).toBe(true);
expect(paginationRootElement.classList.contains('ant-pagination')).toBe(true);
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-disabled')).toBe(true);
expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
Expand All @@ -64,7 +66,7 @@ describe('pagination', () => {
it('should small size className correct', () => {
testComponent.size = 'small';
fixture.detectChanges();
expect(paginationElement.classList.contains('mini')).toBe(true);
expect(paginationRootElement.classList.contains('mini')).toBe(true);
});

it('should pageIndex change work', () => {
Expand Down Expand Up @@ -237,18 +239,19 @@ describe('pagination', () => {
fixture.detectChanges();
testComponent.disabled = true;
fixture.detectChanges();
expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
expect(paginationRootElement.classList.contains('ant-pagination-disabled')).toBe(true);
});
});

describe('simple mode', () => {
beforeEach(() => {
testComponent.simple = true;
fixture.detectChanges();
paginationElement = pagination.nativeElement;
paginationRootElement = pagination.nativeElement;
paginationElement = pagination.nativeElement.querySelector('ul')!;
});
it('should simple className work', () => {
expect(paginationElement.classList.contains('ant-pagination-simple')).toBe(true);
expect(paginationRootElement.classList.contains('ant-pagination-simple')).toBe(true);
expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
});
Expand Down Expand Up @@ -313,7 +316,7 @@ describe('pagination', () => {
fixture = TestBed.createComponent(NzTestPaginationRenderComponent);
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
fixture.detectChanges();
paginationElement = pagination.nativeElement;
paginationElement = pagination.nativeElement.querySelector('ul')!;
});
it('should render correct', () => {
fixture.detectChanges();
Expand All @@ -334,7 +337,7 @@ describe('pagination', () => {
testComponent = fixture.debugElement.componentInstance;
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
fixture.detectChanges();
paginationElement = pagination.nativeElement;
paginationElement = pagination.nativeElement.querySelector('ul')!;
});

it('should render correct', () => {
Expand Down Expand Up @@ -389,7 +392,7 @@ describe('pagination', () => {
fixture = TestBed.createComponent(NzTestPaginationRtlComponent);
pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
fixture.detectChanges();
paginationElement = pagination.nativeElement;
paginationElement = pagination.nativeElement.querySelector('ul')!;
});

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

0 comments on commit becdd68

Please sign in to comment.