@swrve/core/src/pagination/PaginationNumbers.jsx

Core set of Swrve UI Components

import React from 'react'
import { number, func } from 'prop-types'

import PaginationItem from './PaginationItem'

const PaginationNumbers = ({ activePage, maxVisibleButtons, numberOfPages, onPageChange }) => {
  const limit = Math.floor(maxVisibleButtons / 2)
  const numDisplayedPages = Math.min(numberOfPages, maxVisibleButtons)
  const numbers = []

  let start = activePage - limit

  if (start + (maxVisibleButtons - 1) > numberOfPages) {
    start = numberOfPages - maxVisibleButtons + 1
  }

  if (start < 1) {
    start = 1
  }

  const lastPageNumber = start + numDisplayedPages

  for (let i = start; i < lastPageNumber; i++) {
    const isActive = activePage === i
    numbers.push(
      <li key={i} className="sw-page-option">
        <PaginationItem
          active={isActive}
          aria-label={`Goto page ${i}`}
          aria-current={isActive}
          onPageChange={onPageChange}
          page={i}
        >
          {i}
        </PaginationItem>
      </li>
    )
  }

  return numbers
}

PaginationNumbers.propTypes = {
  /** Pagination Item Content */
  activePage: number,
  /** Pagination max number of page buttons visible */
  maxVisibleButtons: number,
  /** Total number of pages in data */
  numberOfPages: number.isRequired,
  /** Callback when pagination button is click */
  onPageChange: func
}

PaginationNumbers.defaultProps = {
  activePage: 1,
  maxVisibleButtons: 10
}

PaginationNumbers.displayName = 'PaginationNumbers'

export default PaginationNumbers