pcm-shared-components 0.0.56 → 0.0.59
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 +1 -0
- package/dist/components/Loaders/LoadingBackdrop/styles.css +176 -0
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +3 -2
- package/dist/components/Dialogs/GenericDialogWindow/components/InnerDialogComponent.js +0 -56
- package/dist/components/Dialogs/GenericDialogWindow/components/OpenDialog.js +0 -31
- package/dist/components/Drawing/ImageCanvasDraw/storybook/testMap.test.js +0 -1
|
@@ -45,6 +45,7 @@ export const GenericDialogWindow = props => {
|
|
|
45
45
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
46
46
|
theme: defaultTheme
|
|
47
47
|
}, /*#__PURE__*/React.createElement(Dialog, {
|
|
48
|
+
disableEnforceFocus: true,
|
|
48
49
|
open: open,
|
|
49
50
|
onClose: closeDialog,
|
|
50
51
|
fullScreen: true,
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
|
|
2
|
+
#loading-wrapper {
|
|
3
|
+
position: absolute;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
left: 0;
|
|
7
|
+
top: 0;
|
|
8
|
+
background-color: #222;
|
|
9
|
+
z-index: 20000000 !important;
|
|
10
|
+
-moz-opacity: 0.8;
|
|
11
|
+
opacity:.80;
|
|
12
|
+
filter: alpha(opacity=80);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
/* ---------------------------fuse----------------------------- */
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
#fuse-splash-screen {
|
|
21
|
+
/* display: block;
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
z-index: 99999;
|
|
28
|
+
pointer-events: none; */
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#fuse-splash-screen .center {
|
|
32
|
+
display: block;
|
|
33
|
+
width: 100%;
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 50%;
|
|
36
|
+
transform: translateY(-50%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
#fuse-splash-screen .logo {
|
|
40
|
+
width: 128px;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
#fuse-splash-screen .logo img {
|
|
45
|
+
filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2))
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
#fuse-splash-screen .spinner-wrapper {
|
|
49
|
+
display: block;
|
|
50
|
+
position: relative;
|
|
51
|
+
width: 100%;
|
|
52
|
+
min-height: 100px;
|
|
53
|
+
height: 100px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#fuse-splash-screen .spinner-wrapper .spinner {
|
|
57
|
+
position: absolute;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
left: 50%;
|
|
60
|
+
margin-left: -50px;
|
|
61
|
+
animation: outer-rotate 2.91667s linear infinite;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner {
|
|
65
|
+
width: 100px;
|
|
66
|
+
height: 100px;
|
|
67
|
+
position: relative;
|
|
68
|
+
animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .gap {
|
|
72
|
+
position: absolute;
|
|
73
|
+
left: 49px;
|
|
74
|
+
right: 49px;
|
|
75
|
+
top: 0;
|
|
76
|
+
bottom: 0;
|
|
77
|
+
border-top: 10px solid;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .left,
|
|
82
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .right {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 0;
|
|
85
|
+
height: 100px;
|
|
86
|
+
width: 50px;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle,
|
|
91
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;
|
|
94
|
+
width: 100px;
|
|
95
|
+
height: 100px;
|
|
96
|
+
box-sizing: border-box;
|
|
97
|
+
border: 10px solid #f1632f;
|
|
98
|
+
border-bottom-color: transparent;
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .left {
|
|
103
|
+
left: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle {
|
|
107
|
+
left: 0;
|
|
108
|
+
border-right-color: transparent;
|
|
109
|
+
animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
110
|
+
-webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .right {
|
|
114
|
+
right: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
#fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
|
|
118
|
+
right: 0;
|
|
119
|
+
border-left-color: transparent;
|
|
120
|
+
animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
121
|
+
-webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@keyframes outer-rotate {
|
|
125
|
+
0% {
|
|
126
|
+
transform: rotate(0deg) scale(0.5);
|
|
127
|
+
}
|
|
128
|
+
100% {
|
|
129
|
+
transform: rotate(360deg) scale(0.5);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@keyframes left-wobble {
|
|
134
|
+
0%, 100% {
|
|
135
|
+
transform: rotate(130deg);
|
|
136
|
+
}
|
|
137
|
+
50% {
|
|
138
|
+
transform: rotate(-5deg);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@keyframes right-wobble {
|
|
143
|
+
0%, 100% {
|
|
144
|
+
transform: rotate(-130deg);
|
|
145
|
+
}
|
|
146
|
+
50% {
|
|
147
|
+
transform: rotate(5deg);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@keyframes sporadic-rotate {
|
|
152
|
+
12.5% {
|
|
153
|
+
transform: rotate(135deg);
|
|
154
|
+
}
|
|
155
|
+
25% {
|
|
156
|
+
transform: rotate(270deg);
|
|
157
|
+
}
|
|
158
|
+
37.5% {
|
|
159
|
+
transform: rotate(405deg);
|
|
160
|
+
}
|
|
161
|
+
50% {
|
|
162
|
+
transform: rotate(540deg);
|
|
163
|
+
}
|
|
164
|
+
62.5% {
|
|
165
|
+
transform: rotate(675deg);
|
|
166
|
+
}
|
|
167
|
+
75% {
|
|
168
|
+
transform: rotate(810deg);
|
|
169
|
+
}
|
|
170
|
+
87.5% {
|
|
171
|
+
transform: rotate(945deg);
|
|
172
|
+
}
|
|
173
|
+
100% {
|
|
174
|
+
transform: rotate(1080deg);
|
|
175
|
+
}
|
|
176
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -3,5 +3,6 @@ import TestButton from './components/Buttons/TestTailwinButton';
|
|
|
3
3
|
import CodeHighlight from './components/Tools/CodeHighlight';
|
|
4
4
|
import CustomFab from './components/Buttons/CustomFab';
|
|
5
5
|
import HelpButton from './components/Buttons/HelpButton';
|
|
6
|
+
import GenericDialogWindow from './components/Dialogs/GenericDialogWindow';
|
|
6
7
|
import PcSharedComponentThemeInheritor from './components/PcSharedComponentThemeInheritor';
|
|
7
|
-
export { TestButton, CodeHighlight, CustomFab, HelpButton, PcSharedComponentThemeInheritor };
|
|
8
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor };
|
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pcm-shared-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.59",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"babel": {
|
|
@@ -16,8 +16,9 @@
|
|
|
16
16
|
"storybook": "start-storybook -p 6006",
|
|
17
17
|
"build-storybook": "build-storybook",
|
|
18
18
|
"clean": "rm -rf dist",
|
|
19
|
+
"clean-storybook": "rm -rf dist/**/**/*/storybook",
|
|
19
20
|
"build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles/tailwind.css --minify",
|
|
20
|
-
"build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist --
|
|
21
|
+
"build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist --copy-files && npm run build-tailwind && cp ./src/styles/prism.css ./dist/styles/ && npm run clean-storybook"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"react": "^17.0.2",
|
|
@@ -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;
|