@findify/react-components/lib/components/Pagination/index.js

Findify react UI components

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } 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; }

/**
 * @module components/Pagination
 */
import { memo } from 'react';
import cx from 'classnames';
import Button from "../Button";
import Icon from "../Icon";
import { usePagination } from '@findify/react-connect';
var styles = {
  "root": "findify-components--pagination",
  "prev": "findify-components--pagination__prev",
  "next": "findify-components--pagination__next",
  "first": "findify-components--pagination__first",
  "last": "findify-components--pagination__last",
  "page": "findify-components--pagination__page",
  "dots": "findify-components--pagination__dots",
  "active": "findify-components--pagination__active"
};
import useTranslations from "../../helpers/useTranslations";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var getRange = function getRange(_ref) {
  var current = _ref.current,
      total = _ref.total,
      step = _ref.step;
  var min = current - step;
  var max = current + step + 1;
  var to = max > total ? total + 1 : max;
  var from = min < 1 ? 1 : min;
  return Array.from(Array(to - from).keys()).map(function (k) {
    return from + k;
  });
};

export default /*#__PURE__*/memo(function (_ref2) {
  var _ref2$theme = _ref2.theme,
      theme = _ref2$theme === void 0 ? styles : _ref2$theme;

  var _usePagination = usePagination(),
      pages = _usePagination.pages,
      current = _usePagination.current,
      getPageProps = _usePagination.getPageProps,
      config = _usePagination.config;

  var translate = useTranslations();
  if (!pages) return null;
  var step = config.getIn(['pagination', 'step']);
  var total = pages.size + 1;
  var showFirst = current > step + 1;
  var showLast = current < total - step;
  var showFirstDots = current > step + 2;
  var showLastDots = current < total - step - 1;
  var showPrev = current > step;
  var showNext = total - step > current;
  var visiblePages = getRange({
    current: current,
    total: total,
    step: step
  });
  return /*#__PURE__*/_jsxs("div", {
    className: theme.root,
    role: "navigation",
    "aria-label": translate('pagination.label'),
    children: [showPrev ? /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({}, getPageProps(current - 1)), {}, {
      className: theme.prev,
      children: [/*#__PURE__*/_jsx(Icon, {
        name: "ArrowLeft",
        title: translate('pagination.previous')
      }), translate('pagination.previous')]
    })) : null, showFirst ? /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, getPageProps(1)), {}, {
      className: theme.first,
      "aria-label": translate('pagination.goTo', 1),
      children: "1"
    })) : null, showFirstDots ? /*#__PURE__*/_jsx(Button, {
      className: theme.dots,
      tabIndex: -1,
      children: "..."
    }) : null, visiblePages.map(function (page) {
      return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, getPageProps(page)), {}, {
        className: cx(theme.page, current === page && theme.active),
        "aria-label": translate('pagination.goTo', page),
        children: page
      }));
    }), showLastDots ? /*#__PURE__*/_jsx(Button, {
      className: theme.dots,
      tabIndex: -1,
      children: "..."
    }) : null, showLast ? /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, getPageProps(total)), {}, {
      className: theme.last,
      "aria-label": translate('pagination.goTo', total),
      children: total
    })) : null, showNext ? /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({}, getPageProps(current + 1)), {}, {
      className: theme.next,
      children: [translate('pagination.next'), /*#__PURE__*/_jsx(Icon, {
        name: "ArrowRight",
        title: translate('pagination.next')
      })]
    })) : null]
  });
});