added possibility to define, if the page size in the paging can be changed by the user (#54)

added possibility to define, if the page size in the paging can be
changed by the user

Author: neotob

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to define, if the page size in the paging can be changed by the user
+
 ## [3.3.0] - 2024-03-08
 
 ### Added

cypress/cypress/component/Paging/Paging.cy.tsx

@@ -68,4 +68,36 @@ describe("Paging.cy.tsx", () => {
     // Check pagination class set
     cy.get("[data-cy-root] > .container-fluid").should("have.class", "paging");
   });
+
+  it("paging without change of page size", () => {
+    const itemsPerPage = faker.datatype.number({ min: 1, max: 999 });
+    const pages = faker.datatype.number({ min: 3, max: 999 });
+    const currentPage = faker.datatype.number({ min: 2, max: pages - 1 });
+    const translations = { showedItemsText: "Item {from} to {to} from {total}", itemsPerPageDropdown: "Items per page" };
+
+    cy.mount(
+      <Paging
+        currentItemsPerPage={itemsPerPage}
+        currentPage={currentPage}
+        currentRecordCount={itemsPerPage}
+        setCurrentPage={cy.spy().as("setCurrentPage")}
+        totalRecords={pages * itemsPerPage}
+        setItemsPerPage={cy.spy().as("setItemsPerPage")}
+        translations={translations}
+        changePageSizePossible={false}
+      />,
+    );
+
+    // Check pages per item dropdown is not shown by checking that the first child is the paging from to text
+    cy.get("[data-cy-root] > .container-fluid > .row > .col-6:first-of-type")
+      .children()
+      .first()
+      .should(
+        "have.text",
+        translations.showedItemsText
+          .replace("{from}", (currentPage * itemsPerPage - itemsPerPage + 1).toString())
+          .replace("{to}", (currentPage * itemsPerPage).toString())
+          .replace("{total}", (pages * itemsPerPage).toString()),
+      );
+  });
 });

src/lib/Paging/Paging.tsx

@@ -11,6 +11,7 @@ interface PagingProps {
   possiblePageItemCounts?: number[];
   maxPagesShown?: number;
   showControls?: boolean;
+  changePageSizePossible?: boolean;
   setItemsPerPage(itemsPerPage: number): void;
   setCurrentPage(itemsPerPage: number): void;
 }
@@ -30,6 +31,7 @@ function Paging({
   possiblePageItemCounts,
   maxPagesShown = 7,
   showControls = true,
+  changePageSizePossible = true,
   setItemsPerPage,
   setCurrentPage,
 }: PagingProps) {
@@ -48,7 +50,7 @@ function Paging({
     <div className="container-fluid paging">
       <Row style={{ marginBottom: "20px" }}>
         <Col xs={pagingPossible && currentItemsPerPage < totalRecords ? 6 : 12} style={{ paddingLeft: 0 }}>
-          {pagingPossible && (
+          {pagingPossible && changePageSizePossible && (
             <UncontrolledButtonDropdown>
               <DropdownToggle caret color="link" size="sm">
                 {currentItemsPerPage}