refactor(pagination): 🚸 unify pagination navigation

src/pagination/PaginationButton.ts

@@ -0,0 +1,106 @@
+import { callAllHandlers, isNumber } from "@chakra-ui/utils";
+import React from "react";
+import { createComponent, createHook } from "reakit-system";
+import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
+
+import { PAGINATION_ITEM_KEYS } from "./__keys";
+import { PaginationStateReturn } from "./PaginationState";
+
+export type PaginationButtonOptions = ButtonOptions &
+  Pick<
+    PaginationStateReturn,
+    | "currentPage"
+    | "move"
+    | "next"
+    | "prev"
+    | "first"
+    | "last"
+    | "isAtMax"
+    | "isAtMin"
+  > & {
+    goto: string | number;
+    getAriaLabel?: (goto: string | number, isCurrent: boolean) => string;
+  };
+
+export type PaginationButtonHTMLProps = ButtonHTMLProps;
+
+export type PaginationButtonProps = PaginationButtonOptions &
+  PaginationButtonHTMLProps;
+
+export const usePaginationButton = createHook<
+  PaginationButtonOptions,
+  PaginationButtonHTMLProps
+>({
+  name: "PaginationButton",
+  compose: useButton,
+  keys: PAGINATION_ITEM_KEYS,
+
+  useOptions(options, { disabled: htmlDisabled }) {
+    const { goto, isAtMax, isAtMin } = options;
+    let disabled = false;
+
+    if (goto === "next" || goto === "last") {
+      disabled = isAtMax;
+    }
+
+    if (goto === "prev" || goto === "first") {
+      disabled = isAtMin;
+    }
+
+    return {
+      disabled: htmlDisabled || disabled,
+      ...options,
+    };
+  },
+
+  useProps(
+    { currentPage, move, last, first, next, prev, goto, getAriaLabel },
+    { onClick: htmlOnClick, ...htmlProps },
+  ) {
+    const isCurrent = currentPage === goto;
+
+    const onClick = React.useCallback(() => {
+      switch (goto) {
+        case "next":
+          next?.();
+          break;
+
+        case "prev":
+          prev?.();
+          break;
+
+        case "first":
+          first?.();
+          break;
+
+        case "last":
+          last?.();
+          break;
+
+        default:
+          if (isNumber(goto)) {
+            move?.(goto);
+          }
+          break;
+      }
+    }, [goto, next, prev, first, last, move]);
+
+    const ariaLabel =
+      getAriaLabel?.(goto, isCurrent) ?? isCurrent
+        ? `Page ${goto}`
+        : `Go to ${goto} Page`;
+
+    return {
+      "aria-label": ariaLabel,
+      "aria-current": isCurrent ? true : undefined,
+      onClick: callAllHandlers(onClick, htmlOnClick),
+      ...htmlProps,
+    };
+  },
+});
+
+export const PaginationButton = createComponent({
+  as: "button",
+  memo: true,
+  useHook: usePaginationButton,
+});

src/pagination/PaginationState.ts

@@ -85,12 +85,12 @@ export const usePaginationState = (props: UsePaginationProps = {}) => {
   ];
 
   const next = React.useCallback(() => {
-    setPage(page + 1);
-  }, [page, setPage]);
+    setPage(prevPage => prevPage + 1);
+  }, [setPage]);
 
   const prev = React.useCallback(() => {
-    setPage(page - 1);
-  }, [page, setPage]);
+    setPage(prevPage => prevPage - 1);
+  }, [setPage]);
 
   const first = React.useCallback(() => {
     setPage(1);
@@ -100,13 +100,20 @@ export const usePaginationState = (props: UsePaginationProps = {}) => {
     setPage(count);
   }, [count, setPage]);
 
+  const move = React.useCallback(
+    page => {
+      if (page >= 1 && page <= count) setPage(page);
+    },
+    [count, setPage],
+  );
+
   return {
     currentPage: page,
     isAtMax: page >= count,
     isAtMin: page <= 1,
     next,
     prev,
-    move: setPage,
+    move,
     first,
     last,
     pages,

src/pagination/__keys.ts

@@ -13,6 +13,6 @@ const PAGINATION_STATE_KEYS = [
 export const PAGINATION_KEYS = PAGINATION_STATE_KEYS;
 export const PAGINATION_ITEM_KEYS = [
   ...PAGINATION_STATE_KEYS,
-  "page",
+  "goto",
   "getAriaLabel",
 ];

src/pagination/index.ts

@@ -1,5 +1,3 @@
 export * from "./PaginationState";
 export * from "./Pagination";
-export * from "./PaginationItem";
-export * from "./PaginationNext";
-export * from "./PaginationPrev";
+export * from "./PaginationButton";

src/pagination/stories/Pagination.stories.tsx

@@ -2,9 +2,7 @@ import React from "react";
 
 import { Meta } from "@storybook/react";
 import { Pagination } from "../Pagination";
-import { PaginationPrev } from "../PaginationPrev";
-import { PaginationNext } from "../PaginationNext";
-import { PaginationItem } from "../PaginationItem";
+import { PaginationButton } from "../PaginationButton";
 import { UsePaginationProps, usePaginationState } from "../PaginationState";
 
 export default {
@@ -13,12 +11,20 @@ export default {
 
 const PaginationComp: React.FC<UsePaginationProps> = props => {
   const state = usePaginationState({ count: 10, ...props });
+  console.log("%c state", "color: #cc0088", state);
 
   return (
     <Pagination {...state}>
       <ul style={{ display: "flex", listStyle: "none" }}>
         <li>
-          <PaginationPrev {...state}>Previous</PaginationPrev>
+          <PaginationButton goto="first" {...state}>
+            First
+          </PaginationButton>
+        </li>
+        <li>
+          <PaginationButton goto="prev" {...state}>
+            Previous
+          </PaginationButton>
         </li>
         {state.pages.map(page => {
           if (page === "start-ellipsis" || page === "end-ellipsis") {
@@ -27,20 +33,27 @@ const PaginationComp: React.FC<UsePaginationProps> = props => {
 
           return (
             <li key={page}>
-              <PaginationItem
-                page={page}
+              <PaginationButton
+                goto={page}
                 style={{
                   fontWeight: state.currentPage === page ? "bold" : undefined,
                 }}
                 {...state}
               >
                 {page}
-              </PaginationItem>
+              </PaginationButton>
             </li>
           );
         })}
         <li>
-          <PaginationNext {...state}>Next</PaginationNext>
+          <PaginationButton goto="next" {...state}>
+            Next
+          </PaginationButton>
+        </li>
+        <li>
+          <PaginationButton goto="last" {...state}>
+            Last
+          </PaginationButton>
         </li>
       </ul>
     </Pagination>