mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Ensured page numbers in paginators are prettified

Browse source
This commit is contained in:
Alejandro Celaya 2020-09-13 10:03:02 +02:00
parent 89e3114ef3
commit 3fea8b5505
3 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/SimplePaginator.tsx
View file

@ -1,7 +1,13 @@
import React, { FC } from 'react';
import classNames from 'classnames';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { pageIsEllipsis, keyForPage, NumberOrEllipsis, progressivePagination } from '../utils/helpers/pagination';
import {
pageIsEllipsis,
keyForPage,
NumberOrEllipsis,
progressivePagination,
prettifyPageNumber,
} from '../utils/helpers/pagination';
import './SimplePaginator.scss';
interface SimplePaginatorProps {
@ -29,7 +35,7 @@ const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, se
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{prettifyPageNumber(pageNumber)}</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={currentPage >= pagesCount}>

4
src/short-urls/Paginator.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { pageIsEllipsis, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';
import { ShlinkPaginator } from '../utils/services/types';
import './Paginator.scss';
@ -28,7 +28,7 @@ const Paginator = ({ paginator, serverId }: PaginatorProps) => {
tag={Link}
to={`/server/${serverId}/list-short-urls/${pageNumber}`}
>
{pageNumber}
{prettifyPageNumber(pageNumber)}
</PaginationLink>
</PaginationItem>
));

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

@ -1,4 +1,5 @@
import { max, min, range } from 'ramda';
import { prettify } from './numbers';
const DELTA = 2;
@ -29,4 +30,7 @@ export const progressivePagination = (currentPage: number, pageCount: number): N
export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
export const prettifyPageNumber = (pageNumber: NumberOrEllipsis): string =>
pageIsEllipsis(pageNumber) ? pageNumber : prettify(pageNumber);
export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => !pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`;