pcm-shared-components 0.0.95 → 0.0.98
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.
|
@@ -35,6 +35,7 @@ Has three main part to it:
|
|
|
35
35
|
* - name: ```String```
|
|
36
36
|
* - isButton: ```Bool``` controls if the menu is displayed as a Button or and IconButton default is IconButton
|
|
37
37
|
* - hideMenu: ```Bool``` controls if the menu item is displayed or not
|
|
38
|
+
* - displayDivider: ```Bool``` display a divider after the menu.
|
|
38
39
|
* - subMenu: ```Array``` of menus, same structure as the ```mainMenu```
|
|
39
40
|
*
|
|
40
41
|
``` js
|
|
@@ -53,6 +54,7 @@ Has three main part to it:
|
|
|
53
54
|
name: 'Menu Name',
|
|
54
55
|
isButton: true,
|
|
55
56
|
hideMenu: false,
|
|
57
|
+
displayDivider: true,
|
|
56
58
|
subMenu:[
|
|
57
59
|
{
|
|
58
60
|
onClick: callback,
|
|
@@ -187,7 +189,7 @@ export const GenericAppBar = props => {
|
|
|
187
189
|
menu: menu,
|
|
188
190
|
classes: classes,
|
|
189
191
|
full_menu: true
|
|
190
|
-
}), menu.
|
|
192
|
+
}), menu.displayDivider ? mobile_menu_divider : undefined)) : /*#__PURE__*/React.createElement("div", {
|
|
191
193
|
key: `main_menu_item_${idx}`
|
|
192
194
|
}, /*#__PURE__*/React.createElement("div", {
|
|
193
195
|
className: "w-full",
|
|
@@ -201,7 +203,7 @@ export const GenericAppBar = props => {
|
|
|
201
203
|
}
|
|
202
204
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
203
205
|
color: "inherit"
|
|
204
|
-
}, menu.icon), /*#__PURE__*/React.createElement("p", null, menu.name)), menu.
|
|
206
|
+
}, menu.icon), /*#__PURE__*/React.createElement("p", null, menu.name)), menu.displayDivider ? mobile_menu_divider : undefined)));
|
|
205
207
|
|
|
206
208
|
const DesktopItemMenu = ({
|
|
207
209
|
menu,
|
|
@@ -215,8 +217,8 @@ export const GenericAppBar = props => {
|
|
|
215
217
|
key: `common_grid_app_bar_sub_desktop_${idx}`,
|
|
216
218
|
menu: menu,
|
|
217
219
|
classes: classes
|
|
218
|
-
}), menu.
|
|
219
|
-
className: "
|
|
220
|
+
}), menu.displayDivider ? menu_divider : /*#__PURE__*/React.createElement("div", {
|
|
221
|
+
className: ""
|
|
220
222
|
})) : /*#__PURE__*/React.createElement("div", {
|
|
221
223
|
key: `main_menu_item_${idx}`
|
|
222
224
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -239,18 +241,7 @@ export const GenericAppBar = props => {
|
|
|
239
241
|
onClick: () => {
|
|
240
242
|
menu.onClick();
|
|
241
243
|
}
|
|
242
|
-
}, menu.icon))
|
|
243
|
-
style: {
|
|
244
|
-
marginRight: 24,
|
|
245
|
-
marginLeft: 6
|
|
246
|
-
},
|
|
247
|
-
orientation: "vertical",
|
|
248
|
-
flexItem: true
|
|
249
|
-
}) : /*#__PURE__*/React.createElement("div", {
|
|
250
|
-
style: {
|
|
251
|
-
marginRight: 24
|
|
252
|
-
}
|
|
253
|
-
})))); //? ------------------------------------------------
|
|
244
|
+
}, menu.icon))))); //? ------------------------------------------------
|
|
254
245
|
//! Mobile menu
|
|
255
246
|
//? ------------------------------------------------
|
|
256
247
|
|
|
@@ -280,13 +271,25 @@ export const GenericAppBar = props => {
|
|
|
280
271
|
//? ------------------------------------------------
|
|
281
272
|
|
|
282
273
|
const MainItems = () => {
|
|
274
|
+
const menuItems = (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true));
|
|
283
275
|
return /*#__PURE__*/React.createElement("div", {
|
|
284
276
|
className: "flex flex-row"
|
|
285
|
-
},
|
|
277
|
+
}, menuItems.map((menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesktopItemMenu, {
|
|
286
278
|
key: `desktop_item_menu_${idx}`,
|
|
287
279
|
menu: menu,
|
|
288
280
|
idx: idx
|
|
289
|
-
})
|
|
281
|
+
}), idx < menuItems.length - 1 && /*#__PURE__*/React.createElement(React.Fragment, null, menu.displayDivider ? /*#__PURE__*/React.createElement(Divider, {
|
|
282
|
+
style: {
|
|
283
|
+
marginRight: 24,
|
|
284
|
+
marginLeft: 6
|
|
285
|
+
},
|
|
286
|
+
orientation: "vertical",
|
|
287
|
+
flexItem: true
|
|
288
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
289
|
+
style: {
|
|
290
|
+
marginRight: 24
|
|
291
|
+
}
|
|
292
|
+
})))));
|
|
290
293
|
}; // const MainItemMenu = () => (
|
|
291
294
|
// <div className='flex flex-row'>
|
|
292
295
|
// <MainItems key='main_item_id' />
|
|
@@ -9,7 +9,8 @@ import Switch from "@mui/material/Switch";
|
|
|
9
9
|
const GenericSubMenu = ({
|
|
10
10
|
menu,
|
|
11
11
|
full_menu = true,
|
|
12
|
-
handleParentMenuClose = undefined
|
|
12
|
+
handleParentMenuClose = undefined,
|
|
13
|
+
onClose
|
|
13
14
|
}) => {
|
|
14
15
|
const [anchorSubMenu, setAnchorSubMenu] = useState(false);
|
|
15
16
|
const [isSubMenuOpen, setSubMenuOpen] = useState(false);
|
|
@@ -61,8 +62,9 @@ const GenericSubMenu = ({
|
|
|
61
62
|
|
|
62
63
|
if (handleParentMenuClose) {
|
|
63
64
|
handleParentMenuClose();
|
|
64
|
-
}
|
|
65
|
+
}
|
|
65
66
|
|
|
67
|
+
onClose();
|
|
66
68
|
};
|
|
67
69
|
|
|
68
70
|
useEffect(() => {
|
|
@@ -58,7 +58,8 @@ const ReusableMenu = props => {
|
|
|
58
58
|
key: `common_grid_app_bar_sub_desktop_${idx}`,
|
|
59
59
|
menu: menu,
|
|
60
60
|
full_menu: true,
|
|
61
|
-
classes: classes
|
|
61
|
+
classes: classes,
|
|
62
|
+
onClose: handleClose
|
|
62
63
|
})) : /*#__PURE__*/React.createElement(StyledMenuItem, {
|
|
63
64
|
onClick: menu.onClick,
|
|
64
65
|
key: `reusable_menu_item_${idx}`
|
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}.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}.
|
|
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}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.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}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.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{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.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}
|