@campxdev/shared 0.5.11 → 0.5.13

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/SideNav.tsx +56 -60
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "0.5.11",
3
+ "version": "0.5.13",
4
4
  "main": "./exports.ts",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
package/src/components/SideNav.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import {ChevronLeft} from '@mui/icons-material'
2
1
  import {
3
2
  Box,
4
3
  Collapse,
@@ -7,7 +6,8 @@ import {
7
6
  ListItemText,
8
7
  styled,
9
8
  } from '@mui/material'
10
- import {ReactNode, useState} from 'react'
9
+ import {Store} from 'pullstate'
10
+ import {memo, ReactNode} from 'react'
11
11
  import {Link, useMatch, useResolvedPath} from 'react-router-dom'
12
12
  import {PermissionsStore} from '../permissions'
13
13
  import {
@@ -15,19 +15,24 @@ import {
15
15
  StyledChevronIcon,
16
16
  StyledListItemButton,
17
17
  } from './ListItemButton'
18
- const accessIfNoKey = process.env.NODE_ENV === 'development' ? false : false
18
+
19
+ const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
20
+
21
+ const sideNavStore = new Store({
22
+ activeKey: '',
23
+ })
19
24
 
20
25
  const StyledLink = styled(Link)({
21
26
  textDecoration: 'none',
22
27
  })
23
28
 
24
- export default function SideNav({
29
+ const SideNav = ({
25
30
  menuItems,
26
31
  header,
27
32
  }: {
28
33
  menuItems: any[]
29
34
  header?: ReactNode
30
- }) {
35
+ }) => {
31
36
  return (
32
37
  <Box
33
38
  sx={{
@@ -44,92 +49,83 @@ export default function SideNav({
44
49
  )
45
50
  }
46
51
 
52
+ export default memo(SideNav)
53
+
47
54
  const RenderMenuItem = ({menuItem}) => {
48
- const {path, title, children, icon, permissionKey} = menuItem
55
+ const {path, children, title, icon, permissionKey} = menuItem
49
56
  let resolved = useResolvedPath(path)
50
57
  let match = useMatch({path: resolved.pathname, end: false})
51
58
 
52
59
  const permissions = PermissionsStore.useState((s) => s).permissions
53
60
  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
54
61
 
55
- if (!hasAccess && !children?.length) return null
56
62
  if (children?.length)
57
63
  return (
58
- <Box
59
- sx={{
60
- position: 'relative',
61
- }}
62
- >
64
+ <Box sx={{position: 'relative'}}>
63
65
  <DropDownMenu
64
66
  icon={icon}
65
67
  menuItems={children}
66
68
  path={path}
67
69
  title={title}
68
- permissionKey={permissionKey}
69
70
  />
70
71
  </Box>
71
72
  )
72
73
 
73
74
  return (
74
- <StyledLink to={path}>
75
- <ListItemButton
76
- hasChildren={false}
77
- label={title}
78
- isActive={!!match}
79
- icon={icon}
80
- />
81
- </StyledLink>
75
+ <>
76
+ {hasAccess ? (
77
+ <StyledLink to={path}>
78
+ <ListItemButton
79
+ hasChildren={false}
80
+ label={title}
81
+ isActive={!!match}
82
+ icon={icon}
83
+ />
84
+ </StyledLink>
85
+ ) : null}
86
+ </>
82
87
  )
83
88
  }
84
89
 
85
- const DropDownMenu = ({path, title, icon, menuItems, permissionKey}) => {
86
- const [open, setOpen] = useState(false)
90
+ const DropDownMenu = ({path, title, icon, menuItems}) => {
91
+ const {activeKey} = sideNavStore.useState((s) => s)
87
92
  const permissions = PermissionsStore.useState((s) => s).permissions
88
93
 
89
94
  const validateDropdownAccess = () => {
90
- if (accessIfNoKey && !permissions) return true
91
- let arr = []
92
-
93
- for (let i = 0; i < menuItems.length; i++) {
94
- if (permissions[menuItems[i].permissionKey]) {
95
- arr.push(true)
96
- } else {
97
- arr.push(accessIfNoKey)
98
- }
99
- }
95
+ if (process.env.NODE_ENV === 'development' && !permissions) return true
100
96
 
101
- return arr.includes(true)
97
+ return menuItems?.every((item) =>
98
+ item?.permissionKey ? permissions[item.permissionKey] : accessIfNoKey
99
+ )
102
100
  }
103
101
 
104
102
  if (!validateDropdownAccess()) return null
105
103
  return (
106
- <>
107
- <Box
108
- sx={{
109
- position: 'relative',
104
+ <Box sx={{position: 'relative'}}>
105
+ <MenuDropDownButton
106
+ isActive={activeKey === path}
107
+ onClick={() => {
108
+ sideNavStore.update((s) => {
109
+ s.activeKey = activeKey === path ? '' : path
110
+ })
110
111
  }}
111
- >
112
- <MenuDropDownButton
113
- isActive={open}
114
- onClick={() => setOpen((prev) => !prev)}
115
- label={title}
116
- icon={icon}
117
- />
118
- <Collapse in={open}>
119
- <List>
120
- {menuItems?.map((child) => (
121
- <RenderMenuItem
122
- key={child.path}
123
- menuItem={{
124
- ...child,
125
- path: path + child.path,
126
- }}
127
- />
128
- ))}
129
- </List>
130
- </Collapse>
131
- </Box>
132
- </>
112
+ label={title}
113
+ icon={icon}
114
+ />
115
+ <Collapse timeout={200} in={activeKey === path}>
116
+ <List>
117
+ {menuItems?.map((child) => (
118
+ <RenderMenuItem
119
+ key={child.path}
120
+ menuItem={{
121
+ ...child,
122
+ path: path + child.path,
123
+ }}
124
+ />
125
+ ))}
126
+ </List>
127
+ </Collapse>
128
+ </Box>
133
129
  )
134
130
  }
135
131