@campxdev/shared 0.5.19 → 0.5.21

package/src/components/TableComponent/index.tsx

@@ -1,221 +1,221 @@
-import {
-	alpha,
-	Box,
-	IconButton,
-	ListItemIcon,
-	styled,
-	Table as MuiTable,
-	TableBody,
-	TableCell,
-	TableContainer,
-	TableHead,
-	TableRow,
-	Typography,
-} from '@mui/material'
-import _ from 'lodash'
-import {useEffect, useState} from 'react'
-import Spinner from '../Spinner'
-import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
-import TableFooter from './TableFooter'
-
-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
-}
-
-type Order = 'asc' | 'desc' | ''
-type Sort = {}
-
-export default function Table({
-	columns,
-	dataSource,
-	onRowClick,
-	pagination,
-	loading,
-	onSort,
-	dense = 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 (
-		<TableContainer>
-			<>
-				<MuiTable>
-					<TableHead>
-						<TableRow>
-							{columns.map((col, index) => (
-								<TableCell
-									key={index}
-									sx={{
-										...(col?.width && {
-											width: col?.width,
-										}),
-									}}
-								>
-									<>
-										<Box>{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)
-											}}
-										>
-											{columns.map((col, colIndex) => (
-												<TableCell
-													sx={{
-														color: col.textColor,
-														padding: dense ? '10px' : '15px',
-													}}
-													key={colIndex}
-												>
-													<>
-														{col?.render
-															? col.render(row[col.dataIndex], row, index)
-															: _.get(row, col.dataIndex)}
-													</>
-												</TableCell>
-											))}
-										</StyledTableRow>
-									))}
-								</TableBody>
-							) : (
-								<Box>
-									{dataSource && (
-										<Typography sx={{padding: '10px'}}>
-											No Records Found !..
-										</Typography>
-									)}
-								</Box>
-							)}
-						</>
-					) : (
-						<Spinner />
-					)}
-				</MuiTable>
-			</>
-			<>
-				{pagination && (
-					<TableFooter
-						page={pagination.page}
-						limit={pagination.limit}
-						totalCount={pagination.totalCount}
-						handlePagination={pagination.onChange}
-						handlePageLimit={pagination.onChangeLimit}
-					/>
-				)}
-			</>
-		</TableContainer>
-	)
-}
-
-// const StyledSortButton = styled(IconButton)<{
-//   sortOrder: Order
-//   dataIndex: string
-// }>(({ theme, sortOrder, dataIndex }) => ({
-//   marginLeft: '10px',
-//   ...(sortOrder === '' && {
-//     '& .MuiSvgIcon-root': {
-//       // visibility: 'hidden',
-//     },
-//     // '&:hover .MuiSvgIcon-root': {
-//     //   visibility: 'visible',
-//     //   opacity: 0.4,
-//     // },
-//     transition: 'transform 1s ease-in-out',
-//   }),
-//   ...(sortOrder === 'asc' && {
-//     transition: 'transform 1s ease-in-out',
-//   }),
-//   ...(sortOrder === 'desc' && {
-//     '& .MuiSvgIcon-root': {
-//       transform: 'rotate(180deg)',
-//     },
-//     transition: 'transform 1s ease-in-out',
-//   }),
-// }))
-
-const StyledTableRow = styled(TableRow)<{canRowClick: boolean}>(
-	({theme, canRowClick}) => ({
-		...(canRowClick && {
-			cursor: 'pointer',
-			'&.MuiTableRow-hover:hover': {
-				backgroundColor: alpha('#f2f2f2', 0.4),
-			},
-		}),
-	})
-)
+import {
+	alpha,
+	Box,
+	IconButton,
+	ListItemIcon,
+	styled,
+	Table as MuiTable,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+	Typography,
+} from '@mui/material'
+import _ from 'lodash'
+import {useEffect, useState} from 'react'
+import Spinner from '../Spinner'
+import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
+import TableFooter from './TableFooter'
+
+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
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function Table({
+	columns,
+	dataSource,
+	onRowClick,
+	pagination,
+	loading,
+	onSort,
+	dense = 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 (
+		<TableContainer>
+			<>
+				<MuiTable>
+					<TableHead>
+						<TableRow>
+							{columns.map((col, index) => (
+								<TableCell
+									key={index}
+									sx={{
+										...(col?.width && {
+											width: col?.width,
+										}),
+									}}
+								>
+									<>
+										<Box>{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)
+											}}
+										>
+											{columns.map((col, colIndex) => (
+												<TableCell
+													sx={{
+														color: col.textColor,
+														padding: dense ? '10px' : '15px',
+													}}
+													key={colIndex}
+												>
+													<>
+														{col?.render
+															? col.render(row[col.dataIndex], row, index)
+															: _.get(row, col.dataIndex)}
+													</>
+												</TableCell>
+											))}
+										</StyledTableRow>
+									))}
+								</TableBody>
+							) : (
+								<Box>
+									{dataSource && (
+										<Typography sx={{padding: '10px'}}>
+											No Records Found !..
+										</Typography>
+									)}
+								</Box>
+							)}
+						</>
+					) : (
+						<Spinner />
+					)}
+				</MuiTable>
+			</>
+			<>
+				{pagination && (
+					<TableFooter
+						page={pagination.page}
+						limit={pagination.limit}
+						totalCount={pagination.totalCount}
+						handlePagination={pagination.onChange}
+						handlePageLimit={pagination.onChangeLimit}
+					/>
+				)}
+			</>
+		</TableContainer>
+	)
+}
+
+// const StyledSortButton = styled(IconButton)<{
+//   sortOrder: Order
+//   dataIndex: string
+// }>(({ theme, sortOrder, dataIndex }) => ({
+//   marginLeft: '10px',
+//   ...(sortOrder === '' && {
+//     '& .MuiSvgIcon-root': {
+//       // visibility: 'hidden',
+//     },
+//     // '&:hover .MuiSvgIcon-root': {
+//     //   visibility: 'visible',
+//     //   opacity: 0.4,
+//     // },
+//     transition: 'transform 1s ease-in-out',
+//   }),
+//   ...(sortOrder === 'asc' && {
+//     transition: 'transform 1s ease-in-out',
+//   }),
+//   ...(sortOrder === 'desc' && {
+//     '& .MuiSvgIcon-root': {
+//       transform: 'rotate(180deg)',
+//     },
+//     transition: 'transform 1s ease-in-out',
+//   }),
+// }))
+
+const StyledTableRow = styled(TableRow)<{canRowClick: boolean}>(
+	({theme, canRowClick}) => ({
+		...(canRowClick && {
+			cursor: 'pointer',
+			'&.MuiTableRow-hover:hover': {
+				backgroundColor: alpha('#f2f2f2', 0.4),
+			},
+		}),
+	})
+)