@campxdev/shared 1.10.65 → 1.10.67

package/src/components/Tables/MobileTable/MobileTable.tsx

@@ -1,218 +0,0 @@
-import {
-  Box,
-  IconButton,
-  ListItemIcon,
-  Table as MuiTable,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  alpha,
-  styled,
-} from '@mui/material'
-import _ from 'lodash'
-import { useEffect, useState } from 'react'
-import Spinner from '../../Spinner'
-import TableFooter from '../BasicTable/TableFooter'
-import NoRecordsFound from '../common/NoRecordsFound'
-import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-
-export interface ColumnProps {
-  dataIndex: string
-  key: string
-  title: any
-  render?: (cellData: any, row: any, index: number) => any
-  textColor?: string
-  sort?: boolean
-  width?: string //pixels
-}
-
-interface TableProps {
-  columns: Array<ColumnProps>
-  rowKey?: string
-  dataSource?: any[]
-  loading?: boolean
-  onRowClick?: (row: any) => void
-  pagination?: {
-    page: number
-    limit: number
-    totalCount: number
-    onChange: (v: number) => void
-    onChangeLimit?: (v: number) => void
-  }
-  onSort?: (sort: any) => void
-  dense?: boolean
-  isLastRowColorChange?: boolean
-}
-
-type Order = 'asc' | 'desc' | ''
-type Sort = {}
-
-export default function MobileTable({
-  columns,
-  dataSource,
-  onRowClick,
-  pagination,
-  loading,
-  onSort,
-  dense = false,
-  isLastRowColorChange = false,
-}: TableProps) {
-  const [sort, setSort] = useState<Sort>({})
-
-  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])
-
-  return (
-    <StyledTableContainer>
-      <>
-        <StyledMuiTable>
-          <TableHead>
-            <TableRow>
-              {columns.map((col, index) => (
-                <TableCell
-                  key={index}
-                  sx={{
-                    ...(col?.width && {
-                      width: col?.width,
-                    }),
-                    borderRightColor: '#1212121A',
-                    borderRightStyle: 'solid',
-                  }}
-                >
-                  <Box sx={{ fontWeight: 500, fontSize: '14px' }}>
-                    {col.title}
-                  </Box>
-                  {col.sort && (
-                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
-                      <ListItemIcon>
-                        {sort[col.dataIndex] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[col.dataIndex] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          {!loading ? (
-            <>
-              {dataSource?.length ? (
-                <TableBody>
-                  {dataSource?.map((row, index) => (
-                    <StyledTableRow
-                      canRowClick={!!onRowClick}
-                      hover={!!onRowClick}
-                      key={index}
-                      onClick={() => {
-                        return onRowClick && onRowClick(row)
-                      }}
-                      isLastRowColorChange={isLastRowColorChange}
-                    >
-                      {columns.map((col, colIndex) => (
-                        <TableCell
-                          sx={{
-                            color: col.textColor,
-                            padding: dense ? '10px' : '15px',
-                            font: 'avenir',
-                            fontSize: '14px',
-                            borderRightColor: '#1212121A',
-                            borderRightStyle: 'solid',
-                          }}
-                          key={colIndex}
-                        >
-                          <>
-                            {col?.render
-                              ? col.render(row[col.dataIndex], row, index)
-                              : _.get(row, col.dataIndex)}
-                          </>
-                        </TableCell>
-                      ))}
-                    </StyledTableRow>
-                  ))}
-                </TableBody>
-              ) : (
-                <>
-                  <NoRecordsFound colLength={columns?.length} />
-                </>
-              )}
-            </>
-          ) : (
-            <Spinner />
-          )}
-        </StyledMuiTable>
-      </>
-      <>
-        {pagination && (
-          <TableFooter
-            page={pagination.page + 1}
-            limit={pagination.limit}
-            totalCount={pagination.totalCount ?? 0}
-            handlePagination={pagination.onChange}
-            handlePageLimit={pagination.onChangeLimit}
-          />
-        )}
-      </>
-    </StyledTableContainer>
-  )
-}
-
-const StyledTableContainer = styled(TableContainer)<{}>(({ theme }) => ({
-  width: '100%',
-  overflowX: 'auto',
-  borderRadius: '10px 10px 10px 10px',
-  border: '1px solid #1212121A',
-}))
-
-const StyledMuiTable = styled(MuiTable)<{}>(({ theme }) => ({
-  border: 'none',
-}))
-
-const StyledTableRow = styled(TableRow, {
-  shouldForwardProp: (prop) => prop !== 'canRowClick',
-})<{ canRowClick: boolean; isLastRowColorChange?: boolean }>(
-  ({ canRowClick, isLastRowColorChange }) => ({
-    ...(canRowClick && {
-      cursor: 'pointer',
-      '&.MuiTableRow-hover:hover': {
-        backgroundColor: alpha('#f2f2f2', 0.4),
-      },
-    }),
-    ...(isLastRowColorChange && {
-      '&:last-child': {
-        backgroundColor: '#F2F2F2',
-      },
-    }),
-  }),
-)

package/src/components/Tables/MobileTable/index.tsx

@@ -1 +0,0 @@
-export { default } from './MobileTable'