@massds/mayflower-react/dist/Pagination/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _is = _interopRequireDefault(require("is"));
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * Pagination module.
 * @module @massds/mayflower-react/Pagination
 * @requires module:@massds/mayflower-assets/scss/02-molecules/pagination
 */

var Pagination = function Pagination(props) {
  var prev = props.prev,
    next = props.next,
    pages = props.pages,
    backToTop = props.backToTop,
    className = props.className;
  var hasPrev = !!(prev && !prev.hide);
  var hasNext = !!(next && !next.hide);
  var hasPages = !!(pages && pages.length);
  var classes = (0, _classnames["default"])('ma__pagination js-pagination', className);
  var handleClick = function handleClick(event, handleAnchorClick) {
    event.preventDefault();
    if (_is["default"].fn(handleAnchorClick)) {
      handleAnchorClick(event);
    }
  };
  var handleKeyDown = function handleKeyDown(event, handleAnchorClick) {
    if (event.key === ' ' && _is["default"].fn(handleAnchorClick)) {
      event.preventDefault();
      handleAnchorClick(event);
    }
  };
  if (!hasPrev && !hasNext && !hasPages) {
    return null;
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes,
    role: "navigation",
    "aria-label": "Pagination Navigation"
  }, /*#__PURE__*/_react["default"].createElement("nav", {
    className: "ma__pagination__container"
  }, backToTop && backToTop.description && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__visually-hidden"
  }, backToTop.description), hasPrev &&
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/anchor-is-valid
  _react["default"].createElement("a", {
    className: "ma__pagination__prev " + (prev.disabled && ' disabled'),
    role: "button",
    href: prev.href || '#',
    onClick: function onClick(e) {
      return handleClick(e, prev.onClick);
    },
    onKeyDown: function onKeyDown(e) {
      return handleKeyDown(e, prev.onClick);
    },
    "aria-label": "Go to " + prev.text + " page",
    "aria-disabled": prev.disabled,
    tabIndex: prev.disabled ? -1 : 0
  }, prev.text), hasPages && pages.map(function (page, pageIndex) {
    var key = "pagination.item." + pageIndex;
    return page.text === 'spacer' ? /*#__PURE__*/_react["default"].createElement("span", {
      key: key,
      className: "ma__pagination__spacer"
    }, "\u2026") :
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    _react["default"].createElement("a", {
      className: page.active ? 'ma__pagination__page is-active' : 'ma__pagination__page',
      role: "button",
      href: page.href || '#',
      "data-page": page.text,
      onClick: function onClick(e) {
        return handleClick(e, page.onClick);
      },
      onKeyDown: function onKeyDown(e) {
        return handleKeyDown(e, page.onClick);
      },
      key: key,
      "aria-label": "Go to Page " + page.text,
      tabIndex: 0
    }, page.text);
  }), hasNext &&
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/anchor-is-valid
  _react["default"].createElement("a", {
    className: "ma__pagination__next " + (next.disabled && ' disabled'),
    role: "button",
    href: next.href || '#',
    onClick: function onClick(e) {
      return handleClick(e, next.onClick);
    },
    onKeyDown: function onKeyDown(e) {
      return handleKeyDown(e, next.onClick);
    },
    "aria-label": "Go to " + next.text + " page",
    "aria-disabled": next.disabled,
    tabIndex: next.disabled ? -1 : 0
  }, next.text), backToTop && backToTop.text && /*#__PURE__*/_react["default"].createElement("a", {
    className: "visually-hidden ma__pagination__back-to-top",
    href: backToTop.fragment || '#'
  }, backToTop.text)));
};
Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom class to add to the root element. */
  className: _propTypes["default"].string,
  /** next.disabled: Defines whether the next button is available or not to users.
      next.text: Defines the text shown for the next button. */
  next: _propTypes["default"].shape({
    disabled: _propTypes["default"].bool,
    text: _propTypes["default"].string.isRequired,
    href: _propTypes["default"].string,
    hide: _propTypes["default"].bool,
    onClick: _propTypes["default"].func
  }),
  /** prev.disabled: Defines whether the prev button is available or not to users.
      prev.text: Defines the text shown for the previous button. */
  prev: _propTypes["default"].shape({
    disabled: _propTypes["default"].bool,
    text: _propTypes["default"].string.isRequired,
    href: _propTypes["default"].string,
    hide: _propTypes["default"].bool,
    onClick: _propTypes["default"].func
  }),
  /** prev.text: Defines the text shown for the previous button for screen readers.
   prev.description: Define the description shown before the first pagination link for screen readers
   prev.fragement: Defines id of the element to go back to */
  backToTop: _propTypes["default"].shape({
    text: _propTypes["default"].string.isRequired,
    description: _propTypes["default"].string.isRequired,
    fragment: _propTypes["default"].string
  }),
  /** Pages is an array that defines what page numbers users are able to paginate through.
      pages.active: Defines whether the page number is active or not.
      pages.text: Defines the text shown for page number. */
  pages: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    active: _propTypes["default"].bool,
    text: _propTypes["default"].string.isRequired,
    href: _propTypes["default"].string,
    hide: _propTypes["default"].bool,
    onClick: _propTypes["default"].func
  }))
} : {};
var _default = exports["default"] = Pagination;
module.exports = exports.default;