79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { usePagination, DOTS } from './usePagination';
|
|
|
|
const Pagination = props => {
|
|
const {
|
|
onPageChange,
|
|
totalCount,
|
|
siblingCount = 1,
|
|
currentPage,
|
|
pageSize,
|
|
className
|
|
} = props;
|
|
|
|
const paginationRange = usePagination({
|
|
currentPage,
|
|
totalCount,
|
|
siblingCount,
|
|
pageSize
|
|
});
|
|
|
|
if (currentPage === 0 || paginationRange.length < 2) {
|
|
return null;
|
|
}
|
|
|
|
const onNext = () => {
|
|
onPageChange(currentPage + 1);
|
|
};
|
|
|
|
const onPrevious = () => {
|
|
onPageChange(currentPage - 1);
|
|
};
|
|
|
|
let lastPage = paginationRange[paginationRange.length - 1];
|
|
return (
|
|
<ul
|
|
className={classnames('pagination-container', { [className]: className })}
|
|
style={{padding:"0rem", fontSize:"0.8rem", width:"100%"}}
|
|
>
|
|
<li
|
|
className={classnames('pagination-item', {
|
|
disabled: currentPage === 1
|
|
})}
|
|
style={{padding:"0rem", fontSize:"0.8rem", minWidth:"18px"}}
|
|
onClick={onPrevious}
|
|
>
|
|
<div className="arrow left" />
|
|
</li>
|
|
{paginationRange.map(pageNumber => {
|
|
if (pageNumber === DOTS) {
|
|
return <li className="pagination-item dots" style={{padding:"0rem", fontSize:"0.8rem",
|
|
minWidth:"18px"}}>…</li>;
|
|
}
|
|
|
|
return (
|
|
<li
|
|
className={classnames('pagination-item', {
|
|
selected: pageNumber === currentPage
|
|
})} style={{padding:"0rem", fontSize:"0.8rem", minWidth:"18px"}}
|
|
onClick={() => onPageChange(pageNumber)}
|
|
>
|
|
{pageNumber}
|
|
</li>
|
|
);
|
|
})}
|
|
<li
|
|
className={classnames('pagination-item', {
|
|
disabled: currentPage === lastPage
|
|
})}
|
|
onClick={onNext}
|
|
>
|
|
<div className="arrow right" />
|
|
</li>
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|