All files / components/pagination index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 }