pcm-shared-components 0.0.96 → 0.0.99
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,12 +217,13 @@ 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", {
|
|
223
|
+
className: "h-full my-auto",
|
|
221
224
|
key: `main_menu_item_${idx}`
|
|
222
225
|
}, /*#__PURE__*/React.createElement("div", {
|
|
223
|
-
className: "flex flex-row",
|
|
226
|
+
className: "flex flex-row h-full m-auto",
|
|
224
227
|
key: `main_sub_items_${new Date()}`
|
|
225
228
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
226
229
|
title: menu.name
|
|
@@ -239,18 +242,7 @@ export const GenericAppBar = props => {
|
|
|
239
242
|
onClick: () => {
|
|
240
243
|
menu.onClick();
|
|
241
244
|
}
|
|
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
|
-
})))); //? ------------------------------------------------
|
|
245
|
+
}, menu.icon))))); //? ------------------------------------------------
|
|
254
246
|
//! Mobile menu
|
|
255
247
|
//? ------------------------------------------------
|
|
256
248
|
|
|
@@ -280,13 +272,25 @@ export const GenericAppBar = props => {
|
|
|
280
272
|
//? ------------------------------------------------
|
|
281
273
|
|
|
282
274
|
const MainItems = () => {
|
|
275
|
+
const menuItems = (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true));
|
|
283
276
|
return /*#__PURE__*/React.createElement("div", {
|
|
284
277
|
className: "flex flex-row"
|
|
285
|
-
},
|
|
278
|
+
}, menuItems.map((menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesktopItemMenu, {
|
|
286
279
|
key: `desktop_item_menu_${idx}`,
|
|
287
280
|
menu: menu,
|
|
288
281
|
idx: idx
|
|
289
|
-
})
|
|
282
|
+
}), idx < menuItems.length - 1 && /*#__PURE__*/React.createElement(React.Fragment, null, menu.displayDivider ? /*#__PURE__*/React.createElement(Divider, {
|
|
283
|
+
style: {
|
|
284
|
+
marginRight: 24,
|
|
285
|
+
marginLeft: 6
|
|
286
|
+
},
|
|
287
|
+
orientation: "vertical",
|
|
288
|
+
flexItem: true
|
|
289
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
290
|
+
style: {
|
|
291
|
+
marginRight: 24
|
|
292
|
+
}
|
|
293
|
+
})))));
|
|
290
294
|
}; // const MainItemMenu = () => (
|
|
291
295
|
// <div className='flex flex-row'>
|
|
292
296
|
// <MainItems key='main_item_id' />
|
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}
|