refactor(pagination): ♻️ update pagination state, stories & types

src/pagination/PaginationState.ts

@@ -3,16 +3,11 @@
  * Based on the logic from [usePagination Hook](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Pagination/usePagination.js)
  */
 import React from "react";
-import {
-  SealedInitialState,
-  useSealedState,
-} from "reakit-utils/useSealedState";
+import { useControllableState } from "@chakra-ui/hooks";
 
 export type PaginationState = {
   /**
    * The current active page
-   *
-   * @default 1
    */
   currentPage: number;
   /**
@@ -52,37 +47,61 @@ export type PaginationAction = {
   lastPage: () => void;
 };
 
-export type PaginationInitialState = Pick<
-  Partial<PaginationState>,
-  "currentPage"
-> & {
+export type PaginationInitialState = {
+  /**
+   * Set the default page(uncontrollable)
+   *
+   * @default 1
+   */
+  defaultPage?: number;
+  /**
+   * Set the page(controllable)
+   */
+  page?: number;
+  /**
+   *
+   */
+  onChange?: (page: number) => void;
   /**
    * Total no. of pages
+   *
+   * @default 1
    */
   count?: number;
   /**
    * No. of boundary pages to be visible
+   *
+   * @default 1
    */
   boundaryCount?: number;
   /**
    * No. of sibiling pages allowed before/after the current page
+   *
+   * @default 1
    */
   siblingCount?: number;
 };
 
 export type PaginationStateReturn = PaginationState & PaginationAction;
 
 export const usePaginationState = (
-  props: SealedInitialState<PaginationInitialState> = {},
+  props: PaginationInitialState = {},
 ): PaginationStateReturn => {
   const {
-    currentPage: initialCurrentPage = 1,
+    defaultPage = 1,
+    page: currentPageProp,
+    onChange,
     count = 1,
     boundaryCount = 1,
     siblingCount = 1,
-  } = useSealedState(props);
-
-  const [currentPage, setCurrentPage] = React.useState(initialCurrentPage);
+  } = props;
+
+  const [currentPage, setCurrentPage] = useControllableState({
+    value: currentPageProp,
+    defaultValue: defaultPage,
+    onChange,
+    shouldUpdate: (prev, next) => prev !== next,
+  });
 
   const startPages = range(1, Math.min(boundaryCount, count));
   const endPages = range(

src/pagination/__tests__/PaginationState.test.ts

@@ -89,7 +89,7 @@ describe("usePaginationState", () => {
 
   it("should have disabled next button if currentPage === count & enabled previous button", () => {
     const { isAtFirstPage, isAtLastPage } = renderHook(() =>
-      usePaginationState({ count: 2, currentPage: 2 }),
+      usePaginationState({ count: 2, defaultPage: 2 }),
     ).result.current;
 
     expect(isAtFirstPage).toBe(false);
@@ -114,15 +114,15 @@ describe("usePaginationState", () => {
 
   it("should have start-ellipses when currentPage >= 5", () => {
     const { pages } = renderHook(() =>
-      usePaginationState({ count: 8, currentPage: 5 }),
+      usePaginationState({ count: 8, defaultPage: 5 }),
     ).result.current;
 
     expect(pages).toContain("start-ellipsis");
   });
 
   it("should have start-ellipses & end-ellipsis when count >= 5", () => {
     const { pages } = renderHook(() =>
-      usePaginationState({ count: 9, currentPage: 5 }),
+      usePaginationState({ count: 9, defaultPage: 5 }),
     ).result.current;
 
     expect(pages).toContain("start-ellipsis");
@@ -138,7 +138,7 @@ describe("usePaginationState", () => {
       usePaginationState({
         count: 40,
         boundaryCount: 5,
-        currentPage: 20,
+        defaultPage: 20,
       }),
     );
 
@@ -156,7 +156,7 @@ describe("usePaginationState", () => {
       usePaginationState({
         count: 11,
         siblingCount: 2,
-        currentPage: 6,
+        defaultPage: 6,
       }),
     );
 

src/pagination/stories/Pagination.stories.tsx

@@ -22,19 +22,20 @@ export const Default = Base.bind({});
 
 export const DefaultPage = Base.bind({});
 DefaultPage.args = {
-  currentPage: 5,
+  defaultPage: 5,
+  count: 10,
 };
 
 export const BoundaryCount = Base.bind({});
 BoundaryCount.args = {
-  currentPage: 25,
+  defaultPage: 25,
   count: 50,
   boundaryCount: 5,
 };
 
 export const SibilingCount = Base.bind({});
 SibilingCount.args = {
-  currentPage: 25,
+  defaultPage: 25,
   count: 50,
   sibilingCount: 5,
 };