Skip to content

Commit e08aaa3

Browse files
spencer17xafc163
spencer17x
and
afc163
authored
fix: itemRender do not display empty elements (#527)
* fix: itemRender do not display empty elements * fix: extract variable * fix: extract variable * Update src/Pagination.tsx Co-authored-by: afc163 <afc163@gmail.com> * Update Pagination.tsx * Apply suggestions from code review * chore: pretier * chore: pretier * fix: add tests and fix jump page render --------- Co-authored-by: afc163 <afc163@gmail.com>
1 parent ed00cd3 commit e08aaa3

File tree

3 files changed

+122
-52
lines changed

3 files changed

+122
-52
lines changed

‎src/Pager.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ const Pager: React.FC<Props> = (props) => {
4949
onKeyPress(e, onClick, page);
5050
};
5151

52+
const pager = itemRender(page, 'page', <a rel="nofollow">{page}</a>);
53+
if (!pager) return null;
54+
5255
return (
5356
<li
5457
title={showTitle ? page.toString() : null}
@@ -57,7 +60,7 @@ const Pager: React.FC<Props> = (props) => {
5760
onKeyPress={handleKeyPress}
5861
tabIndex={0}
5962
>
60-
{itemRender(page, 'page', <a rel="nofollow">{page}</a>)}
63+
{pager}
6164
</li>
6265
);
6366
};

‎src/Pagination.tsx‎

Lines changed: 72 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ interface PaginationState {
7272
pageSize: number;
7373
}
7474

75-
function noop() {}
75+
function noop() {
76+
}
7677

7778
function isInteger(v: number) {
7879
const value = Number(v);
@@ -124,6 +125,7 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
124125
totalBoundaryShowSizeChanger: 50,
125126
};
126127
paginationNode = React.createRef<HTMLUListElement>();
128+
127129
constructor(props: PaginationProps) {
128130
super(props);
129131

@@ -529,6 +531,7 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
529531
);
530532
}
531533

534+
const prev = this.renderPrev(prevPage);
532535
return (
533536
<ul
534537
className={classNames(
@@ -542,18 +545,22 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
542545
{...dataOrAriaAttributeProps}
543546
>
544547
{totalText}
545-
<li
546-
title={showTitle ? locale.prev_page : null}
547-
onClick={this.prev}
548-
tabIndex={this.hasPrev() ? 0 : null}
549-
onKeyPress={this.runIfEnterPrev}
550-
className={classNames(`${prefixCls}-prev`, {
551-
[`${prefixCls}-disabled`]: !this.hasPrev(),
552-
})}
553-
aria-disabled={!this.hasPrev()}
554-
>
555-
{this.renderPrev(prevPage)}
556-
</li>
548+
{
549+
prev ? (
550+
<li
551+
title={showTitle ? locale.prev_page : null}
552+
onClick={this.prev}
553+
tabIndex={this.hasPrev() ? 0 : null}
554+
onKeyPress={this.runIfEnterPrev}
555+
className={classNames(`${prefixCls}-prev`, {
556+
[`${prefixCls}-disabled`]: !this.hasPrev(),
557+
})}
558+
aria-disabled={!this.hasPrev()}
559+
>
560+
{prev}
561+
</li>
562+
) : null
563+
}
557564
<li
558565
title={showTitle ? `${current}/${allPages}` : null}
559566
className={`${prefixCls}-simple-pager`}
@@ -616,9 +623,20 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
616623
} else {
617624
const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
618625
const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
626+
627+
const jumpPrevContent = itemRender(
628+
this.getJumpPrevPage(),
629+
'jump-prev',
630+
this.getItemIcon(jumpPrevIcon, 'prev page'),
631+
);
632+
const jumpNextContent = itemRender(
633+
this.getJumpNextPage(),
634+
'jump-next',
635+
this.getItemIcon(jumpNextIcon, 'next page'),
636+
);
619637
if (showPrevNextJumpers) {
620638
jumpPrev = (
621-
<li
639+
jumpPrevContent ? <li
622640
title={showTitle ? prevItemTitle : null}
623641
key="prev"
624642
onClick={this.jumpPrev}
@@ -628,15 +646,11 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
628646
[`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
629647
})}
630648
>
631-
{itemRender(
632-
this.getJumpPrevPage(),
633-
'jump-prev',
634-
this.getItemIcon(jumpPrevIcon, 'prev page'),
635-
)}
636-
</li>
649+
{jumpPrevContent}
650+
</li> : null
637651
);
638652
jumpNext = (
639-
<li
653+
jumpNextContent ? <li
640654
title={showTitle ? nextItemTitle : null}
641655
key="next"
642656
tabIndex={0}
@@ -646,12 +660,8 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
646660
[`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
647661
})}
648662
>
649-
{itemRender(
650-
this.getJumpNextPage(),
651-
'jump-next',
652-
this.getItemIcon(jumpNextIcon, 'next page'),
653-
)}
654-
</li>
663+
{jumpNextContent}
664+
</li> : null
655665
);
656666
}
657667
lastPager = (
@@ -739,6 +749,9 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
739749

740750
const prevDisabled = !this.hasPrev() || !allPages;
741751
const nextDisabled = !this.hasNext() || !allPages;
752+
753+
const prev = this.renderPrev(prevPage);
754+
const next = this.renderNext(nextPage);
742755
return (
743756
<ul
744757
className={classNames(prefixCls, className, {
@@ -749,31 +762,39 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
749762
{...dataOrAriaAttributeProps}
750763
>
751764
{totalText}
752-
<li
753-
title={showTitle ? locale.prev_page : null}
754-
onClick={this.prev}
755-
tabIndex={prevDisabled ? null : 0}
756-
onKeyPress={this.runIfEnterPrev}
757-
className={classNames(`${prefixCls}-prev`, {
758-
[`${prefixCls}-disabled`]: prevDisabled,
759-
})}
760-
aria-disabled={prevDisabled}
761-
>
762-
{this.renderPrev(prevPage)}
763-
</li>
765+
{
766+
prev ? (
767+
<li
768+
title={showTitle ? locale.prev_page : null}
769+
onClick={this.prev}
770+
tabIndex={prevDisabled ? null : 0}
771+
onKeyPress={this.runIfEnterPrev}
772+
className={classNames(`${prefixCls}-prev`, {
773+
[`${prefixCls}-disabled`]: prevDisabled,
774+
})}
775+
aria-disabled={prevDisabled}
776+
>
777+
{prev}
778+
</li>
779+
) : null
780+
}
764781
{pagerList}
765-
<li
766-
title={showTitle ? locale.next_page : null}
767-
onClick={this.next}
768-
tabIndex={nextDisabled ? null : 0}
769-
onKeyPress={this.runIfEnterNext}
770-
className={classNames(`${prefixCls}-next`, {
771-
[`${prefixCls}-disabled`]: nextDisabled,
772-
})}
773-
aria-disabled={nextDisabled}
774-
>
775-
{this.renderNext(nextPage)}
776-
</li>
782+
{
783+
next ? (
784+
<li
785+
title={showTitle ? locale.next_page : null}
786+
onClick={this.next}
787+
tabIndex={nextDisabled ? null : 0}
788+
onKeyPress={this.runIfEnterNext}
789+
className={classNames(`${prefixCls}-next`, {
790+
[`${prefixCls}-disabled`]: nextDisabled,
791+
})}
792+
aria-disabled={nextDisabled}
793+
>
794+
{next}
795+
</li>
796+
) : null
797+
}
777798
<Options
778799
disabled={disabled}
779800
locale={locale}

‎tests/itemRender.test.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,52 @@ describe('itemRender', () => {
4141
);
4242
});
4343

44+
it('should support empty custom itemRender', () => {
45+
const pageEmptyWrapper = mount(
46+
<Pagination
47+
total={1000}
48+
current={currentPage}
49+
itemRender={(page, type, originalElement) => {
50+
if (type === 'page') {
51+
return null;
52+
}
53+
return originalElement;
54+
}}
55+
/>,
56+
);
57+
expect(pageEmptyWrapper.find('.rc-pagination-item').length).toBe(0);
58+
59+
const turnPageWrapper = mount(
60+
<Pagination
61+
total={1000}
62+
current={currentPage}
63+
itemRender={(page, type, originalElement) => {
64+
if (type === 'prev' || type === 'next') {
65+
return null;
66+
}
67+
return originalElement;
68+
}}
69+
/>,
70+
);
71+
expect(turnPageWrapper.find('.rc-pagination-prev').length).toBe(0);
72+
expect(turnPageWrapper.find('.rc-pagination-next').length).toBe(0);
73+
74+
const jumpPageWrapper = mount(
75+
<Pagination
76+
total={1000}
77+
current={currentPage}
78+
itemRender={(page, type, originalElement) => {
79+
if (type === 'jump-prev' || type === 'jump-next') {
80+
return null;
81+
}
82+
return originalElement;
83+
}}
84+
/>,
85+
);
86+
expect(jumpPageWrapper.find('.rc-pagination-jump-prev').length).toBe(0);
87+
expect(jumpPageWrapper.find('.rc-pagination-jump-next').length).toBe(0);
88+
});
89+
4490
it('should support pass disabled to prev and next buttons', () => {
4591
const component = mount(
4692
<Pagination total={1000} current={1} itemRender={itemRender} />,

0 commit comments

Comments
 (0)