mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-05-01 17:30:33 +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
src
common
SimplePaginator.js
short-urls
Paginator.js
utils/helpers
pagination.js

12
src/common/SimplePaginator.js
View file

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

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

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