Skip to content

Commit

Permalink
added possibility to define, if the page size in the paging can be ch…
Browse files Browse the repository at this point in the history
…anged by the user (#54)

added possibility to define, if the page size in the paging can be
changed by the user
neotob authored Mar 12, 2024
1 parent 9aa8875 commit 828d6aa
Showing 3 changed files with 39 additions and 1 deletion.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
32 changes: 32 additions & 0 deletions cypress/cypress/component/Paging/Paging.cy.tsx
Original file line number Diff line number Diff line change
@@ -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()),
);
});
});
4 changes: 3 additions & 1 deletion src/lib/Paging/Paging.tsx
Original file line number Diff line number Diff line change
@@ -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}

0 comments on commit 828d6aa

Please sign in to comment.