pcm-shared-components 2.0.14 → 2.0.16

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

@@ -9,6 +9,7 @@ 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.
  * 
@@ -23,7 +24,6 @@ import {ImageCanvasDraw} from 'pcm-shared-components';
 
  * 
  */
-
 export const ImageCanvasDraw = props => {
   const {
     onSave,
@@ -52,25 +52,26 @@ export const ImageCanvasDraw = props => {
     }
   });
   const saveableCanvas = useRef();
-
   const setImageSize = imageUrl => {
     try {
       const img = new Image();
-
       img.onload = () => {
         //Scale the image down
         const new_width = Number(img.width) / Number(state.imageScale);
-        const new_height = Number(img.height) / Number(state.imageScale); // Create a temporary canvas to draw the downscaled image on.
+        const new_height = Number(img.height) / Number(state.imageScale);
 
+        // Create a temporary canvas to draw the downscaled image on.
         let canvas = document.createElement("canvas");
         canvas.width = new_width;
-        canvas.height = new_height; // Draw the downscaled image on the canvas and return the new data URL.
+        canvas.height = new_height;
 
+        // Draw the downscaled image on the canvas and return the new data URL.
         let ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, new_width, new_height);
         const newDataUrl = canvas.toDataURL("image/jpeg", state.imageQuality);
         setState(previousState => {
-          return { ...previousState,
+          return {
+            ...previousState,
             ...getStorage(),
             height: new_height,
             width: new_width,
@@ -78,21 +79,17 @@ export const ImageCanvasDraw = props => {
           };
         });
       };
-
       img.src = imageUrl;
     } catch (error) {
       console.error('error in setImageSize', error);
     }
   };
-
   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();
         }
@@ -108,7 +105,6 @@ export const ImageCanvasDraw = props => {
       setStorage(state);
     }
   }, [state]);
-
   const DrawerButtonOpenClose = ({
     children
   }) => /*#__PURE__*/React.createElement(Button, {
@@ -120,13 +116,13 @@ export const ImageCanvasDraw = props => {
     color: "secondary",
     onClick: () => {
       setState(previousState => {
-        return { ...previousState,
+        return {
+          ...previousState,
           drawerOpen: !previousState.drawerOpen
         };
       });
     }
   }, children);
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, state.width && state.width !== 0 ? /*#__PURE__*/React.createElement("div", {
@@ -153,7 +149,8 @@ export const ImageCanvasDraw = props => {
   }, /*#__PURE__*/React.createElement(CanvasDraw, {
     className: "",
     ref: saveableCanvas,
-    onChange: evt => console.log("onChange", evt) // enablePanAndZoom //Don't enable pan and zoom or else it gets too complicated when saving...
+    onChange: evt => console.log("onChange", evt)
+    // enablePanAndZoom //Don't enable pan and zoom or else it gets too complicated when saving...
     // zoomExtents={{ min: 0.33, max: 10 }}
     ,
     clampLinesToDocument: true,
@@ -190,16 +187,12 @@ ImageCanvasDraw.propTypes = {
     ```
   */
   onSave: PropTypes.func,
-
   /** Specified the type of data the onSave function will return */
   outputFormat: PropTypes.oneOf(['blob', 'base64']),
-
   /** If specified then we show the download button which is mainly used for testing to display what the canvas is exporting */
   showDownloadButton: PropTypes.bool,
-
   /** This is the image in a base 64 url format to use as the base image to draw on */
   b64DataUrl: PropTypes.string.isRequired,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Drawing/ImageCanvasDraw/service/image_tools.js

@@ -2,16 +2,18 @@ export const combineDrawing = canvasRef => {
   try {
     const width = canvasRef.current.props.canvasWidth;
     const height = canvasRef.current.props.canvasHeight;
-    const background = canvasRef.current.canvasContainer.children[0]; // const test = canvasRef.current.canvasContainer.children[0]; 
-
+    const background = canvasRef.current.canvasContainer.children[0];
+    // const test = canvasRef.current.canvasContainer.children[0]; 
     const drawing = canvasRef.current.canvasContainer.children[1];
     const canvas = document.createElement('canvas');
     canvas.width = width;
-    canvas.height = height; // composite now
+    canvas.height = height;
 
+    // composite now
     canvas.getContext('2d').drawImage(background, 0, 0);
     canvas.getContext('2d').globalAlpha = 1.0;
-    canvas.getContext('2d').drawImage(drawing, 0, 0); // canvas.getContext('2d').drawImage(test, 0, 0);
+    canvas.getContext('2d').drawImage(drawing, 0, 0);
+    // canvas.getContext('2d').drawImage(test, 0, 0);
 
     const dataUri = canvas.toDataURL('image/jpeg', 1.0);
     const data = dataUri.split(',')[1];
@@ -19,11 +21,9 @@ export const combineDrawing = canvasRef => {
     const bytes = window.atob(data);
     const buf = new ArrayBuffer(bytes.length);
     const arr = new Uint8Array(buf);
-
     for (let i = 0; i < bytes.length; i++) {
       arr[i] = bytes.charCodeAt(i);
     }
-
     const blob = new Blob([arr], {
       type: mimeType
     });

package/dist/components/Images/ImageStack/index.js

@@ -3,7 +3,6 @@ import Tooltip from '@mui/material/Tooltip';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
-
 const ImageStack = props => {
   //?--------------------------------------------------------
   //?--------------------------------------------------------
@@ -59,7 +58,6 @@ const ImageStack = props => {
     key: 'image_stack_preview_' + idx
   }))))));
 };
-
 export default ImageStack;
 ImageStack.defaultProps = {
   images: [],
@@ -70,13 +68,10 @@ ImageStack.defaultProps = {
 ImageStack.propTypes = {
   /** An array of images with the full URL and image name. */
   images: PropTypes.array,
-
   /** This is the height and width of the image. Needs to be a cube for the stack circle to work properly. */
   imageSize: PropTypes.number,
-
   /** This is orientation of the image stack */
   orientation: PropTypes.oneOf(['vertical', 'horizontal']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Labels/SimpleLabel/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+
 /**
  * ## Importing the component in your project
  * 
@@ -12,7 +13,6 @@ import { createTheme, useTheme } from '@mui/material/styles';
  ```
  * 
  */
-
 export const SimpleLabel = props => {
   const {
     label,
@@ -57,22 +57,16 @@ SimpleLabel.defaultProps = {
 SimpleLabel.propTypes = {
   /** The top text over the value*/
   label: PropTypes.string,
-
   /** The value under the top label*/
   value: PropTypes.string,
-
   /** classes applied to the wrapper of both the label and value */
   classes: PropTypes.string,
-
   /** Font size of the top label */
   labelFontSize: PropTypes.number,
-
   /** Font size of the bottom value */
   valueFontSize: PropTypes.number,
-
   /** Text alignment of the label and value */
   textAlignment: PropTypes.oneOf(['left', 'center', 'right']),
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Layout/SimpleTab/components/TabPanel.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
-import PropTypes from 'prop-types'; //Custom tab panel allow me to specify the styles needed to ensure I can hide the overflow or else I'm having a hard time getting the panel to work without a scroll band
+import PropTypes from 'prop-types';
 
+//Custom tab panel allow me to specify the styles needed to ensure I can hide the overflow or else I'm having a hard time getting the panel to work without a scroll band
 const TabPanel = props => {
   const {
     children,
@@ -22,7 +22,6 @@ const TabPanel = props => {
     className: "w-full h-full"
   }, children));
 };
-
 export default TabPanel;
 TabPanel.propTypes = {
   children: PropTypes.node,

package/dist/components/Layout/SimpleTab/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@mui/material/AppBar';
@@ -17,19 +16,21 @@ const useStyles = makeStyles(() => ({
     minHeight: ({
       tabHeight
     }) => tabHeight,
-    backgroundColor: 'transparent' // textTransform: 'none', //changes so the text is not upper cased
+    backgroundColor: 'transparent'
+    // textTransform: 'none', //changes so the text is not upper cased
     // color: 'white !important',
     // '&:focus': {
     // color: 'orange !important',
     // },
-
   },
+
   indicator: {
     height: 3,
-    borderRadius: 25 // backgroundColor: 'orange',
-
+    borderRadius: 25
+    // backgroundColor: 'orange',
   }
 }));
+
 export const SimpleTab = props => {
   const {
     childrenTabs,
@@ -42,22 +43,20 @@ export const SimpleTab = props => {
   } = props;
   const classes = useStyles({
     tabHeight: variant === 'dense' ? 24 : 48
-  }); //Uses the default mui theme if none is passed.
+  });
 
+  //Uses the default mui theme if none is passed.
   const compTheme = theme ? theme : useTheme();
   const defaultTheme = createTheme(compTheme);
-
   const handleChange = (event, newValue) => {
     setSelectedTabIndex(newValue);
   };
-
   const a11yProps = index => {
     return {
       id: `scrollable-auto-tab-${index}`,
       'aria-controls': `scrollable-auto-tabpanel-${index}`
     };
   };
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
@@ -109,16 +108,12 @@ SimpleTab.propTypes = {
    ```
   */
   childrenTabs: PropTypes.array,
-
   /** Controls the heigh and spacing of the tab control */
   variant: PropTypes.oneOf(['dense', 'normal']),
-
   /** Is the index value of the current selected tab */
   selectedTabIndex: PropTypes.number,
-
   /** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
   setSelectedTabIndex: PropTypes.func,
-
   /** Additional classes passed to the Div wrapper of the <Tabs></Tabs> component.
   * Example: 
   *  - Center tabs 'flex flex-row justify-center w-full'
@@ -126,11 +121,9 @@ SimpleTab.propTypes = {
   *  - Gray background 'bg-gray-200'
   */
   tabsWrapperClassName: PropTypes.string,
-
   /** Additional styles to be applied to the Tab component 
    * Example: {margin:'auto'} */
   tabStyles: PropTypes.object,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Layout/TwoColumnDisplay/index.js

@@ -27,7 +27,6 @@ This component depends on the following component.
 
 
  */
-
 export const TwoColumnDisplay = props => {
   const {
     ColumnOne,
@@ -53,7 +52,6 @@ TwoColumnDisplay.defaultProps = {
 TwoColumnDisplay.propTypes = {
   /** Column one component to display */
   ColumnTwo: PropTypes.element,
-
   /** Column two component to display */
   ColumnTwo: PropTypes.element
 };

package/dist/components/Links/HrefLink/index.js

@@ -6,6 +6,7 @@ import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import clsx from 'clsx';
+
 /**
  * Uses a predefined link style that should be reused throughout the application when a text link is needed to another page on the internet.  This will open a _blank page when the link is clicked.  To control the style of the text simply pass in additional className to the component.
  * 
@@ -18,7 +19,6 @@ import {HrefLink} from 'pcm-shared-components';
 
  * 
  */
-
 export const HrefLink = props => {
   const {
     href,
@@ -52,16 +52,12 @@ HrefLink.defaultProps = {
 HrefLink.propTypes = {
   /** On click link, it's the URL to navigate too */
   href: PropTypes.string.isRequired,
-
   /** className override */
   className: PropTypes.string,
-
   /** Just a tooltip text */
   tooltipText: PropTypes.string,
-
   /** Any text to display as a link*/
   text: PropTypes.string,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Loaders/LoadingBackdrop/index.js

@@ -10,7 +10,6 @@ import WaitingGalaxy from '../../Loaders/WaitingGalaxy';
 import {LoadingBackdrop} from 'pcm-shared-components';
 ```
  */
-
 export const LoadingBackdrop = ({
   isLoading = false,
   useGalaxySpinner
@@ -52,17 +51,18 @@ export const LoadingBackdrop = ({
     className: "half-circle"
   })))))))) : /*#__PURE__*/React.createElement("div", null));
 };
-export default LoadingBackdrop; // Specifies the default values for the props:
+export default LoadingBackdrop;
 
+// Specifies the default values for the props:
 LoadingBackdrop.defaultProps = {
   isLoading: false,
   useGalaxySpinner: false
-}; // Type of
+};
 
+// Type of
 LoadingBackdrop.propTypes = {
   /** Displays the galaxy spinner instead of the circular spinner */
   useGalaxySpinner: PropTypes.bool,
-
   /** Controls if the backdrop is to be displayed */
   isLoading: PropTypes.bool
 };

package/dist/components/Loaders/WaitingGalaxy/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
 import './css/style.css';
+
 /**
  * ## Importing the component in your project
  * 
@@ -13,7 +14,6 @@ import './css/style.css';
  ```
  * 
  */
-
 export const WaitingGalaxy = props => {
   const {
     className,
@@ -41,7 +41,6 @@ WaitingGalaxy.defaultProps = {
 WaitingGalaxy.propTypes = {
   /** Classes applied to the body of the component*/
   className: PropTypes.string,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/Menus/ReusablePopupMenu/components/GenericSubMenu.js

@@ -20,7 +20,6 @@ const StyledMenuItem = withStyles(() => ({
     }
   }
 }))(MenuItem);
-
 const GenericSubMenu = ({
   menu,
   full_menu = true,
@@ -67,21 +66,18 @@ const GenericSubMenu = ({
     }
   }));
   const classes = useStyles();
-
   const openSubMenu = event => {
     setAnchorSubMenu(event.currentTarget);
   };
-
   const handleSubMenuClose = () => {
-    setAnchorSubMenu(false); //Closes the previous parent menu too..
+    setAnchorSubMenu(false);
 
+    //Closes the previous parent menu too..
     if (handleParentMenuClose) {
       handleParentMenuClose();
     }
-
     onClose();
   };
-
   useEffect(() => {
     setSubMenuOpen(Boolean(anchorSubMenu));
   }, [anchorSubMenu]);
@@ -143,5 +139,4 @@ const GenericSubMenu = ({
     checked: sub_menu.isChecked
   }))))));
 };
-
 export default GenericSubMenu;

package/dist/components/Menus/ReusablePopupMenu/components/ReusableMenu.js

@@ -28,16 +28,13 @@ const StyledMenuItem = withStyles(() => ({
     }
   }
 }))(MenuItem);
-
 const handleMenuOnClick = (menu, handleClose) => {
   menu.onClick();
-
   if (typeof menu.isChecked !== "boolean") {
     //This is NOT a menu with a CheckState SO close the menu after the onclick.
     handleClose();
   }
 };
-
 const ReusableMenu = props => {
   const {
     menuAnchor,
@@ -88,23 +85,25 @@ const ReusableMenu = props => {
     checked: menu.isChecked
   }))))));
 };
+export default ReusableMenu;
 
-export default ReusableMenu; // required props for component to work...
-
+// required props for component to work...
 ReusableMenu.propTypes = {
   menuAnchor: PropTypes.element.isRequired,
   handleClose: PropTypes.element.isRequired,
   menuData: PropTypes.element.isRequired
-}; // Specifies the default values for the props:
+};
 
+// Specifies the default values for the props:
 ReusableMenu.defaultProps = {
   menuAnchor: undefined,
   handleClose: undefined,
   menuData: [],
   keepMounted: false,
   menuAnchorLocation: 'center'
-}; // Type of
+};
 
+// Type of
 ReusableMenu.propTypes = {
   menuAnchor: PropTypes.object,
   handleClose: PropTypes.func,

package/dist/components/Menus/ReusablePopupMenu/index.js

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+
 /**
  * Wraps any simple component and generates a simple dropdown menu on the wrapped component.
  * 
@@ -16,7 +17,6 @@ import {ReusablePopupMenu} from 'pcm-shared-components';
 
  * 
  */
-
 export const ReusablePopupMenu = props => {
   const {
     children,
@@ -28,15 +28,12 @@ export const ReusablePopupMenu = props => {
   } = props;
   const [menuAnchor, setMenuAnchor] = useState(null);
   const componentTheme = createTheme(theme ? theme : useTheme());
-
   const onClick = event => {
     setMenuAnchor(event.currentTarget);
   };
-
   const handleClose = () => {
     setMenuAnchor(null);
   };
-
   const hocProps = {
     menuAnchor,
     handleClose,
@@ -53,7 +50,6 @@ export const ReusablePopupMenu = props => {
         onClick
       }));
     }
-
     return child;
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithProps, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -68,13 +64,15 @@ export const createReusablePopupMenuObject = (onClick = undefined, icon = undefi
     name: name,
     isChecked: isChecked
   };
-}; // required props for component to work...
+};
 
+// required props for component to work...
 ReusableMenu.propTypes = {
   children: PropTypes.element.isRequired,
   menuData: PropTypes.element.isRequired
-}; // Specifies the default values for the props:
+};
 
+// Specifies the default values for the props:
 ReusableMenu.defaultProps = {
   children: undefined,
   tooltipTitle: '',
@@ -82,19 +80,18 @@ ReusableMenu.defaultProps = {
   keepMounted: false,
   theme: undefined,
   menuAnchorLocation: 'center'
-}; // Type of
+};
 
+// Type of
 ReusableMenu.propTypes = {
   children: PropTypes.object,
   tooltipTitle: PropTypes.string,
   menuData: PropTypes.array,
   keepMounted: PropTypes.bool,
-
   /**
    * The theme object to apply to this object, if no theme provided then the component will used the default theme passed down by the ThemeProvider
    */
   theme: PropTypes.object,
-
   /** Controls the location of the dropdown popup menu */
   menuAnchorLocation: PropTypes.oneOf(['left', 'center', 'right'])
 };

package/dist/components/NEW_COMPONENT/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+
 /**
  * ## Importing the component in your project
  * 
@@ -12,7 +13,6 @@ import { createTheme, useTheme } from '@mui/material/styles';
  ```
  * 
  */
-
 export const NEW_COMPONENT = props => {
   const {
     i18next,
@@ -32,7 +32,6 @@ NEW_COMPONENT.defaultProps = {
 NEW_COMPONENT.propTypes = {
   /** The i18next needs to be passed in by the component or else they will be blank */
   i18next: PropTypes.any,
-
   /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
   theme: PropTypes.object
 };

package/dist/components/NEW_COMPONENT/storybook/index.stories.js

@@ -12,9 +12,7 @@ export default {
     }
   }
 };
-
 const NEWCOMPONENTTemplate = args => /*#__PURE__*/React.createElement(NEW_COMPONENT, args);
-
 export const NEW_COMPONENTExample = NEWCOMPONENTTemplate.bind({});
 NEW_COMPONENTExample.args = {
   className: '',

package/dist/components/PcSharedComponentThemeInheritor/index.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { createTheme, useTheme, ThemeProvider } from "@mui/material/styles";
+
 /**
  * Used to bridge the gab between MUI4 currently used in the app and MUI5 used in this library.
  * By wrapping the app with this function allows the  MUI5 theme provider to properly receive the theme eliminating the need to pass in the theme manually as a props to each component.
  *
  */
-
 export const PcSharedComponentThemeInheritor = props => {
   const {
     theme,

package/dist/components/Platform/PlatformPaymentPlans/components/PriceToggleButton/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import './style.css';
-
 const PriceToggleButton = props => {
   const {
     isChecked = true,
@@ -20,5 +19,4 @@ const PriceToggleButton = props => {
     className: "toggleContainer"
   }, /*#__PURE__*/React.createElement("div", null, i18next.t('platform_plan_feature.monthly_plans')), /*#__PURE__*/React.createElement("div", null, i18next.t('platform_plan_feature.yearly_plans'))));
 };
-
 export default PriceToggleButton;