refactor: add results total prop

Signed-off-by: Camila Belo <camilaibs@gmail.com>
2022-10-11 09:15:14 +02:00
parent 77b9448291
commit 098f487e59
5 changed files with 63 additions and 37 deletions
@@ -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]} />;
 };
@@ -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>,
    );
@@ -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}
    />
  );
 };