hiromi/lib/Pagination/index.js

React components for Bulma. http://bulma.io/

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _arguments = arguments;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _utils = require('../utils');

var _Link = require('../Link');

var _Link2 = _interopRequireDefault(_Link);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var PageItems = function PageItems(_ref) {
  var pagesVisible = _ref.pagesVisible;
  var onChange = _ref.onChange;
  var pageCount = _ref.pageCount;
  var currentPage = _ref.currentPage;

  var props = _objectWithoutProperties(_ref, ['pagesVisible', 'onChange', 'pageCount', 'currentPage']);

  var items = [];
  // compute minLeft and maxRight indeces of page buttons
  // which exclude first and last pages.
  var minLeft = currentPage - Math.floor(pagesVisible / 2);
  if (minLeft < 2) minLeft = 2;
  var maxRight = minLeft + pagesVisible - 1;
  if (maxRight >= pageCount) {
    maxRight = pageCount - 1;
    minLeft = maxRight - pagesVisible + 1;
    if (minLeft < 2) minLeft = 2;
  }

  for (var i = 1; i <= pageCount; i++) {
    if (i !== 1 && i !== pageCount && (i < minLeft || i > maxRight)) {
      continue;
    }

    // If it's the min left visible, and there were skipped items
    if (i === minLeft && minLeft > 2) {
      items.push(_react2.default.createElement(
        'li',
        { key: 'min' },
        '...'
      ));
    }

    var active = i === currentPage;
    var className = (0, _classnames2.default)({
      'is-active': active
    });
    items.push(_react2.default.createElement(
      'li',
      { key: i.toString() },
      _react2.default.createElement(
        _Link2.default,
        { className: className, onClick: onPaginate(onChange, i) },
        i
      )
    ));

    // If it's the max right visible, and there will be skipped items
    if (i === maxRight && maxRight < pageCount - 1) {
      items.push(_react2.default.createElement(
        'li',
        { key: 'max' },
        '...'
      ));
    }
  }
  return _react2.default.createElement(
    'ul',
    null,
    items
  );
};

var onPaginate = function onPaginate(onChange, pageIndex) {
  return function (event) {
    var args = [].concat(Array.prototype.slice.call(_arguments));
    args.splice(0, 0, pageIndex);
    onChange.apply(undefined, _toConsumableArray(args));
  };
};

var LeftLevel = function LeftLevel(_ref2) {
  var hasFirst = _ref2.hasFirst;
  var hasPrevious = _ref2.hasPrevious;
  var first = _ref2.first;
  var previous = _ref2.previous;
  var onChange = _ref2.onChange;
  var currentPage = _ref2.currentPage;

  var props = _objectWithoutProperties(_ref2, ['hasFirst', 'hasPrevious', 'first', 'previous', 'onChange', 'currentPage']);

  var firstItem = hasFirst ? _react2.default.createElement(
    _Link2.default,
    { onClick: onPaginate(onChange, 1) },
    first
  ) : null;
  var previousItem = hasPrevious ? _react2.default.createElement(
    _Link2.default,
    { onClick: onPaginate(onChange, currentPage - 1) },
    previous
  ) : null;

  return _react2.default.createElement(
    'div',
    { className: 'level-left' },
    firstItem,
    previousItem
  );
};

var RightLevel = function RightLevel(_ref3) {
  var hasNext = _ref3.hasNext;
  var hasLast = _ref3.hasLast;
  var next = _ref3.next;
  var last = _ref3.last;
  var onChange = _ref3.onChange;
  var pageCount = _ref3.pageCount;
  var currentPage = _ref3.currentPage;

  var props = _objectWithoutProperties(_ref3, ['hasNext', 'hasLast', 'next', 'last', 'onChange', 'pageCount', 'currentPage']);

  var lastItem = hasLast ? _react2.default.createElement(
    _Link2.default,
    { onClick: onPaginate(onChange, pageCount) },
    last
  ) : null;
  var nextItem = hasNext ? _react2.default.createElement(
    _Link2.default,
    { onClick: onPaginate(onChange, currentPage + 1) },
    next
  ) : null;

  return _react2.default.createElement(
    'div',
    { className: 'level-right' },
    nextItem,
    lastItem
  );
};

var Pagination = function Pagination(_ref4) {
  var currentPage = _ref4.currentPage;
  var pageCount = _ref4.pageCount;
  var hasFirst = _ref4.hasFirst;
  var first = _ref4.first;
  var hasPrevious = _ref4.hasPrevious;
  var previous = _ref4.previous;
  var hasNext = _ref4.hasNext;
  var next = _ref4.next;
  var hasLast = _ref4.hasLast;
  var last = _ref4.last;
  var className = _ref4.className;
  var onChange = _ref4.onChange;
  var pagesVisible = _ref4.pagesVisible;

  var props = _objectWithoutProperties(_ref4, ['currentPage', 'pageCount', 'hasFirst', 'first', 'hasPrevious', 'previous', 'hasNext', 'next', 'hasLast', 'last', 'className', 'onChange', 'pagesVisible']);

  var _modifierClassList = (0, _utils.modifierClassList)(props);

  var classList = _modifierClassList.classList;

  var finalProps = _objectWithoutProperties(_modifierClassList, ['classList']);

  classList = (0, _classnames2.default)('level', className, classList);

  var leftLevel = hasFirst || hasPrevious ? _react2.default.createElement(LeftLevel, {
    hasFirst: hasFirst,
    hasPrevious: hasPrevious,
    first: first,
    previous: previous,
    onChange: onChange,
    currentPage: currentPage
  }) : null;

  var rightLevel = hasNext || hasLast ? _react2.default.createElement(RightLevel, {
    hasNext: hasNext,
    hasLast: hasLast,
    next: next,
    last: last,
    onChange: onChange,
    pageCount: pageCount,
    currentPage: currentPage
  }) : null;

  return _react2.default.createElement(
    'div',
    _extends({ className: classList }, finalProps),
    leftLevel,
    _react2.default.createElement(
      'div',
      { className: 'level-item has-text-centered' },
      _react2.default.createElement(
        'nav',
        _extends({ className: 'pagination' }, finalProps),
        _react2.default.createElement(PageItems, {
          pageCount: pageCount,
          currentPage: currentPage,
          onChange: onChange,
          pagesVisible: pagesVisible
        })
      )
    ),
    rightLevel
  );
};

Pagination.propTypes = _extends({
  currentPage: _propTypes2.default.number,
  pageCount: _propTypes2.default.number,
  hasFirst: _propTypes2.default.bool,
  first: _propTypes2.default.node,
  hasPrevious: _propTypes2.default.bool,
  previous: _propTypes2.default.node,
  hasNext: _propTypes2.default.bool,
  next: _propTypes2.default.node,
  hasLast: _propTypes2.default.bool,
  last: _propTypes2.default.node,
  pagesVisible: _propTypes2.default.number,

  onChange: _propTypes2.default.func
}, _utils.defaultReactProps);

Pagination.defaultProps = _extends({
  hasFirst: true,
  first: "First",
  hasPrevious: true,
  previous: "Previous",
  hasNext: true,
  next: "Next",
  hasLast: true,
  last: "Last",
  pagesVisible: 2
}, _utils.defaultReactPropsValues);

exports.default = Pagination;