@rafacdb/bah/lib/Paginate.js

'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 _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  list-style-type: none;\n\n  li a {\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n  }\n\n  li {\n    background-color: ', ';\n    display: none;\n  }\n\n  a {\n    font-weight: 300;\n    padding-top: 1px;\n    text-decoration: none;\n    border: 1px solid rgba(0, 0, 0, .25);\n    border-left-width: 0;\n    min-width: 44px;\n    min-height: 44px;\n    color: rgba(255, 255, 255, .85);\n    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .35);\n  }\n\n  li:not([class*="current"]) a:hover {\n    background-color: rgba(255, 255, 255, .2);\n    border-top-color: rgba(0, 0, 0, .35);\n    border-bottom-color: rgba(0, 0, 0, .5);\n  }\n\n  li:not([class*="current"]) a:focus,\n  li:not([class*="current"]) a:active {\n    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .25);\n    border-left-width: 1px;\n  }\n\n  li:first-of-type a {\n    border-left-width: 1px;\n  }\n\n  li:first-of-type span,\n  li:last-of-type span,\n  li:nth-of-type(2) span,\n  li:nth-last-of-type(2) span {\n    /* screen readers only */\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n  }\n\n  li:first-child a::before,\n  li:last-child a::after,\n  li:nth-of-type(2) a::before,\n  li:nth-last-of-type(2) a::after {\n    display: inline-block;\n    font-size: inherit;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    transform: translate(0, 0);\n  }\n\n  li:first-child a::before,\n  li:last-child a::after {\n    content: "<<";\n  }\n\n  li:nth-of-type(2) a::before,\n  li:nth-last-of-type(2) a::after {\n    content: "<";\n  }\n\n  li:last-child a::after,\n  li:nth-last-of-type(2) a::after {\n    transform: rotate(180deg);\n  }\n\n  li:nth-last-child(-n + 2) {\n    display: inline-block;\n  }\n\n  li:nth-child(n + ', '):nth-child(-n + ', ') {\n    display: inline-block;\n  }\n  li:nth-child(-n + 2) {\n    display: inline-block;\n  }\n\n  li.current a {\n    color: rgba(255, 255, 255, 1);\n    background-color: rgba(255, 255, 255, .15);\n    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .25);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  @media only screen and (max-width: 64.063em) {\n    li:first-child,\n    li:last-child {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 1px;\n    }\n  }\n\n  @media only screen and (max-width: 40.063em) {\n    li {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n\n    li.current,\n    li:first-of-type,\n    li:last-of-type,\n    li:nth-of-type(2),\n    li:nth-last-of-type(2) {\n      position: initial;\n      top: initial;\n      left: initial;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 0;\n    }\n  }\n\n  @media only screen and (max-width: 30.063em) {\n    h1 {\n      font-size: 1.35em !important;\n    }\n    li:first-child,\n    li:last-child {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 1px;\n    }\n  }\n\n  @media only screen and (max-width: 15.063em) {\n    /* For watches? */\n    li {\n      width: 50%;\n    }\n    li.current {\n      order: 2;\n      width: 100%;\n      border-left-width: 1px;\n    }\n  }\n'], ['\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  list-style-type: none;\n\n  li a {\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n  }\n\n  li {\n    background-color: ', ';\n    display: none;\n  }\n\n  a {\n    font-weight: 300;\n    padding-top: 1px;\n    text-decoration: none;\n    border: 1px solid rgba(0, 0, 0, .25);\n    border-left-width: 0;\n    min-width: 44px;\n    min-height: 44px;\n    color: rgba(255, 255, 255, .85);\n    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .35);\n  }\n\n  li:not([class*="current"]) a:hover {\n    background-color: rgba(255, 255, 255, .2);\n    border-top-color: rgba(0, 0, 0, .35);\n    border-bottom-color: rgba(0, 0, 0, .5);\n  }\n\n  li:not([class*="current"]) a:focus,\n  li:not([class*="current"]) a:active {\n    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .25);\n    border-left-width: 1px;\n  }\n\n  li:first-of-type a {\n    border-left-width: 1px;\n  }\n\n  li:first-of-type span,\n  li:last-of-type span,\n  li:nth-of-type(2) span,\n  li:nth-last-of-type(2) span {\n    /* screen readers only */\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n  }\n\n  li:first-child a::before,\n  li:last-child a::after,\n  li:nth-of-type(2) a::before,\n  li:nth-last-of-type(2) a::after {\n    display: inline-block;\n    font-size: inherit;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    transform: translate(0, 0);\n  }\n\n  li:first-child a::before,\n  li:last-child a::after {\n    content: "<<";\n  }\n\n  li:nth-of-type(2) a::before,\n  li:nth-last-of-type(2) a::after {\n    content: "<";\n  }\n\n  li:last-child a::after,\n  li:nth-last-of-type(2) a::after {\n    transform: rotate(180deg);\n  }\n\n  li:nth-last-child(-n + 2) {\n    display: inline-block;\n  }\n\n  li:nth-child(n + ', '):nth-child(-n + ', ') {\n    display: inline-block;\n  }\n  li:nth-child(-n + 2) {\n    display: inline-block;\n  }\n\n  li.current a {\n    color: rgba(255, 255, 255, 1);\n    background-color: rgba(255, 255, 255, .15);\n    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .25);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  @media only screen and (max-width: 64.063em) {\n    li:first-child,\n    li:last-child {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 1px;\n    }\n  }\n\n  @media only screen and (max-width: 40.063em) {\n    li {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n\n    li.current,\n    li:first-of-type,\n    li:last-of-type,\n    li:nth-of-type(2),\n    li:nth-last-of-type(2) {\n      position: initial;\n      top: initial;\n      left: initial;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 0;\n    }\n  }\n\n  @media only screen and (max-width: 30.063em) {\n    h1 {\n      font-size: 1.35em !important;\n    }\n    li:first-child,\n    li:last-child {\n      /* screen readers only */\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n    li:nth-of-type(2) a {\n      border-left-width: 1px;\n    }\n  }\n\n  @media only screen and (max-width: 15.063em) {\n    /* For watches? */\n    li {\n      width: 50%;\n    }\n    li.current {\n      order: 2;\n      width: 100%;\n      border-left-width: 1px;\n    }\n  }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* Paginate on pen https://codepen.io/rafacdb/pen/mwxwQa */


var PaginateStyled = _styledComponents2.default.ul(_templateObject, function (props) {
  return props.theme.bahPaginateBackgroundColor;
}, function (props) {
  return props.start;
}, function (props) {
  return props.end;
});

var Paginate = function (_PureComponent) {
  _inherits(Paginate, _PureComponent);

  function Paginate(props) {
    _classCallCheck(this, Paginate);

    var _this = _possibleConstructorReturn(this, (Paginate.__proto__ || Object.getPrototypeOf(Paginate)).call(this, props));

    _this.state = { linkId: 0, linkActive: false, skip: 0, start: 3, end: 12 };

    _this.handleClick = function (link) {
      return function () {
        var newSkip = void 0;
        var _this$state = _this.state,
            start = _this$state.start,
            end = _this$state.end,
            skip = _this$state.skip;
        var _this$props = _this.props,
            perPage = _this$props.perPage,
            count = _this$props.count,
            func = _this$props.func;


        if (link.id === 'Previous') {
          newSkip = skip !== 0 ? skip - perPage : skip;
        } else if (link.id === 'Next') {
          newSkip = skip <= count && skip + perPage < count ? skip + perPage : skip;
        } else if (link.id === 'First') {
          newSkip = 0;
          if (start - 3 < link.pages && start !== 3) {
            _this.setState({ start: start - 10, end: end - 10 });
          }
        } else if (link.id === 'Last') {
          newSkip = link.skip;
          if (end - 2 < link.pages) {
            _this.setState({ start: start + 10, end: end + 10 });
          }
        } else {
          newSkip = link.skip;
        }
        func(perPage, newSkip);
        _this.setState({ linkId: link.id, linkActive: true, skip: newSkip });
      };
    };

    _this.buttonPages = function (link) {
      return _react2.default.createElement(
        'li',
        {
          key: 'li-' + link.id,
          className: _this.state.linkId === link.id && _this.state.linkActive && link.id !== 'First' && link.id !== 'Previous' && link.id !== 'Next' && link.id !== 'Last' ? 'current' : ''
        },
        _react2.default.createElement(
          'a',
          { href: '#', onClick: _this.handleClick(link) },
          _react2.default.createElement(
            'span',
            null,
            link.id
          )
        )
      );
    };

    _this.generatePageLinks = function () {
      var pagesCount = _this.props.count / _this.props.perPage;
      pagesCount = Math.ceil(pagesCount);

      var links = [];
      var skip = 0;

      for (var i = 1; i <= pagesCount; i++) {
        if (i === 1) {
          links.push({ id: 'First', skip: skip, pages: pagesCount });
          links.push({
            id: 'Previous',
            skip: skip,
            pages: pagesCount
          });
        }

        links.push({ id: i, skip: skip, pages: pagesCount });

        if (i === pagesCount) {
          links.push({ id: 'Next', skip: skip, pages: pagesCount });
          links.push({
            id: 'Last',
            skip: skip,
            pages: pagesCount
          });
        }
        skip += _this.props.perPage;
      }

      return links.map(function (link) {
        return _this.buttonPages(link);
      });
    };
    return _this;
  }

  _createClass(Paginate, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        PaginateStyled,
        { start: this.state.start, end: this.state.end },
        this.generatePageLinks()
      );
    }
  }]);

  return Paginate;
}(_react.PureComponent);

Paginate.defaultProps = {
  count: 0,
  perPage: 5,
  func: {}
};

Paginate.propTypes = {
  count: _propTypes2.default.number,
  perPage: _propTypes2.default.number,
  func: _propTypes2.default.func
};

exports.default = Paginate;