forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 13:51:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Used progressive pagination for the short URLs list

Browse Source
This commit is contained in:
Alejandro Celaya
2020-03-28 17:19:33 +01:00
parent ea5ec63a22
commit 06db4f6556
3 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/common/SimplePaginator.js
View File

@@ -10,9 +10,9 @@ const propTypes = {
setCurrentPage: PropTypes.func.isRequired,
};
export const ellipsis = '...';
export const ELLIPSIS = '...';
const pagination = (currentPage, pageCount) => {
export const progressivePagination = (currentPage, pageCount) => {
const delta = 2;
const pages = range(
max(delta, currentPage - delta),
@@ -20,10 +20,10 @@ const pagination = (currentPage, pageCount) => {
);
if (currentPage - delta > delta) {
pages.unshift(ellipsis);
pages.unshift(ELLIPSIS);
}
if (currentPage + delta < pageCount - 1) {
pages.push(ellipsis);
pages.push(ELLIPSIS);
}
pages.unshift(1);
@@ -44,11 +44,11 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem>
{pagination(currentPage, pagesCount).map((page, index) => (
{progressivePagination(currentPage, pagesCount).map((page, index) => (
<PaginationItem
key={page !== ellipsis ? page : `${page}_${index}`}
key={page !== ELLIPSIS ? page : `${page}_${index}`}
active={page === currentPage}
disabled={page === ellipsis}
disabled={page === ELLIPSIS}
>
<PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
</PaginationItem>