diff --git a/ui/v2.5/src/components/List/Pagination.tsx b/ui/v2.5/src/components/List/Pagination.tsx index acca41f28..3db7d2f82 100644 --- a/ui/v2.5/src/components/List/Pagination.tsx +++ b/ui/v2.5/src/components/List/Pagination.tsx @@ -8,7 +8,7 @@ import { Overlay, Popover, } from "react-bootstrap"; -import { FormattedMessage, useIntl } from "react-intl"; +import { FormattedMessage, FormattedNumber, useIntl } from "react-intl"; import useFocus from "src/utils/focus"; import { Icon } from "../Shared/Icon"; import { faCheck, faChevronDown } from "@fortawesome/free-solid-svg-icons"; @@ -143,6 +143,8 @@ interface IPaginationIndexProps { metadataByline?: React.ReactNode; } +const minPagesForCompact = 4; + export const Pagination: React.FC = ({ itemsPerPage, currentPage, @@ -156,6 +158,30 @@ export const Pagination: React.FC = ({ [totalItems, itemsPerPage] ); + const pageButtons = useMemo(() => { + if (totalPages >= minPagesForCompact) + return ( + + ); + + const pages = [...Array(totalPages).keys()].map((i) => i + 1); + + return pages.map((page: number) => ( + + )); + }, [totalPages, currentPage, onChangePage]); + if (totalPages <= 1) return
; return ( @@ -176,13 +202,7 @@ export const Pagination: React.FC = ({ > < - - - + {pageButtons}