@vtex/styleguide/lib/Pagination/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

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 _CaretLeft = require("../icon/CaretLeft");

var _CaretLeft2 = _interopRequireDefault(_CaretLeft);

var _CaretRight = require("../icon/CaretRight");

var _CaretRight2 = _interopRequireDefault(_CaretRight);

var _ButtonWithIcon = require("../ButtonWithIcon");

var _ButtonWithIcon2 = _interopRequireDefault(_ButtonWithIcon);

var _Dropdown = require("../Dropdown");

var _Dropdown2 = _interopRequireDefault(_Dropdown);

var _PageIndicator = require("./PageIndicator");

var _PageIndicator2 = _interopRequireDefault(_PageIndicator);

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var caretLeft = _react2.default.createElement(_CaretLeft2.default, null);

var caretRight = _react2.default.createElement(_CaretRight2.default, null);

var Pagination =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Pagination, _PureComponent);

  function Pagination(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;

    _this.handleRowsChange = function (e, value) {
      var rowsOptions = _this.props.rowsOptions;
      var optionIndex = rowsOptions.indexOf(parseInt(value, 10));

      _this.setState({
        selectedRowsOptionIndex: optionIndex
      });

      _this.props.onRowsChange && _this.props.onRowsChange(e, value);
    };

    _this.handlePrevPage = function (e) {
      _this.props.onPrevClick && _this.props.onPrevClick(e);
    };

    _this.handleNextPage = function (e) {
      _this.props.onNextClick && _this.props.onNextClick(e);
    };

    _this.createRowOptions = function (rowsOptions) {
      if (rowsOptions) {
        var opts = [];
        rowsOptions.forEach(function (o) {
          return opts.push({
            label: o,
            value: o
          });
        });
        return opts;
      }

      return null;
    };

    _this.state = {
      selectedRowsOptionIndex: 0
    };
    return _this;
  }

  var _proto = Pagination.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        rowsOptions = _this$props.rowsOptions,
        totalItems = _this$props.totalItems,
        currentItemFrom = _this$props.currentItemFrom,
        currentItemTo = _this$props.currentItemTo,
        textOf = _this$props.textOf,
        textShowRows = _this$props.textShowRows,
        selectedOption = _this$props.selectedOption,
        hasPageTopIndicator = _this$props.hasPageTopIndicator,
        itemLabel = _this$props.itemLabel,
        testIds = _this$props.testIds;
    var selectedRowsOptionIndex = this.state.selectedRowsOptionIndex;
    var dropdownOptions = this.createRowOptions(rowsOptions);
    var isPrevDisabled = currentItemFrom <= 1;
    var isNextDisabled = currentItemTo >= totalItems;
    var itemTo = currentItemTo > totalItems ? totalItems : currentItemTo;
    return _react2.default.createElement("div", {
      className: "flex flex-column"
    }, hasPageTopIndicator && _react2.default.createElement("div", {
      className: "mt2 mb5"
    }, _react2.default.createElement(_PageIndicator2.default, {
      currentItemFrom: currentItemFrom,
      itemTo: itemTo,
      textOf: textOf,
      totalItems: totalItems,
      itemLabel: itemLabel
    })), this.props.children, _react2.default.createElement("div", {
      className: (0, _classnames2.default)(['flex flex-row items-center', {
        'justify-between': rowsOptions,
        'justify-end': !rowsOptions
      }])
    }, dropdownOptions && _react2.default.createElement("div", {
      className: "flex flex-row pt5 items-baseline"
    }, _react2.default.createElement("span", {
      className: "mr4 c-muted-2 t-small self-center"
    }, textShowRows), _react2.default.createElement(_Dropdown2.default, {
      size: "small",
      options: dropdownOptions,
      selectTestId: testIds.rowsOptions,
      value: selectedOption || dropdownOptions[selectedRowsOptionIndex].label,
      onChange: this.handleRowsChange
    })), _react2.default.createElement("div", {
      className: "flex flex-row pt5 items-center"
    }, _react2.default.createElement(_PageIndicator2.default, {
      currentItemFrom: currentItemFrom,
      itemTo: itemTo,
      textOf: textOf,
      totalItems: totalItems,
      testId: testIds.pageIndicator
    }), _react2.default.createElement("div", {
      className: "ml4"
    }, _react2.default.createElement(_ButtonWithIcon2.default, {
      icon: caretLeft,
      variation: "secondary",
      size: "small",
      disabled: isPrevDisabled,
      onClick: this.handlePrevPage,
      testId: testIds.prevBtn
    })), _react2.default.createElement("div", {
      className: "ml2"
    }, _react2.default.createElement(_ButtonWithIcon2.default, {
      icon: caretRight,
      variation: "secondary",
      size: "small",
      disabled: isNextDisabled,
      onClick: this.handleNextPage,
      testId: testIds.nextBtn
    })))));
  };

  return Pagination;
}(_react.PureComponent);

Pagination.defaultProps = {
  rowsOptions: null,
  hasPageTopIndicator: false,
  testIds: {}
};
Pagination.propTypes = {
  children: _propTypes2.default.node,
  rowsOptions: _propTypes2.default.array,
  currentItemFrom: _propTypes2.default.number.isRequired,
  currentItemTo: _propTypes2.default.number.isRequired,
  textOf: _propTypes2.default.node.isRequired,
  textShowRows: _propTypes2.default.node.isRequired,
  totalItems: _propTypes2.default.number.isRequired,
  itemLabel: _propTypes2.default.string,

  /**
   * Use this prop if you want to control the number of rows selected, instead of leaving it to the Pagination component.
   */
  selectedOption: _propTypes2.default.number,
  onRowsChange: _propTypes2.default.func,
  onNextClick: _propTypes2.default.func,
  onPrevClick: _propTypes2.default.func,
  hasPageTopIndicator: _propTypes2.default.bool,
  testIds: _propTypes2.default.shape({
    rowsOptions: _propTypes2.default.string,
    prevBtn: _propTypes2.default.string,
    nextBtn: _propTypes2.default.string,
    pageIndicator: _propTypes2.default.string
  })
};
exports.default = Pagination;