@primer/components/lib/Pagination/Pagination.js

Primer react components

"use strict";

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

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

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

var _Box = _interopRequireDefault(require("../Box"));

var _constants = require("../constants");

var _sx = _interopRequireDefault(require("../sx"));

var _model = require("./model");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const Page = _styledComponents.default.a.withConfig({
  displayName: "Pagination__Page",
  componentId: "sc-b80nss-0"
})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'));

function usePaginationPages({
  theme,
  pageCount,
  currentPage,
  onPageChange,
  hrefBuilder,
  marginPageCount,
  showPages,
  surroundingPageCount
}) {
  const pageChange = _react.default.useCallback(n => e => onPageChange(e, n), [onPageChange]);

  const model = _react.default.useMemo(() => {
    return (0, _model.buildPaginationModel)(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount);
  }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount]);

  const children = _react.default.useMemo(() => {
    return model.map(page => {
      const {
        props,
        key,
        content
      } = (0, _model.buildComponentData)(page, hrefBuilder, pageChange(page.num));
      return /*#__PURE__*/_react.default.createElement(Page, _extends({}, props, {
        key: key,
        theme: theme
      }), content);
    });
  }, [model, hrefBuilder, pageChange, theme]);

  return children;
}

const PaginationContainer = _styledComponents.default.nav.withConfig({
  displayName: "Pagination__PaginationContainer",
  componentId: "sc-b80nss-1"
})(["margin-top:20px;margin-bottom:15px;text-align:center;", ";"], _sx.default);

function Pagination({
  theme,
  pageCount,
  currentPage,
  onPageChange = noop,
  hrefBuilder = defaultHrefBuilder,
  marginPageCount = 1,
  showPages = true,
  surroundingPageCount = 2,
  ...rest
}) {
  const pageElements = usePaginationPages({
    theme,
    pageCount,
    currentPage,
    onPageChange,
    hrefBuilder,
    marginPageCount,
    showPages,
    surroundingPageCount
  });
  return /*#__PURE__*/_react.default.createElement(PaginationContainer, _extends({
    "aria-label": "Pagination"
  }, rest, {
    theme: theme
  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
    display: "inline-block",
    theme: theme
  }, pageElements));
}

Pagination.displayName = "Pagination";

function defaultHrefBuilder(pageNum) {
  return `#${pageNum}`;
} // eslint-disable-next-line @typescript-eslint/no-empty-function


function noop() {}

Pagination.defaultProps = {
  hrefBuilder: defaultHrefBuilder,
  marginPageCount: 1,
  onPageChange: noop,
  showPages: true,
  surroundingPageCount: 2
};
var _default = Pagination;
exports.default = _default;