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 (
);
};