@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/molecules/pagination/Pagination.spec.tsx

@@ -22,9 +22,9 @@ describe("Pagination", () => {
     expect(allBtnBlocks[allBtnBlocks.length - 1]).toBe("Next");
   });
 
-  it("should call previousPage() callback", () => {
+  it("should call onClickPreviousPage() callback", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination {...args} previousPage={previousPageSpy} canPreviousPage={true} />);
+    render(<Pagination {...args} onClickPreviousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
@@ -33,20 +33,20 @@ describe("Pagination", () => {
     expect(previousPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call nextPage() callback", () => {
+  it("should call onClickNextPage() callback", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination {...args} nextPage={nextPageSpy} canNextPage={true} />);
+    render(<Pagination {...args} onClickNextPage={nextPageSpy} canNextPage={true} />);
 
     fireEvent.click(screen.getByText(/Next/i));
 
     expect(nextPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call gotoPage() callback when cliking on a button page", () => {
+  it("should call onPageIndexChange() callback when cliking on a button page", () => {
     const gotoPageSpy = vi.fn();
     let page: number;
 
-    render(<Pagination {...args} gotoPage={gotoPageSpy} />);
+    render(<Pagination {...args} onPageIndexChange={gotoPageSpy} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
@@ -63,7 +63,7 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination canPreviousPage={false} previousPage={previousPageSpy} {...args} />);
+    render(<Pagination canPreviousPage={false} onClickPreviousPage={previousPageSpy} {...args} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -74,7 +74,7 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination {...args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    render(<Pagination {...args} canPreviousPage={true} onClickPreviousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -85,7 +85,7 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination canNextPage={false} nextPage={nextPageSpy} {...args} />);
+    render(<Pagination canNextPage={false} onClickNextPage={nextPageSpy} {...args} />);
 
     const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -95,7 +95,7 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination canNextPage={true} nextPage={nextPageSpy} {...args} />);
+    render(<Pagination canNextPage={true} onClickNextPage={nextPageSpy} {...args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -118,7 +118,7 @@ describe("Pagination", () => {
   it("should display total length", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Pagination {...args} pageSizes={pageSizes} totalLength={1000} />);
+    render(<Pagination {...args} pageSizes={pageSizes} rowCount={1000} />);
 
     expect(screen.getByTestId("pagination-total-items")).toHaveTextContent("1,000 items");
   });

package/src/molecules/pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import "../forms/select/all";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useState } from "react";
 
 import { Pagination } from "./all";
@@ -12,18 +12,11 @@ import { Pagination } from "./all";
  *
  * ```tsx
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
- * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
  *
  * or
  *
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
  * import "@tsed/react-formio/molecules/pagination/PaginationButton";
- *
- * or
- *
- * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
- *
- * registerComponent("PaginationButton", MyPaginationButton);
  * ```
  *
  * Pagination component support DI container and can be used with custom PaginationButton component.
@@ -42,18 +35,47 @@ export default {
   title: "Pagination",
   component: Pagination,
   parameters: {},
+  argTypes: {
+    pageSizes: {
+      description: "Pagination steps list"
+    },
+    pageCount: {
+      description: "Total number of pages",
+      control: "number"
+    },
+    pageIndex: {
+      description: "Current page index",
+      control: "number"
+    },
+    onPageIndexChange: {
+      description: "Change page index event",
+      action: "onPageIndexChange"
+    },
+    onClickPreviousPage: {
+      description: "Click previous page event",
+      action: "onClickPreviousPage"
+    },
+    onClickNextPage: {
+      description: "Click next page event",
+      action: "onClickNextPage"
+    },
+    onPageSizeChange: {
+      description: "Change page size event",
+      action: "onPageSizeChange"
+    }
+  },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      args.gotoPage && args.gotoPage(currentPageIndex);
+      args.onPageIndexChange && args.onPageIndexChange(currentPageIndex);
     }, [currentPageIndex]);
 
     return (
       <div>
-        <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
+        <Pagination {...args} pageIndex={currentPageIndex} onPageIndexChange={setPageIndex} />
       </div>
     );
   }

package/src/molecules/pagination/Pagination.tsx

@@ -1,52 +1,55 @@
 import classnames from "classnames";
 
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions } from "../../interfaces/index.js";
 import { getComponent, registerComponent } from "../../registries/components";
 import type { Select as DefaultSelect } from "../forms/select/Select";
-import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table";
 import type { PaginationButton as DefaultPaginationButton } from "./PaginationButton";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "./utils/getPageNumbers.js";
 
 export interface PaginationProps {
   className?: string;
   pageSizes?: number[];
-  gotoPage: any;
   canPreviousPage: boolean;
-  previousPage: any;
-  nextPage: any;
   canNextPage: boolean;
   pageCount: number;
   pageIndex: number;
   pageOptions?: number[];
   pageSize: number;
-  setPageSize: any;
-  totalLength?: number;
+  rowCount?: number;
   layout?: "html5" | "react" | "choicesjs";
-  i18n?: (f: string) => string;
+  i18n?: FormOptions["i18n"];
+  onPageIndexChange: (pageIndex: number) => void;
+  onClickPreviousPage: () => void;
+  onClickNextPage: () => void;
+  onPageSizeChange: (pageSize: number) => void;
 }
 
 export function Pagination(props: PaginationProps) {
   const {
     className,
     pageSizes = [10, 25, 50, 100],
-    gotoPage,
+    onPageIndexChange,
     canPreviousPage,
-    previousPage,
-    nextPage,
+    onClickPreviousPage,
+    onClickNextPage,
     canNextPage,
     pageCount,
     pageIndex = 1,
     pageOptions,
     pageSize,
-    setPageSize,
-    totalLength,
-    i18n = (f: string) => f
+    onPageSizeChange,
+    rowCount
   } = props;
+  const { t } = useI18n(props.i18n);
 
   const pageNumbers = getPageNumbers({
     currentPage: pageIndex,
     // pageNeighbours,
     totalPages: pageCount
   });
-  const choices: any[] = pageSizes.map((value) => ({ value, label: value }));
+
+  const options: any[] = pageSizes.map((value) => ({ value, label: value }));
   const Select = getComponent<typeof DefaultSelect>("Select");
   const PaginationButton = getComponent<typeof DefaultPaginationButton>("PaginationButton");
 
@@ -54,8 +57,8 @@ export function Pagination(props: PaginationProps) {
     <nav aria-label='Page navigation' className={classnames("pagination-group -mb-3", className)}>
       <ul className='pagination mb-3 mr-3'>
         <li className={classnames("page-item", !canPreviousPage && "disabled")}>
-          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => previousPage()}>
-            {i18n("Previous")}
+          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => onClickPreviousPage()}>
+            {t("Previous")}
           </PaginationButton>
         </li>
 
@@ -71,7 +74,7 @@ export function Pagination(props: PaginationProps) {
           const active = page - 1 === pageIndex;
           return (
             <li className={classnames("page-item", active && "active")} key={page}>
-              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => gotoPage(page - 1)}>
+              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => onPageIndexChange(page - 1)}>
                 {page}
               </PaginationButton>
             </li>
@@ -79,8 +82,8 @@ export function Pagination(props: PaginationProps) {
         })}
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
-          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => nextPage()}>
-            {i18n("Next")}
+          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => onClickNextPage()}>
+            {t("Next")}
           </PaginationButton>
         </li>
       </ul>
@@ -89,26 +92,26 @@ export function Pagination(props: PaginationProps) {
         <Select<number>
           name={"page"}
           value={pageSize}
-          options={choices}
+          options={options}
           multiple={false}
           layout={props.layout}
-          onChange={(_: string, value: number) => {
-            setPageSize(+value);
+          onChange={(_, value) => {
+            onPageSizeChange(+value);
           }}
         />
-        <span className={"ml-3"}>{i18n("items per page")}</span>
+        <span className={"ml-3"}>{t("items per page")}</span>
       </li>
       {pageOptions && (
         <li className={"mb-3 mr-3 flex items-center"}>
-          <span>{i18n("Page")}&nbsp;</span>
+          <span>{t("Page")}&nbsp;</span>
           <strong>
             {pageIndex + 1} of {pageOptions.length}
           </strong>
         </li>
       )}
-      {totalLength !== undefined && (
+      {rowCount !== undefined && (
         <li className={"mb-3 flex items-center"} data-testid='pagination-total-items'>
-          {i18n("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(totalLength)}</strong> {i18n("items")}
+          {t("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(rowCount)}</strong> {t("items")}
         </li>
       )}
     </nav>