pcm-shared-components 0.0.83 → 0.0.84
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 +53 -45
- 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,8 @@ 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);
|
|
32
30
|
const childRef = useRef();
|
|
33
31
|
|
|
34
32
|
const onSave = () => {
|
|
@@ -40,14 +38,52 @@ export const GenericDialogWindow = props => {
|
|
|
40
38
|
};
|
|
41
39
|
|
|
42
40
|
const closeDialog = () => {
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
//returns the onClick function assigned to the appBarMenu.closeMenu.onClick
|
|
42
|
+
try {
|
|
43
|
+
appBarMenu.closeMenu.onClick();
|
|
44
|
+
} catch (error) {
|
|
45
|
+
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);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const getSaveButtonLabel = () => {
|
|
50
|
+
let return_value = 'Save--'; //returns the save label for the save button in the bottom right of the dialog.
|
|
51
|
+
// The save label is taken from the mainMenu name item having an id='save'
|
|
52
|
+
|
|
53
|
+
try {
|
|
54
|
+
const save_menu = appBarMenu.mainMenu.find(mm => mm.id === 'save');
|
|
55
|
+
|
|
56
|
+
if (save_menu && save_menu.name) {
|
|
57
|
+
return_value = save_menu.name;
|
|
58
|
+
}
|
|
59
|
+
} catch (error) {}
|
|
60
|
+
|
|
61
|
+
return return_value;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (appBarMenu && appBarMenu.mainMenu) {
|
|
66
|
+
// 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
|
|
67
|
+
setManagedAppBarMenu({ ...appBarMenu,
|
|
68
|
+
mainMenu: [...appBarMenu.mainMenu.map(mm => {
|
|
69
|
+
if (mm.id === 'save') {
|
|
70
|
+
return { ...mm,
|
|
71
|
+
onClick: onSave,
|
|
72
|
+
name: save_button_label ? save_button_label : mm.name,
|
|
73
|
+
hideMenu: !(can_save && showSaveButton)
|
|
74
|
+
};
|
|
75
|
+
} else {
|
|
76
|
+
return mm;
|
|
77
|
+
}
|
|
78
|
+
})]
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}, [appBarMenu, can_save, showSaveButton, save_button_label]); // -----------------------------------------
|
|
45
82
|
// Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.
|
|
46
83
|
// I think this error comes only after a state has changed when multiple dialog windows are open they are fighting for focus.
|
|
47
84
|
// Bug: https://github.com/mui/material-ui/issues/8741
|
|
48
85
|
// -----------------------------------------
|
|
49
86
|
|
|
50
|
-
|
|
51
87
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
52
88
|
theme: defaultTheme
|
|
53
89
|
}, /*#__PURE__*/React.createElement(Dialog, {
|
|
@@ -58,30 +94,9 @@ export const GenericDialogWindow = props => {
|
|
|
58
94
|
maxWidth: dialogSize,
|
|
59
95
|
fullScreen: dialogSize ? false : true,
|
|
60
96
|
className: ""
|
|
61
|
-
}, /*#__PURE__*/React.createElement(
|
|
62
|
-
|
|
63
|
-
}, /*#__PURE__*/React.createElement(
|
|
64
|
-
variant: "dense",
|
|
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, {
|
|
97
|
+
}, /*#__PURE__*/React.createElement(GenericAppBar, {
|
|
98
|
+
appBarMenu: managedAppBarMenu
|
|
99
|
+
}), /*#__PURE__*/React.createElement(DialogContent, {
|
|
85
100
|
className: "pt-4 pl-0 pr-0 "
|
|
86
101
|
}, /*#__PURE__*/React.createElement(PerfectScrollbar, {
|
|
87
102
|
className: "",
|
|
@@ -104,7 +119,7 @@ export const GenericDialogWindow = props => {
|
|
|
104
119
|
color: "primary",
|
|
105
120
|
onClick: onSave,
|
|
106
121
|
disabled: !can_save
|
|
107
|
-
}, save_button_label)), /*#__PURE__*/React.createElement(LoadingBackdrop, {
|
|
122
|
+
}, save_button_label ? save_button_label : getSaveButtonLabel())), /*#__PURE__*/React.createElement(LoadingBackdrop, {
|
|
108
123
|
isLoading: is_loading
|
|
109
124
|
})));
|
|
110
125
|
};
|
|
@@ -113,12 +128,8 @@ GenericDialogWindow.defaultProps = {
|
|
|
113
128
|
open: false,
|
|
114
129
|
component: undefined,
|
|
115
130
|
data: undefined,
|
|
116
|
-
onClose: () => {},
|
|
117
131
|
showSaveButton: true,
|
|
118
|
-
|
|
119
|
-
saveButtonLabel: 'save',
|
|
120
|
-
backButtonLabel: 'back'
|
|
121
|
-
},
|
|
132
|
+
appBarMenu: undefined,
|
|
122
133
|
dialogSize: false,
|
|
123
134
|
theme: undefined
|
|
124
135
|
};
|
|
@@ -132,14 +143,11 @@ GenericDialogWindow.propTypes = {
|
|
|
132
143
|
/** Any data needing to be passed down to the child component */
|
|
133
144
|
data: PropTypes.any,
|
|
134
145
|
|
|
135
|
-
/** the onClose function allows us to have full control over the close process */
|
|
136
|
-
onClose: PropTypes.func,
|
|
137
|
-
|
|
138
146
|
/** To display or hide the save button on the dialog */
|
|
139
147
|
showSaveButton: PropTypes.bool,
|
|
140
148
|
|
|
141
|
-
/**
|
|
142
|
-
|
|
149
|
+
/** Same props as the GenericAppBar component... */
|
|
150
|
+
appBarMenu: PropTypes.object,
|
|
143
151
|
|
|
144
152
|
/** Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.*/
|
|
145
153
|
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}
|