@grafana/ui/dist/esm/components/Pagination/Pagination.mjs.map

Grafana Components Library

{"version":3,"file":"Pagination.mjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button, ButtonVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface Props {\n  /** The current page index being shown. */\n  currentPage: number;\n  /** Number of total pages. */\n  numberOfPages: number;\n  /** Callback function for fetching the selected page.  */\n  onNavigate: (toPage: number) => void;\n  /** When set to true and the pagination result is only one page it will not render the pagination at all. */\n  hideWhenSinglePage?: boolean;\n  /** Small version only shows the current page and the navigation buttons. */\n  showSmallVersion?: boolean;\n  className?: string;\n}\n\nexport const Pagination = ({\n  currentPage,\n  numberOfPages,\n  onNavigate,\n  hideWhenSinglePage,\n  showSmallVersion,\n  className,\n}: Props) => {\n  const styles = useStyles2(getStyles);\n  const pageLengthToCondense = showSmallVersion ? 1 : 8;\n\n  const pageButtons = useMemo(() => {\n    const pages = [...new Array(numberOfPages).keys()];\n\n    const condensePages = numberOfPages > pageLengthToCondense;\n    const getListItem = (page: number, variant: 'primary' | 'secondary') => (\n      <li key={page} className={styles.item}>\n        <Button size=\"sm\" variant={variant} onClick={() => onNavigate(page)}>\n          {page}\n        </Button>\n      </li>\n    );\n\n    return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {\n      const page = pageIndex + 1;\n      const variant: ButtonVariant = page === currentPage ? 'primary' : 'secondary';\n\n      // The indexes at which to start and stop condensing pages\n      const lowerBoundIndex = pageLengthToCondense;\n      const upperBoundIndex = numberOfPages - pageLengthToCondense + 1;\n      // When the indexes overlap one another this number is negative\n      const differenceOfBounds = upperBoundIndex - lowerBoundIndex;\n\n      const isFirstOrLastPage = page === 1 || page === numberOfPages;\n      // This handles when the lowerBoundIndex < currentPage < upperBoundIndex\n      const currentPageIsBetweenBounds =\n        differenceOfBounds > -1 && currentPage >= lowerBoundIndex && currentPage <= upperBoundIndex;\n\n      // Show ellipsis after that many pages\n      const ellipsisOffset = showSmallVersion ? 1 : 3;\n\n      // The offset to show more pages when currentPageIsBetweenBounds\n      const pageOffset = showSmallVersion ? 0 : 2;\n\n      if (condensePages) {\n        if (\n          isFirstOrLastPage ||\n          (currentPage < lowerBoundIndex && page < lowerBoundIndex) ||\n          (differenceOfBounds >= 0 && currentPage > upperBoundIndex && page > upperBoundIndex) ||\n          (differenceOfBounds < 0 && currentPage >= lowerBoundIndex && page > upperBoundIndex) ||\n          (currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset)\n        ) {\n          // Renders a button for the page\n          pagesToRender.push(getListItem(page, variant));\n        } else if (\n          (page === lowerBoundIndex && currentPage < lowerBoundIndex) ||\n          (page === upperBoundIndex && currentPage > upperBoundIndex) ||\n          (currentPageIsBetweenBounds &&\n            (page === currentPage - ellipsisOffset || page === currentPage + ellipsisOffset))\n        ) {\n          // Renders and ellipsis to represent condensed pages\n          pagesToRender.push(\n            <li key={page} className={styles.item}>\n              <Icon className={styles.ellipsis} name=\"ellipsis-v\" data-testid=\"pagination-ellipsis-icon\" />\n            </li>\n          );\n        }\n      } else {\n        pagesToRender.push(getListItem(page, variant));\n      }\n      return pagesToRender;\n    }, []);\n  }, [currentPage, numberOfPages, onNavigate, pageLengthToCondense, showSmallVersion, styles.ellipsis, styles.item]);\n\n  if (hideWhenSinglePage && numberOfPages <= 1) {\n    return null;\n  }\n\n  const previousPageLabel = t('grafana-ui.pagination.previous-page', 'previous page');\n  const nextPageLabel = t('grafana-ui.pagination.next-page', 'next page');\n\n  return (\n    <div className={cx(styles.container, className)} role=\"navigation\">\n      <ol>\n        <li className={styles.item}>\n          <Button\n            aria-label={previousPageLabel}\n            size=\"sm\"\n            variant=\"secondary\"\n            onClick={() => onNavigate(currentPage - 1)}\n            disabled={currentPage === 1}\n          >\n            <Icon name=\"angle-left\" />\n          </Button>\n        </li>\n        {pageButtons}\n        <li className={styles.item}>\n          <Button\n            aria-label={nextPageLabel}\n            size=\"sm\"\n            variant=\"secondary\"\n            onClick={() => onNavigate(currentPage + 1)}\n            disabled={currentPage === numberOfPages}\n          >\n            <Icon name=\"angle-right\" />\n          </Button>\n        </li>\n      </ol>\n    </div>\n  );\n};\n\nconst getStyles = () => {\n  return {\n    container: css({\n      float: 'right',\n    }),\n    item: css({\n      display: 'inline-block',\n      paddingLeft: '10px',\n      marginBottom: '5px',\n    }),\n    ellipsis: css({\n      transform: 'rotate(90deg)',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}