@campxdev/react-blueprint 1.7.9 → 1.7.10

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Navigation/Sidebar/MenuBar.tsx +9 -124
  3. package/src/components/Navigation/Sidebar/Sidebar.tsx +125 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "1.7.9",
3
+ "version": "1.7.10",
4
4
  "main": "./export.ts",
5
5
  "dependencies": {
6
6
  "@emotion/react": "^11.13.3",
package/src/components/Navigation/Sidebar/MenuBar.tsx CHANGED
@@ -1,139 +1,24 @@
1
- import { useEffect, useMemo, useState } from 'react';
2
- import { Icons, SideMenuItemProps, Typography } from '../../export';
3
- import {
4
- GetActiveMenuProps,
5
- InternalMenuClickHandlerProps,
6
- MenuState,
7
- } from './interfaces';
1
+ import { useMemo } from 'react';
2
+ import { Icons, Typography } from '../../export';
3
+ import { MenuState } from './interfaces';
8
4
  import { SideBarMenuItem } from './MenuItem';
9
5
  import { createSidebarStyles } from './styles';
10
6
 
11
7
  export const MenuBar = ({
12
- menu,
8
+ currentMenuState,
13
9
  collapsed,
14
10
  setCollapsed,
15
11
  menuPosition,
16
- setMenuPosition,
12
+ previousMenuClickHandler,
13
+ internalMenuClickHandler,
17
14
  }: {
18
- menu: SideMenuItemProps[];
15
+ currentMenuState: MenuState;
19
16
  collapsed: boolean;
20
17
  setCollapsed: any;
18
+ internalMenuClickHandler: any;
19
+ previousMenuClickHandler: any;
21
20
  menuPosition: number;
22
- setMenuPosition: any;
23
21
  }) => {
24
- const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
25
- menu: menu,
26
- title: null,
27
- path: null,
28
- });
29
- const [history, setHistory] = useState<MenuState[]>([]);
30
-
31
- const internalMenuClickHandler = ({
32
- menuTitle,
33
- menuPath,
34
- internalMenu,
35
- }: InternalMenuClickHandlerProps) => {
36
- if (menuTitle && menuPath && internalMenu) {
37
- setHistory((prev) => [
38
- ...prev,
39
- {
40
- title: currentMenuState.title,
41
- path: currentMenuState.path,
42
- menu: currentMenuState.menu,
43
- },
44
- ]);
45
-
46
- setCurrentMenuState({
47
- title: menuTitle,
48
- path: menuPath,
49
- menu: internalMenu,
50
- });
51
-
52
- setMenuPosition(collapsed ? 60 : 250);
53
- }
54
- };
55
-
56
- const previousMenuClickHandler = () => {
57
- const prev = history && history.length > 0 && history.pop();
58
-
59
- if (prev && prev.menu) {
60
- setCollapsed(false);
61
- setCurrentMenuState({
62
- menu: prev.menu,
63
- title: prev.title,
64
- path: prev.path,
65
- });
66
- setHistory([...history]);
67
- setMenuPosition(collapsed ? -60 : -250);
68
- }
69
- };
70
-
71
- const getActiveMenu = ({
72
- menu,
73
- pathArray,
74
- previousMenuState,
75
- }: GetActiveMenuProps): MenuState => {
76
- setHistory((prevHistory) => [
77
- ...prevHistory,
78
- {
79
- title: previousMenuState?.title,
80
- path: previousMenuState?.path,
81
- menu: previousMenuState.menu,
82
- },
83
- ]);
84
-
85
- const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
86
-
87
- if (item) {
88
- if (!item.menu) {
89
- return previousMenuState;
90
- } else if (pathArray.length > 1) {
91
- return getActiveMenu({
92
- menu: item.menu,
93
- pathArray: pathArray.slice(1),
94
- previousMenuState: {
95
- title: item.name,
96
- path: previousMenuState.path
97
- ? previousMenuState.path + item.path
98
- : item.path,
99
- menu: item.menu,
100
- },
101
- });
102
- } else {
103
- return {
104
- title: item.name,
105
- path: previousMenuState.path
106
- ? previousMenuState.path + item.path
107
- : item.path,
108
- menu: item.menu,
109
- };
110
- }
111
- } else {
112
- return previousMenuState;
113
- }
114
- };
115
-
116
- useEffect(() => {
117
- const currentPathArray = window.location.pathname.split('/');
118
-
119
- if (currentPathArray.length > 2) {
120
- currentPathArray.splice(0, 2);
121
- currentPathArray.pop();
122
- }
123
-
124
- const activeMenu = getActiveMenu({
125
- menu: currentMenuState.menu,
126
- pathArray: currentPathArray,
127
- previousMenuState: currentMenuState,
128
- });
129
-
130
- setCurrentMenuState({
131
- title: activeMenu?.title,
132
- path: activeMenu.path,
133
- menu: activeMenu?.menu,
134
- });
135
- }, []);
136
-
137
22
  const { StyledMenuBar, StyledMenuHeaderButton } = useMemo(
138
23
  () => createSidebarStyles(collapsed),
139
24
  [collapsed, menuPosition],
package/src/components/Navigation/Sidebar/Sidebar.tsx CHANGED
@@ -7,12 +7,17 @@ import {
7
7
  useTheme,
8
8
  } from '@mui/material';
9
9
  import { motion } from 'framer-motion';
10
- import { ReactElement, useMemo, useState } from 'react';
10
+ import { ReactElement, useEffect, useMemo, useState } from 'react';
11
11
  import { CampxFullLogoIcon } from '../../Assets/Icons/IconComponents/CampxFullLogoIcon';
12
12
  import { CampxIcon } from '../../Assets/Icons/IconComponents/CampxIcon';
13
13
  import { HamburgerMenuIcon } from '../../Assets/Icons/IconComponents/HamburgerMenuIcon';
14
14
  import { RightIcon } from '../../Assets/Icons/IconComponents/RightIcon';
15
15
  import { CollapseMenuButton } from './Components';
16
+ import {
17
+ GetActiveMenuProps,
18
+ InternalMenuClickHandlerProps,
19
+ MenuState,
20
+ } from './interfaces';
16
21
  import { MenuBar } from './MenuBar';
17
22
  import { createSidebarStyles } from './styles';
18
23
 
@@ -30,6 +35,13 @@ export const Sidebar = ({
30
35
 
31
36
  const [menuPosition, setMenuPosition] = useState(0);
32
37
 
38
+ const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
39
+ menu: menu,
40
+ title: null,
41
+ path: null,
42
+ });
43
+ const [history, setHistory] = useState<MenuState[]>([]);
44
+
33
45
  const toggleSidebar = () => {
34
46
  setMenuPosition(0);
35
47
  setCollapsed(!collapsed);
@@ -41,6 +53,112 @@ export const Sidebar = ({
41
53
  setCollapsed(!collapsed);
42
54
  };
43
55
 
56
+ const internalMenuClickHandler = ({
57
+ menuTitle,
58
+ menuPath,
59
+ internalMenu,
60
+ }: InternalMenuClickHandlerProps) => {
61
+ if (menuTitle && menuPath && internalMenu) {
62
+ setHistory((prev) => [
63
+ ...prev,
64
+ {
65
+ title: currentMenuState.title,
66
+ path: currentMenuState.path,
67
+ menu: currentMenuState.menu,
68
+ },
69
+ ]);
70
+
71
+ setCurrentMenuState({
72
+ title: menuTitle,
73
+ path: menuPath,
74
+ menu: internalMenu,
75
+ });
76
+
77
+ setMenuPosition(collapsed ? 60 : 250);
78
+ }
79
+ };
80
+
81
+ const previousMenuClickHandler = () => {
82
+ const prev = history && history.length > 0 && history.pop();
83
+
84
+ if (prev && prev.menu) {
85
+ setCollapsed(false);
86
+ setCurrentMenuState({
87
+ menu: prev.menu,
88
+ title: prev.title,
89
+ path: prev.path,
90
+ });
91
+ setHistory([...history]);
92
+ setMenuPosition(collapsed ? -60 : -250);
93
+ }
94
+ };
95
+
96
+ const getActiveMenu = ({
97
+ menu,
98
+ pathArray,
99
+ previousMenuState,
100
+ }: GetActiveMenuProps): MenuState => {
101
+ setHistory((prevHistory) => [
102
+ ...prevHistory,
103
+ {
104
+ title: previousMenuState?.title,
105
+ path: previousMenuState?.path,
106
+ menu: previousMenuState.menu,
107
+ },
108
+ ]);
109
+
110
+ const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
111
+
112
+ if (item) {
113
+ if (!item.menu) {
114
+ return previousMenuState;
115
+ } else if (pathArray.length > 1) {
116
+ return getActiveMenu({
117
+ menu: item.menu,
118
+ pathArray: pathArray.slice(1),
119
+ previousMenuState: {
120
+ title: item.name,
121
+ path: previousMenuState.path
122
+ ? previousMenuState.path + item.path
123
+ : item.path,
124
+ menu: item.menu,
125
+ },
126
+ });
127
+ } else {
128
+ return {
129
+ title: item.name,
130
+ path: previousMenuState.path
131
+ ? previousMenuState.path + item.path
132
+ : item.path,
133
+ menu: item.menu,
134
+ };
135
+ }
136
+ } else {
137
+ return previousMenuState;
138
+ }
139
+ };
140
+
141
+ useEffect(() => {
142
+ const currentPathArray = window.location.pathname.split('/');
143
+
144
+ if (currentPathArray.length > 2) {
145
+ currentPathArray.splice(0, 2);
146
+ currentPathArray.pop();
147
+ }
148
+
149
+ const activeMenu = getActiveMenu({
150
+ menu: currentMenuState.menu,
151
+ pathArray: currentPathArray,
152
+ previousMenuState: currentMenuState,
153
+ });
154
+
155
+ setCurrentMenuState({
156
+ title: activeMenu?.title,
157
+ path: activeMenu.path,
158
+ menu: activeMenu?.menu,
159
+ });
160
+ }, []);
161
+
44
162
  const { StyledSidebarContainer, StyledLogoArea, StyledCollapsibleSection } =
45
163
  useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
46
164
 
@@ -91,11 +209,12 @@ export const Sidebar = ({
91
209
  }}
92
210
  >
93
211
  <MenuBar
94
- menu={menu}
212
+ currentMenuState={currentMenuState}
95
213
  collapsed={collapsed}
96
214
  setCollapsed={setCollapsed}
97
215
  menuPosition={menuPosition}
98
- setMenuPosition={setMenuPosition}
216
+ internalMenuClickHandler={internalMenuClickHandler}
217
+ previousMenuClickHandler={previousMenuClickHandler}
99
218
  />
100
219
  </Drawer>
101
220
  </Stack>
@@ -113,11 +232,12 @@ export const Sidebar = ({
113
232
  }}
114
233
  >
115
234
  <MenuBar
116
- menu={menu}
235
+ currentMenuState={currentMenuState}
117
236
  collapsed={collapsed}
118
237
  setCollapsed={setCollapsed}
119
238
  menuPosition={menuPosition}
120
- setMenuPosition={setMenuPosition}
239
+ internalMenuClickHandler={internalMenuClickHandler}
240
+ previousMenuClickHandler={previousMenuClickHandler}
121
241
  />
122
242
  </motion.div>
123
243
  <StyledCollapsibleSection