react-next-paging/dist/react-next-paging.js

ReactJS component for easy pagination

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.getIniPageofArray = exports.isNoEven = exports.isNoPagesLargerPagesSpan = exports.getHalfPagesArray = exports.getNoPages = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

function composeEventHandlers() {
  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
    fns[_key] = arguments[_key];
  }

  return function (event) {
    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
      args[_key2 - 1] = arguments[_key2];
    }

    return fns.some(function (fn) {
      fn && fn.apply(void 0, [event].concat(args));
      event.persist();
    });
  };
}

var getNoPages = function getNoPages() {
  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var itemsperpage = arguments.length > 1 ? arguments[1] : undefined;
  return Math.ceil(items.length / itemsperpage);
};

exports.getNoPages = getNoPages;

var getHalfPagesArray = function getHalfPagesArray(pagesforarray) {
  return Math.floor(pagesforarray / 2);
};

exports.getHalfPagesArray = getHalfPagesArray;

var isNoPagesLargerPagesSpan = function isNoPagesLargerPagesSpan(nopages, pagesspan) {
  return nopages > pagesspan;
};

exports.isNoPagesLargerPagesSpan = isNoPagesLargerPagesSpan;

var isNoEven = function isNoEven(no) {
  return no % 2 === 0;
};

exports.isNoEven = isNoEven;

var getIniPageofArray = function getIniPageofArray(nopages, pagesspan, page, inipagearray) {
  if (isNoPagesLargerPagesSpan(nopages, pagesspan)) {
    if (page <= nopages) {
      var halfspan = getHalfPagesArray(pagesspan);

      if (page >= halfspan + inipagearray) {
        var newini = page - halfspan > 0 ? page - halfspan : 1;

        if (newini + pagesspan <= nopages) {
          return newini;
        } else {
          return nopages - pagesspan + 1;
        }
      } else {
        if (page > 0) {
          return page - halfspan > 0 ? page - halfspan : 1;
        } else {
          return 1;
        }
      }
    }
  }

  return inipagearray;
};

exports.getIniPageofArray = getIniPageofArray;

var ReactNextPaging =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ReactNextPaging, _React$Component);

  function ReactNextPaging(_props) {
    var _this;

    (0, _classCallCheck2.default)(this, ReactNextPaging);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ReactNextPaging).call(this, _props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generateStateFromProps", function (props) {
      var currentpage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
      console.log("generateStateFromProps");
      var items = props.items,
          itemsperpage = props.itemsperpage,
          pagesspan = props.pagesspan;
      var newnopages = getNoPages(items, itemsperpage);
      var newcurrentpage = currentpage;

      if (currentpage > newnopages) {
        newcurrentpage = 1;
      }

      var newinitialitem = (newcurrentpage - 1) * itemsperpage;
      var newlastitem = newcurrentpage * itemsperpage;
      var pagesforarray = isNoPagesLargerPagesSpan(newnopages, pagesspan) ? pagesspan : newnopages;
      return {
        pagesspan: pagesspan,
        inipagearray: 1,
        pagesforarray: pagesforarray,
        nopages: newnopages,
        noitems: items.length,
        initialitem: newinitialitem,
        lastitem: newlastitem,
        currentpage: newcurrentpage,
        goBackBdisabled: _this.goBackButtonState(newcurrentpage),
        goFastBackBdisabled: _this.goFastBackButtonState(newcurrentpage),
        goFwdBdisabled: _this.goFwdButtonState(newcurrentpage, newnopages),
        goFastFwdBdisabled: _this.goFastFwdButtonState(newcurrentpage, newnopages)
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "computeBackLimits", function (prevpage) {
      var itemsperpage = _this.props.itemsperpage;
      var newinitialitem = (prevpage - 1) * itemsperpage;
      var newlastitem = prevpage * itemsperpage; // console.log(
      //   `computeBackLimits() newinitialitem: ${newinitialitem} newlastitem: ${newlastitem}`
      // );

      return {
        newinitialitem: newinitialitem,
        newlastitem: newlastitem
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "computeFwdLimits", function (nextpage) {
      var itemsperpage = _this.props.itemsperpage;
      var newinitialitem = (nextpage - 1) * itemsperpage;
      var newlastitem = nextpage * itemsperpage;
      return {
        newinitialitem: newinitialitem,
        newlastitem: newlastitem
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "computeSelectedPageLimits", function (selpage) {
      var itemsperpage = _this.props.itemsperpage;
      var newinitialitem = (selpage - 1) * itemsperpage;
      var newlastitem = selpage * itemsperpage; // console.log(
      //   `computeFwdLimits() newinitialitem: ${newinitialitem} newlastitem: ${newlastitem}`
      // );

      return {
        newinitialitem: newinitialitem,
        newlastitem: newlastitem
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goToPage", function (page, event) {
      var _this$state = _this.state,
          currentpage = _this$state.currentpage,
          nopages = _this$state.nopages,
          pagesspan = _this$state.pagesspan,
          inipagearray = _this$state.inipagearray;

      if (page > 0 && page <= nopages) {
        // let prevpage = currentpage - 1;
        var newlimits = _this.computeSelectedPageLimits(page); // let inipagearray = getIniPageofArray(nopages, pagesspan, currentpage);
        // console.log({ titulo: "nopages", valor: nopages });
        // console.log({ titulo: "pagesspan", valor: pagesspan });
        // console.log({ titulo: "page", valor: page });


        var newinipagearray = getIniPageofArray(nopages, pagesspan, page, inipagearray); // console.log({ titulo: "goToPage->inipagearray", valor: inipagearray });
        // console.log(`goBack() new page: ${prevpage}`);

        _this.setState({
          inipagearray: newinipagearray,
          currentpage: page,
          initialitem: newlimits.newinitialitem,
          lastitem: newlimits.newlastitem,
          goBackBdisabled: _this.goBackButtonState(page),
          goFastBackBdisabled: _this.goFastBackButtonState(page),
          goFwdBdisabled: _this.goFwdButtonState(page, nopages),
          goFastFwdBdisabled: _this.goFastFwdButtonState(page, nopages)
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goBack", function () {
      // console.log(`goBack()`);
      var _this$state2 = _this.state,
          currentpage = _this$state2.currentpage,
          nopages = _this$state2.nopages,
          pagesspan = _this$state2.pagesspan,
          inipagearray = _this$state2.inipagearray;

      if (currentpage > 1) {
        var prevpage = currentpage - 1;

        var newlimits = _this.computeBackLimits(prevpage);

        var newinipagearray = getIniPageofArray(nopages, pagesspan, prevpage, inipagearray); // console.log(`goBack() new page: ${prevpage}`);

        _this.setState({
          currentpage: prevpage,
          inipagearray: newinipagearray,
          initialitem: newlimits.newinitialitem,
          lastitem: newlimits.newlastitem,
          goBackBdisabled: _this.goBackButtonState(prevpage),
          goFastBackBdisabled: _this.goFastBackButtonState(prevpage),
          goFwdBdisabled: _this.goFwdButtonState(prevpage, nopages),
          goFastFwdBdisabled: _this.goFastFwdButtonState(prevpage, nopages)
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFastBack", function () {
      // console.log(`goBack()`);
      var _this$state3 = _this.state,
          currentpage = _this$state3.currentpage,
          nopages = _this$state3.nopages,
          pagesspan = _this$state3.pagesspan,
          inipagearray = _this$state3.inipagearray;

      if (currentpage > 1) {
        var prevpage = 1;

        var newlimits = _this.computeBackLimits(prevpage);

        var newinipagearray = getIniPageofArray(nopages, pagesspan, prevpage, inipagearray); // console.log(`goBack() new page: ${prevpage}`);

        _this.setState({
          currentpage: prevpage,
          inipagearray: newinipagearray,
          initialitem: newlimits.newinitialitem,
          lastitem: newlimits.newlastitem,
          goBackBdisabled: _this.goBackButtonState(prevpage),
          goFastBackBdisabled: _this.goFastBackButtonState(prevpage),
          goFwdBdisabled: _this.goFwdButtonState(prevpage, nopages),
          goFastFwdBdisabled: _this.goFastFwdButtonState(prevpage, nopages)
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFwd", function () {
      // console.log(`goFwd()`);
      var _this$state4 = _this.state,
          nopages = _this$state4.nopages,
          currentpage = _this$state4.currentpage,
          pagesspan = _this$state4.pagesspan,
          inipagearray = _this$state4.inipagearray;

      if (currentpage < nopages) {
        var nextpage = currentpage + 1;

        var newlimits = _this.computeFwdLimits(nextpage);

        var newinipagearray = getIniPageofArray(nopages, pagesspan, nextpage, inipagearray); // console.log(`goFwd() new page: ${nextpage}`);

        _this.setState({
          currentpage: nextpage,
          inipagearray: newinipagearray,
          initialitem: newlimits.newinitialitem,
          lastitem: newlimits.newlastitem,
          goBackBdisabled: _this.goBackButtonState(nextpage),
          goFastBackBdisabled: _this.goFastBackButtonState(nextpage),
          goFwdBdisabled: _this.goFwdButtonState(nextpage, nopages),
          goFastFwdBdisabled: _this.goFastFwdButtonState(nextpage, nopages)
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFastFwd", function () {
      // console.log(`goFwd()`);
      var _this$state5 = _this.state,
          nopages = _this$state5.nopages,
          currentpage = _this$state5.currentpage,
          pagesspan = _this$state5.pagesspan,
          inipagearray = _this$state5.inipagearray;

      if (currentpage < nopages) {
        var nextpage = nopages * 1;

        var newlimits = _this.computeFwdLimits(nextpage);

        var newinipagearray = getIniPageofArray(nopages, pagesspan, nextpage, inipagearray); // console.log(`goFwd() new page: ${nextpage}`);

        _this.setState({
          currentpage: nextpage,
          inipagearray: newinipagearray,
          initialitem: newlimits.newinitialitem,
          lastitem: newlimits.newlastitem,
          goBackBdisabled: _this.goBackButtonState(nextpage),
          goFastBackBdisabled: _this.goFastBackButtonState(nextpage),
          goFwdBdisabled: _this.goFwdButtonState(nextpage, nopages),
          goFastFwdBdisabled: _this.goFastFwdButtonState(nextpage, nopages)
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goBackButtonState", function (prevpage) {
      if (prevpage <= 1) {
        return true;
      } else {
        return false;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFastBackButtonState", function (prevpage) {
      if (prevpage <= 1) {
        return true;
      } else {
        return false;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFwdButtonState", function (nextpage, nopages) {
      if (nextpage >= nopages) {
        return true;
      } else {
        return false;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "goFastFwdButtonState", function (nextpage, nopages) {
      if (nextpage >= nopages) {
        return true;
      } else {
        return false;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBackButtonProps", function () {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var onClick = _ref.onClick,
          rest = (0, _objectWithoutProperties2.default)(_ref, ["onClick"]);
      var eventHandlers = {
        onClick: composeEventHandlers(onClick, _this.goBack)
      };
      return (0, _objectSpread2.default)({
        role: "button"
      }, eventHandlers, rest);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFastBackButtonProps", function () {
      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var onClick = _ref2.onClick,
          rest = (0, _objectWithoutProperties2.default)(_ref2, ["onClick"]);
      var eventHandlers = {
        onClick: composeEventHandlers(onClick, _this.goFastBack)
      };
      return (0, _objectSpread2.default)({
        role: "button"
      }, eventHandlers, rest);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFwdButtonProps", function () {
      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var onClick = _ref3.onClick,
          rest = (0, _objectWithoutProperties2.default)(_ref3, ["onClick"]);
      var eventHandlers = {
        onClick: composeEventHandlers(onClick, _this.goFwd)
      };
      return (0, _objectSpread2.default)({
        role: "button"
      }, eventHandlers, rest);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFastFwdButtonProps", function () {
      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var onClick = _ref4.onClick,
          rest = (0, _objectWithoutProperties2.default)(_ref4, ["onClick"]);
      var eventHandlers = {
        onClick: composeEventHandlers(onClick, _this.goFastFwd)
      };
      return (0, _objectSpread2.default)({
        role: "button"
      }, eventHandlers, rest);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSelPageButtonProps", function () {
      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var onClick = _ref5.onClick,
          page = _ref5.page,
          rest = (0, _objectWithoutProperties2.default)(_ref5, ["onClick", "page"]);
      var eventHandlers = {
        onClick: composeEventHandlers(onClick, function (event) {
          return _this.goToPage(page, event);
        })
      };
      return (0, _objectSpread2.default)({
        role: "button"
      }, eventHandlers, rest);
    });

    var newState = _this.generateStateFromProps(_props);

    _this.state = (0, _objectSpread2.default)({}, newState);
    return _this;
  }

  (0, _createClass2.default)(ReactNextPaging, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState, snapshot) {
      if (this.props.items.length !== prevProps.items.length || this.props.itemsperpage !== prevProps.itemsperpage || this.props.pagesspan !== prevProps.pagesspan) {
        var currentpage = prevState.currentpage;
        var newState = this.generateStateFromProps(this.props, currentpage);
        this.setState((0, _objectSpread2.default)({}, newState));
      }
    }
  }, {
    key: "getStateAndHelpers",
    value: function getStateAndHelpers() {
      var _this$state6 = this.state,
          nopages = _this$state6.nopages,
          inipagearray = _this$state6.inipagearray,
          currentpage = _this$state6.currentpage,
          pagesforarray = _this$state6.pagesforarray,
          noitems = _this$state6.noitems,
          initialitem = _this$state6.initialitem,
          lastitem = _this$state6.lastitem,
          goBackBdisabled = _this$state6.goBackBdisabled,
          goFastBackBdisabled = _this$state6.goFastBackBdisabled,
          goFwdBdisabled = _this$state6.goFwdBdisabled,
          goFastFwdBdisabled = _this$state6.goFastFwdBdisabled;
      var getBackButtonProps = this.getBackButtonProps,
          getFastBackButtonProps = this.getFastBackButtonProps,
          getFwdButtonProps = this.getFwdButtonProps,
          getFastFwdButtonProps = this.getFastFwdButtonProps,
          getSelPageButtonProps = this.getSelPageButtonProps;
      return {
        // prop getters
        getBackButtonProps: getBackButtonProps,
        getFastBackButtonProps: getFastBackButtonProps,
        getFwdButtonProps: getFwdButtonProps,
        getFastFwdButtonProps: getFastFwdButtonProps,
        getSelPageButtonProps: getSelPageButtonProps,
        // state
        nopages: nopages,
        pagesforarray: pagesforarray,
        inipagearray: inipagearray,
        currentpage: currentpage,
        noitems: noitems,
        initialitem: initialitem,
        lastitem: lastitem,
        goBackBdisabled: goBackBdisabled,
        goFastBackBdisabled: goFastBackBdisabled,
        goFwdBdisabled: goFwdBdisabled,
        goFastFwdBdisabled: goFastFwdBdisabled
      };
    }
  }, {
    key: "render",
    value: function render() {
      return this.props.children(this.getStateAndHelpers());
    }
  }]);
  return ReactNextPaging;
}(_react.default.Component);

(0, _defineProperty2.default)(ReactNextPaging, "propTypes", {
  children: _propTypes.default.func,
  nocolumns: _propTypes.default.number,
  items: _propTypes.default.array,
  pagesspan: _propTypes.default.number
});
(0, _defineProperty2.default)(ReactNextPaging, "defaultProps", {
  itemsperpage: 10,
  pagesspan: 10,
  pagesforarray: 10,
  inipagearray: 1,
  items: []
});
var _default = ReactNextPaging;
exports.default = _default;