shlink-web-client/src/common/SimplePaginator.tsx

49 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-08-28 21:05:01 +03:00
import React, { FC } from 'react';
2020-04-04 00:00:57 +03:00
import classNames from 'classnames';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import {
pageIsEllipsis,
keyForPage,
NumberOrEllipsis,
progressivePagination,
prettifyPageNumber,
} from '../utils/helpers/pagination';
2019-09-22 12:14:08 +03:00
import './SimplePaginator.scss';
2020-08-28 21:05:01 +03:00
interface SimplePaginatorProps {
pagesCount: number;
currentPage: number;
setCurrentPage: (currentPage: number) => void;
centered?: boolean;
}
2020-08-28 21:05:01 +03:00
const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
if (pagesCount < 2) {
return null;
}
2020-08-28 21:05:01 +03:00
const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
return (
2020-04-04 00:00:57 +03:00
<Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem>
{progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={keyForPage(pageNumber, index)}
2020-08-28 21:05:01 +03:00
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
</PaginationItem>
</Pagination>
);
};
export default SimplePaginator;