feat: pagination custom page (#792)

* feat: pagination custom page

* fix: add pagination custom page to transactions table

.changeset/twelve-dolphins-add.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/pagination": minor
+---
+
+Add custom page input

apps/mochi-web/components/Profile/TransactionSection.tsx

@@ -95,6 +95,7 @@ export const TransactionOverviewSection = () => {
                 onItemPerPageChange: setSize,
                 onPageChange: setPage,
                 className: 'px-4',
+                allowCustomPage: true,
               },
             }}
             onRow={(tx) => {

apps/mochi-web/components/explore/index/sections/TransactionSection.tsx

@@ -61,6 +61,7 @@ export const TransactionSection = () => {
           totalItems: total,
           onItemPerPageChange: setSize,
           onPageChange: setPage,
+          allowCustomPage: true,
         },
       }}
       className="px-6"

packages/components/pagination/package.json

@@ -35,7 +35,9 @@
   "dependencies": {
     "@mochi-ui/icons": "workspace:*",
     "@mochi-ui/select": "workspace:*",
-    "@mochi-ui/theme": "workspace:*"
+    "@mochi-ui/theme": "workspace:*",
+    "@mochi-ui/separator": "workspace:*",
+    "@mochi-ui/input": "workspace:*"
   },
   "clean-package": "../../../clean-package.config.json"
 }

packages/components/pagination/src/pagination.tsx

@@ -9,6 +9,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@mochi-ui/select'
+import { Separator } from '@mochi-ui/separator'
+import { TextFieldInput } from '@mochi-ui/input'
 import { formatNumber } from './utils'
 
 const {
@@ -34,6 +36,7 @@ interface PaginationProps {
   recordName?: string
   hideOnSinglePage?: boolean
   allowCustomItemsPerPage?: boolean
+  allowCustomPage?: boolean
 }
 
 function PageButton({
@@ -70,14 +73,17 @@ export default function Pagination({
   recordName = 'members',
   hideOnSinglePage = false,
   allowCustomItemsPerPage = true,
+  allowCustomPage = false,
 }: PaginationProps) {
   const [currentPage, setCurrentPage] = useState(page)
   const [currentItemPerPage, setCurrentItemPerPage] = useState(initItemsPerPage)
+  const [customPage, setCustomPage] = useState('')
 
   useEffect(() => {
     if (onPageChange) {
       onPageChange(currentPage)
     }
+    setCustomPage('')
   }, [currentPage, onPageChange])
 
   useEffect(() => {
@@ -95,6 +101,17 @@ export default function Pagination({
 
   const totalPages = Math.ceil(totalItems / currentItemPerPage) || initTotalPage
 
+  const onCustomPageChange = (value: string) => {
+    if (!value) return
+    const page = Number(value)
+    if (page >= 1 && page <= totalPages && Number.isInteger(page)) {
+      setCurrentPage(page)
+    } else if (page > totalPages && Number.isInteger(page)) {
+      setCurrentPage(totalPages)
+    }
+    setCustomPage('')
+  }
+
   const renderPagination = () => {
     const pages = []
 
@@ -281,6 +298,24 @@ export default function Pagination({
           <div>
             {recordName} of {formatNumber(totalItems)}
           </div>
+          {allowCustomPage && (
+            <div className="flex items-center h-4 space-x-2">
+              <Separator orientation="vertical" />
+              <span>Go to</span>
+              <TextFieldInput
+                className="h-[34px] w-14 text-center"
+                value={customPage}
+                onChange={(e) => setCustomPage(e.target.value)}
+                onBlur={(e) => onCustomPageChange(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    onCustomPageChange(e.currentTarget.value)
+                  }
+                }}
+              />
+              <span>Page</span>
+            </div>
+          )}
         </div>
       )}
 

packages/components/pagination/stories/pagination.stories.tsx

@@ -61,3 +61,27 @@ export const Default: Story = {
     )
   },
 }
+
+export const AllowCustomPage: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- we're in a component
+    const [currentPage, setCurrentPage] = useState(1)
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- we're in a component
+    const [itemPerPage, setItemPerPage] = useState(15)
+
+    return (
+      <div className="md:min-w-[32rem] space-y-4">
+        <Pagination totalItems={25} allowCustomPage />
+        <Pagination
+          initItemsPerPage={itemPerPage}
+          initalPage={currentPage}
+          onItemPerPageChange={setItemPerPage}
+          onPageChange={setCurrentPage}
+          totalItems={100000}
+          totalPages={Math.ceil(100000 / itemPerPage)}
+          allowCustomPage
+        />
+      </div>
+    )
+  },
+}

packages/theme/src/components/pagination.ts

@@ -26,12 +26,18 @@ const paginationEllipsisButtonClsx = ({
 const paginationWrapperClsx = ({
   className = '',
 }: { className?: string } = {}) =>
-  clsx('flex items-center justify-between w-full sm:space-x-6', className)
+  clsx(
+    'flex items-center justify-between w-full sm:gap-x-6 sm:gap-y-4 flex-wrap',
+    className,
+  )
 
 const paginationAmountPerPageWrapperClsx = ({
   className = '',
 }: { className?: string } = {}) =>
-  clsx('hidden sm:inline-flex justify-start items-center space-x-2', className)
+  clsx(
+    'hidden sm:inline-flex justify-start items-center gap-x-2 gap-y-4 flex-wrap',
+    className,
+  )
 
 const paginationPageNavigateButtonGroupClsx = ({
   className = '',
@@ -42,7 +48,7 @@ const paginationNavigationClsx = ({
   className = '',
 }: { className?: string } = {}) =>
   clsx(
-    'flex-1 flex justify-center sm:justify-end items-center space-x-2',
+    'flex items-center justify-center space-x-2 flex-1 sm:flex-none',
     className,
   )