diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index e93b3a6b05..1d2b23a64b 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -13,6 +13,7 @@ import { } from './components'; import {usePagination} from './hooks/usePagination'; import type {PaginationProps} from './types'; +import {getResultPage, getResultTotal} from './utils'; import './Pagination.scss'; @@ -35,7 +36,19 @@ export const Pagination = ({ const size = mobile ? 'l' : 'm'; const compact = mobile ? true : propCompact; - const {items, numberOfPages} = usePagination({page, pageSize, total, mobile}); + const resultTotal = getResultTotal(total); + const resultPage = getResultPage({ + page, + total: resultTotal, + pageSize, + }); + + const {items, numberOfPages} = usePagination({ + page: resultPage, + pageSize, + total: resultTotal, + mobile, + }); const pagination = items .map((item) => { @@ -79,7 +92,7 @@ export const Pagination = ({ key={item.action} size={size} item={item} - page={page} + page={resultPage} pageSize={pageSize} onUpdate={onUpdate} compact={compact} @@ -107,11 +120,11 @@ export const Pagination = ({ {pageSizeOptions && ( )} diff --git a/src/components/Pagination/utils.ts b/src/components/Pagination/utils.ts index 67f701a2bf..d950bd7ebb 100644 --- a/src/components/Pagination/utils.ts +++ b/src/components/Pagination/utils.ts @@ -51,3 +51,21 @@ function getDesktopNumerationList(page: number, numberOfPages: number) { export function getNumberOfPages(pageSize: number, total = 0) { return Math.floor((total - 1) / pageSize) + 1; } + +export function getResultTotal(total: number | undefined) { + return total === undefined || total > 0 ? total : 1; +} + +export function getResultPage({ + page, + total, + pageSize, +}: { + page: number; + total: number | undefined; + pageSize: number; +}) { + return page > 0 && (total === undefined || page <= getNumberOfPages(pageSize, total)) + ? page + : 1; +}