@campxdev/shared 1.1.4 → 1.1.5

package/src/components/TableComponent/RenderTableBody.tsx

@@ -1,64 +1,64 @@
-import { Box, TableBody, TableCell, Typography } from '@mui/material'
-import Spinner from '../Spinner'
-import noDataImage from './no-data-illu.svg'
-import { StyledTableRow } from './styles'
-
-export const RenderTableBody = ({
-  getTableBodyProps,
-  prepareRow,
-  rows,
-  loading,
-  colLength,
-}) => {
-  if (loading)
-    return (
-      <TableCell colSpan={colLength}>
-        <Spinner />
-      </TableCell>
-    )
-
-  if (!loading && rows?.length < 1)
-    return (
-      <TableCell colSpan={colLength}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <img
-            style={{ width: '200px', height: 'auto', textAlign: 'center' }}
-            src={noDataImage}
-          />
-          <Typography variant="h6" align="center">
-            No Records Found
-          </Typography>
-        </Box>
-      </TableCell>
-    )
-
-  return (
-    <TableBody {...getTableBodyProps()}>
-      {rows?.map((row, index) => {
-        prepareRow(row)
-        return (
-          <StyledTableRow
-            key={index}
-            {...row.getRowProps()}
-            isSelected={row?.isSelected}
-          >
-            {row.cells?.map((cell, index) => {
-              return (
-                <TableCell key={index} {...cell.getCellProps()}>
-                  {cell?.render('Cell')}
-                </TableCell>
-              )
-            })}
-          </StyledTableRow>
-        )
-      })}
-    </TableBody>
-  )
-}
+import { Box, TableBody, TableCell, Typography } from '@mui/material'
+import Spinner from '../Spinner'
+import noDataImage from './no-data-illu.svg'
+import { StyledTableRow } from './styles'
+
+export const RenderTableBody = ({
+  getTableBodyProps,
+  prepareRow,
+  rows,
+  loading,
+  colLength,
+}) => {
+  if (loading)
+    return (
+      <TableCell colSpan={colLength}>
+        <Spinner />
+      </TableCell>
+    )
+
+  if (!loading && rows?.length < 1)
+    return (
+      <TableCell colSpan={colLength}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            style={{ width: '200px', height: 'auto', textAlign: 'center' }}
+            src={noDataImage}
+          />
+          <Typography variant="h6" align="center">
+            No Records Found
+          </Typography>
+        </Box>
+      </TableCell>
+    )
+
+  return (
+    <TableBody {...getTableBodyProps()}>
+      {rows?.map((row, index) => {
+        prepareRow(row)
+        return (
+          <StyledTableRow
+            key={index}
+            {...row.getRowProps()}
+            isSelected={row?.isSelected}
+          >
+            {row.cells?.map((cell, index) => {
+              return (
+                <TableCell key={index} {...cell.getCellProps()}>
+                  {cell?.render('Cell')}
+                </TableCell>
+              )
+            })}
+          </StyledTableRow>
+        )
+      })}
+    </TableBody>
+  )
+}

package/src/components/TableComponent/TableFooter/TableFooter.tsx

@@ -1,102 +1,102 @@
-import { Box, Typography } from '@mui/material'
-import DropDownButton from '../../DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../styles'
-
-interface TableFooterProps {
-  totalCount: number
-  limit: number
-  handlePagination: (v: number) => void
-  page: number
-  handlePageLimit?: (v: number) => void
-}
-
-export default function TableFooter({
-  totalCount,
-  limit,
-  handlePagination,
-  page,
-  handlePageLimit,
-}: TableFooterProps) {
-  const onChange = (v: number) => {
-    handlePagination(v)
-  }
-  return (
-    <StyledTableFooter>
-      <TableStats limit={limit} totalCount={totalCount} page={page} />
-      <StyledPagination
-        page={page}
-        count={Math.ceil(totalCount / limit)}
-        onChange={(e, v) => onChange(v)}
-        variant="outlined"
-        shape="rounded"
-      />
-      {handlePageLimit ? (
-        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
-      ) : (
-        <Box></Box>
-      )}
-    </StyledTableFooter>
-  )
-}
-
-export const TableStats = ({
-  limit,
-  totalCount,
-  page,
-}: {
-  limit: number
-  page: number
-  totalCount: number
-}) => {
-  const pageStart = (page - 1) * limit + 1
-  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
-
-  return (
-    <Box>
-      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
-    </Box>
-  )
-}
-
-const LimitField = ({ handlePageLimit, limit }) => {
-  return (
-    <Box>
-      <DropDownButton
-        buttonProps={{
-          variant: 'outlined',
-          color: 'secondary',
-          sx: {
-            padding: '0px 10px',
-            color: '#121212',
-            fontSize: '13px',
-            border: '1px solid #1212121A',
-          },
-        }}
-        label={`${limit} / page`}
-        menu={[
-          {
-            label: 10,
-            onClick: () => handlePageLimit(10),
-          },
-
-          {
-            label: 20,
-            onClick: () => handlePageLimit(20),
-          },
-          {
-            label: 30,
-            onClick: () => handlePageLimit(30),
-          },
-          {
-            label: 50,
-            onClick: () => handlePageLimit(50),
-          },
-          {
-            label: 100,
-            onClick: () => handlePageLimit(100),
-          },
-        ]}
-      />
-    </Box>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../../DropDownButton'
+import { StyledPagination, StyledTableFooter } from '../styles'
+
+interface TableFooterProps {
+  totalCount: number
+  limit: number
+  handlePagination: (v: number) => void
+  page: number
+  handlePageLimit?: (v: number) => void
+}
+
+export default function TableFooter({
+  totalCount,
+  limit,
+  handlePagination,
+  page,
+  handlePageLimit,
+}: TableFooterProps) {
+  const onChange = (v: number) => {
+    handlePagination(v)
+  }
+  return (
+    <StyledTableFooter>
+      <TableStats limit={limit} totalCount={totalCount} page={page} />
+      <StyledPagination
+        page={page}
+        count={Math.ceil(totalCount / limit)}
+        onChange={(e, v) => onChange(v)}
+        variant="outlined"
+        shape="rounded"
+      />
+      {handlePageLimit ? (
+        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
+      ) : (
+        <Box></Box>
+      )}
+    </StyledTableFooter>
+  )
+}
+
+export const TableStats = ({
+  limit,
+  totalCount,
+  page,
+}: {
+  limit: number
+  page: number
+  totalCount: number
+}) => {
+  const pageStart = (page - 1) * limit + 1
+  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
+
+  return (
+    <Box>
+      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+    </Box>
+  )
+}
+
+const LimitField = ({ handlePageLimit, limit }) => {
+  return (
+    <Box>
+      <DropDownButton
+        buttonProps={{
+          variant: 'outlined',
+          color: 'secondary',
+          sx: {
+            padding: '0px 10px',
+            color: '#121212',
+            fontSize: '13px',
+            border: '1px solid #1212121A',
+          },
+        }}
+        label={`${limit} / page`}
+        menu={[
+          {
+            label: 10,
+            onClick: () => handlePageLimit(10),
+          },
+
+          {
+            label: 20,
+            onClick: () => handlePageLimit(20),
+          },
+          {
+            label: 30,
+            onClick: () => handlePageLimit(30),
+          },
+          {
+            label: 50,
+            onClick: () => handlePageLimit(50),
+          },
+          {
+            label: 100,
+            onClick: () => handlePageLimit(100),
+          },
+        ]}
+      />
+    </Box>
+  )
+}

package/src/components/TableComponent/TableFooter/index.tsx

@@ -1 +1 @@
-export { default } from './TableFooter'
+export { default } from './TableFooter'

package/src/components/TableComponent/TableFooter/styles.tsx

@@ -1,28 +1,28 @@
-import { Box, Pagination, styled } from '@mui/material'
-
-export const StyledTableStats = styled(Box)(({}) => ({}))
-
-export const StyledTableFooter = styled(Box)(({ theme }) => ({
-  paddingTop: '1rem',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}))
-
-export const StyledPagination = styled(Pagination)(({ theme }) => ({
-  '& .MuiPaginationItem-root': {
-    border: 'none',
-    background: theme.palette.secondary.dark,
-  },
-  '& .MuiPaginationItem-previousNext': {
-    border: theme.borders.grayLight,
-    background: theme.palette.common.white,
-  },
-  '& .Mui-selected': {
-    border: `2px solid ${theme.palette.common.yellow}`,
-  },
-  '& .MuiPaginationItem-ellipsis': {
-    background: theme.palette.common.white,
-  },
-}))
+import { Box, Pagination, styled } from '@mui/material'
+
+export const StyledTableStats = styled(Box)(({}) => ({}))
+
+export const StyledTableFooter = styled(Box)(({ theme }) => ({
+  paddingTop: '1rem',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}))
+
+export const StyledPagination = styled(Pagination)(({ theme }) => ({
+  '& .MuiPaginationItem-root': {
+    border: 'none',
+    background: theme.palette.secondary.dark,
+  },
+  '& .MuiPaginationItem-previousNext': {
+    border: theme.borders.grayLight,
+    background: theme.palette.common.white,
+  },
+  '& .Mui-selected': {
+    border: `2px solid ${theme.palette.common.yellow}`,
+  },
+  '& .MuiPaginationItem-ellipsis': {
+    background: theme.palette.common.white,
+  },
+}))