@grafana/ui/dist/cjs/components/Pagination/Pagination.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');

"use strict";
const Pagination = ({
  currentPage,
  numberOfPages,
  onNavigate,
  hideWhenSinglePage,
  showSmallVersion,
  className,
  hasNextPage
}) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const pageLengthToCondense = showSmallVersion ? 1 : 8;
  const pageButtons = React.useMemo(() => {
    const pages = [...new Array(numberOfPages).keys()];
    const condensePages = numberOfPages > pageLengthToCondense;
    const getListItem = (page, isCurrentPage) => {
      const variant = isCurrentPage ? "primary" : "secondary";
      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx(
        Button.Button,
        {
          "aria-current": isCurrentPage ? "page" : void 0,
          size: "sm",
          variant,
          onClick: () => onNavigate(page),
          children: page
        }
      ) }, page);
    };
    return pages.reduce((pagesToRender, pageIndex) => {
      const page = pageIndex + 1;
      const isCurrentPage = page === currentPage;
      const lowerBoundIndex = pageLengthToCondense;
      const upperBoundIndex = numberOfPages - pageLengthToCondense + 1;
      const differenceOfBounds = upperBoundIndex - lowerBoundIndex;
      const isFirstOrLastPage = page === 1 || page === numberOfPages;
      const currentPageIsBetweenBounds = differenceOfBounds > -1 && currentPage >= lowerBoundIndex && currentPage <= upperBoundIndex;
      const ellipsisOffset = showSmallVersion ? 1 : 3;
      const pageOffset = showSmallVersion ? 0 : 2;
      if (condensePages) {
        if (isFirstOrLastPage || currentPage < lowerBoundIndex && page < lowerBoundIndex || differenceOfBounds >= 0 && currentPage > upperBoundIndex && page > upperBoundIndex || differenceOfBounds < 0 && currentPage >= lowerBoundIndex && page > upperBoundIndex || currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset) {
          pagesToRender.push(getListItem(page, isCurrentPage));
        } else if (page === lowerBoundIndex && currentPage < lowerBoundIndex || page === upperBoundIndex && currentPage > upperBoundIndex || currentPageIsBetweenBounds && (page === currentPage - ellipsisOffset || page === currentPage + ellipsisOffset)) {
          pagesToRender.push(
            /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.ellipsis, name: "ellipsis-v", "data-testid": "pagination-ellipsis-icon" }) }, page)
          );
        }
      } else {
        pagesToRender.push(getListItem(page, isCurrentPage));
      }
      return pagesToRender;
    }, []);
  }, [currentPage, numberOfPages, onNavigate, pageLengthToCondense, showSmallVersion, styles.ellipsis, styles.item]);
  if (hideWhenSinglePage && numberOfPages <= 1) {
    return null;
  }
  const previousPageLabel = i18n.t("grafana-ui.pagination.previous-page", "previous page");
  const nextPageLabel = i18n.t("grafana-ui.pagination.next-page", "next page");
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.container, className), role: "navigation", children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { children: [
    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx(
      Button.Button,
      {
        "aria-label": previousPageLabel,
        size: "sm",
        variant: "secondary",
        onClick: () => onNavigate(currentPage - 1),
        disabled: currentPage === 1,
        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-left" })
      }
    ) }),
    pageButtons,
    pageButtons.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.item, children: currentPage }),
    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx(
      Button.Button,
      {
        "aria-label": nextPageLabel,
        size: "sm",
        variant: "secondary",
        onClick: () => onNavigate(currentPage + 1),
        disabled: hasNextPage === false || currentPage === numberOfPages,
        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-right" })
      }
    ) })
  ] }) });
};
const getStyles = () => {
  return {
    container: css.css({
      float: "right"
    }),
    item: css.css({
      display: "inline-block",
      paddingLeft: "10px",
      marginBottom: "5px"
    }),
    ellipsis: css.css({
      transform: "rotate(90deg)"
    })
  };
};

exports.Pagination = Pagination;
//# sourceMappingURL=Pagination.cjs.map