diff --git a/packages/dataviews/src/pagination.js b/packages/dataviews/src/pagination.tsx similarity index 75% rename from packages/dataviews/src/pagination.js rename to packages/dataviews/src/pagination.tsx index a1e3c644cb5ba3..da37eb99313799 100644 --- a/packages/dataviews/src/pagination.js +++ b/packages/dataviews/src/pagination.tsx @@ -10,14 +10,29 @@ import { createInterpolateElement, memo } from '@wordpress/element'; import { sprintf, __, _x } from '@wordpress/i18n'; import { chevronRight, chevronLeft } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import type { View } from './types'; + +interface PaginationProps { + view: View; + onChangeView: ( view: View ) => void; + paginationInfo: { + totalItems: number; + totalPages: number; + }; +} + const Pagination = memo( function Pagination( { view, onChangeView, paginationInfo: { totalItems = 0, totalPages }, -} ) { +}: PaginationProps ) { if ( ! totalItems || ! totalPages ) { return null; } + const currentPage = view.page ?? 1; return ( !! totalItems && totalPages !== 1 && ( @@ -43,12 +58,15 @@ const Pagination = memo( function Pagination( { CurrentPageControl: ( { const page = i + 1; - return { value: page, label: page }; + return { + value: page.toString(), + label: page.toString(), + }; } ) } onChange={ ( newValue ) => { onChangeView( { @@ -66,9 +84,12 @@ const Pagination = memo( function Pagination( {