From be3eee39061bc68d7127d96992b3c3a1ff8f79c4 Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 13:44:20 +0200 Subject: [PATCH 1/6] solution to test --- CHANGELOG.md | 4 ++++ styles/Form/_form.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 618694e..11ac567 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Fix + +- paging when displayed inside a form. + ### Removed - remove cypress declarations diff --git a/styles/Form/_form.scss b/styles/Form/_form.scss index 87fa4bb..8902d76 100644 --- a/styles/Form/_form.scss +++ b/styles/Form/_form.scss @@ -1,4 +1,4 @@ -form div[role="group"] { +form div:not(.paging)[role="group"] { display: flex; gap: 0.25rem; From c1de8780633936e1a8029b7590465b8bd85d6fe6 Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 15:11:58 +0200 Subject: [PATCH 2/6] another solution to test --- cypress/cypress/support/component-index.html | 2 +- cypress/styles/globals.css | 12 +----------- styles/Form/_form.scss | 2 +- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/cypress/cypress/support/component-index.html b/cypress/cypress/support/component-index.html index 2cbfac6..8b6e8e5 100644 --- a/cypress/cypress/support/component-index.html +++ b/cypress/cypress/support/component-index.html @@ -1,4 +1,4 @@ - + diff --git a/cypress/styles/globals.css b/cypress/styles/globals.css index f7efe20..2ee17e8 100644 --- a/cypress/styles/globals.css +++ b/cypress/styles/globals.css @@ -2,17 +2,7 @@ html, body { padding: 0; margin: 0; - font-family: - -apple-system, - BlinkMacSystemFont, - Segoe UI, - Roboto, - Oxygen, - Ubuntu, - Cantarell, - Fira Sans, - Droid Sans, - Helvetica Neue, + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } diff --git a/styles/Form/_form.scss b/styles/Form/_form.scss index 8902d76..ae14c8c 100644 --- a/styles/Form/_form.scss +++ b/styles/Form/_form.scss @@ -1,4 +1,4 @@ -form div:not(.paging)[role="group"] { +form div[role="group"]:not(.paging div[role="group"]) { display: flex; gap: 0.25rem; From 586322f8dc3c07e28ade00bbce5fcdeb85f651c6 Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 15:51:51 +0200 Subject: [PATCH 3/6] new feature --- CHANGELOG.md | 4 ++ .../cypress/component/Paging/Paging.cy.tsx | 47 +++++++++++++++++++ src/lib/Paging/Paging.tsx | 29 +++++++++--- 3 files changed, 74 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11ac567..486a1b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - paging when displayed inside a form. +### Added + +- possibility to customize back/next first/last page navigation components. + ### Removed - remove cypress declarations diff --git a/cypress/cypress/component/Paging/Paging.cy.tsx b/cypress/cypress/component/Paging/Paging.cy.tsx index 9404959..acec8b8 100644 --- a/cypress/cypress/component/Paging/Paging.cy.tsx +++ b/cypress/cypress/component/Paging/Paging.cy.tsx @@ -100,4 +100,51 @@ describe("Paging.cy.tsx", () => { .replace("{total}", (pages * itemsPerPage).toString()), ); }); + + it("custom navigationComponents work correctly", () => { + const itemsPerPage = 10; + const pages = 5; + const currentPage = 3; + const translations = { showedItemsText: "Item {from} to {to} from {total}", itemsPerPageDropdown: "Items per page" }; + const customNavigationComponents = { + backPageComponent: "←", + nextPageComponent: "→", + firstPageComponent: "⇤", + lastPageComponent: "⇥" + }; + + mount( + , + ); + + // Check that custom navigation components are rendered + cy.get("[data-cy-root] > .container-fluid > .row > .col-6:nth-of-type(2) > .btn-group > button.btn").then( + (items: JQuery) => { + // Verify custom symbols are present + cy.wrap(items.filter((_, item) => item.textContent === "⇤")).should("exist").and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "←")).should("exist").and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "→")).should("exist").and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "⇥")).should("exist").and("be.visible"); + + // Test functionality with custom components + cy.wrap(items.filter((_, item) => item.textContent === "⇤")).click(); + cy.get("@setCurrentPage").should("be.calledWith", 1); + cy.wrap(items.filter((_, item) => item.textContent === "←")).click(); + cy.get("@setCurrentPage").should("be.calledWith", currentPage - 1); + cy.wrap(items.filter((_, item) => item.textContent === "→")).click(); + cy.get("@setCurrentPage").should("be.calledWith", currentPage + 1); + cy.wrap(items.filter((_, item) => item.textContent === "⇥")).click(); + cy.get("@setCurrentPage").should("be.calledWith", pages); + }, + ); + }); }); diff --git a/src/lib/Paging/Paging.tsx b/src/lib/Paging/Paging.tsx index 469f0dc..6714a12 100644 --- a/src/lib/Paging/Paging.tsx +++ b/src/lib/Paging/Paging.tsx @@ -1,5 +1,5 @@ import { Button, ButtonGroup, Col, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledButtonDropdown } from "reactstrap"; -import { useMemo } from "react"; +import { ReactNode, useMemo } from "react"; interface PagingProps { currentItemsPerPage: number; @@ -8,6 +8,7 @@ interface PagingProps { currentRecordCount: number; pagingPossible?: boolean; translations: PagingTranslations; + navigationComponents?: PagingNavigationComponents; possiblePageItemCounts?: number[]; maxPagesShown?: number; showControls?: boolean; @@ -21,6 +22,20 @@ interface PagingTranslations { itemsPerPageDropdown: string; } +interface PagingNavigationComponents { + backPageComponent: ReactNode; + nextPageComponent: ReactNode; + firstPageComponent: ReactNode; + lastPageComponent: ReactNode; +} + +const defaultNavigationComponents: PagingNavigationComponents = { + backPageComponent: "<", + nextPageComponent: ">", + firstPageComponent: "<<", + lastPageComponent: ">>", +}; + // eslint-disable-next-line complexity const Paging = ({ currentItemsPerPage, @@ -29,6 +44,7 @@ const Paging = ({ currentRecordCount, pagingPossible = true, translations, + navigationComponents = defaultNavigationComponents, possiblePageItemCounts, maxPagesShown = 7, showControls = true, @@ -36,6 +52,7 @@ const Paging = ({ setItemsPerPage, setCurrentPage, }: PagingProps) => { + const { backPageComponent, nextPageComponent, firstPageComponent, lastPageComponent } = navigationComponents; const maxPage = Math.ceil(totalRecords / currentItemsPerPage); const firstPageShown = Math.max(0, Math.min(currentPage - Math.ceil(maxPagesShown / 2), maxPage - maxPagesShown)); @@ -79,12 +96,12 @@ const Paging = ({ {showControls && ( )} {showControls && ( )} {Array.from({ length: maxPage + 1 }, (_, i) => i) @@ -97,12 +114,12 @@ const Paging = ({ ))} {showControls && ( )} {showControls && ( )} @@ -113,4 +130,4 @@ const Paging = ({ ); }; -export { Paging, PagingProps, PagingTranslations }; +export { Paging, PagingProps, PagingTranslations, PagingNavigationComponents }; From 22b900c9de1ee9e0213c372d8a56b55cc4b94dff Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 15:54:21 +0200 Subject: [PATCH 4/6] prepare-pr --- .../cypress/component/Paging/Paging.cy.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/cypress/cypress/component/Paging/Paging.cy.tsx b/cypress/cypress/component/Paging/Paging.cy.tsx index acec8b8..0ede16e 100644 --- a/cypress/cypress/component/Paging/Paging.cy.tsx +++ b/cypress/cypress/component/Paging/Paging.cy.tsx @@ -101,16 +101,16 @@ describe("Paging.cy.tsx", () => { ); }); - it("custom navigationComponents work correctly", () => { + it("custom navigationComponents work correctly", () => { const itemsPerPage = 10; const pages = 5; const currentPage = 3; const translations = { showedItemsText: "Item {from} to {to} from {total}", itemsPerPageDropdown: "Items per page" }; const customNavigationComponents = { backPageComponent: "←", - nextPageComponent: "→", + nextPageComponent: "→", firstPageComponent: "⇤", - lastPageComponent: "⇥" + lastPageComponent: "⇥", }; mount( @@ -130,11 +130,19 @@ describe("Paging.cy.tsx", () => { cy.get("[data-cy-root] > .container-fluid > .row > .col-6:nth-of-type(2) > .btn-group > button.btn").then( (items: JQuery) => { // Verify custom symbols are present - cy.wrap(items.filter((_, item) => item.textContent === "⇤")).should("exist").and("be.visible"); - cy.wrap(items.filter((_, item) => item.textContent === "←")).should("exist").and("be.visible"); - cy.wrap(items.filter((_, item) => item.textContent === "→")).should("exist").and("be.visible"); - cy.wrap(items.filter((_, item) => item.textContent === "⇥")).should("exist").and("be.visible"); - + cy.wrap(items.filter((_, item) => item.textContent === "⇤")) + .should("exist") + .and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "←")) + .should("exist") + .and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "→")) + .should("exist") + .and("be.visible"); + cy.wrap(items.filter((_, item) => item.textContent === "⇥")) + .should("exist") + .and("be.visible"); + // Test functionality with custom components cy.wrap(items.filter((_, item) => item.textContent === "⇤")).click(); cy.get("@setCurrentPage").should("be.calledWith", 1); From 6df1a97c3768a82a43a83c01b11eb083ba7403f2 Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 16:16:39 +0200 Subject: [PATCH 5/6] revert (?) --- cypress/cypress/support/component-index.html | 4 ++-- cypress/styles/globals.css | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/cypress/cypress/support/component-index.html b/cypress/cypress/support/component-index.html index 8b6e8e5..07a2f77 100644 --- a/cypress/cypress/support/component-index.html +++ b/cypress/cypress/support/component-index.html @@ -1,4 +1,4 @@ - + @@ -11,4 +11,4 @@
- + \ No newline at end of file diff --git a/cypress/styles/globals.css b/cypress/styles/globals.css index 2ee17e8..1d2f431 100644 --- a/cypress/styles/globals.css +++ b/cypress/styles/globals.css @@ -2,7 +2,17 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, + font-family: + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, sans-serif; } @@ -23,4 +33,4 @@ a { color: white; background: black; } -} +} \ No newline at end of file From ded46088aa3d1412344f835a432efe05915195fe Mon Sep 17 00:00:00 2001 From: Michele Masciave Date: Mon, 29 Sep 2025 16:19:58 +0200 Subject: [PATCH 6/6] x --- cypress/cypress/support/component-index.html | 2 +- cypress/styles/globals.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/cypress/support/component-index.html b/cypress/cypress/support/component-index.html index 07a2f77..2cbfac6 100644 --- a/cypress/cypress/support/component-index.html +++ b/cypress/cypress/support/component-index.html @@ -11,4 +11,4 @@
- \ No newline at end of file + diff --git a/cypress/styles/globals.css b/cypress/styles/globals.css index 1d2f431..f7efe20 100644 --- a/cypress/styles/globals.css +++ b/cypress/styles/globals.css @@ -33,4 +33,4 @@ a { color: white; background: black; } -} \ No newline at end of file +}