@campxdev/shared 1.4.13 → 1.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/{LayoutWrapper.tsx → Layout/LayoutWrapper.tsx}

@@ -1,7 +1,8 @@
 import {
   StyledLeftNavContainer,
   StyledMainContentContainer,
-} from '../layouts/Components/styles'
+} from '../../layouts/Components/styles'
+import ErrorBoundary from '../ErrorBoundary'
 import SideNav from './SideNav'
 interface Props {
   children?: React.ReactNode
@@ -15,11 +16,13 @@ export default function LayoutWrapper({
   sideMenuHeader,
 }: Props) {
   return (
-    <>
+    <ErrorBoundary>
       <StyledLeftNavContainer>
         <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
       </StyledLeftNavContainer>
-      <StyledMainContentContainer>{children}</StyledMainContentContainer>
-    </>
+      <StyledMainContentContainer>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </StyledMainContentContainer>
+    </ErrorBoundary>
   )
 }

package/src/components/{SideNav.tsx → Layout/SideNav.tsx}

@@ -9,12 +9,12 @@ import {
 import { Store } from 'pullstate'
 import { memo, ReactNode } from 'react'
 import { Link, useMatch, useResolvedPath } from 'react-router-dom'
-import { PermissionsStore } from '../shared-state'
+import { PermissionsStore } from '../../shared-state'
 import {
   ListItemButton,
   StyledChevronIcon,
   StyledListItemButton,
-} from './ListItemButton'
+} from '../ListItemButton'
 
 const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
 

package/src/components/PageContent.tsx

@@ -1,5 +1,4 @@
-import { Box, styled } from '@mui/material'
-import ErrorBoundary from './ErrorBoundary'
+import { Box, BoxProps, styled } from '@mui/material'
 
 const StyledPageContent = styled(Box)(() => ({
   paddingLeft: '25px',
@@ -8,10 +7,6 @@ const StyledPageContent = styled(Box)(() => ({
   paddingBottom: '3rem',
 }))
 
-export function PageContent(props) {
-  return (
-    <StyledPageContent style={props.style}>
-      <ErrorBoundary>{props.children}</ErrorBoundary>
-    </StyledPageContent>
-  )
+export function PageContent(props: BoxProps) {
+  return <StyledPageContent {...props}>{props.children}</StyledPageContent>
 }

package/src/components/SearchBar.tsx

@@ -1,7 +1,8 @@
 import { Search, Tune } from '@mui/icons-material'
-import { Box, InputAdornment, styled, TextField } from '@mui/material'
+import { Box, InputAdornment, styled } from '@mui/material'
 import { useMemo, useState } from 'react'
 import _ from 'lodash'
+import { TextField } from './Input'
 
 interface SearchBarProps {
   onSearch: (v: string) => void

package/src/components/TableComponent/ReactTable.tsx

@@ -35,10 +35,20 @@ type ReactTableCell = {
 const selectColumn = {
   id: 'selection',
   Header: ({ getToggleAllPageRowsSelectedProps }) => (
-    <Checkbox size="small" {...getToggleAllPageRowsSelectedProps()} />
+    <Checkbox
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+      {...getToggleAllPageRowsSelectedProps()}
+    />
   ),
   Cell: ({ row }) => (
-    <Checkbox size="small" {...row.getToggleRowSelectedProps()} />
+    <Checkbox
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+      {...row.getToggleRowSelectedProps()}
+    />
   ),
 }
 
@@ -106,11 +116,7 @@ export default function TableComponent({
       stateReducer: (newState, action) => {
         switch (action.type) {
           case 'toggleAllRowsSelected':
-            return {
-              ...newState,
-              selectedRowIds: {},
-            }
-
+            return { ...newState, selectedRowIds: {} }
           default:
             return newState
         }
@@ -122,11 +128,7 @@ export default function TableComponent({
       manualPagination: true,
       autoResetSelectedRows: false,
       pageCount: pagination?.totalCount ?? dataSource?.length,
-      getRowId: select?.enable
-        ? (row) => {
-            return row?.id
-          }
-        : undefined,
+      getRowId: select?.enable ? (row) => row?.id : undefined,
     },
     // useSortBy,
     usePagination,

package/src/components/TableComponent/RenderTableBody.tsx

@@ -46,7 +46,9 @@ export const RenderTableBody = ({
         prepareRow(row)
         return (
           <StyledTableRow
-            onClick={onRowClick && onRowClick}
+            onClick={() => {
+              if (onRowClick) onRowClick(row)
+            }}
             key={index}
             {...row.getRowProps()}
             isSelected={row?.isSelected}

package/src/components/TableComponent/Table.tsx

@@ -102,12 +102,9 @@ export default function Table({
                     }),
                   }}
                 >
-                  <>
-                    <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
-                      {' '}
-                      {col.title}
-                    </Box>
-                  </>
+                  <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
+                    {col.title}
+                  </Box>
                   {col.sort && (
                     <IconButton onClick={() => handleSortClick(col.dataIndex)}>
                       <ListItemIcon>

package/src/components/index.ts

@@ -14,10 +14,10 @@ import { Table as StyledTable } from './Table'
 import ErrorBoundary from './ErrorBoundary'
 import FullScreenLoader from './FullScreenLoader'
 import LoginForm from './LoginForm'
-import { SideMenuHeader } from './SideMenuHeader'
-import SideNav from './SideNav'
+import { SideMenuHeader } from './Layout/SideMenuHeader'
+import SideNav from './Layout/SideNav'
 import { ListItemButton } from './ListItemButton'
-import LayoutWrapper from './LayoutWrapper'
+import LayoutWrapper from './Layout/LayoutWrapper'
 import PageNotFound from './PageNotFound'
 import ChangePassword from './ChangePassword'
 import UploadButton from './UploadButton'

package/src/contexts/Providers.tsx

@@ -18,10 +18,12 @@ export default function Providers({ children }: { children: ReactNode }) {
   const [isInvalid, setIsInvalid] = useState(false)
 
   useEffect(() => {
-    if (!urlTenantKey && campxTenantKey) {
-      return window.location.replace(
-        window.location.origin + `/${campxTenantKey}`,
-      )
+    if (!urlTenantKey) {
+      if (campxTenantKey) {
+        return window.location.replace(
+          window.location.origin + `/${campxTenantKey}`,
+        )
+      }
     }
 
     if (!urlTenantKey) {

package/src/layouts/Components/styles.tsx

@@ -57,4 +57,18 @@ export const StyledMainContentContainer = muiStyled('main')(() => ({
   top: headerHeight,
   left: sideNavWidth,
   overflowY: 'auto',
+
+  '&::-webkit-scrollbar': {
+    width: '0.6em',
+    height: '0.6em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0,0,0, 0.3)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0,0,0, 0.4)',
+    },
+  },
 }))