1  import React from 'react';
 2  import {Pagination as RPagination, PaginationItem, PaginationLink} from 'reactstrap';
 3  import PropTypes from 'prop-types';
 4  
 5  const NB_PAGES_MAX = 8;
 6  
 7  const Pagination = ({currentPage, numberOfPages, changePage}) => {
 8    let max = currentPage + NB_PAGES_MAX / 2;
 9    if (max > numberOfPages) {
10      max = numberOfPages;
11    }
12    let i = max - NB_PAGES_MAX;
13    if (i < 1) {
14      i = 1;
15    }
16    if (max - i < NB_PAGES_MAX) {
17      max += NB_PAGES_MAX - max + 1;
18    }
19    const pageNumbers = [];
20    for (i; i <= max; i++) {
21      pageNumbers.push(i);
22    }
23  
24    return (
25      <RPagination aria-label="Explorer navigation" className="mt-4 mb-0 float-right">
26        <PaginationItem disabled={currentPage <= 1}>
27          <PaginationLink previous href="#" onClick={(e) => {
28            e.preventDefault();
29            changePage(currentPage - 1);
30          }}/>
31        </PaginationItem>
32        {pageNumbers.map(number => (<PaginationItem active={currentPage === number} key={'page-' + number}>
33          <PaginationLink href="#" onClick={(e) => {
34            e.preventDefault();
35            changePage(number);
36          }}>
37            {number}
38          </PaginationLink>
39        </PaginationItem>))}
40        <PaginationItem disabled={currentPage >= numberOfPages}>
41          <PaginationLink next href="#" onClick={(e) => {
42            e.preventDefault();
43            changePage(currentPage + 1);
44          }}/>
45        </PaginationItem>
46      </RPagination>
47    );
48  };
49  
50  Pagination.propTypes = {
51    numberOfPages: PropTypes.number,
52    currentPage: PropTypes.number,
53    changePage: PropTypes.func
54  };
55  
56  export default Pagination;