diff --git a/.changeset/search-days-pull.md b/.changeset/search-days-pull.md index 03000e4870..45d59be514 100644 --- a/.changeset/search-days-pull.md +++ b/.changeset/search-days-pull.md @@ -33,10 +33,10 @@ const SearchPage = () => { diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index 57c1791d9a..ef3e8b19bd 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -222,13 +222,14 @@ export const SearchPaginationBase: ( // @public export type SearchPaginationBaseProps = { className?: string; - pageCursor?: string; - onPageCursorChange?: (pageCursor: string) => void; - pageLimit?: number; - pageLimitLabel?: ReactNode; - pageLimitText?: SearchPaginationLimitText; - pageLimitOptions?: SearchPaginationLimitOption[]; - onPageLimitChange?: (value: number) => void; + total?: number; + cursor?: string; + onCursorChange?: (pageCursor: string) => void; + limit?: number; + limitLabel?: ReactNode; + limitText?: SearchPaginationLimitText; + limitOptions?: SearchPaginationLimitOption[]; + onLimitChange?: (value: number) => void; }; // @public @@ -247,6 +248,7 @@ export type SearchPaginationLimitText = (params: { from: number; to: number; page: number; + count: number; }) => ReactNode; // @public diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx index c23fb1e863..4e72c0fa25 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx @@ -47,17 +47,17 @@ export const Default = () => { }; export const CustomPageLimitLabel = () => { - return ; + return ; }; export const CustomPageLimitText = () => { return ( `${from}-${to} of more than ${to}`} + limitText={({ from, to }) => `${from}-${to} of more than ${to}`} /> ); }; export const CustomPageLimitOptions = () => { - return ; + return ; }; diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx index 6e4abcdbda..d2ecc55d31 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx @@ -76,7 +76,7 @@ describe('SearchPagination', () => { await renderWithEffects( - + , ); @@ -84,12 +84,24 @@ describe('SearchPagination', () => { expect(screen.getByText(label)).toBeInTheDocument(); }); + it('Show the total in text', async () => { + await renderWithEffects( + + + + + , + ); + + expect(screen.getByText('of 100')).toBeInTheDocument(); + }); + it('Accept custom page limit text', async () => { await renderWithEffects( `${from}-${to} of more than ${to}`} + limitText={({ from, to }) => `${from}-${to} of more than ${to}`} /> , @@ -102,7 +114,7 @@ describe('SearchPagination', () => { await renderWithEffects( - + , ); diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx index e5807832e9..34b6deaff5 100644 --- a/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx +++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.tsx @@ -48,13 +48,14 @@ export type SearchPaginationLimitOption< >; /** - * A page limit text, this function is called with a "\{ from, to, page \}" object. + * A page limit text, this function is called with a "\{ from, to, page, count \}" object. * @public */ export type SearchPaginationLimitText = (params: { from: number; to: number; page: number; + count: number; }) => ReactNode; /** @@ -66,37 +67,46 @@ export type SearchPaginationBaseProps = { * The component class name. */ className?: string; + /** + * The total number of results. + * For an unknown number of items, provide -1. + * Defaults to -1. + */ + total?: number; /** * The cursor for the current page. */ - pageCursor?: string; + cursor?: string; /** * Callback fired when the current page cursor is changed. */ - onPageCursorChange?: (pageCursor: string) => void; + onCursorChange?: (pageCursor: string) => void; /** * The limit of results per page. * Set -1 to display all the results. */ - pageLimit?: number; + limit?: number; /** * Customize the results per page label. + * Defaults to "Results per page:". */ - pageLimitLabel?: ReactNode; + limitLabel?: ReactNode; /** * Customize the results per page text. + * Defaults to "(\{ from, to, count \}) =\> count \> 0 ? `of $\{count\}` : `$\{from\}-$\{to\}`". */ - pageLimitText?: SearchPaginationLimitText; + limitText?: SearchPaginationLimitText; /** * Options for setting how many results show per page. * If less than two options are available, no select field will be displayed. * Use -1 for the value with a custom label to show all the results. + * Defaults to [10, 25, 50, 100]. */ - pageLimitOptions?: SearchPaginationLimitOption[]; + limitOptions?: SearchPaginationLimitOption[]; /** * Callback fired when the number of results per page is changed. */ - onPageLimitChange?: (value: number) => void; + onLimitChange?: (value: number) => void; }; /** @@ -106,13 +116,15 @@ export type SearchPaginationBaseProps = { */ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => { const { - pageCursor, - onPageCursorChange, - pageLimit: rowsPerPage = 25, - pageLimitLabel: labelRowsPerPage = 'Results per page:', - pageLimitText: labelDisplayedRows = ({ from, to }) => `${from}-${to}`, - pageLimitOptions: rowsPerPageOptions, - onPageLimitChange, + total: count = -1, + cursor: pageCursor, + onCursorChange: onPageCursorChange, + limit: rowsPerPage = 25, + limitLabel: labelRowsPerPage = 'Results per page:', + limitText: labelDisplayedRows = ({ from, to }) => + count > 0 ? `of ${count}` : `${from}-${to}`, + limitOptions: rowsPerPageOptions, + onLimitChange: onPageLimitChange, ...rest } = props; @@ -137,7 +149,7 @@ export const SearchPaginationBase = (props: SearchPaginationBaseProps) => { { return ( ); };