@age/quantum/Pagination/sub-components/Mobile.js

Catho react components

"use strict";

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

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

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

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

var _ActionButton = _interopRequireDefault(require("./ActionButton"));

var _theme = require("../../shared/theme");

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

var Info = _styledComponents.default.span.withConfig({
  displayName: "Mobile__Info",
  componentId: "sc-11x3xn3-0"
})(["border-bottom:1px solid;border-top:1px solid;transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;", ""], function (_ref) {
  var _ref$theme = _ref.theme,
      _ref$theme$colors$neu = _ref$theme.colors.neutral,
      neutral300 = _ref$theme$colors$neu[300],
      neutral700 = _ref$theme$colors$neu[700],
      _ref$theme$spacing = _ref$theme.spacing,
      xsmall = _ref$theme$spacing.xsmall,
      medium = _ref$theme$spacing.medium;
  return "\n    border-color: ".concat(neutral300, ";\n    color: ").concat(neutral700, ";\n    padding: ").concat(xsmall, "px ").concat(medium, "px;\n  ");
});

var StyledActionButton = (0, _styledComponents.default)(_ActionButton.default).withConfig({
  displayName: "Mobile__StyledActionButton",
  componentId: "sc-11x3xn3-1"
})(["", " ", " ", ""], function (_ref2) {
  var neutral300 = _ref2.theme.colors.neutral[300];
  return "\n    border-color: ".concat(neutral300, ";\n    border-radius: 10px;\n    border-width: 1px;\n\n    &[aria-disabled=true] {\n      color: ").concat(neutral300, ";\n      display: block;\n    }\n\n    &[aria-disabled=false] {\n      :focus {\n        border-width: 1px;\n      }\n    }\n  ");
}, function (_ref3) {
  var rightSquared = _ref3.rightSquared;
  return rightSquared ? "\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    margin: 0;\n  " : '';
}, function (_ref4) {
  var leftSquared = _ref4.leftSquared;
  return leftSquared ? "\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    margin: 0;\n  " : '';
});
Info.displayName = 'Info';

var Mobile = function Mobile(_ref5) {
  var activePage = _ref5.activePage,
      handlePageClick = _ref5.handlePageClick,
      handleHref = _ref5.handleHref,
      prevButtonText = _ref5.prevButtonText,
      nextButtonText = _ref5.nextButtonText,
      totalPages = _ref5.totalPages,
      infoFormatter = _ref5.infoFormatter,
      theme = _ref5.theme,
      followOnlyFirstPage = _ref5.followOnlyFirstPage;
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledActionButton, {
    tabIndex: 0,
    "aria-disabled": activePage === 1,
    onClick: handlePageClick(activePage - 1),
    href: handleHref(activePage - 1),
    rightSquared: true,
    theme: theme,
    rel: followOnlyFirstPage && activePage > 2 ? 'nofollow' : undefined
  }, prevButtonText), _react.default.createElement(Info, {
    theme: theme
  }, infoFormatter(activePage, totalPages)), _react.default.createElement(StyledActionButton, {
    tabIndex: 0,
    "aria-disabled": activePage === totalPages,
    onClick: handlePageClick(activePage + 1),
    href: handleHref(activePage + 1),
    leftSquared: true,
    theme: theme,
    rel: followOnlyFirstPage ? 'nofollow' : undefined
  }, nextButtonText));
};

Mobile.propTypes = {
  activePage: _propTypes.default.number,
  totalPages: _propTypes.default.number.isRequired,
  infoFormatter: _propTypes.default.func,
  nextButtonText: _propTypes.default.string,
  prevButtonText: _propTypes.default.string,
  handleHref: _propTypes.default.func,
  handlePageClick: _propTypes.default.func,
  theme: _propTypes.default.shape({
    colors: _propTypes.default.object,
    spacing: _propTypes.default.object
  }),
  followOnlyFirstPage: _propTypes.default.bool
};
Mobile.defaultProps = {
  activePage: 1,
  nextButtonText: 'Next',
  prevButtonText: 'Previous',
  infoFormatter: function infoFormatter(activePage, lastPage) {
    return "".concat(activePage, " of ").concat(lastPage);
  },
  handleHref: function handleHref() {},
  handlePageClick: function handlePageClick() {},
  theme: {
    colors: _theme.colors,
    spacing: _theme.spacing
  },
  followOnlyFirstPage: false
};
var _default = Mobile;
exports.default = _default;