@integec/grid-tools/lib/DefaultPager.js

Integ Grid Tools

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _range2 = _interopRequireDefault(require("ramda/src/range"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  margin-left: 5px;\n  margin-right: 5px;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  height: 25px;\n  margin-left: 5px;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  color: ", ";\n  height: 25px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var PageButton = _styledComponents["default"].button(_templateObject(), function (props) {
  return props.disabled ? 'bold' : 'normal';
}, function (props) {
  return props.disabled ? 'brown' : 'black';
});

var Select = _styledComponents["default"].select(_templateObject2());

var TotalPages = _styledComponents["default"].span(_templateObject3());

var Pager = function Pager(_ref) {
  var style = _ref.style,
      className = _ref.className,
      totalPages = _ref.totalPages,
      currentPage = _ref.currentPage,
      setCurrentPage = _ref.setCurrentPage,
      incrementPage = _ref.incrementPage,
      decrementPage = _ref.decrementPage;
  console.log('current page is', currentPage);
  return _react["default"].createElement("div", {
    style: _objectSpread({}, style, {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }),
    className: className
  }, totalPages <= 12 ? (0, _range2["default"])(1, totalPages + 1).map(function (page) {
    return _react["default"].createElement(PageButton, {
      disabled: page === currentPage,
      key: 'page' + page,
      onClick: function onClick(_) {
        return setCurrentPage(page);
      }
    }, page);
  }) : [_react["default"].createElement(PageButton, {
    key: "left",
    onClick: decrementPage
  }, "\u25C0"), _react["default"].createElement(Select, {
    key: "select",
    value: currentPage,
    onChange: function onChange(e) {
      return setCurrentPage(e.target.value);
    }
  }, (0, _range2["default"])(1, totalPages + 1).map(function (page) {
    return _react["default"].createElement("option", {
      key: page,
      value: page
    }, page);
  })), _react["default"].createElement(TotalPages, {
    key: "tp"
  }, "of ", totalPages), _react["default"].createElement(PageButton, {
    key: "right",
    onClick: incrementPage
  }, "\u25B6")]);
}; //


var _default = Pager;
exports["default"] = _default;
//# sourceMappingURL=DefaultPager.js.map