pcm-shared-components 0.0.58 → 0.0.61
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/GenericDialogWindow/index.js +7 -1
- package/dist/components/Drawing/ImageCanvasDraw/index.js +1 -2
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
- package/dist/components/Dialogs/GenericDialogWindow/components/InnerDialogComponent.js +0 -56
- package/dist/components/Dialogs/GenericDialogWindow/components/OpenDialog.js +0 -31
|
@@ -40,11 +40,17 @@ export const GenericDialogWindow = props => {
|
|
|
40
40
|
|
|
41
41
|
const closeDialog = () => {
|
|
42
42
|
onClose();
|
|
43
|
-
};
|
|
43
|
+
}; // -----------------------------------------
|
|
44
|
+
// Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.
|
|
45
|
+
// I think this error comes only after a state has changed when multiple dialog windows are open they are fighting for focus.
|
|
46
|
+
// Bug: https://github.com/mui/material-ui/issues/8741
|
|
47
|
+
// -----------------------------------------
|
|
48
|
+
|
|
44
49
|
|
|
45
50
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
46
51
|
theme: defaultTheme
|
|
47
52
|
}, /*#__PURE__*/React.createElement(Dialog, {
|
|
53
|
+
disableEnforceFocus: true,
|
|
48
54
|
open: open,
|
|
49
55
|
onClose: closeDialog,
|
|
50
56
|
fullScreen: true,
|
|
@@ -23,7 +23,7 @@ import {ImageCanvasDraw} from 'pcm-shared-components';
|
|
|
23
23
|
*
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
|
-
const ImageCanvasDraw = props => {
|
|
26
|
+
export const ImageCanvasDraw = props => {
|
|
27
27
|
const {
|
|
28
28
|
onSave,
|
|
29
29
|
outputFormat,
|
|
@@ -154,7 +154,6 @@ const ImageCanvasDraw = props => {
|
|
|
154
154
|
imgSrc: state.b64DataUrl
|
|
155
155
|
}))) : /*#__PURE__*/React.createElement(React.Fragment, null, "loading..."));
|
|
156
156
|
};
|
|
157
|
-
|
|
158
157
|
export default ImageCanvasDraw;
|
|
159
158
|
ImageCanvasDraw.defaultProps = {
|
|
160
159
|
onSave: undefined,
|
package/dist/index.js
CHANGED
|
@@ -5,4 +5,5 @@ import CustomFab from './components/Buttons/CustomFab';
|
|
|
5
5
|
import HelpButton from './components/Buttons/HelpButton';
|
|
6
6
|
import GenericDialogWindow from './components/Dialogs/GenericDialogWindow';
|
|
7
7
|
import PcSharedComponentThemeInheritor from './components/PcSharedComponentThemeInheritor';
|
|
8
|
-
|
|
8
|
+
import ImageCanvasDraw from './components/Drawing/ImageCanvasDraw';
|
|
9
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw };
|
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: }.relative{position:relative}.m-
|
|
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: }.relative{position:relative}.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}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-full{height:100%}.w-full{width:100%}.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-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.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))}.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}.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}
|
package/package.json
CHANGED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import React, { useState, forwardRef, useImperativeHandle } from 'react';
|
|
2
|
-
import ImageCanvasDraw from '../../../Drawing/ImageCanvasDraw';
|
|
3
|
-
import { cedarShade } from '../../../Drawing/ImageCanvasDraw/storybook/testMap.test'; //!forwardRef needed to allow the parent component to access the child functions
|
|
4
|
-
|
|
5
|
-
const InnerDialogComponent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
6
|
-
// Filter out the parentProps object from the props,
|
|
7
|
-
// There are the props passed down to the actual components
|
|
8
|
-
const [state, setState] = useState(Object.fromEntries(Object.entries(props).filter(([key, value]) => key !== 'parentProps'))); //Passed by the Parent props
|
|
9
|
-
|
|
10
|
-
const {
|
|
11
|
-
setCanSave,
|
|
12
|
-
setIsLoading,
|
|
13
|
-
setSaveButtonLabel,
|
|
14
|
-
//Allows us to set the label on the save button
|
|
15
|
-
closeDialog,
|
|
16
|
-
//
|
|
17
|
-
data //Any data this component needs to function..
|
|
18
|
-
|
|
19
|
-
} = props.parentProps;
|
|
20
|
-
console.log('debug data: ', data); //-----------------------------------
|
|
21
|
-
//! Used to alow the parent component to call the functions inside this child
|
|
22
|
-
//-----------------------------------
|
|
23
|
-
|
|
24
|
-
useImperativeHandle(ref, () => ({
|
|
25
|
-
childRefSave
|
|
26
|
-
}));
|
|
27
|
-
|
|
28
|
-
const childRefSave = () => {
|
|
29
|
-
setIsLoading(true);
|
|
30
|
-
setCanSave(false); //Simulate a save
|
|
31
|
-
|
|
32
|
-
setTimeout(() => {
|
|
33
|
-
setIsLoading(false);
|
|
34
|
-
closeDialog();
|
|
35
|
-
}, 2000);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
39
|
-
className: "m-12"
|
|
40
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
41
|
-
className: "mr-12"
|
|
42
|
-
}, "This is to simulate a ready to save state..."), /*#__PURE__*/React.createElement("button", {
|
|
43
|
-
onClick: () => {
|
|
44
|
-
setCanSave(true);
|
|
45
|
-
}
|
|
46
|
-
}, "Click here to signal to the dialog that we are ready to save.")), /*#__PURE__*/React.createElement(ImageCanvasDraw, {
|
|
47
|
-
outputFormat: 'blob',
|
|
48
|
-
showDownloadButton: true,
|
|
49
|
-
onSave: data => {
|
|
50
|
-
console.log('Data received by th onSave of the ImageCanvasDraw: ', data);
|
|
51
|
-
closeDialog();
|
|
52
|
-
},
|
|
53
|
-
b64DataUrl: cedarShade
|
|
54
|
-
}));
|
|
55
|
-
});
|
|
56
|
-
export default InnerDialogComponent;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import CustomFab from '../../../Buttons/CustomFab';
|
|
3
|
-
import InnerDialogComponent from './InnerDialogComponent';
|
|
4
|
-
import GenericDialogWindow from '../index';
|
|
5
|
-
export const OpenDialog = () => {
|
|
6
|
-
const [open, setOpen] = useState(false);
|
|
7
|
-
|
|
8
|
-
const onClose = () => {
|
|
9
|
-
setOpen(false);
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
13
|
-
className: "flex flex-col"
|
|
14
|
-
}, "Once the button is clicked the dialog will open which is actually what we are trying to display in this Story"), /*#__PURE__*/React.createElement(CustomFab, {
|
|
15
|
-
onClick: () => {
|
|
16
|
-
setOpen(!open);
|
|
17
|
-
},
|
|
18
|
-
buttonText: "Click to open Generic Dialog",
|
|
19
|
-
iconSize: 0
|
|
20
|
-
}), /*#__PURE__*/React.createElement(GenericDialogWindow, {
|
|
21
|
-
open: open,
|
|
22
|
-
onClose: onClose,
|
|
23
|
-
component: /*#__PURE__*/React.createElement(InnerDialogComponent, null),
|
|
24
|
-
data: 'this is anything I need to pass down to the InnerDialogComponent',
|
|
25
|
-
i18nextStrings: {
|
|
26
|
-
saveButtonLabel: 'save me',
|
|
27
|
-
backButtonLabel: 'backup!'
|
|
28
|
-
}
|
|
29
|
-
}));
|
|
30
|
-
};
|
|
31
|
-
export default OpenDialog;
|