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

Added foldable pagination to SimplePaginator

Browse Source
This commit is contained in:
Alejandro Celaya
2019-09-22 10:41:31 +02:00
parent 7bbff114a4
commit 810ddd7717
2 changed files with 48 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
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 { rangeOf } from '../utils/utils'; import { range, max, min } from 'ramda';
const propTypes = { const propTypes = {
pagesCount: PropTypes.number.isRequired, pagesCount: PropTypes.number.isRequired,
@@ -9,21 +9,53 @@ const propTypes = {
setCurrentPage: PropTypes.func.isRequired, setCurrentPage: PropTypes.func.isRequired,
}; };
const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => ( const pagination = (currentPage, pageCount) => {
<Pagination listClassName="flex-wrap mb-0"> const delta = 2;
<PaginationItem disabled={currentPage <= 1}> const pages = range(
<PaginationLink previous tag="span" onClick={setCurrentPage(currentPage - 1)} /> max(delta, currentPage - delta),
</PaginationItem> min(pageCount - 1, currentPage + delta) + 1
{rangeOf(pagesCount, (page) => ( );
<PaginationItem key={page} active={page === currentPage}>
<PaginationLink tag="span" onClick={setCurrentPage(page)}>{page}</PaginationLink> if (currentPage - delta > delta) {
pages.unshift('...');
}
if (currentPage + delta < pageCount - 1) {
pages.push('...');
}
pages.unshift(1);
pages.push(pageCount);
return pages;
};
const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
if (pagesCount < 2) {
return null;
}
const onClick = (page) => () => setCurrentPage(page);
return (
<Pagination listClassName="flex-wrap justify-content-center mb-0">
<PaginationItem disabled={currentPage <= 1}>
<PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
</PaginationItem> </PaginationItem>
))} {pagination(currentPage, pagesCount).map((page, index) => (
<PaginationItem disabled={currentPage >= pagesCount}> <PaginationItem
<PaginationLink next tag="span" onClick={setCurrentPage(currentPage + 1)} /> key={page !== '...' ? page : `${page}_${index}`}
</PaginationItem> active={page === currentPage}
</Pagination> disabled={page === '...'}
); >
<PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>
<PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
</PaginationItem>
</Pagination>
);
};
SimplePaginator.propTypes = propTypes; SimplePaginator.propTypes = propTypes;

2
src/visits/SortableBarGraph.js
View File

@@ -66,7 +66,7 @@ export default class SortableBarGraph extends React.Component {
renderPagination(pagesCount) { renderPagination(pagesCount) {
const { currentPage } = this.state; const { currentPage } = this.state;
const setCurrentPage = (currentPage) => () => this.setState({ currentPage }); const setCurrentPage = (currentPage) => this.setState({ currentPage });
return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />; return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
} }