@campxdev/shared 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/ErrorBoundary/ErrorFallback.tsx +1 -1
  3. package/src/components/TableComponent/ReactTable.tsx +2 -3
  4. package/src/components/TableComponent/RenderTableBody.tsx +56 -57
  5. package/src/components/TableComponent/index.tsx +88 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "main": "./exports.ts",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
package/src/components/ErrorBoundary/ErrorFallback.tsx CHANGED
@@ -21,7 +21,7 @@ const StyledAlert = styled(Alert)(({theme}) => ({
21
21
 
22
22
  export default function ErrorFallback({error, resetErrorBoundary}) {
23
23
  return (
24
- <Box sx={{marginTop: '80px', padding: '16px'}}>
24
+ <Box sx={{marginTop: '16px', padding: '16px'}}>
25
25
  <StyledAlert severity='error'>
26
26
  {error?.message}
27
27
  <Button
package/src/components/TableComponent/ReactTable.tsx CHANGED
@@ -185,7 +185,7 @@ export default function TableComponent({
185
185
  }
186
186
 
187
187
  return (
188
- <ErrorBoundary>
188
+ <>
189
189
  <BatchActionsHeader
190
190
  actions={select?.actions || []}
191
191
  selectedRowIds={selectedRowIds}
@@ -219,7 +219,6 @@ export default function TableComponent({
219
219
  <RenderTableBody
220
220
  colLength={columns?.length}
221
221
  loading={loading || refetching}
222
- currentRows={rows?.length}
223
222
  getTableBodyProps={getTableBodyProps}
224
223
  rows={rows}
225
224
  prepareRow={prepareRow}
@@ -242,7 +241,7 @@ export default function TableComponent({
242
241
  <Limit pageSize={pageSize} setPageSize={setPageSize} />
243
242
  </StyledTableFooter>
244
243
  )}
245
- </ErrorBoundary>
244
+ </>
246
245
  )
247
246
  }
248
247
 
package/src/components/TableComponent/RenderTableBody.tsx CHANGED
@@ -1,65 +1,64 @@
1
- import { Box, TableBody, TableCell, Typography } from '@mui/material'
1
+ import {Box, TableBody, TableCell, Typography} from '@mui/material'
2
2
  import Spinner from '../Spinner'
3
3
  import noDataImage from './no-data-illu.svg'
4
- import { StyledTableRow } from './styles'
4
+ import {StyledTableRow} from './styles'
5
5
 
6
6
  export const RenderTableBody = ({
7
- getTableBodyProps,
8
- prepareRow,
9
- rows,
10
- loading,
11
- currentRows,
12
- colLength,
7
+ getTableBodyProps,
8
+ prepareRow,
9
+ rows,
10
+ loading,
11
+ colLength,
13
12
  }) => {
14
- if (loading)
15
- return (
16
- <TableCell colSpan={colLength}>
17
- <Spinner />
18
- </TableCell>
19
- )
13
+ if (loading)
14
+ return (
15
+ <TableCell colSpan={colLength}>
16
+ <Spinner />
17
+ </TableCell>
18
+ )
20
19
 
21
- if (!loading && currentRows === 0)
22
- return (
23
- <TableCell colSpan={colLength}>
24
- <Box
25
- sx={{
26
- display: 'flex',
27
- flexDirection: 'column',
28
- alignItems: 'center',
29
- justifyContent: 'center',
30
- }}
31
- >
32
- <img
33
- style={{ width: '200px', height: 'auto', textAlign: 'center' }}
34
- src={noDataImage}
35
- />
36
- <Typography variant="h6" align="center">
37
- No Records Found
38
- </Typography>
39
- </Box>
40
- </TableCell>
41
- )
20
+ if (!loading && rows?.length < 1)
21
+ return (
22
+ <TableCell colSpan={colLength}>
23
+ <Box
24
+ sx={{
25
+ display: 'flex',
26
+ flexDirection: 'column',
27
+ alignItems: 'center',
28
+ justifyContent: 'center',
29
+ }}
30
+ >
31
+ <img
32
+ style={{width: '200px', height: 'auto', textAlign: 'center'}}
33
+ src={noDataImage}
34
+ />
35
+ <Typography variant='h6' align='center'>
36
+ No Records Found
37
+ </Typography>
38
+ </Box>
39
+ </TableCell>
40
+ )
42
41
 
43
- return (
44
- <TableBody {...getTableBodyProps()}>
45
- {rows?.map((row, index) => {
46
- prepareRow(row)
47
- return (
48
- <StyledTableRow
49
- key={index}
50
- {...row.getRowProps()}
51
- isSelected={row?.isSelected}
52
- >
53
- {row.cells?.map((cell, index) => {
54
- return (
55
- <TableCell key={index} {...cell.getCellProps()}>
56
- {cell?.render('Cell')}
57
- </TableCell>
58
- )
59
- })}
60
- </StyledTableRow>
61
- )
62
- })}
63
- </TableBody>
64
- )
42
+ return (
43
+ <TableBody {...getTableBodyProps()}>
44
+ {rows?.map((row, index) => {
45
+ prepareRow(row)
46
+ return (
47
+ <StyledTableRow
48
+ key={index}
49
+ {...row.getRowProps()}
50
+ isSelected={row?.isSelected}
51
+ >
52
+ {row.cells?.map((cell, index) => {
53
+ return (
54
+ <TableCell key={index} {...cell.getCellProps()}>
55
+ {cell?.render('Cell')}
56
+ </TableCell>
57
+ )
58
+ })}
59
+ </StyledTableRow>
60
+ )
61
+ })}
62
+ </TableBody>
63
+ )
65
64
  }
package/src/components/TableComponent/index.tsx CHANGED
@@ -14,7 +14,6 @@ import {
14
14
  } from '@mui/material'
15
15
  import _ from 'lodash'
16
16
  import {useEffect, useState} from 'react'
17
- import ErrorBoundary from '../ErrorBoundary'
18
17
  import Spinner from '../Spinner'
19
18
  import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
20
19
  import TableFooter from './TableFooter'
@@ -89,100 +88,98 @@ export default function Table({
89
88
  }, [sort])
90
89
 
91
90
  return (
92
- <ErrorBoundary>
93
- <TableContainer>
94
- <>
95
- <MuiTable>
96
- <TableHead>
97
- <TableRow>
98
- {columns.map((col, index) => (
99
- <TableCell
100
- key={index}
101
- sx={{
102
- ...(col?.width && {
103
- width: col?.width,
104
- }),
105
- }}
106
- >
107
- <>
108
- <Box>{col.title}</Box>
109
- </>
110
- {col.sort && (
111
- <IconButton
112
- onClick={() => handleSortClick(col.dataIndex)}
113
- >
114
- <ListItemIcon>
115
- {sort[col.dataIndex] === 'asc' ? (
116
- <SortAscIcon />
117
- ) : sort[col.dataIndex] === 'desc' ? (
118
- <SortDescIcon />
119
- ) : (
120
- <SortIcon />
121
- )}
122
- </ListItemIcon>
123
- </IconButton>
124
- )}
125
- </TableCell>
126
- ))}
127
- </TableRow>
128
- </TableHead>
129
- {!loading ? (
130
- <>
131
- {dataSource?.length ? (
132
- <TableBody>
133
- {dataSource?.map((row, index) => (
134
- <StyledTableRow
135
- canRowClick={!!onRowClick}
136
- hover={!!onRowClick}
137
- key={index}
138
- onClick={() => {
139
- return onRowClick && onRowClick(row)
140
- }}
141
- >
142
- {columns.map((col, colIndex) => (
143
- <TableCell
144
- sx={{
145
- color: col.textColor,
146
- padding: dense ? '10px' : '15px',
147
- }}
148
- key={colIndex}
149
- >
150
- <>
151
- {col?.render
152
- ? col.render(row[col.dataIndex], row, index)
153
- : _.get(row, col.dataIndex)}
154
- </>
155
- </TableCell>
156
- ))}
157
- </StyledTableRow>
158
- ))}
159
- </TableBody>
160
- ) : (
161
- <Box>
91
+ <TableContainer>
92
+ <>
93
+ <MuiTable>
94
+ <TableHead>
95
+ <TableRow>
96
+ {columns.map((col, index) => (
97
+ <TableCell
98
+ key={index}
99
+ sx={{
100
+ ...(col?.width && {
101
+ width: col?.width,
102
+ }),
103
+ }}
104
+ >
105
+ <>
106
+ <Box>{col.title}</Box>
107
+ </>
108
+ {col.sort && (
109
+ <IconButton onClick={() => handleSortClick(col.dataIndex)}>
110
+ <ListItemIcon>
111
+ {sort[col.dataIndex] === 'asc' ? (
112
+ <SortAscIcon />
113
+ ) : sort[col.dataIndex] === 'desc' ? (
114
+ <SortDescIcon />
115
+ ) : (
116
+ <SortIcon />
117
+ )}
118
+ </ListItemIcon>
119
+ </IconButton>
120
+ )}
121
+ </TableCell>
122
+ ))}
123
+ </TableRow>
124
+ </TableHead>
125
+ {!loading ? (
126
+ <>
127
+ {dataSource?.length ? (
128
+ <TableBody>
129
+ {dataSource?.map((row, index) => (
130
+ <StyledTableRow
131
+ canRowClick={!!onRowClick}
132
+ hover={!!onRowClick}
133
+ key={index}
134
+ onClick={() => {
135
+ return onRowClick && onRowClick(row)
136
+ }}
137
+ >
138
+ {columns.map((col, colIndex) => (
139
+ <TableCell
140
+ sx={{
141
+ color: col.textColor,
142
+ padding: dense ? '10px' : '15px',
143
+ }}
144
+ key={colIndex}
145
+ >
146
+ <>
147
+ {col?.render
148
+ ? col.render(row[col.dataIndex], row, index)
149
+ : _.get(row, col.dataIndex)}
150
+ </>
151
+ </TableCell>
152
+ ))}
153
+ </StyledTableRow>
154
+ ))}
155
+ </TableBody>
156
+ ) : (
157
+ <Box>
158
+ {dataSource && (
162
159
  <Typography sx={{padding: '10px'}}>
163
160
  No Records Found !..
164
161
  </Typography>
165
- </Box>
166
- )}
167
- </>
168
- ) : (
169
- <Spinner />
170
- )}
171
- </MuiTable>
172
- </>
173
- <>
174
- {pagination && (
175
- <TableFooter
176
- page={pagination.page}
177
- limit={pagination.limit}
178
- totalCount={pagination.totalCount}
179
- handlePagination={pagination.onChange}
180
- handlePageLimit={pagination.onChangeLimit}
181
- />
162
+ )}
163
+ </Box>
164
+ )}
165
+ </>
166
+ ) : (
167
+ <Spinner />
182
168
  )}
183
- </>
184
- </TableContainer>
185
- </ErrorBoundary>
169
+ </MuiTable>
170
+ </>
171
+ <>
172
+ {pagination && (
173
+ <TableFooter
174
+ page={pagination.page}
175
+ limit={pagination.limit}
176
+ totalCount={pagination.totalCount}
177
+ handlePagination={pagination.onChange}
178
+ handlePageLimit={pagination.onChangeLimit}
179
+ />
180
+ )}
181
+ </>
182
+ </TableContainer>
186
183
  )
187
184
  }
188
185