55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
import Inferno from 'inferno';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export const Pagination = (props) => {
|
|
PropTypes.checkPropTypes({
|
|
currentPage: PropTypes.number.isRequired,
|
|
itemsPerPage: PropTypes.number.isRequired,
|
|
stats: PropTypes.object.isRequired,
|
|
setPage: PropTypes.func.isRequired,
|
|
}, props, 'prop', 'Pagination');
|
|
|
|
const { currentPage, itemsPerPage, stats, setPage } = props;
|
|
|
|
const totalWords = stats.hasOwnProperty('numberOfWords')
|
|
? stats.numberOfWords.find(group => group.name === 'Total').value : null;
|
|
|
|
if (totalWords === null) {
|
|
return <div className="loader"></div>;
|
|
}
|
|
|
|
const lastPage = Math.floor(totalWords / itemsPerPage);
|
|
const nextPage = currentPage + 1 > lastPage ? lastPage : currentPage + 1;
|
|
const prevPage = currentPage - 1 < 0 ? 0 : currentPage - 1;
|
|
|
|
const changePage = (page) => {
|
|
if (page !== currentPage && page <= lastPage && page >= 0) {
|
|
setPage(page);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<nav className="pagination is-centered" role="navigation" aria-label="pagination">
|
|
<a className="pagination-previous" aria-label="Goto page 1"
|
|
Disabled={currentPage === 0 ? 'disabled' : null}
|
|
onClick={() => changePage(prevPage)}>
|
|
Previous
|
|
</a>
|
|
<a className="pagination-next" aria-label={`Goto page ${lastPage + 1}`}
|
|
Disabled={currentPage === lastPage ? 'disabled' : null}
|
|
onClick={() => changePage(nextPage)}>
|
|
Next
|
|
</a>
|
|
<div className="pagination-list">
|
|
<div class="select">
|
|
<select value={currentPage} onChange={(event) => changePage(parseInt(event.target.value))}>
|
|
{[...new Array(lastPage + 1)].map((v, index) => {
|
|
return <option value={index}>{index + 1}</option>;
|
|
})}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|