refactor: add results total prop

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/search-days-pull.md

@@ -33,10 +33,10 @@ const SearchPage = () => {
           </Grid>
           <Grid item xs={12}>
             <SearchPaginationBase
-              pageLimit={pageLimit}
-              onPageLimitChange={setPageLimit}
-              pageCursor={pageCursor}
-              onPageCursorChange={setPageCursor}
+              limit={pageLimit}
+              onLimitChange={setPageLimit}
+              cursor={pageCursor}
+              onCursorChange={setPageCursor}
             />
           </Grid>
           <Grid item xs={12}>

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

plugins/search-react/src/components/SearchPagination/SearchPagination.stories.tsx

@@ -47,17 +47,17 @@ export const Default = () => {
 };
 
 export const CustomPageLimitLabel = () => {
-  return <SearchPagination pageLimitLabel="PRows per page:" />;
+  return <SearchPagination limitLabel="Rows per page:" />;
 };
 
 export const CustomPageLimitText = () => {
   return (
     <SearchPagination
-      pageLimitText={({ from, to }) => `${from}-${to} of more than ${to}`}
+      limitText={({ from, to }) => `${from}-${to} of more than ${to}`}
     />
   );
 };
 
 export const CustomPageLimitOptions = () => {
-  return <SearchPagination pageLimitOptions={[5, 10, 20]} />;
+  return <SearchPagination limitOptions={[5, 10, 20]} />;
 };

plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx

@@ -76,7 +76,7 @@ describe('SearchPagination', () => {
     await renderWithEffects(
       <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
-          <SearchPagination pageLimitLabel={label} />
+          <SearchPagination limitLabel={label} />
         </SearchContextProvider>
       </TestApiProvider>,
     );
@@ -84,12 +84,24 @@ describe('SearchPagination', () => {
     expect(screen.getByText(label)).toBeInTheDocument();
   });
 
+  it('Show the total in text', async () => {
+    await renderWithEffects(
+      <TestApiProvider apis={[[searchApiRef, { query }]]}>
+        <SearchContextProvider>
+          <SearchPagination total={100} />
+        </SearchContextProvider>
+      </TestApiProvider>,
+    );
+
+    expect(screen.getByText('of 100')).toBeInTheDocument();
+  });
+
   it('Accept custom page limit text', async () => {
     await renderWithEffects(
       <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
           <SearchPagination
-            pageLimitText={({ from, to }) => `${from}-${to} of more than ${to}`}
+            limitText={({ from, to }) => `${from}-${to} of more than ${to}`}
           />
         </SearchContextProvider>
       </TestApiProvider>,
@@ -102,7 +114,7 @@ describe('SearchPagination', () => {
     await renderWithEffects(
       <TestApiProvider apis={[[searchApiRef, { query }]]}>
         <SearchContextProvider>
-          <SearchPagination pageLimitOptions={[5, 10, 20, 25]} />
+          <SearchPagination limitOptions={[5, 10, 20, 25]} />
         </SearchContextProvider>
       </TestApiProvider>,
     );

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) => {
     <TablePagination
       {...rest}
       component="div"
-      count={-1}
+      count={count}
       page={page}
       onPageChange={handlePageChange}
       rowsPerPage={rowsPerPage}
@@ -169,10 +181,10 @@ export const SearchPagination = (props: SearchPaginationProps) => {
   return (
     <SearchPaginationBase
       {...props}
-      pageLimit={pageLimit}
-      onPageLimitChange={setPageLimit}
-      pageCursor={pageCursor}
-      onPageCursorChange={setPageCursor}
+      limit={pageLimit}
+      onLimitChange={setPageLimit}
+      cursor={pageCursor}
+      onCursorChange={setPageCursor}
     />
   );
 };