@campxdev/shared 0.5.21 → 0.5.23

package/src/components/TableComponent/ReactTable.tsx

@@ -1,293 +1,293 @@
-import {ExpandMore} from '@mui/icons-material'
+import { ExpandMore } from '@mui/icons-material'
 import {
-	Box,
-	Checkbox,
-	IconButton,
-	ListItemIcon,
-	MenuItem,
-	Table,
-	TableCell,
-	TableHead,
-	TableRow,
-	Typography,
+  Box,
+  Checkbox,
+  IconButton,
+  ListItemIcon,
+  MenuItem,
+  Table,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
 } from '@mui/material'
-import {useEffect, useMemo, useState} from 'react'
-import {usePagination, useRowSelect, useTable} from 'react-table'
+import { useEffect, useMemo, useState } from 'react'
+import { usePagination, useRowSelect, useTable } from 'react-table'
 import ErrorBoundary from '../ErrorBoundary'
 import BatchActionsHeader from './BatchActionsHeader'
-import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
-import {RenderTableBody} from './RenderTableBody'
+import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import { RenderTableBody } from './RenderTableBody'
 import {
-	StyledLimitBox,
-	StyledLimitMenu,
-	StyledPagination,
-	StyledTableFooter,
+  StyledLimitBox,
+  StyledLimitMenu,
+  StyledPagination,
+  StyledTableFooter,
 } from './styles'
-import {TableStats} from './TableFooter/TableFooter'
-import {ColumnProps, Sort, TableProps} from './types'
+import { TableStats } from './TableFooter/TableFooter'
+import { ColumnProps, Sort, TableProps } from './types'
 
 type ReactTableCell = {
-	Header: any
-	accessor: any
-	Cell?: any
-	sort?: boolean
+  Header: any
+  accessor: any
+  Cell?: any
+  sort?: boolean
 } & ColumnProps
 
 const selectColumn = {
-	id: 'selection',
-	Header: ({getToggleAllPageRowsSelectedProps}) => (
-		<Checkbox size='small' {...getToggleAllPageRowsSelectedProps()} />
-	),
-	Cell: ({row}) => (
-		<Checkbox size='small' {...row.getToggleRowSelectedProps()} />
-	),
+  id: 'selection',
+  Header: ({ getToggleAllPageRowsSelectedProps }) => (
+    <Checkbox size="small" {...getToggleAllPageRowsSelectedProps()} />
+  ),
+  Cell: ({ row }) => (
+    <Checkbox size="small" {...row.getToggleRowSelectedProps()} />
+  ),
 }
 
 const getTableCol = (headerItem: ColumnProps) => {
-	let col: ReactTableCell = {
-		Header: headerItem?.title,
-		accessor: headerItem?.dataIndex,
-		...headerItem,
-	}
+  let col: ReactTableCell = {
+    Header: headerItem?.title,
+    accessor: headerItem?.dataIndex,
+    ...headerItem,
+  }
 
-	if (headerItem?.render) {
-		return {
-			...col,
-			Cell: ({row}) =>
-				headerItem?.render(
-					row?.original[headerItem?.dataIndex],
-					row?.original,
-					row?.index
-				),
-		}
-	}
-	return col
+  if (headerItem?.render) {
+    return {
+      ...col,
+      Cell: ({ row }) =>
+        headerItem?.render(
+          row?.original[headerItem?.dataIndex],
+          row?.original,
+          row?.index,
+        ),
+    }
+  }
+  return col
 }
 
 export default function TableComponent({
-	columns,
-	dataSource,
-	loading,
-	pagination,
-	refetching,
-	onSort,
-	select = {
-		enable: false,
-	},
+  columns,
+  dataSource,
+  loading,
+  pagination,
+  refetching,
+  onSort,
+  select = {
+    enable: false,
+  },
 }: TableProps) {
-	const [sort, setSort] = useState<Sort>({})
+  const [sort, setSort] = useState<Sort>({})
 
-	const headers = useMemo(() => {
-		if (!columns) return []
+  const headers = useMemo(() => {
+    if (!columns) return []
 
-		return columns?.map((item) => getTableCol(item))
-	}, [columns])
+    return columns?.map((item) => getTableCol(item))
+  }, [columns])
 
-	const tableData = useMemo(() => {
-		if (!dataSource) return []
-		return [...dataSource]
-	}, [dataSource])
+  const tableData = useMemo(() => {
+    if (!dataSource) return []
+    return [...dataSource]
+  }, [dataSource])
 
-	const {
-		getTableProps,
-		getTableBodyProps,
-		headerGroups,
-		rows,
-		prepareRow,
-		pageCount,
-		gotoPage,
-		setPageSize,
-		selectedFlatRows,
-		toggleAllRowsSelected,
-		state: {pageIndex, pageSize, selectedRowIds},
-	} = useTable(
-		{
-			columns: headers || [],
-			data: tableData || [],
-			stateReducer: (newState, action) => {
-				switch (action.type) {
-					case 'toggleAllRowsSelected':
-						return {
-							...newState,
-							selectedRowIds: {},
-						}
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    pageCount,
+    gotoPage,
+    setPageSize,
+    selectedFlatRows,
+    toggleAllRowsSelected,
+    state: { pageIndex, pageSize, selectedRowIds },
+  } = useTable(
+    {
+      columns: headers || [],
+      data: tableData || [],
+      stateReducer: (newState, action) => {
+        switch (action.type) {
+          case 'toggleAllRowsSelected':
+            return {
+              ...newState,
+              selectedRowIds: {},
+            }
 
-					default:
-						return newState
-				}
-			},
-			initialState: {
-				pageIndex: pagination?.page ?? 0,
-				pageSize: pagination?.limit ?? 10,
-			},
-			manualPagination: true,
-			autoResetSelectedRows: false,
-			pageCount: pagination?.totalCount ?? dataSource?.length,
-			getRowId: select?.enable
-				? (row) => {
-						return row?.id
-				  }
-				: undefined,
-		},
-		// useSortBy,
-		usePagination,
-		useRowSelect,
-		(hooks) => {
-			if (!select.enable) return
-			hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
-		}
-	)
+          default:
+            return newState
+        }
+      },
+      initialState: {
+        pageIndex: pagination?.page ?? 0,
+        pageSize: pagination?.limit ?? 10,
+      },
+      manualPagination: true,
+      autoResetSelectedRows: false,
+      pageCount: pagination?.totalCount ?? dataSource?.length,
+      getRowId: select?.enable
+        ? (row) => {
+            return row?.id
+          }
+        : undefined,
+    },
+    // useSortBy,
+    usePagination,
+    useRowSelect,
+    (hooks) => {
+      if (!select.enable) return
+      hooks.visibleColumns.push((columns) => [selectColumn, ...columns])
+    },
+  )
 
-	const handleSortClick = (sortBykey) => {
-		setSort((prev) => {
-			if (prev[sortBykey]) {
-				if (prev[sortBykey] === 'desc') return {...prev, [sortBykey]: 'asc'}
-				if (prev[sortBykey] === 'asc') {
-					delete prev[sortBykey]
-					return {...prev}
-				}
-			} else {
-				return {
-					...prev,
-					[sortBykey]: 'desc',
-				}
-			}
-		})
-	}
-	useEffect(() => {
-		if (!onSort) return
+  const handleSortClick = (sortBykey) => {
+    setSort((prev) => {
+      if (prev[sortBykey]) {
+        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
+        if (prev[sortBykey] === 'asc') {
+          delete prev[sortBykey]
+          return { ...prev }
+        }
+      } else {
+        return {
+          ...prev,
+          [sortBykey]: 'desc',
+        }
+      }
+    })
+  }
+  useEffect(() => {
+    if (!onSort) return
 
-		onSort({
-			sortBy: Object.keys(sort).join(','),
-			sortOrder: Object.keys(sort)
-				.map((item) => sort[item])
-				.join(','),
-		})
-	}, [sort])
+    onSort({
+      sortBy: Object.keys(sort).join(','),
+      sortOrder: Object.keys(sort)
+        .map((item) => sort[item])
+        .join(','),
+    })
+  }, [sort])
 
-	const handlePagination = (e, value) => {
-		gotoPage(value - 1)
-	}
+  const handlePagination = (e, value) => {
+    gotoPage(value - 1)
+  }
 
-	useEffect(() => {
-		if (!pagination) return
-		pagination.onChange(pageIndex * pageSize)
-	}, [pageIndex])
+  useEffect(() => {
+    if (!pagination) return
+    pagination.onChange(pageIndex * pageSize)
+  }, [pageIndex])
 
-	useEffect(() => {
-		if (!pagination) return
-		pagination.onChangeLimit(pageSize)
-		pagination.onChange(0)
-	}, [pageSize])
+  useEffect(() => {
+    if (!pagination) return
+    pagination.onChangeLimit(pageSize)
+    pagination.onChange(0)
+  }, [pageSize])
 
-	const clearSelection = () => {
-		toggleAllRowsSelected(false)
-	}
+  const clearSelection = () => {
+    toggleAllRowsSelected(false)
+  }
 
-	return (
-		<>
-			<BatchActionsHeader
-				actions={select?.actions || []}
-				selectedRowIds={selectedRowIds}
-				clearSelection={clearSelection}
-			/>
-			<Table sx={{position: 'relative'}} {...getTableProps()}>
-				<TableHead>
-					{headerGroups.map((headerGroup, index) => (
-						<TableRow key={index} {...headerGroup.getHeaderGroupProps()}>
-							{headerGroup.headers.map((column: any, index) => (
-								<TableCell key={index} {...column.getHeaderProps()}>
-									{column.render('Header')}
-									{column.sort && (
-										<IconButton onClick={() => handleSortClick(column.id)}>
-											<ListItemIcon>
-												{sort[column.id] === 'asc' ? (
-													<SortAscIcon />
-												) : sort[column.id] === 'desc' ? (
-													<SortDescIcon />
-												) : (
-													<SortIcon />
-												)}
-											</ListItemIcon>
-										</IconButton>
-									)}
-								</TableCell>
-							))}
-						</TableRow>
-					))}
-				</TableHead>
-				<RenderTableBody
-					colLength={columns?.length}
-					loading={loading || refetching}
-					getTableBodyProps={getTableBodyProps}
-					rows={rows}
-					prepareRow={prepareRow}
-				/>
-			</Table>
-			{pagination && dataSource && !loading && (
-				<StyledTableFooter>
-					<TableStats
-						limit={pageSize}
-						page={pageIndex + 1}
-						totalCount={pageCount}
-					/>
-					<StyledPagination
-						variant='outlined'
-						shape='rounded'
-						onChange={handlePagination}
-						count={Math.ceil(pageCount / pageSize)}
-						page={pageIndex + 1}
-					/>
-					<Limit pageSize={pageSize} setPageSize={setPageSize} />
-				</StyledTableFooter>
-			)}
-		</>
-	)
+  return (
+    <>
+      <BatchActionsHeader
+        actions={select?.actions || []}
+        selectedRowIds={selectedRowIds}
+        clearSelection={clearSelection}
+      />
+      <Table sx={{ position: 'relative' }} {...getTableProps()}>
+        <TableHead>
+          {headerGroups.map((headerGroup, index) => (
+            <TableRow key={index} {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column: any, index) => (
+                <TableCell key={index} {...column.getHeaderProps()}>
+                  {column.render('Header')}
+                  {column.sort && (
+                    <IconButton onClick={() => handleSortClick(column.id)}>
+                      <ListItemIcon>
+                        {sort[column.id] === 'asc' ? (
+                          <SortAscIcon />
+                        ) : sort[column.id] === 'desc' ? (
+                          <SortDescIcon />
+                        ) : (
+                          <SortIcon />
+                        )}
+                      </ListItemIcon>
+                    </IconButton>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableHead>
+        <RenderTableBody
+          colLength={columns?.length}
+          loading={loading || refetching}
+          getTableBodyProps={getTableBodyProps}
+          rows={rows}
+          prepareRow={prepareRow}
+        />
+      </Table>
+      {pagination && dataSource && !loading && (
+        <StyledTableFooter>
+          <TableStats
+            limit={pageSize}
+            page={pageIndex + 1}
+            totalCount={pageCount}
+          />
+          <StyledPagination
+            variant="outlined"
+            shape="rounded"
+            onChange={handlePagination}
+            count={Math.ceil(pageCount / pageSize)}
+            page={pageIndex + 1}
+          />
+          <Limit pageSize={pageSize} setPageSize={setPageSize} />
+        </StyledTableFooter>
+      )}
+    </>
+  )
 }
 
-const Limit = ({pageSize, setPageSize}) => {
-	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
+const Limit = ({ pageSize, setPageSize }) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
 
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget)
-	}
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
-	const menuItems = [
-		{label: '10', value: 10},
-		{label: '20', value: 20},
-		{label: '50', value: 50},
-		{label: '100', value: 100},
-	]
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+  const menuItems = [
+    { label: '10', value: 10 },
+    { label: '20', value: 20 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ]
 
-	return (
-		<StyledLimitBox open={open}>
-			<Box onClick={handleClick}>
-				<Typography>{`${pageSize} / Page`}</Typography>
-				<ExpandMore />
-			</Box>
-			<StyledLimitMenu
-				id='basic-menu'
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-			>
-				{menuItems?.map((item, index) => (
-					<MenuItem
-						onClick={() => {
-							setPageSize(item?.value)
-							handleClose()
-						}}
-						value={item?.value}
-						key={index}
-					>
-						{item?.label}
-					</MenuItem>
-				))}
-			</StyledLimitMenu>
-		</StyledLimitBox>
-	)
+  return (
+    <StyledLimitBox open={open}>
+      <Box onClick={handleClick}>
+        <Typography>{`${pageSize} / Page`}</Typography>
+        <ExpandMore />
+      </Box>
+      <StyledLimitMenu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        {menuItems?.map((item, index) => (
+          <MenuItem
+            onClick={() => {
+              setPageSize(item?.value)
+              handleClose()
+            }}
+            value={item?.value}
+            key={index}
+          >
+            {item?.label}
+          </MenuItem>
+        ))}
+      </StyledLimitMenu>
+    </StyledLimitBox>
+  )
 }

package/src/components/TableComponent/RenderTableBody.tsx

@@ -1,64 +1,64 @@
-import {Box, TableBody, TableCell, Typography} from '@mui/material'
+import { Box, TableBody, TableCell, Typography } from '@mui/material'
 import Spinner from '../Spinner'
 import noDataImage from './no-data-illu.svg'
-import {StyledTableRow} from './styles'
+import { StyledTableRow } from './styles'
 
 export const RenderTableBody = ({
-	getTableBodyProps,
-	prepareRow,
-	rows,
-	loading,
-	colLength,
+  getTableBodyProps,
+  prepareRow,
+  rows,
+  loading,
+  colLength,
 }) => {
-	if (loading)
-		return (
-			<TableCell colSpan={colLength}>
-				<Spinner />
-			</TableCell>
-		)
+  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>
-		)
+  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>
-	)
+  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>
+  )
 }