@bigfishtv/cockpit/src/components/Pagination.js

import React from 'react'
import range from 'lodash/range'
import classnames from 'classnames'

import QueryLink from './QueryLink'

const Pagination = ({ count, current_page, has_next_page, has_prev_page, limit, page_count, modulus = 8 }) =>
	page_count < 2 ? (
		<nav />
	) : (
		<nav className="button-group">
			{current_page > modulus / 2 + 1 && (
				<QueryLink query={{ page: 1 }} className="button button-xsmall">
					<span aria-hidden>«</span>
					<span className="screen-reader">First</span>
				</QueryLink>
			)}
			{paginationNumbers(current_page, page_count, modulus).map(page => (
				<QueryLink
					key={page}
					query={{ page }}
					className={classnames('button', 'button-xsmall', { 'button-primary': page === current_page })}>
					{page}
				</QueryLink>
			))}
			{current_page < page_count - modulus / 2 && (
				<QueryLink query={{ page: page_count }} className="button button-xsmall">
					<span aria-hidden>»</span>
					<span className="screen-reader">Last</span>
				</QueryLink>
			)}
		</nav>
	)

export default Pagination

export function paginationNumbers(current_page, page_count, modulus = 8) {
	if (page_count <= modulus + 1) {
		return range(1, page_count + 1)
	}

	const half = Math.floor(modulus / 2)
	let end = current_page + half

	if (end > page_count) {
		end = page_count
	}

	let start = current_page - (modulus - (end - current_page))

	if (start <= 1) {
		start = 1
		end = current_page + (modulus - current_page) + 1
	}

	return range(start, end + 1)
}