cuz
Version:
Front-end modular development kit.
295 lines (261 loc) • 9.42 kB
JavaScript
'use strict';
var _extends = require('babel-runtime/helpers/extends')['default'];
var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
exports.__esModule = true;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactBootstrap = require('react-bootstrap');
var _reactBootstrapLibPaginationButton = require('react-bootstrap/lib/PaginationButton');
var _reactBootstrapLibPaginationButton2 = _interopRequireDefault(_reactBootstrapLibPaginationButton);
var Pagination = _react2['default'].createClass({
displayName: 'Pagination',
propTypes: {
activePage: _react2['default'].PropTypes.number,
items: _react2['default'].PropTypes.number,
maxButtons: _react2['default'].PropTypes.number,
noPageButton: _react2['default'].PropTypes.bool,
/**
* When `true`, will display the default node value ('...').
* Otherwise, will display provided node (when specified).
*/
ellipsis: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.node]),
/**
* When `true`, will display the default node value ('«').
* Otherwise, will display provided node (when specified).
*/
first: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.node]),
/**
* When `true`, will display the default node value ('»').
* Otherwise, will display provided node (when specified).
*/
last: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.node]),
/**
* When `true`, will display the default node value ('‹').
* Otherwise, will display provided node (when specified).
*/
prev: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.node]),
/**
* When `true`, will display the default node value ('›').
* Otherwise, will display provided node (when specified).
*/
next: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.node]),
onSelect: _react2['default'].PropTypes.func,
/**
* You can use a custom element for the buttons
*/
buttonComponentClass: _react2['default'].PropTypes.any,
className: _react2['default'].PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
activePage: 1,
items: 1,
maxButtons: 5,
first: false,
last: false,
prev: false,
next: false,
noPageButton: false,
ellipsis: true,
buttonComponentClass: _reactBootstrap.SafeAnchor,
bsClass: 'pagination'
};
},
renderPageButtons: function renderPageButtons() {
var pageButtons = [];
var startPage = undefined;
var endPage = undefined;
var hasHiddenPagesAfter = undefined;
var _props = this.props;
var maxButtons = _props.maxButtons;
var activePage = _props.activePage;
var items = _props.items;
var onSelect = _props.onSelect;
var ellipsis = _props.ellipsis;
var buttonComponentClass = _props.buttonComponentClass;
var hiddenPagesBefore = activePage - parseInt(maxButtons / 2, 10);
startPage = hiddenPagesBefore > 1 ? hiddenPagesBefore : 1;
hasHiddenPagesAfter = startPage + maxButtons < items;
if (!hasHiddenPagesAfter) {
endPage = items;
startPage = items - maxButtons + 1;
if (startPage < 1) {
startPage = 1;
}
hiddenPagesBefore = startPage;
} else {
endPage = startPage + maxButtons - 1;
}
if (hiddenPagesBefore > 1) {
pageButtons.push(_react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 1,
eventKey: 1,
active: activePage === 1,
onSelect: onSelect,
buttonComponentClass: buttonComponentClass },
1
));
}
if (hiddenPagesBefore > 2) {
pageButtons.push(_react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'preEllipsis',
disabled: true,
className: 'no-border',
buttonComponentClass: buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'More1' },
this.props.ellipsis === true ? '...' : this.props.ellipsis
)
));
}
for (var pagenumber = startPage; pagenumber <= endPage; pagenumber++) {
pageButtons.push(_react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: pagenumber,
eventKey: pagenumber,
active: pagenumber === activePage,
onSelect: onSelect,
buttonComponentClass: buttonComponentClass },
pagenumber
));
}
if (maxButtons && hasHiddenPagesAfter && ellipsis) {
pageButtons.push(_react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'afterEllipsis',
disabled: true,
className: 'no-border',
buttonComponentClass: buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'More' },
this.props.ellipsis === true ? '...' : this.props.ellipsis
)
));
pageButtons.push(_react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: items,
eventKey: items,
active: items === activePage,
onSelect: onSelect,
buttonComponentClass: buttonComponentClass },
items
));
}
return pageButtons;
},
renderNumber: function renderNumber() {
var _props2 = this.props;
var items = _props2.items;
var activePage = _props2.activePage;
return _react2['default'].createElement(
'span',
{ className: 'number-page' },
activePage,
'/',
items
);
},
renderPrev: function renderPrev() {
if (!this.props.prev) {
return null;
}
return _react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'prev',
eventKey: this.props.activePage - 1,
disabled: this.props.activePage === 1,
onSelect: this.props.onSelect,
buttonComponentClass: this.props.buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'Previous' },
this.props.prev === true ? _react2['default'].createElement('i', { className: 'fa fa-angle-left' }) : this.props.prev
)
);
},
renderNext: function renderNext() {
if (!this.props.next) {
return null;
}
return _react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'next',
eventKey: this.props.activePage + 1,
disabled: this.props.activePage >= this.props.items,
onSelect: this.props.onSelect,
buttonComponentClass: this.props.buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'Next' },
this.props.next === true ? _react2['default'].createElement('i', { className: 'fa fa-angle-right' }) : this.props.next
)
);
},
renderFirst: function renderFirst() {
if (!this.props.first) {
return null;
}
return _react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'first',
eventKey: 1,
disabled: this.props.activePage === 1,
onSelect: this.props.onSelect,
buttonComponentClass: this.props.buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'First' },
this.props.first === true ? _react2['default'].createElement('i', { className: 'fa fa-angle-double-left' }) : this.props.first
)
);
},
renderLast: function renderLast() {
if (!this.props.last) {
return null;
}
return _react2['default'].createElement(
_reactBootstrapLibPaginationButton2['default'],
{
key: 'last',
eventKey: this.props.items,
disabled: this.props.activePage >= this.props.items,
onSelect: this.props.onSelect,
buttonComponentClass: this.props.buttonComponentClass },
_react2['default'].createElement(
'span',
{ 'aria-label': 'Last' },
this.props.last === true ? _react2['default'].createElement('i', { className: 'fa fa-angle-double-right' }) : this.props.last
)
);
},
render: function render() {
var noPageButton = this.props.noPageButton;
return _react2['default'].createElement(
'ul',
_extends({}, this.props, {
className: _classnames2['default'](this.props.className, _reactBootstrap.utils.bootstrapUtils.getClassSet(this.props)) }),
this.renderFirst(),
this.renderPrev(),
noPageButton === false && this.renderPageButtons(),
this.renderNext(),
this.renderLast(),
noPageButton && this.renderNumber()
);
}
});
exports['default'] = Pagination;
module.exports = exports['default'];