UNPKG

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
'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'];