creevey/lib/client/shared/components/PageFooter/Paging.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _components = require("@storybook/components");

var _types = require("../../../../types");

var _theming = require("@storybook/theming");

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

var StyledButton = (0, _theming.styled)(_components.Button)({
  transform: 'none',
  marginLeft: '8px'
});

function Paging(props) {
  var renderItem = function renderItem(item, index) {
    switch (item) {
      case '.':
        {
          return /*#__PURE__*/_react.default.createElement(StyledButton, {
            disabled: true,
            key: "dots".concat(index < 5 ? 'Left' : 'Right')
          }, '...');
        }

      case 'forward':
        {
          var disabled = props.activePage === props.pagesCount;
          return /*#__PURE__*/_react.default.createElement(StyledButton, {
            outline: true,
            disabled: disabled,
            onClick: disabled ? _types.noop : function () {
              return goToPage(props.activePage + 1);
            },
            key: "forward"
          }, /*#__PURE__*/_react.default.createElement("span", null, "Next ", /*#__PURE__*/_react.default.createElement(_components.Icons, {
            icon: "arrowright"
          })));
        }

      default:
        {
          return /*#__PURE__*/_react.default.createElement(StyledButton, {
            outline: true,
            secondary: props.activePage === item,
            key: item,
            onClick: function onClick() {
              return goToPage(item);
            }
          }, item);
        }
    }
  };

  var goToPage = function goToPage(pageNumber) {
    if (1 <= pageNumber && pageNumber !== props.activePage && pageNumber <= props.pagesCount) {
      props.onPageChange(pageNumber);
    }
  };

  return /*#__PURE__*/_react.default.createElement("div", null, getItems(props.activePage, props.pagesCount).map(renderItem));
}

function getItems(active, total) {
  var result = [];
  var left = Math.max(Math.min(active - 2, total - 4), 1);
  var right = Math.min(Math.max(5, active + 2), total);
  var hasLeftDots = left > 3;
  var from = hasLeftDots ? left : 1;
  var hasRightDots = right < total - 2;
  var to = hasRightDots ? right : total;

  if (hasLeftDots) {
    result.push(1, '.');
  }

  for (var i = from; i <= to; ++i) {
    result.push(i);
  }

  if (hasRightDots) {
    result.push('.');
  }

  if (hasRightDots && isFinite(total)) {
    result.push(total);
  }

  return result.concat('forward');
}