sui-pagination
Version:
## Description Component to render a pagination, with basic logic to show or not "Next" and "Previous" page related to the current page, and a handle
148 lines (123 loc) • 6.63 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _suiPaginationItem = require('../sui-pagination-item');
var _suiPaginationItem2 = _interopRequireDefault(_suiPaginationItem);
var FIRST_PAGE = 1;
var PAGINATION_STEP = 1;
var Pagination = (function (_React$Component) {
_inherits(Pagination, _React$Component);
function Pagination() {
_classCallCheck(this, Pagination);
_get(Object.getPrototypeOf(Pagination.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(Pagination, [{
key: 'getPaginationItems',
value: function getPaginationItems() {
var leftWindow = this.props.currentPage - this.props.window;
var rightWindow = this.props.currentPage + this.props.window;
var min = leftWindow < FIRST_PAGE ? FIRST_PAGE : leftWindow;
var max = rightWindow > this.props.totalPages ? this.props.totalPages : rightWindow;
var paginationItems = [];
for (var i = min; i <= max; i++) {
paginationItems.push(_react2['default'].createElement(_suiPaginationItem2['default'], {
key: 'paginate-item__' + i,
pageNumber: i,
pageText: i,
isCurrent: i === this.props.currentPage,
handlePaginate: this.props.handlePaginate }));
}
if (this.props.showFirstLast && max < this.props.totalPages) {
paginationItems.splice(paginationItems.length, 0, this.getFirstLastSeparator('lastSeparator'));
paginationItems.splice(paginationItems.length, 0, _react2['default'].createElement(_suiPaginationItem2['default'], {
key: 'paginate-item__' + this.props.totalPages,
pageNumber: this.props.totalPages,
pageText: this.props.totalPages,
isCurrent: false,
handlePaginate: this.props.handlePaginate }));
}
if (this.props.showFirstLast && min > FIRST_PAGE) {
paginationItems.splice(0, 0, this.getFirstLastSeparator('firstSeparator'));
paginationItems.splice(0, 0, _react2['default'].createElement(_suiPaginationItem2['default'], {
key: 'paginate-item__' + FIRST_PAGE,
pageNumber: FIRST_PAGE,
pageText: FIRST_PAGE,
isCurrent: false,
handlePaginate: this.props.handlePaginate }));
}
return paginationItems;
}
}, {
key: 'getPrevButton',
value: function getPrevButton() {
return _react2['default'].createElement(_suiPaginationItem2['default'], {
pageNumber: this.props.currentPage - PAGINATION_STEP,
pageText: this.props.prevText,
isControl: true,
isCurrent: false,
handlePaginate: this.props.handlePaginate });
}
}, {
key: 'getNextButton',
value: function getNextButton() {
return _react2['default'].createElement(_suiPaginationItem2['default'], {
pageNumber: this.props.currentPage + PAGINATION_STEP,
pageText: this.props.nextText,
isControl: true,
isCurrent: false,
handlePaginate: this.props.handlePaginate });
}
}, {
key: 'getFirstLastSeparator',
value: function getFirstLastSeparator(key) {
return _react2['default'].createElement(
'li',
{ key: key },
this.props.firstLastSeparatorText
);
}
}, {
key: 'render',
value: function render() {
var showPrevButton = this.props.currentPage > FIRST_PAGE;
var showNextButton = this.props.currentPage < this.props.totalPages;
return _react2['default'].createElement(
'div',
{ className: 'sui-Pagination' },
_react2['default'].createElement(
'ul',
{ className: 'sui-PaginationList' },
showPrevButton && this.getPrevButton(),
this.getPaginationItems(),
showNextButton && this.getNextButton()
)
);
}
}]);
return Pagination;
})(_react2['default'].Component);
exports['default'] = Pagination;
Pagination.propTypes = {
firstLastSeparatorText: _react2['default'].PropTypes.string,
handlePaginate: _react2['default'].PropTypes.func.isRequired,
nextText: _react2['default'].PropTypes.string,
currentPage: _react2['default'].PropTypes.number.isRequired,
prevText: _react2['default'].PropTypes.string,
showFirstLast: _react2['default'].PropTypes.bool,
totalPages: _react2['default'].PropTypes.number.isRequired,
window: _react2['default'].PropTypes.number.isRequired
};
Pagination.defaultProps = {
firstLastSeparatorText: '...',
nextText: 'Next',
prevText: 'Prev'
};
module.exports = exports['default'];