@campxdev/shared 1.11.36 → 1.11.38

package/package.json

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

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

@@ -5,17 +5,25 @@ import {
   IconButton,
   ListItemIcon,
   MenuItem,
+  Stack,
   Table,
   TableCell,
   TableHead,
   TableRow,
+  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 TableFooter from '../BasicTable/TableFooter'
+import { debounce } from '../../../utils/debounce'
+import TableStats from '../common/TableStats'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-import { StyledLimitBox, StyledLimitMenu } from '../common/styles'
+import {
+  StyledLimitBox,
+  StyledLimitMenu,
+  StyledPagination,
+  StyledTableFooter,
+} from '../common/styles'
 import { ColumnProps, Sort, TableProps } from '../common/types'
 import BatchActionsHeader from './BatchActionsHeader'
 import { RenderTableBody } from './RenderTableBody'
@@ -135,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) => {
@@ -226,14 +240,46 @@ export default function ReactTable({
         />
       </Table>
       {pagination && dataSource && !loading && (
-        <TableFooter
-          page={pagination.page + 1}
-          limit={pagination.limit}
-          totalCount={pagination.totalCount ?? 0}
-          handlePagination={pagination.onChange}
-          handlePageLimit={pagination.onChangeLimit}
-          handlePageInput={pagination.handlePageInput}
-        />
+        <StyledTableFooter>
+          <TableStats
+            limit={pageSize}
+            page={pageIndex + 1}
+            totalCount={pageCount}
+          />
+          <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)
+  }
+}