pcm-shared-components 0.0.167 → 0.0.170
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.
|
@@ -8,6 +8,15 @@ import { createTheme, useTheme } from '@mui/material/styles';
|
|
|
8
8
|
import MoreIcon from "@mui/icons-material/MoreVert";
|
|
9
9
|
import GenericAppBarSubMenu from './components/GenericAppBarSubMenu';
|
|
10
10
|
import PropTypes from "prop-types";
|
|
11
|
+
const defaultState = {
|
|
12
|
+
appBarTitle: '',
|
|
13
|
+
showBackButton: true,
|
|
14
|
+
closeMenu: {
|
|
15
|
+
onClick: () => {},
|
|
16
|
+
name: ''
|
|
17
|
+
},
|
|
18
|
+
mainMenu: []
|
|
19
|
+
};
|
|
11
20
|
/**
|
|
12
21
|
* Generic App Bar component used to create dynamic top bar with dynamic menus.
|
|
13
22
|
*
|
|
@@ -25,6 +34,7 @@ import {GenericAppBar} from 'pcm-shared-components';
|
|
|
25
34
|
Has three main part to it:
|
|
26
35
|
*
|
|
27
36
|
* - **appBarTitle**: ```String``` controls title
|
|
37
|
+
* - **showBackButton**: ```Bool``` controls if we show the back arrow button beside the title
|
|
28
38
|
* - **closeMenu**: ```Object``` controls the back button
|
|
29
39
|
* - onClick: ```Callback```
|
|
30
40
|
* - name: ```String```
|
|
@@ -41,6 +51,7 @@ Has three main part to it:
|
|
|
41
51
|
``` js
|
|
42
52
|
{
|
|
43
53
|
appBarTitle: '',
|
|
54
|
+
showBackButton: true,
|
|
44
55
|
|
|
45
56
|
closeMenu:{
|
|
46
57
|
onClick : callback,
|
|
@@ -80,7 +91,11 @@ export const GenericAppBar = props => {
|
|
|
80
91
|
const {
|
|
81
92
|
appBarMenu,
|
|
82
93
|
theme
|
|
83
|
-
} = props
|
|
94
|
+
} = { ...props,
|
|
95
|
+
appBarMenu: { ...defaultState,
|
|
96
|
+
...props.appBarMenu
|
|
97
|
+
}
|
|
98
|
+
};
|
|
84
99
|
const compTheme = theme ? theme : useTheme();
|
|
85
100
|
const defaultTheme = createTheme(compTheme);
|
|
86
101
|
const useStyles = makeStyles(() => ({
|
|
@@ -230,8 +245,7 @@ export const GenericAppBar = props => {
|
|
|
230
245
|
key: `main_sub_items_${new Date()}`
|
|
231
246
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
232
247
|
title: menu.name
|
|
233
|
-
}, menu.isButton ? /*#__PURE__*/React.createElement(Button
|
|
234
|
-
, {
|
|
248
|
+
}, menu.isButton ? /*#__PURE__*/React.createElement(Button, {
|
|
235
249
|
startIcon: menu.icon,
|
|
236
250
|
color: "inherit",
|
|
237
251
|
"aria-owns": "menu-appbar",
|
|
@@ -294,12 +308,7 @@ export const GenericAppBar = props => {
|
|
|
294
308
|
marginRight: 24
|
|
295
309
|
}
|
|
296
310
|
})))));
|
|
297
|
-
};
|
|
298
|
-
// <div className='flex flex-row'>
|
|
299
|
-
// <MainItems key='main_item_id' />
|
|
300
|
-
// </div>
|
|
301
|
-
// );
|
|
302
|
-
|
|
311
|
+
};
|
|
303
312
|
|
|
304
313
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
305
314
|
theme: defaultTheme
|
|
@@ -310,7 +319,7 @@ export const GenericAppBar = props => {
|
|
|
310
319
|
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
311
320
|
variant: "dense",
|
|
312
321
|
className: classes.gutters
|
|
313
|
-
}, /*#__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", {
|
|
322
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, appBarMenu.showBackButton && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CloseContext, appBarMenu.closeMenu)), /*#__PURE__*/React.createElement(TitleContext, null), /*#__PURE__*/React.createElement("div", {
|
|
314
323
|
className: classes.grow
|
|
315
324
|
}), /*#__PURE__*/React.createElement("div", {
|
|
316
325
|
className: classes.sectionDesktop
|
|
@@ -325,7 +334,7 @@ export const GenericAppBar = props => {
|
|
|
325
334
|
export default GenericAppBar; // Specifies the default values for the props:
|
|
326
335
|
|
|
327
336
|
GenericAppBar.defaultProps = {
|
|
328
|
-
appBarMenu:
|
|
337
|
+
appBarMenu: defaultState,
|
|
329
338
|
theme: undefined
|
|
330
339
|
}; //Define the types associated with the prop types
|
|
331
340
|
|
|
@@ -14,6 +14,7 @@ export const GenericDialogWindow = props => {
|
|
|
14
14
|
component,
|
|
15
15
|
data,
|
|
16
16
|
showSaveButton = false,
|
|
17
|
+
showBackButton = true,
|
|
17
18
|
dialogSize = 'false',
|
|
18
19
|
appBarMenu = undefined,
|
|
19
20
|
fullWidth = false,
|
|
@@ -161,9 +162,9 @@ export const GenericDialogWindow = props => {
|
|
|
161
162
|
}, /*#__PURE__*/React.createElement(GenericAppBar, {
|
|
162
163
|
appBarMenu: managedAppBarMenu
|
|
163
164
|
}), /*#__PURE__*/React.createElement(DialogContent, {
|
|
164
|
-
className: "pt-4 pl-0 pr-0 h-full
|
|
165
|
+
className: "pt-4 pl-0 pr-0 h-full"
|
|
165
166
|
}, /*#__PURE__*/React.createElement(PerfectScrollbar, {
|
|
166
|
-
className: "",
|
|
167
|
+
className: "w-fit",
|
|
167
168
|
enable: true
|
|
168
169
|
}, /*#__PURE__*/React.createElement("div", {
|
|
169
170
|
className: "w-full h-full "
|
|
@@ -178,7 +179,7 @@ export const GenericDialogWindow = props => {
|
|
|
178
179
|
},
|
|
179
180
|
ref: childRef
|
|
180
181
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(DialogActions, {
|
|
181
|
-
className: "
|
|
182
|
+
className: "my-4 w-fit"
|
|
182
183
|
}, showSaveButton && /*#__PURE__*/React.createElement("div", {
|
|
183
184
|
className: "flex flex-row justify-start w-full"
|
|
184
185
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
@@ -197,6 +198,7 @@ GenericDialogWindow.defaultProps = {
|
|
|
197
198
|
component: undefined,
|
|
198
199
|
data: undefined,
|
|
199
200
|
showSaveButton: true,
|
|
201
|
+
showBackButton: true,
|
|
200
202
|
appBarMenu: undefined,
|
|
201
203
|
dialogSize: false,
|
|
202
204
|
fullWidth: false,
|
|
@@ -216,6 +218,9 @@ GenericDialogWindow.propTypes = {
|
|
|
216
218
|
/** To display or hide the save button on the dialog */
|
|
217
219
|
showSaveButton: PropTypes.bool,
|
|
218
220
|
|
|
221
|
+
/** To display or hide the back button in the top left corner */
|
|
222
|
+
showBackButton: PropTypes.bool,
|
|
223
|
+
|
|
219
224
|
/** Same props as the GenericAppBar component... */
|
|
220
225
|
appBarMenu: PropTypes.object,
|
|
221
226
|
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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-
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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-4{margin-top:.4rem;margin-bottom:.4rem}.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}.ml-0{margin-left:0}.mr-0{margin-right:0}.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-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.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-start{justify-content:flex-start}.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{overscroll-behavior:none}.rounded{border-radius:.4rem}.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))}.bg-yellow-100\/50{background-color:#fff9c480}.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-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.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-600{--tw-text-opacity:1;color:rgb(117 117 117/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}@media (min-width:960px){.md\:pt-0{padding-top:0}}
|