@hbsis.uikit/react/src/components/pagination/index.js

Biblioteca ReactJS

import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import { pagination } from './pagination'
import Page from './page'
import { Backward, Forward } from 'icons'
import PaginationStyled from './pagination.styled'

const Pagination = ({ total, activePage = 1, onClickPage, onClickNextPage, onClickPreviousPage }) => (
  <PaginationStyled>
    <li className={cx({'inactive': activePage === 1}, 'link')} onClick={() => onClickPreviousPage(activePage - 1)}>
      <Backward />
    </li>
    {pagination({ total, activePage }).map((page, index) => (
      <li key={index} className={cx({'active': page === activePage}, 'link')}>
        <Page page={page} onClick={onClickPage} />
      </li>
    ))}
    <li className={cx({'inactive': activePage === total}, 'link')} onClick={() => onClickNextPage(activePage + 1)}>
      <Forward />
    </li>
  </PaginationStyled>
)

Pagination.propTypes = {
  total: PropTypes.number,
  activePage: PropTypes.number,
  onClickPage: PropTypes.func,
  onClickNextPage: PropTypes.func,
  onClickPreviousPage: PropTypes.func
}

export { Pagination }