Skip to content

Commit e211eaf

Browse files
afc163afc163
committed
🔨 refactor render
1 parent cc285da commit e211eaf

File tree

1 file changed

+87
-80
lines changed

1 file changed

+87
-80
lines changed

‎src/Pagination.jsx‎

Lines changed: 87 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -333,15 +333,28 @@ class Pagination extends React.Component {
333333
hideOnSinglePage,
334334
total,
335335
locale,
336+
showQuickJumper,
337+
showLessItems,
338+
showTitle,
339+
showTotal,
340+
showSizeChanger,
341+
simple,
342+
itemRender,
343+
showPrevNextJumpers,
344+
jumpPrevIcon,
345+
jumpNextIcon,
346+
selectComponentClass,
347+
selectPrefixCls,
348+
pageSizeOptions,
336349
} = this.props;
337350

351+
const { current, pageSize, currentInputValue } = this.state;
352+
338353
// When hideOnSinglePage is true and there is only 1 page, hide the pager
339-
if (hideOnSinglePage === true && total <= this.state.pageSize) {
354+
if (hideOnSinglePage === true && total <= pageSize) {
340355
return null;
341356
}
342357

343-
const { props } = this;
344-
345358
const allPages = calculatePage(undefined, this.state, this.props);
346359
const pagerList = [];
347360
let jumpPrev = null;
@@ -350,26 +363,28 @@ class Pagination extends React.Component {
350363
let lastPager = null;
351364
let gotoButton = null;
352365

353-
const goButton = props.showQuickJumper && props.showQuickJumper.goButton;
354-
const pageBufferSize = props.showLessItems ? 1 : 2;
355-
const { current, pageSize } = this.state;
366+
const goButton = showQuickJumper && showQuickJumper.goButton;
367+
const pageBufferSize = showLessItems ? 1 : 2;
356368

357369
const prevPage = current - 1 > 0 ? current - 1 : 0;
358370
const nextPage = current + 1 < allPages ? current + 1 : allPages;
359371

360-
const dataOrAriaAttributeProps = Object.keys(props).reduce((prev, key) => {
361-
if (
362-
key.substr(0, 5) === 'data-' ||
363-
key.substr(0, 5) === 'aria-' ||
364-
key === 'role'
365-
) {
366-
// eslint-disable-next-line no-param-reassign
367-
prev[key] = props[key];
368-
}
369-
return prev;
370-
}, {});
372+
const dataOrAriaAttributeProps = Object.keys(this.props).reduce(
373+
(prev, key) => {
374+
if (
375+
key.substr(0, 5) === 'data-' ||
376+
key.substr(0, 5) === 'aria-' ||
377+
key === 'role'
378+
) {
379+
// eslint-disable-next-line no-param-reassign
380+
prev[key] = this.props[key];
381+
}
382+
return prev;
383+
},
384+
{},
385+
);
371386

372-
if (props.simple) {
387+
if (simple) {
373388
if (goButton) {
374389
if (typeof goButton === 'boolean') {
375390
gotoButton = (
@@ -390,11 +405,7 @@ class Pagination extends React.Component {
390405
}
391406
gotoButton = (
392407
<li
393-
title={
394-
props.showTitle
395-
? `${locale.jump_to}${this.state.current}/${allPages}`
396-
: null
397-
}
408+
title={showTitle ? `${locale.jump_to}${current}/${allPages}` : null}
398409
className={`${prefixCls}-simple-pager`}
399410
>
400411
{gotoButton}
@@ -410,7 +421,7 @@ class Pagination extends React.Component {
410421
{...dataOrAriaAttributeProps}
411422
>
412423
<li
413-
title={props.showTitle ? locale.prev_page : null}
424+
title={showTitle ? locale.prev_page : null}
414425
onClick={this.prev}
415426
tabIndex={this.hasPrev() ? 0 : null}
416427
onKeyPress={this.runIfEnterPrev}
@@ -422,12 +433,12 @@ class Pagination extends React.Component {
422433
{this.renderPrev(prevPage)}
423434
</li>
424435
<li
425-
title={props.showTitle ? `${this.state.current}/${allPages}` : null}
436+
title={showTitle ? `${current}/${allPages}` : null}
426437
className={`${prefixCls}-simple-pager`}
427438
>
428439
<input
429440
type="text"
430-
value={this.state.currentInputValue}
441+
value={currentInputValue}
431442
onKeyDown={this.handleKeyDown}
432443
onKeyUp={this.handleKeyUp}
433444
onChange={this.handleKeyUp}
@@ -437,7 +448,7 @@ class Pagination extends React.Component {
437448
{allPages}
438449
</li>
439450
<li
440-
title={props.showTitle ? locale.next_page : null}
451+
title={showTitle ? locale.next_page : null}
441452
onClick={this.next}
442453
tabIndex={this.hasPrev() ? 0 : null}
443454
onKeyPress={this.runIfEnterNext}
@@ -459,8 +470,8 @@ class Pagination extends React.Component {
459470
rootPrefixCls: prefixCls,
460471
onClick: this.handleChange,
461472
onKeyPress: this.runIfEnter,
462-
showTitle: props.showTitle,
463-
itemRender: props.itemRender,
473+
showTitle,
474+
itemRender,
464475
};
465476
if (!allPages) {
466477
pagerList.push(
@@ -473,81 +484,77 @@ class Pagination extends React.Component {
473484
);
474485
}
475486
for (let i = 1; i <= allPages; i += 1) {
476-
const active = this.state.current === i;
487+
const active = current === i;
477488
pagerList.push(
478489
<Pager {...pagerProps} key={i} page={i} active={active} />,
479490
);
480491
}
481492
} else {
482-
const prevItemTitle = props.showLessItems ? locale.prev_3 : locale.prev_5;
483-
const nextItemTitle = props.showLessItems ? locale.next_3 : locale.next_5;
484-
if (props.showPrevNextJumpers) {
485-
let jumpPrevClassString = `${prefixCls}-jump-prev`;
486-
if (props.jumpPrevIcon) {
487-
jumpPrevClassString += ` ${prefixCls}-jump-prev-custom-icon`;
488-
}
493+
const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
494+
const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
495+
if (showPrevNextJumpers) {
489496
jumpPrev = (
490497
<li
491-
title={props.showTitle ? prevItemTitle : null}
498+
title={showTitle ? prevItemTitle : null}
492499
key="prev"
493500
onClick={this.jumpPrev}
494501
tabIndex="0"
495502
onKeyPress={this.runIfEnterJumpPrev}
496-
className={jumpPrevClassString}
503+
className={classNames(`${prefixCls}-jump-prev`, {
504+
[`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
505+
})}
497506
>
498-
{props.itemRender(
507+
{itemRender(
499508
this.getJumpPrevPage(),
500509
'jump-prev',
501-
this.getItemIcon(props.jumpPrevIcon),
510+
this.getItemIcon(jumpPrevIcon),
502511
)}
503512
</li>
504513
);
505-
let jumpNextClassString = `${prefixCls}-jump-next`;
506-
if (props.jumpNextIcon) {
507-
jumpNextClassString += ` ${prefixCls}-jump-next-custom-icon`;
508-
}
509514
jumpNext = (
510515
<li
511-
title={props.showTitle ? nextItemTitle : null}
516+
title={showTitle ? nextItemTitle : null}
512517
key="next"
513518
tabIndex="0"
514519
onClick={this.jumpNext}
515520
onKeyPress={this.runIfEnterJumpNext}
516-
className={jumpNextClassString}
521+
className={classNames(`${prefixCls}-jump-next`, {
522+
[`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
523+
})}
517524
>
518-
{props.itemRender(
525+
{itemRender(
519526
this.getJumpNextPage(),
520527
'jump-next',
521-
this.getItemIcon(props.jumpNextIcon),
528+
this.getItemIcon(jumpNextIcon),
522529
)}
523530
</li>
524531
);
525532
}
526533
lastPager = (
527534
<Pager
528-
locale={props.locale}
535+
locale={locale}
529536
last
530537
rootPrefixCls={prefixCls}
531538
onClick={this.handleChange}
532539
onKeyPress={this.runIfEnter}
533540
key={allPages}
534541
page={allPages}
535542
active={false}
536-
showTitle={props.showTitle}
537-
itemRender={props.itemRender}
543+
showTitle={showTitle}
544+
itemRender={itemRender}
538545
/>
539546
);
540547
firstPager = (
541548
<Pager
542-
locale={props.locale}
549+
locale={locale}
543550
rootPrefixCls={prefixCls}
544551
onClick={this.handleChange}
545552
onKeyPress={this.runIfEnter}
546553
key={1}
547554
page={1}
548555
active={false}
549-
showTitle={props.showTitle}
550-
itemRender={props.itemRender}
556+
showTitle={showTitle}
557+
itemRender={itemRender}
551558
/>
552559
);
553560

@@ -566,21 +573,21 @@ class Pagination extends React.Component {
566573
const active = current === i;
567574
pagerList.push(
568575
<Pager
569-
locale={props.locale}
576+
locale={locale}
570577
rootPrefixCls={prefixCls}
571578
onClick={this.handleChange}
572579
onKeyPress={this.runIfEnter}
573580
key={i}
574581
page={i}
575582
active={active}
576-
showTitle={props.showTitle}
577-
itemRender={props.itemRender}
583+
showTitle={showTitle}
584+
itemRender={itemRender}
578585
/>,
579586
);
580587
}
581588

582589
if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
583-
pagerList[0] = React.cloneElement(pagerList[0], {
590+
pagerList[0] = cloneElement(pagerList[0], {
584591
className: `${prefixCls}-item-after-jump-prev`,
585592
});
586593
pagerList.unshift(jumpPrev);
@@ -589,7 +596,7 @@ class Pagination extends React.Component {
589596
allPages - current >= pageBufferSize * 2 &&
590597
current !== allPages - 2
591598
) {
592-
pagerList[pagerList.length - 1] = React.cloneElement(
599+
pagerList[pagerList.length - 1] = cloneElement(
593600
pagerList[pagerList.length - 1],
594601
{
595602
className: `${prefixCls}-item-before-jump-next`,
@@ -608,12 +615,12 @@ class Pagination extends React.Component {
608615

609616
let totalText = null;
610617

611-
if (props.showTotal) {
618+
if (showTotal) {
612619
totalText = (
613620
<li className={`${prefixCls}-total-text`}>
614-
{props.showTotal(props.total, [
615-
props.total === 0 ? 0 : (current - 1) * pageSize + 1,
616-
current * pageSize > props.total ? props.total : current * pageSize,
621+
{showTotal(total, [
622+
total === 0 ? 0 : (current - 1) * pageSize + 1,
623+
current * pageSize > total ? total : current * pageSize,
617624
])}
618625
</li>
619626
);
@@ -625,47 +632,47 @@ class Pagination extends React.Component {
625632
className={classNames(prefixCls, className, {
626633
[`${prefixCls}-disabled`]: disabled,
627634
})}
628-
style={props.style}
635+
style={style}
629636
unselectable="unselectable"
630637
ref={this.savePaginationNode}
631638
{...dataOrAriaAttributeProps}
632639
>
633640
{totalText}
634641
<li
635-
title={props.showTitle ? locale.prev_page : null}
642+
title={showTitle ? locale.prev_page : null}
636643
onClick={this.prev}
637644
tabIndex={prevDisabled ? null : 0}
638645
onKeyPress={this.runIfEnterPrev}
639-
className={`${
640-
!prevDisabled ? '' : `${prefixCls}-disabled`
641-
} ${prefixCls}-prev`}
646+
className={classNames(`${prefixCls}-prev`, {
647+
[`${prefixCls}-disabled`]: prevDisabled,
648+
})}
642649
aria-disabled={prevDisabled}
643650
>
644651
{this.renderPrev(prevPage)}
645652
</li>
646653
{pagerList}
647654
<li
648-
title={props.showTitle ? locale.next_page : null}
655+
title={showTitle ? locale.next_page : null}
649656
onClick={this.next}
650657
tabIndex={nextDisabled ? null : 0}
651658
onKeyPress={this.runIfEnterNext}
652-
className={`${
653-
!nextDisabled ? '' : `${prefixCls}-disabled`
654-
} ${prefixCls}-next`}
659+
className={classNames(`${prefixCls}-next`, {
660+
[`${prefixCls}-disabled`]: nextDisabled,
661+
})}
655662
aria-disabled={nextDisabled}
656663
>
657664
{this.renderNext(nextPage)}
658665
</li>
659666
<Options
660667
disabled={disabled}
661-
locale={props.locale}
668+
locale={locale}
662669
rootPrefixCls={prefixCls}
663-
selectComponentClass={props.selectComponentClass}
664-
selectPrefixCls={props.selectPrefixCls}
665-
changeSize={this.props.showSizeChanger ? this.changePageSize : null}
666-
current={this.state.current}
667-
pageSize={this.state.pageSize}
668-
pageSizeOptions={this.props.pageSizeOptions}
670+
selectComponentClass={selectComponentClass}
671+
selectPrefixCls={selectPrefixCls}
672+
changeSize={showSizeChanger ? this.changePageSize : null}
673+
current={current}
674+
pageSize={pageSize}
675+
pageSizeOptions={pageSizeOptions}
669676
quickGo={this.shouldDisplayQuickJumper() ? this.handleChange : null}
670677
goButton={goButton}
671678
/>

0 commit comments

Comments
 (0)