nest-parrot
Version:
Parrot built on react
298 lines (294 loc) • 7.96 kB
JSX
(function (window, $, React, ReactDOM, $pt) {
var NPagination = React.createClass({
displayName: 'NPagination',
statics: {
PAGE_TEXT: 'Page: '
},
/**
* override react method
* @returns {*}
* @override
*/
getDefaultProps: function () {
return {
maxPageButtons: 5,
pageCount: 1, // page count default 1
currentPageIndex: 1, // page number count from 1
showStatus: true
};
},
/**
* make max page buttons is an odd number and at least 3
*/
getMaxPageButtons: function () {
var maxPageButtons = this.props.maxPageButtons * 1;
if (maxPageButtons % 2 == 0) {
maxPageButtons = maxPageButtons - 1;
}
if (maxPageButtons < 3) {
maxPageButtons = 3;
}
return maxPageButtons;
},
/**
* get buttons range
* @returns {{min: number, max: number}}
*/
getPageButtonsRange: function () {
var currentPageIndex = this.getCurrentPageIndex();
var maxPageButtons = this.getMaxPageButtons();
// calc the steps from currentPageIndex to maxPageIndex(pageCount)
var max = 0;
var availablePageCountFromCurrent = this.getPageCount() - currentPageIndex;
var maxButtonCountFromCurrent = Math.floor(maxPageButtons / 2);
if (availablePageCountFromCurrent >= maxButtonCountFromCurrent) {
//
max = currentPageIndex + maxButtonCountFromCurrent;
} else {
max = currentPageIndex + availablePageCountFromCurrent;
// move to min buttons, since no enough available pages to display
maxButtonCountFromCurrent += (maxButtonCountFromCurrent - availablePageCountFromCurrent);
}
// calc the steps from currentPageIndex to first page
var min = 0;
var availablePageCountBeforeCurrent = currentPageIndex - 1;
if (availablePageCountBeforeCurrent >= maxButtonCountFromCurrent) {
min = currentPageIndex - maxButtonCountFromCurrent;
} else {
min = 1;
}
// calc the steps
if ((max - min) < maxPageButtons) {
// no enough buttons
max = min + maxPageButtons - 1;
max = max > this.getPageCount() ? this.getPageCount() : max;
}
return {min: min, max: max};
},
/**
* render button which jump to first page
* @param buttonsRange
* @returns {XML}
*/
renderFirst: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="First" onClick={this.toFirst}>
<span className='fa fa-fw fa-fast-backward'/>
</a>
</li>);
},
/**
* render button which jump to previous page section
* @param buttonsRange
* @returns {XML}
*/
renderPreviousSection: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="PreviousSection" onClick={this.toPreviousSection}>
<span className='fa fa-fw fa-backward'/>
</a>
</li>);
},
/**
* render button which jump to previous page
* @param buttonsRange
* @returns {XML}
*/
renderPrevious: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="Previous" onClick={this.toPrevious}>
<span className='fa fa-fw fa-chevron-left'/>
</a>
</li>);
},
/**
* render buttons
* @param buttonsRange
* @returns {[XML]}
*/
renderButtons: function (buttonsRange) {
var buttons = [];
for (var index = buttonsRange.min; index <= buttonsRange.max; index++) {
buttons.push(index);
}
var _this = this;
return buttons.map(function (index) {
var css = {
active: index == _this.getCurrentPageIndex()
};
return (<li key={index}>
<a href="javascript:void(0);"
onClick={_this.toPage}
data-index={index}
className={$pt.LayoutHelper.classSet(css)}>{index}</a>
</li>);
});
},
/**
* render button which jump to next page
* @param buttonsRange
* @returns {XML}
*/
renderNext: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="Next" onClick={this.toNext}>
<span className='fa fa-fw fa-chevron-right'/>
</a>
</li>);
},
/**
* render button which jump to next page section
* @param buttonsRange
* @returns {XML}
*/
renderNextSection: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="NextSection" onClick={this.toNextSection}>
<span className='fa fa-fw fa-forward'/>
</a>
</li>);
},
/**
* render button which jump to last page
* @param buttonsRange
* @returns {XML}
*/
renderLast: function (buttonsRange) {
return (<li>
<a href="javascript:void(0);" aria-label="Last" onClick={this.toLast}>
<span className='fa fa-fw fa-fast-forward'/>
</a>
</li>);
},
/**
* render status
* @returns {XML}
*/
renderStatus: function () {
if (this.props.showStatus) {
return (<div className="n-pagination-status col-sm-2 col-md-2 col-lg-2">
<div>
{NPagination.PAGE_TEXT}{this.getCurrentPageIndex()} / {this.getPageCount()}
</div>
</div>);
} else {
return null;
}
},
/**
* override react method
* @returns {XML}
* @override
*/
render: function () {
var buttonsRange = this.getPageButtonsRange();
var css = {
row: true,
'n-pagination': true
};
if (this.props.className) {
css[this.props.className] = true;
}
var buttonCSS = {
'n-pagination-buttons': true,
'col-sm-10 col-md-10 col-lg-10': this.props.showStatus,
'col-sm-12 col-md-12 col-lg-12': !this.props.showStatus
};
return (<div className={$pt.LayoutHelper.classSet(css)}>
{this.renderStatus()}
<div className={$pt.LayoutHelper.classSet(buttonCSS)}>
<ul className="pagination">
{this.renderFirst(buttonsRange)}
{this.renderPreviousSection(buttonsRange)}
{this.renderPrevious(buttonsRange)}
{this.renderButtons(buttonsRange)}
{this.renderNext(buttonsRange)}
{this.renderNextSection(buttonsRange)}
{this.renderLast(buttonsRange)}
</ul>
</div>
</div>);
},
/**
* get current page index
* @param button
* @returns {*|jQuery}
*/
getCurrentPageIndex: function (button) {
if (button) {
return $(button).attr("data-index");
} else {
return this.props.currentPageIndex * 1;
}
},
getPageCount: function () {
return this.props.pageCount * 1;
},
/**
* jump to first page
*/
toFirst: function () {
this.jumpTo(1);
},
/**
* jump to previous page section
*/
toPreviousSection: function () {
var previousIndex = this.getCurrentPageIndex() - this.getMaxPageButtons();
previousIndex = previousIndex < 1 ? 1 : previousIndex;
this.jumpTo(previousIndex);
},
/**
* jump to previous page
*/
toPrevious: function () {
var previousIndex = this.getCurrentPageIndex() - 1;
this.jumpTo(previousIndex < 1 ? 1 : previousIndex);
},
/**
* jump to given page according to event
* @param evt
*/
toPage: function (evt) {
this.jumpTo(this.getCurrentPageIndex(evt.target));
},
/**
* jump to next page
*/
toNext: function () {
var nextIndex = this.getCurrentPageIndex() + 1;
this.jumpTo(nextIndex > this.getPageCount() ? this.getPageCount() : nextIndex);
},
/**
* jump to next page section
*/
toNextSection: function () {
var nextIndex = this.getCurrentPageIndex() + this.getMaxPageButtons();
nextIndex = nextIndex > this.getPageCount() ? this.getPageCount() : nextIndex;
this.jumpTo(nextIndex);
},
/**
* jump to last page
*/
toLast: function () {
this.jumpTo(this.getPageCount());
},
/**
* jump to given page index
* @param pageIndex
*/
jumpTo: function (pageIndex) {
pageIndex = pageIndex * 1;
$(':focus').blur();
if (pageIndex - this.getCurrentPageIndex() == 0) {
return;
}
// this.props.currentPageIndex = pageIndex;
// this.forceUpdate();
if (this.props.toPage) {
this.props.toPage.call(this, pageIndex);
}
}
});
$pt.Components.NPagination = NPagination;
}(window, jQuery, React, ReactDOM, $pt));