pcm-shared-components 0.0.62 → 0.0.65

package/dist/components/Dialogs/GenericDialogWindow/index.js

@@ -3,8 +3,8 @@ import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, T
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
-import LoadingBackdrop from '../../Loaders/LoadingBackdrop'; // import GridLoading from 'app/main/components/loading/loading';
-
+import LoadingBackdrop from '../../Loaders/LoadingBackdrop';
+import PerfectScrollbar from '../../Tools/PCMScrollbar';
 import PropTypes from 'prop-types';
 let debounce;
 export const GenericDialogWindow = props => {
@@ -80,6 +80,9 @@ export const GenericDialogWindow = props => {
     onClick: onSave
   }, save_button_label)))), /*#__PURE__*/React.createElement(DialogContent, {
     className: "pt-4 pl-0 pr-0 "
+  }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    className: "",
+    enable: true
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full h-full "
   }, component ? /*#__PURE__*/React.cloneElement(component, {
@@ -91,7 +94,7 @@ export const GenericDialogWindow = props => {
       data: data
     },
     ref: childRef
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(DialogActions, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(DialogActions, {
     className: "justify-between pl-16"
   }, showSaveButton && /*#__PURE__*/React.createElement(Button, {
     variant: "contained",

package/dist/components/Drawing/ImageCanvasDraw/components/Controls.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Slider from '@mui/material/Slider';
 import Typography from '@mui/material/Typography';
 import { combineDrawing } from '../service/image_tools';
@@ -6,6 +6,7 @@ import imageCompression from 'browser-image-compression';
 import { ChromePicker } from 'react-color';
 import Button from '@mui/material/Button';
 import { OUTPUT_TYPES } from '../constants';
+import { rgbToHex } from '../../../Tools/color';
 const imageScaleMarks = [{
   value: 1.5,
   label: 'Full'
@@ -81,32 +82,15 @@ const Controls = props => {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row justify-between "
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    onClick: () => {
-      saveableCanvas.current.eraseAll();
-    }
-  }, "Erase"), /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    onClick: () => {
-      saveableCanvas.current.undo();
-    }
-  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
-    variant: "outlined",
-    onClick: () => {
-      exportImage(onSave, saveableCanvas, outputFormat, state.imageCompressionOptions);
-    }
-  }, "Save")), /*#__PURE__*/React.createElement("div", {
     className: "m-auto my-12"
   }, /*#__PURE__*/React.createElement(ChromePicker, {
     className: "drop-shadow-none",
-    disableAlpha: true,
+    disableAlpha: false,
     color: state.color,
     onChange: (color, event) => {
       setState(previousState => {
         return { ...previousState,
-          color: color.hex
+          color: rgbToHex(color.rgb)
         };
       });
     }
@@ -173,12 +157,29 @@ const Controls = props => {
         return { ...previousState,
           imageScale: Number(event.target.value)
         };
-      });
+      }); // saveableCanvas.current.eraseAll();
     },
     marks: imageScaleMarks,
     min: 1.5,
     max: 2.5
   })))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-between mt-12 "
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: () => {
+      saveableCanvas.current.eraseAll();
+    }
+  }, "Erase"), /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: () => {
+      saveableCanvas.current.undo();
+    }
+  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    onClick: () => {
+      exportImage(onSave, saveableCanvas, outputFormat, state.imageCompressionOptions);
+    }
+  }, "Save")), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row justify-center mt-12"
   }, showDownloadButton && /*#__PURE__*/React.createElement(Button, {
     variant: "outlined",

package/dist/components/Drawing/ImageCanvasDraw/index.js

@@ -8,6 +8,7 @@ import { getStorage, setStorage } from './service/local_storage';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+import PCMScrollbar from '../../Tools/PCMScrollbar';
 /**
  * Displays an image that can is used to draw on to generate maps with highlighted routes.
  * 
@@ -87,6 +88,18 @@ export const ImageCanvasDraw = props => {
   useEffect(() => {
     //Get the scaled down image and width, height 
     setImageSize(state.b64DataUrl);
+
+    try {
+      document.addEventListener('keydown', function (e) {
+        console.log('debug e', e);
+
+        if (e.ctrlKey && e.key.toLowerCase() === 'z') {
+          saveableCanvas.current.undo();
+        }
+      });
+    } catch (error) {
+      console.error('Error in keydown ImageCanvasDraw Controls', error);
+    }
   }, []);
   useEffect(() => {
     if (saveableCanvas && saveableCanvas.current) {
@@ -117,7 +130,7 @@ export const ImageCanvasDraw = props => {
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, state.width && state.width !== 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row overflow-hidden"
+    className: "flex flex-row overflow-hidden p-6"
   }, state.drawerOpen ? /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row",
     style: {
@@ -132,8 +145,11 @@ export const ImageCanvasDraw = props => {
     showDownloadButton: showDownloadButton
   }), /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronLeftIcon, null))) : /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row justify-end"
-  }, /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement("div", {
-    className: "overflow-scroll"
+  }, /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement(PCMScrollbar, {
+    className: "overflow-scroll",
+    style: {
+      maxHeight: '90vh'
+    }
   }, /*#__PURE__*/React.createElement(CanvasDraw, {
     className: "",
     ref: saveableCanvas,

package/dist/components/PcSharedComponentThemeInheritor/index.js

@@ -12,7 +12,6 @@ export const PcSharedComponentThemeInheritor = props => {
     children = React.ReactNode
   } = props;
   const currentTheme = createTheme(theme ? theme : useTheme());
-  console.log('debug currentTheme', currentTheme);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, children);

package/dist/components/Sandbox/ScrollingInnerDiv/index.js

@@ -0,0 +1,24 @@
+import { height } from '@mui/system';
+import React from 'react';
+import ImageCanvasDraw from '../../Drawing/ImageCanvasDraw';
+import { cedarShade } from '../../Drawing/ImageCanvasDraw/storybook/testMap.test';
+
+const ScrollingInnerDiv = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'yellow',
+      padding: 24,
+      height: 200
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'blue',
+      height: '100%',
+      overflow: 'scroll'
+    }
+  }, /*#__PURE__*/React.createElement(ImageCanvasDraw, {
+    b64DataUrl: cedarShade
+  }), "CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE"));
+};
+
+export default ScrollingInnerDiv;

package/dist/components/Tools/PCMScrollbar/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import "react-perfect-scrollbar/dist/css/styles.css";
+import PropTypes from 'prop-types';
+import MobileDetect from 'mobile-detect';
+import clsx from 'clsx';
+const md = new MobileDetect(window.navigator.userAgent);
+const isMobile = md.mobile();
+export const PCMScrollbar = props => {
+  const {
+    children,
+    className,
+    enable,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    key: props.id,
+    className: clsx(className),
+    style: enable && !isMobile ? {
+      position: 'relative',
+      overflow: 'hidden',
+      ...style
+    } : {}
+  }, children);
+};
+export default PCMScrollbar;
+PCMScrollbar.propTypes = {
+  className: PropTypes.any,
+  style: PropTypes.object,
+  enable: PropTypes.bool
+};
+PCMScrollbar.defaultProps = {
+  className: '',
+  style: {},
+  enable: true
+};

package/dist/components/Tools/color.js

@@ -0,0 +1,6 @@
+export const rgbToHex = rgb => {
+  let alpha = Math.ceil(rgb.a * 255).toString(16);
+  alpha = alpha.length > 1 ? alpha : `0${alpha}`;
+  const hex = rgb ? (rgb.r | 1 << 8).toString(16).slice(1) + (rgb.g | 1 << 8).toString(16).slice(1) + (rgb.b | 1 << 8).toString(16).slice(1) + alpha : undefined;
+  return `#${hex}`;
+};

package/dist/styles/tailwind.css

@@ -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-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}
+*,: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}.hidden{display:none}.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))}.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{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

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.62",
+  "version": "0.0.65",
   "private": false,
   "main": "dist/index.js",
   "babel": {
@@ -61,11 +61,13 @@
     "axios": "^0.26.0",
     "browser-image-compression": "^1.0.17",
     "clsx": "^1.1.1",
+    "mobile-detect": "^1.4.5",
     "moment": "^2.29.1",
     "prismjs": "^1.27.0",
     "react-canvas-draw": "^1.2.1",
     "react-color": "^2.19.3",
     "react-markdown": "^8.0.0",
+    "react-perfect-scrollbar": "^1.5.8",
     "tinycolor2": "^1.4.2"
   }
 }