mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-11 02:37:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

Created helper functions to determine the key and if a page is disabled on a progressive paginator

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-28 17:43:09 +01:00
parent bab3b252c1
commit d7da8521ce
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/SimplePaginator.js
View file

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import './SimplePaginator.scss';
const propTypes = {
@ -22,13 +22,13 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem>
{progressivePagination(currentPage, pagesCount).map((page, index) => (
{progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={page !== ELLIPSIS ? page : `${page}_${index}`}
active={page === currentPage}
disabled={page === ELLIPSIS}
key={keyForPage(pageNumber, index)}
disabled={isPageDisabled(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>

6
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 { ELLIPSIS, progressivePagination } from '../utils/helpers/pagination';
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
const propTypes = {
serverId: PropTypes.string.isRequired,
@ -22,9 +22,9 @@ const Paginator = ({ paginator = {}, serverId }) => {
const renderPages = () =>
progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`}
key={keyForPage(pageNumber, index)}
disabled={isPageDisabled(pageNumber)}
active={currentPage === pageNumber}
disabled={pageNumber === ELLIPSIS}
>
<PaginationLink
tag={Link}

4
src/utils/helpers/pagination.js
View file

@ -21,3 +21,7 @@ export const progressivePagination = (currentPage, pageCount) => {
return pages;
};
export const keyForPage = (pageNumber, index) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`;
export const isPageDisabled = (pageNumber) => pageNumber === ELLIPSIS;