forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-01 13:16:42 +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>

16
src/short-urls/Paginator.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { rangeOf } from '../utils/utils';
import { ELLIPSIS, progressivePagination } from '../common/SimplePaginator';
const propTypes = {
serverId: PropTypes.string.isRequired,
@@ -12,7 +12,7 @@ const propTypes = {
}),
};
export default function Paginator({ paginator = {}, serverId }) {
const Paginator = ({ paginator = {}, serverId }) => {
const { currentPage, pagesCount = 0 } = paginator;
if (pagesCount <= 1) {
@@ -20,8 +20,12 @@ export default function Paginator({ paginator = {}, serverId }) {
}
const renderPages = () =>
rangeOf(pagesCount, (pageNumber) => (
<PaginationItem key={pageNumber} active={currentPage === pageNumber}>
progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
active={currentPage === pageNumber}
disabled={pageNumber === ELLIPSIS}
>
<PaginationLink
tag={Link}
to={`/server/${serverId}/list-short-urls/${pageNumber}`}
@@ -50,6 +54,8 @@ export default function Paginator({ paginator = {}, serverId }) {
</PaginationItem>
</Pagination>
);
}
};
Paginator.propTypes = propTypes;
export default Paginator;