pcm-shared-components 0.0.83 → 0.0.86
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.
- package/dist/components/Dialogs/GenericAppBar/components/GenericAppBarSubMenu.js +83 -0
- package/dist/components/Dialogs/GenericAppBar/index.js +322 -0
- package/dist/components/Dialogs/GenericDialogWindow/index.js +101 -47
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { Tooltip, IconButton, MenuItem, Menu } from "@mui/material";
|
|
3
|
+
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
4
|
+
|
|
5
|
+
const GenericAppBarSubMenu = ({
|
|
6
|
+
menu,
|
|
7
|
+
classes,
|
|
8
|
+
full_menu = false,
|
|
9
|
+
handleParentMenuClose = undefined
|
|
10
|
+
}) => {
|
|
11
|
+
const [anchorSubMenu, setAnchorSubMenu] = useState(false);
|
|
12
|
+
const [isSubMenuOpen, setSubMenuOpen] = useState(false);
|
|
13
|
+
|
|
14
|
+
const openSubMenu = event => {
|
|
15
|
+
setAnchorSubMenu(event.currentTarget);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const handleSubMenuClose = () => {
|
|
19
|
+
setAnchorSubMenu(false); //Closes the previous parent menu too..
|
|
20
|
+
|
|
21
|
+
if (handleParentMenuClose) {
|
|
22
|
+
handleParentMenuClose();
|
|
23
|
+
} // handleMobileMenuClose();
|
|
24
|
+
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
setSubMenuOpen(Boolean(anchorSubMenu));
|
|
29
|
+
}, [anchorSubMenu]);
|
|
30
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
key: `main_sub_menu_items_${menu.icon}`,
|
|
32
|
+
className: !full_menu ? "flex flex-row" : 'flex flex-col w-full'
|
|
33
|
+
}, full_menu ? /*#__PURE__*/React.createElement(MenuItem, {
|
|
34
|
+
onClick: openSubMenu
|
|
35
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
36
|
+
color: "inherit"
|
|
37
|
+
}, menu.icon), /*#__PURE__*/React.createElement("p", null, menu.name), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: "flex flex-col mx-2 my-auto"
|
|
39
|
+
}, /*#__PURE__*/React.createElement(ChevronRightIcon, {
|
|
40
|
+
className: "text-gray-500 hover:text-gray-700"
|
|
41
|
+
}))) : /*#__PURE__*/React.createElement(Tooltip, {
|
|
42
|
+
title: menu.name
|
|
43
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
44
|
+
className: classes.menuButton,
|
|
45
|
+
color: "inherit",
|
|
46
|
+
"aria-owns": "menu-appbar",
|
|
47
|
+
onClick: openSubMenu
|
|
48
|
+
}, menu.icon)), /*#__PURE__*/React.createElement(Menu, {
|
|
49
|
+
className: "",
|
|
50
|
+
style: {
|
|
51
|
+
display: anchorSubMenu ? 'block' : 'none'
|
|
52
|
+
} //Makes the disappearing menu smoother so I don't see it being jarred in a corner.
|
|
53
|
+
,
|
|
54
|
+
anchorEl: anchorSubMenu,
|
|
55
|
+
anchorOrigin: {
|
|
56
|
+
vertical: 'bottom',
|
|
57
|
+
horizontal: 'right'
|
|
58
|
+
},
|
|
59
|
+
transformOrigin: {
|
|
60
|
+
vertical: 'top',
|
|
61
|
+
horizontal: 'right'
|
|
62
|
+
},
|
|
63
|
+
open: isSubMenuOpen,
|
|
64
|
+
onClose: handleSubMenuClose,
|
|
65
|
+
onClick: menu.onClick
|
|
66
|
+
}, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, sub_menu.subMenu ? /*#__PURE__*/React.createElement(GenericAppBarSubMenu, {
|
|
67
|
+
key: `common_grid_app_bar_sub_desktop_sub_${idx}`,
|
|
68
|
+
menu: sub_menu,
|
|
69
|
+
classes: classes,
|
|
70
|
+
full_menu: true,
|
|
71
|
+
handleParentMenuClose: handleSubMenuClose
|
|
72
|
+
}) : /*#__PURE__*/React.createElement(MenuItem, {
|
|
73
|
+
key: `sub_menu_items__${idx}}`,
|
|
74
|
+
onClick: () => {
|
|
75
|
+
handleSubMenuClose();
|
|
76
|
+
sub_menu.onClick();
|
|
77
|
+
}
|
|
78
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
79
|
+
color: "inherit"
|
|
80
|
+
}, sub_menu.icon), /*#__PURE__*/React.createElement("p", null, sub_menu.name))))));
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export default GenericAppBarSubMenu;
|
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
import React, { Fragment, useState, useEffect } from "react";
|
|
2
|
+
import { Typography, Button, Tooltip, IconButton, Toolbar, MenuItem, Menu, AppBar, Badge } from "@mui/material";
|
|
3
|
+
import { makeStyles } from '@mui/styles';
|
|
4
|
+
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
5
|
+
import { ThemeProvider } from '@mui/system';
|
|
6
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
7
|
+
import MoreIcon from "@mui/icons-material/MoreVert";
|
|
8
|
+
import GenericAppBarSubMenu from './components/GenericAppBarSubMenu';
|
|
9
|
+
import PropTypes from "prop-types";
|
|
10
|
+
/**
|
|
11
|
+
* Generic App Bar component used to create dynamic top bar with dynamic menus.
|
|
12
|
+
*
|
|
13
|
+
*
|
|
14
|
+
* ## Importing the component
|
|
15
|
+
|
|
16
|
+
```//PitchCamp shared component
|
|
17
|
+
import {GenericAppBar} from 'pcm-shared-components';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Component Props
|
|
21
|
+
|
|
22
|
+
* Expects only one parameters: **appBarMenu**
|
|
23
|
+
*
|
|
24
|
+
Has three main part to it:
|
|
25
|
+
*
|
|
26
|
+
* - **appBarTitle**: ```String``` controls title
|
|
27
|
+
* - **closeMenu**: ```Object``` controls the back button
|
|
28
|
+
* - onClick: ```Callback```
|
|
29
|
+
* - name: ```String```
|
|
30
|
+
* - **mainMenu**: Array controls the main menu items
|
|
31
|
+
* - id: ```string``` uniquely identifies the menu so it can be manipulated by other processes
|
|
32
|
+
* - onClick: ```Callback```
|
|
33
|
+
* - icon: ```Icon```
|
|
34
|
+
* - name: ```String```
|
|
35
|
+
* - isButton: ```Bool``` controls if the menu is displayed as a Button or and IconButton default is IconButton
|
|
36
|
+
* - hideMenu: ```Bool``` controls if the menu item is displayed or not
|
|
37
|
+
* - subMenu: ```Array``` of menus, same structure as the ```mainMenu```
|
|
38
|
+
*
|
|
39
|
+
``` js
|
|
40
|
+
{
|
|
41
|
+
appBarTitle: '',
|
|
42
|
+
|
|
43
|
+
closeMenu:{
|
|
44
|
+
onClick : callback,
|
|
45
|
+
name: 'Any tooltip'
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
mainMenu: [
|
|
49
|
+
{
|
|
50
|
+
onClick: callback,
|
|
51
|
+
icon: <Icon/>,
|
|
52
|
+
name: 'Menu Name',
|
|
53
|
+
isButton: true,
|
|
54
|
+
hideMenu: false,
|
|
55
|
+
subMenu:[
|
|
56
|
+
{
|
|
57
|
+
onClick: callback,
|
|
58
|
+
icon: <Icon />,
|
|
59
|
+
name: 'Sub Menu Name',
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
...
|
|
63
|
+
},
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
...
|
|
68
|
+
},
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
*
|
|
74
|
+
*/
|
|
75
|
+
|
|
76
|
+
export const GenericAppBar = props => {
|
|
77
|
+
const {
|
|
78
|
+
appBarMenu,
|
|
79
|
+
theme
|
|
80
|
+
} = props;
|
|
81
|
+
const compTheme = theme ? theme : useTheme();
|
|
82
|
+
const defaultTheme = createTheme(compTheme);
|
|
83
|
+
const useStyles = makeStyles(() => ({
|
|
84
|
+
root: {
|
|
85
|
+
flexGrow: 1
|
|
86
|
+
},
|
|
87
|
+
menuButton: {
|
|
88
|
+
marginLeft: -18,
|
|
89
|
+
fontSize: 20
|
|
90
|
+
},
|
|
91
|
+
appContextMenu: {
|
|
92
|
+
background: "#58524c"
|
|
93
|
+
},
|
|
94
|
+
grow: {
|
|
95
|
+
flexGrow: 1
|
|
96
|
+
},
|
|
97
|
+
divider: {
|
|
98
|
+
borderLeft: "0.1em solid #aeaeae",
|
|
99
|
+
padding: "0.5em",
|
|
100
|
+
margin: "10px 10px 10px 10px",
|
|
101
|
+
height: 30
|
|
102
|
+
},
|
|
103
|
+
mobile_divider: {
|
|
104
|
+
borderBottom: "0.1em solid #aeaeae",
|
|
105
|
+
width: "100%"
|
|
106
|
+
},
|
|
107
|
+
sectionDesktop: {
|
|
108
|
+
display: "none",
|
|
109
|
+
[compTheme.breakpoints.up("md")]: {
|
|
110
|
+
display: "flex"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
sectionMobile: {
|
|
114
|
+
display: "flex",
|
|
115
|
+
[compTheme.breakpoints.up("md")]: {
|
|
116
|
+
display: "none"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}));
|
|
120
|
+
const classes = useStyles(); //---------------------------------------------------
|
|
121
|
+
// Hooks
|
|
122
|
+
//---------------------------------------------------
|
|
123
|
+
|
|
124
|
+
const [mobileMoreAnchorEl, setmobileMoreAnchorEl] = useState(null); //---------------------------------------------------
|
|
125
|
+
// Use Effect
|
|
126
|
+
//---------------------------------------------------
|
|
127
|
+
//---------------------------------------------------
|
|
128
|
+
// Local Functions
|
|
129
|
+
//---------------------------------------------------
|
|
130
|
+
|
|
131
|
+
const handleMobileMenuOpen = event => {
|
|
132
|
+
setmobileMoreAnchorEl(event.currentTarget);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
const handleMobileMenuClose = () => {
|
|
136
|
+
setmobileMoreAnchorEl(null);
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const handleMenuClose = () => {
|
|
140
|
+
handleMobileMenuClose();
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const menu_divider = /*#__PURE__*/React.createElement(Typography, {
|
|
144
|
+
className: classes.divider
|
|
145
|
+
});
|
|
146
|
+
const mobile_menu_divider = /*#__PURE__*/React.createElement(Typography, {
|
|
147
|
+
className: classes.mobile_divider
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const CloseContext = props => {
|
|
151
|
+
const {
|
|
152
|
+
onClick,
|
|
153
|
+
name
|
|
154
|
+
} = props;
|
|
155
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
156
|
+
title: name
|
|
157
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
158
|
+
onClick: onClick,
|
|
159
|
+
className: classes.menuButton,
|
|
160
|
+
color: "inherit",
|
|
161
|
+
"aria-label": "Menu"
|
|
162
|
+
}, /*#__PURE__*/React.createElement(ArrowBackIcon, null)));
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
const TitleContext = () => /*#__PURE__*/React.createElement(Typography, {
|
|
166
|
+
variant: "h6",
|
|
167
|
+
color: "inherit"
|
|
168
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
169
|
+
className: "flex flex-row"
|
|
170
|
+
}, appBarMenu.appBarTitle)); //? ------------------------------------------------
|
|
171
|
+
//! Menu Items
|
|
172
|
+
//? ------------------------------------------------
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
const MobileItemMenu = ({
|
|
176
|
+
menu,
|
|
177
|
+
idx
|
|
178
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
179
|
+
key: 'main_menu_bar_items'
|
|
180
|
+
}, menu.subMenu && menu.subMenu.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
181
|
+
key: `menu_bar__${menu.icon}`
|
|
182
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
183
|
+
className: "flex flex-row",
|
|
184
|
+
key: `main_sub_items_${new Date()}`
|
|
185
|
+
}, /*#__PURE__*/React.createElement(GenericAppBarSubMenu, {
|
|
186
|
+
menu: menu,
|
|
187
|
+
classes: classes,
|
|
188
|
+
full_menu: true
|
|
189
|
+
}), menu.display_divider ? mobile_menu_divider : undefined)) : /*#__PURE__*/React.createElement("div", {
|
|
190
|
+
key: `main_menu_item_${idx}`
|
|
191
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
192
|
+
className: "w-full",
|
|
193
|
+
key: `main_sub_items_${new Date()}`
|
|
194
|
+
}, /*#__PURE__*/React.createElement(MenuItem, {
|
|
195
|
+
key: `mobile_menu_item_${idx}`,
|
|
196
|
+
className: "flex flex-row",
|
|
197
|
+
onClick: () => {
|
|
198
|
+
menu.onClick();
|
|
199
|
+
handleMobileMenuClose();
|
|
200
|
+
}
|
|
201
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
202
|
+
color: "inherit"
|
|
203
|
+
}, menu.icon), /*#__PURE__*/React.createElement("p", null, menu.name)), menu.display_divider ? mobile_menu_divider : undefined)));
|
|
204
|
+
|
|
205
|
+
const DesktopItemMenu = ({
|
|
206
|
+
menu,
|
|
207
|
+
idx
|
|
208
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
209
|
+
key: `main_menu_bar_items__${idx}`
|
|
210
|
+
}, menu.subMenu && menu.subMenu.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
211
|
+
className: "flex flex-row",
|
|
212
|
+
key: `main_sub_items_${new Date()}`
|
|
213
|
+
}, /*#__PURE__*/React.createElement(GenericAppBarSubMenu, {
|
|
214
|
+
key: `common_grid_app_bar_sub_desktop_${idx}`,
|
|
215
|
+
menu: menu,
|
|
216
|
+
classes: classes
|
|
217
|
+
}), menu.display_divider ? menu_divider : /*#__PURE__*/React.createElement("div", {
|
|
218
|
+
className: "mr-12"
|
|
219
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
|
220
|
+
key: `main_menu_item_${idx}`
|
|
221
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
222
|
+
className: "flex flex-row",
|
|
223
|
+
key: `main_sub_items_${new Date()}`
|
|
224
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
225
|
+
title: menu.name
|
|
226
|
+
}, menu.isButton ? /*#__PURE__*/React.createElement(Button // className={classes.menuButton}
|
|
227
|
+
, {
|
|
228
|
+
startIcon: menu.icon,
|
|
229
|
+
color: "inherit",
|
|
230
|
+
"aria-owns": "menu-appbar",
|
|
231
|
+
onClick: () => {
|
|
232
|
+
menu.onClick();
|
|
233
|
+
}
|
|
234
|
+
}, menu.name) : /*#__PURE__*/React.createElement(IconButton, {
|
|
235
|
+
className: classes.menuButton,
|
|
236
|
+
color: "inherit",
|
|
237
|
+
"aria-owns": "menu-appbar",
|
|
238
|
+
onClick: () => {
|
|
239
|
+
menu.onClick();
|
|
240
|
+
}
|
|
241
|
+
}, menu.icon)), menu.display_divider ? menu_divider : /*#__PURE__*/React.createElement("div", {
|
|
242
|
+
className: "mr-12"
|
|
243
|
+
})))); //? ------------------------------------------------
|
|
244
|
+
//! Mobile menu
|
|
245
|
+
//? ------------------------------------------------
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
const renderMobileMenu = /*#__PURE__*/React.createElement(Menu, {
|
|
249
|
+
anchorEl: mobileMoreAnchorEl,
|
|
250
|
+
anchorOrigin: {
|
|
251
|
+
vertical: "top",
|
|
252
|
+
horizontal: "right"
|
|
253
|
+
},
|
|
254
|
+
transformOrigin: {
|
|
255
|
+
vertical: "top",
|
|
256
|
+
horizontal: "right"
|
|
257
|
+
},
|
|
258
|
+
open: Boolean(mobileMoreAnchorEl),
|
|
259
|
+
onClose: () => handleMenuClose()
|
|
260
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
261
|
+
className: classes.root
|
|
262
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
263
|
+
className: "flex flex-col"
|
|
264
|
+
}, mobile_menu_divider, (appBarMenu.mainMenu || []).map((menu, idx) => /*#__PURE__*/React.createElement(MobileItemMenu, {
|
|
265
|
+
key: `mobile_item_menu_${idx}`,
|
|
266
|
+
menu: menu,
|
|
267
|
+
idx: idx
|
|
268
|
+
})), /*#__PURE__*/React.createElement("div", null, mobile_menu_divider)))); //? ------------------------------------------------
|
|
269
|
+
//! Main Menu Items
|
|
270
|
+
//? ------------------------------------------------
|
|
271
|
+
|
|
272
|
+
const MainItems = () => {
|
|
273
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
274
|
+
className: "flex flex-row",
|
|
275
|
+
key: `main_items_${new Date()}`
|
|
276
|
+
}, (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((menu, idx) => /*#__PURE__*/React.createElement(DesktopItemMenu, {
|
|
277
|
+
key: `desktop_item_menu_${idx}`,
|
|
278
|
+
menu: menu,
|
|
279
|
+
idx: idx
|
|
280
|
+
})));
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
const MainItemMenu = () => /*#__PURE__*/React.createElement("div", {
|
|
284
|
+
className: "flex flex-row"
|
|
285
|
+
}, /*#__PURE__*/React.createElement(MainItems, {
|
|
286
|
+
key: "main_item_id"
|
|
287
|
+
}));
|
|
288
|
+
|
|
289
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
290
|
+
theme: defaultTheme
|
|
291
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
292
|
+
className: classes.root
|
|
293
|
+
}, /*#__PURE__*/React.createElement(AppBar, {
|
|
294
|
+
position: "static"
|
|
295
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
296
|
+
variant: "dense"
|
|
297
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CloseContext, appBarMenu.closeMenu)), /*#__PURE__*/React.createElement(TitleContext, null), /*#__PURE__*/React.createElement("div", {
|
|
298
|
+
className: classes.grow
|
|
299
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
300
|
+
className: classes.sectionDesktop
|
|
301
|
+
}, /*#__PURE__*/React.createElement(MainItemMenu, null)), /*#__PURE__*/React.createElement("div", {
|
|
302
|
+
className: classes.sectionMobile
|
|
303
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
304
|
+
"aria-haspopup": "true",
|
|
305
|
+
onClick: event => handleMobileMenuOpen(event),
|
|
306
|
+
color: "inherit"
|
|
307
|
+
}, /*#__PURE__*/React.createElement(MoreIcon, null)))))), renderMobileMenu));
|
|
308
|
+
};
|
|
309
|
+
export default GenericAppBar; // Specifies the default values for the props:
|
|
310
|
+
|
|
311
|
+
GenericAppBar.defaultProps = {
|
|
312
|
+
appBarMenu: {},
|
|
313
|
+
theme: undefined
|
|
314
|
+
}; //Define the types associated with the prop types
|
|
315
|
+
|
|
316
|
+
GenericAppBar.propTypes = {
|
|
317
|
+
/** The menu structure used to control the menu: */
|
|
318
|
+
appBarMenu: PropTypes.object.isRequired,
|
|
319
|
+
|
|
320
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
321
|
+
theme: PropTypes.object
|
|
322
|
+
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React, { useState, useRef } from 'react';
|
|
1
|
+
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
2
2
|
import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, Toolbar, AppBar } from '@mui/material';
|
|
3
3
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
4
4
|
import { ThemeProvider } from '@mui/system';
|
|
5
5
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
6
6
|
import LoadingBackdrop from '../../Loaders/LoadingBackdrop';
|
|
7
7
|
import PerfectScrollbar from '../../Tools/PCMScrollbar';
|
|
8
|
+
import GenericAppBar from '../GenericAppBar';
|
|
8
9
|
import PropTypes from 'prop-types';
|
|
9
10
|
let debounce;
|
|
10
11
|
export const GenericDialogWindow = props => {
|
|
@@ -12,13 +13,9 @@ export const GenericDialogWindow = props => {
|
|
|
12
13
|
open,
|
|
13
14
|
component,
|
|
14
15
|
data,
|
|
15
|
-
onClose,
|
|
16
16
|
showSaveButton = false,
|
|
17
17
|
dialogSize = 'false',
|
|
18
|
-
|
|
19
|
-
saveButtonLabel: 'save',
|
|
20
|
-
backButtonLabel: 'back'
|
|
21
|
-
},
|
|
18
|
+
appBarMenu = undefined,
|
|
22
19
|
theme
|
|
23
20
|
} = props;
|
|
24
21
|
const compTheme = theme ? theme : useTheme();
|
|
@@ -28,7 +25,9 @@ export const GenericDialogWindow = props => {
|
|
|
28
25
|
|
|
29
26
|
const [can_save, setCanSave] = useState(false);
|
|
30
27
|
const [is_loading, setIsLoading] = useState(false);
|
|
31
|
-
const [
|
|
28
|
+
const [managedAppBarMenu, setManagedAppBarMenu] = useState(undefined);
|
|
29
|
+
const [save_button_label, setSaveButtonLabel] = useState(undefined);
|
|
30
|
+
const [onClickOverride, setOnClickOverride] = useState([]);
|
|
32
31
|
const childRef = useRef();
|
|
33
32
|
|
|
34
33
|
const onSave = () => {
|
|
@@ -40,14 +39,96 @@ export const GenericDialogWindow = props => {
|
|
|
40
39
|
};
|
|
41
40
|
|
|
42
41
|
const closeDialog = () => {
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
//returns the onClick function assigned to the appBarMenu.closeMenu.onClick
|
|
43
|
+
try {
|
|
44
|
+
appBarMenu.closeMenu.onClick();
|
|
45
|
+
} catch (error) {
|
|
46
|
+
console.error('Error no onClose function found in the appBarMenu.closeMenu, Please ensure the dialog has a valid closeMenu with a close function assigned to the onClick', error);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const getSaveButtonLabel = () => {
|
|
51
|
+
let return_value = 'Save'; //returns the save label for the save button in the bottom right of the dialog.
|
|
52
|
+
// The save label is taken from the mainMenu name item having an id='save'
|
|
53
|
+
|
|
54
|
+
try {
|
|
55
|
+
const save_menu = appBarMenu.mainMenu.find(mm => mm.id === 'save');
|
|
56
|
+
|
|
57
|
+
if (save_menu && save_menu.name) {
|
|
58
|
+
return_value = save_menu.name;
|
|
59
|
+
}
|
|
60
|
+
} catch (error) {}
|
|
61
|
+
|
|
62
|
+
return return_value;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const setMenuOnClickCallback = useCallback((id, onClick) => {
|
|
66
|
+
//Used to set the onClick callback on a specific menu matching the id provided.
|
|
67
|
+
//Example: Used by the children component to set the onClick of a menu.
|
|
68
|
+
// A menu must have a unique id object matching the id on which we are searching for and a callback function must be provided
|
|
69
|
+
if (!onClickOverride.find(oco => oco.id.toLowerCase() === id.toLowerCase())) {
|
|
70
|
+
//Nice this override doesn't exist. Add it
|
|
71
|
+
setOnClickOverride(previousState => {
|
|
72
|
+
return [...previousState, {
|
|
73
|
+
id: id,
|
|
74
|
+
onClick: onClick
|
|
75
|
+
}];
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
}, []);
|
|
79
|
+
|
|
80
|
+
const setOverrides = () => {
|
|
81
|
+
try {
|
|
82
|
+
//Loop over all our on click overrides and apply the onClick callback for each id found in the onClickOverride state
|
|
83
|
+
onClickOverride.forEach(item => {
|
|
84
|
+
setManagedAppBarMenu(previousState => {
|
|
85
|
+
return { ...previousState,
|
|
86
|
+
mainMenu: [...previousState.mainMenu.map(mm => {
|
|
87
|
+
if (mm.id.toLowerCase() === item.id.toLowerCase()) {
|
|
88
|
+
return { ...mm,
|
|
89
|
+
onClick: item.onClick
|
|
90
|
+
};
|
|
91
|
+
} else {
|
|
92
|
+
return mm;
|
|
93
|
+
}
|
|
94
|
+
})]
|
|
95
|
+
};
|
|
96
|
+
});
|
|
97
|
+
});
|
|
98
|
+
} catch (error) {
|
|
99
|
+
console.error('Error in setMenuOnClickCallback: ', error);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
//Wait for the state to be updated then loop over the overrides to ensure they are properly applied
|
|
105
|
+
setOverrides();
|
|
106
|
+
}, [onClickOverride]);
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
if (appBarMenu && appBarMenu.mainMenu) {
|
|
109
|
+
// If we have a mainMenu item with the id='save' then override the onClick event to use the onSave function which reaches into the child ref
|
|
110
|
+
setManagedAppBarMenu({ ...appBarMenu,
|
|
111
|
+
mainMenu: [...appBarMenu.mainMenu.map(mm => {
|
|
112
|
+
if (mm.id === 'save') {
|
|
113
|
+
return { ...mm,
|
|
114
|
+
onClick: onSave,
|
|
115
|
+
name: save_button_label ? save_button_label : mm.name,
|
|
116
|
+
hideMenu: !(can_save && showSaveButton)
|
|
117
|
+
};
|
|
118
|
+
} else {
|
|
119
|
+
return mm;
|
|
120
|
+
}
|
|
121
|
+
})]
|
|
122
|
+
}); //Need to re-apply any onClick override to ensure they are still properly set by what was overridden from the child component.
|
|
123
|
+
|
|
124
|
+
setOverrides();
|
|
125
|
+
}
|
|
126
|
+
}, [appBarMenu, can_save, showSaveButton, save_button_label]); // -----------------------------------------
|
|
45
127
|
// Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.
|
|
46
128
|
// I think this error comes only after a state has changed when multiple dialog windows are open they are fighting for focus.
|
|
47
129
|
// Bug: https://github.com/mui/material-ui/issues/8741
|
|
48
130
|
// -----------------------------------------
|
|
49
131
|
|
|
50
|
-
|
|
51
132
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
52
133
|
theme: defaultTheme
|
|
53
134
|
}, /*#__PURE__*/React.createElement(Dialog, {
|
|
@@ -58,31 +139,10 @@ export const GenericDialogWindow = props => {
|
|
|
58
139
|
maxWidth: dialogSize,
|
|
59
140
|
fullScreen: dialogSize ? false : true,
|
|
60
141
|
className: ""
|
|
61
|
-
}, /*#__PURE__*/React.createElement(
|
|
62
|
-
|
|
63
|
-
}, /*#__PURE__*/React.createElement(
|
|
64
|
-
|
|
65
|
-
style: {
|
|
66
|
-
display: 'grid'
|
|
67
|
-
}
|
|
68
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
69
|
-
className: "flex flex-row justify-between "
|
|
70
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: "flex flex-row justify-start"
|
|
72
|
-
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
73
|
-
edge: "start",
|
|
74
|
-
color: "inherit",
|
|
75
|
-
onClick: closeDialog,
|
|
76
|
-
"aria-label": "close"
|
|
77
|
-
}, /*#__PURE__*/React.createElement(ArrowBackIcon, null)), /*#__PURE__*/React.createElement(Typography, {
|
|
78
|
-
className: "my-auto",
|
|
79
|
-
variant: "h5",
|
|
80
|
-
color: "inherit"
|
|
81
|
-
}, i18nextStrings.backButton)), can_save && showSaveButton && /*#__PURE__*/React.createElement(Button, {
|
|
82
|
-
color: "inherit",
|
|
83
|
-
onClick: onSave
|
|
84
|
-
}, save_button_label)))), /*#__PURE__*/React.createElement(DialogContent, {
|
|
85
|
-
className: "pt-4 pl-0 pr-0 "
|
|
142
|
+
}, /*#__PURE__*/React.createElement(GenericAppBar, {
|
|
143
|
+
appBarMenu: managedAppBarMenu
|
|
144
|
+
}), /*#__PURE__*/React.createElement(DialogContent, {
|
|
145
|
+
className: "pt-4 pl-0 pr-0 h-full w-full"
|
|
86
146
|
}, /*#__PURE__*/React.createElement(PerfectScrollbar, {
|
|
87
147
|
className: "",
|
|
88
148
|
enable: true
|
|
@@ -94,7 +154,8 @@ export const GenericDialogWindow = props => {
|
|
|
94
154
|
setIsLoading,
|
|
95
155
|
setSaveButtonLabel,
|
|
96
156
|
closeDialog,
|
|
97
|
-
data: data
|
|
157
|
+
data: data,
|
|
158
|
+
setMenuOnClickCallback
|
|
98
159
|
},
|
|
99
160
|
ref: childRef
|
|
100
161
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(DialogActions, {
|
|
@@ -104,7 +165,7 @@ export const GenericDialogWindow = props => {
|
|
|
104
165
|
color: "primary",
|
|
105
166
|
onClick: onSave,
|
|
106
167
|
disabled: !can_save
|
|
107
|
-
}, save_button_label)), /*#__PURE__*/React.createElement(LoadingBackdrop, {
|
|
168
|
+
}, save_button_label ? save_button_label : getSaveButtonLabel())), /*#__PURE__*/React.createElement(LoadingBackdrop, {
|
|
108
169
|
isLoading: is_loading
|
|
109
170
|
})));
|
|
110
171
|
};
|
|
@@ -113,12 +174,8 @@ GenericDialogWindow.defaultProps = {
|
|
|
113
174
|
open: false,
|
|
114
175
|
component: undefined,
|
|
115
176
|
data: undefined,
|
|
116
|
-
onClose: () => {},
|
|
117
177
|
showSaveButton: true,
|
|
118
|
-
|
|
119
|
-
saveButtonLabel: 'save',
|
|
120
|
-
backButtonLabel: 'back'
|
|
121
|
-
},
|
|
178
|
+
appBarMenu: undefined,
|
|
122
179
|
dialogSize: false,
|
|
123
180
|
theme: undefined
|
|
124
181
|
};
|
|
@@ -132,14 +189,11 @@ GenericDialogWindow.propTypes = {
|
|
|
132
189
|
/** Any data needing to be passed down to the child component */
|
|
133
190
|
data: PropTypes.any,
|
|
134
191
|
|
|
135
|
-
/** the onClose function allows us to have full control over the close process */
|
|
136
|
-
onClose: PropTypes.func,
|
|
137
|
-
|
|
138
192
|
/** To display or hide the save button on the dialog */
|
|
139
193
|
showSaveButton: PropTypes.bool,
|
|
140
194
|
|
|
141
|
-
/**
|
|
142
|
-
|
|
195
|
+
/** Same props as the GenericAppBar component... */
|
|
196
|
+
appBarMenu: PropTypes.object,
|
|
143
197
|
|
|
144
198
|
/** Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.*/
|
|
145
199
|
dialogSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
|
package/dist/index.js
CHANGED
|
@@ -10,4 +10,5 @@ import PCMScrollbar from './components/Tools/PCMScrollbar';
|
|
|
10
10
|
import TwoColumnDisplay from './components/Layout/TwoColumnDisplay';
|
|
11
11
|
import SimpleTab from './components/Layout/SimpleTab';
|
|
12
12
|
import HrefLink from './components/Links/HrefLink';
|
|
13
|
-
|
|
13
|
+
import GenericAppBar from './components/Dialogs/GenericAppBar';
|
|
14
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.
|
|
1
|
+
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mr-12{margin-right:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.grow{flex-grow:1}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}
|