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

Moved helper functions to render progressive paginators to a common place

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-28 17:25:12 +01:00
parent 06db4f6556
commit 2d5c2779c3
4 changed files with 28 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
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 { range, max, min } from 'ramda';
import { ELLIPSIS, progressivePagination } from '../utils/utils';
import './SimplePaginator.scss';
const propTypes = {
@ -10,28 +10,6 @@ const propTypes = {
setCurrentPage: PropTypes.func.isRequired,
};
export const ELLIPSIS = '...';
export const progressivePagination = (currentPage, pageCount) => {
const delta = 2;
const pages = range(
max(delta, currentPage - delta),
min(pageCount - 1, currentPage + delta) + 1
);
if (currentPage - delta > delta) {
pages.unshift(ELLIPSIS);
}
if (currentPage + delta < pageCount - 1) {
pages.push(ELLIPSIS);
}
pages.unshift(1);
pages.push(pageCount);
return pages;
};
const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
if (pagesCount < 2) {
return null;

4
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 '../common/SimplePaginator';
import { ELLIPSIS, progressivePagination } from '../utils/utils';
const propTypes = {
serverId: PropTypes.string.isRequired,
@ -36,7 +36,7 @@ const Paginator = ({ paginator = {}, serverId }) => {
));
return (
<Pagination listClassName="flex-wrap">
<Pagination listClassName="flex-wrap justify-content-center">
<PaginationItem disabled={currentPage === 1}>
<PaginationLink
previous

24
src/utils/utils.js
View file

@ -2,7 +2,7 @@ import L from 'leaflet';
import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
import marker from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
import { range } from 'ramda';
import { max, min, range } from 'ramda';
import { useState } from 'react';
const TEN_ROUNDING_NUMBER = 10;
@ -65,3 +65,25 @@ export const useToggle = (initialValue = false) => {
export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;
export const formatIsoDate = (date) => date && date.format ? date.format() : date;
export const ELLIPSIS = '...';
export const progressivePagination = (currentPage, pageCount) => {
const delta = 2;
const pages = range(
max(delta, currentPage - delta),
min(pageCount - 1, currentPage + delta) + 1,
);
if (currentPage - delta > delta) {
pages.unshift(ELLIPSIS);
}
if (currentPage + delta < pageCount - 1) {
pages.push(ELLIPSIS);
}
pages.unshift(1);
pages.push(pageCount);
return pages;
};

3
test/common/SimplePaginator.test.js
View file

@ -2,7 +2,8 @@ import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import { PaginationItem } from 'reactstrap';
import SimplePaginator, { ELLIPSIS } from '../../src/common/SimplePaginator';
import SimplePaginator from '../../src/common/SimplePaginator';
import { ELLIPSIS } from '../../src/utils/utils';
describe('<SimplePaginator />', () => {
let wrapper;