@campxdev/shared 0.5.12 → 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 +41 -48
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "0.5.12",
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,27 +6,33 @@ import {
7
6
  ListItemText,
8
7
  styled,
9
8
  } from '@mui/material'
10
- import {ReactNode, useEffect, useState} from 'react'
11
- import {Link, useLocation, useMatch, useResolvedPath} from 'react-router-dom'
9
+ import {Store} from 'pullstate'
10
+ import {memo, ReactNode} from 'react'
11
+ import {Link, useMatch, useResolvedPath} from 'react-router-dom'
12
12
  import {PermissionsStore} from '../permissions'
13
13
  import {
14
14
  ListItemButton,
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,8 +49,10 @@ 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
 
@@ -54,17 +61,12 @@ const RenderMenuItem = ({menuItem}) => {
54
61
 
55
62
  if (children?.length)
56
63
  return (
57
- <Box
58
- sx={{
59
- position: 'relative',
60
- }}
61
- >
64
+ <Box sx={{position: 'relative'}}>
62
65
  <DropDownMenu
63
66
  icon={icon}
64
67
  menuItems={children}
65
68
  path={path}
66
69
  title={title}
67
- permissionKey={permissionKey}
68
70
  />
69
71
  </Box>
70
72
  )
@@ -85,11 +87,8 @@ const RenderMenuItem = ({menuItem}) => {
85
87
  )
86
88
  }
87
89
 
88
- const DropDownMenu = ({path, title, icon, menuItems, permissionKey}) => {
89
- let resolved = useResolvedPath(path)
90
- let match = useMatch({path: resolved.pathname, end: false})
91
-
92
- const [open, setOpen] = useState(false)
90
+ const DropDownMenu = ({path, title, icon, menuItems}) => {
91
+ const {activeKey} = sideNavStore.useState((s) => s)
93
92
  const permissions = PermissionsStore.useState((s) => s).permissions
94
93
 
95
94
  const validateDropdownAccess = () => {
@@ -100,39 +99,33 @@ const DropDownMenu = ({path, title, icon, menuItems, permissionKey}) => {
100
99
  )
101
100
  }
102
101
 
103
- useEffect(() => {
104
- setOpen(!!match)
105
- }, [resolved])
106
-
107
102
  if (!validateDropdownAccess()) return null
108
103
  return (
109
- <>
110
- <Box
111
- sx={{
112
- 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
+ })
113
111
  }}
114
- >
115
- <MenuDropDownButton
116
- isActive={open}
117
- onClick={() => setOpen((prev) => !prev)}
118
- label={title}
119
- icon={icon}
120
- />
121
- <Collapse in={open}>
122
- <List>
123
- {menuItems?.map((child) => (
124
- <RenderMenuItem
125
- key={child.path}
126
- menuItem={{
127
- ...child,
128
- path: path + child.path,
129
- }}
130
- />
131
- ))}
132
- </List>
133
- </Collapse>
134
- </Box>
135
- </>
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>
136
129
  )
137
130
  }
138
131