@campxdev/shared 1.11.37 → 1.11.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.37",
+  "version": "1.11.38",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Tables/ReactTable/ReactTable.tsx

@@ -5,6 +5,7 @@ import {
   IconButton,
   ListItemIcon,
   MenuItem,
+  Stack,
   Table,
   TableCell,
   TableHead,
@@ -12,8 +13,9 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
+import { debounce } from '../../../utils/debounce'
 import TableStats from '../common/TableStats'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import {
@@ -141,6 +143,12 @@ export default function ReactTable({
       hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
     },
   )
+  const [pageInput, setPageInput] = useState<string>(String(pageIndex + 1))
+
+  const debouncedHandlePagination = useCallback(
+    debounce((e, value) => handlePagination(e, value), 500),
+    [],
+  )
 
   const handleSortClick = (sortBykey) => {
     setSort((prev) => {
@@ -238,35 +246,38 @@ export default function ReactTable({
             page={pageIndex + 1}
             totalCount={pageCount}
           />
-          <StyledPagination
-            variant="outlined"
-            shape="rounded"
-            onChange={handlePagination}
-            count={Math.ceil(pageCount / pageSize)}
-            page={pageIndex + 1}
-          />
-          {pagination.handlePageInput && (
-            <Box
-              sx={{
-                '& .MuiBox-root': {
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '5px',
-                },
-              }}
-            >
-              <TextField
-                variant="outlined"
-                label={'Page :'}
-                size="small"
-                value={pageIndex + 1}
-                onChange={(e) =>
-                  pagination.handlePageInput(Number(e.target.value))
-                }
-                sx={{ width: '80px' }}
-              />
-            </Box>
-          )}
+          <Stack direction={'row'} gap={2} alignItems={'center'}>
+            <StyledPagination
+              variant="outlined"
+              shape="rounded"
+              onChange={handlePagination}
+              count={Math.ceil(pageCount / pageSize)}
+              page={pageIndex + 1}
+            />
+            {pagination.handlePageInput && (
+              <Box
+                sx={{
+                  '& .MuiBox-root': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '5px',
+                  },
+                }}
+              >
+                <TextField
+                  variant="outlined"
+                  label={'Page :'}
+                  size="small"
+                  value={pageInput}
+                  onChange={(e) => {
+                    setPageInput(e.target.value)
+                    debouncedHandlePagination(e, Number(e.target.value))
+                  }}
+                  sx={{ width: '80px' }}
+                />
+              </Box>
+            )}
+          </Stack>
           <Limit pageSize={pageSize} setPageSize={setPageSize} />
         </StyledTableFooter>
       )}

package/src/components/Tables/common/types.ts

@@ -25,7 +25,7 @@ export interface TableProps {
     totalCount: number
     onChange: (offset: number) => void
     onChangeLimit?: (v: number) => void
-    handlePageInput?: (v: number) => void
+    handlePageInput?: boolean
   }
   select?: {
     enable: boolean

package/src/utils/debounce.ts

@@ -0,0 +1,11 @@
+export function debounce(func, wait) {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}