pcm-shared-components 2.0.14 → 2.0.16

package/dist/components/Dialogs/GenericAppBar/components/GenericAppBarSubMenu.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Tooltip, IconButton, MenuItem, Menu } from "@mui/material";
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-
 const GenericAppBarSubMenu = ({
   menu,
   classes,
@@ -10,18 +9,17 @@ const GenericAppBarSubMenu = ({
 }) => {
   const [anchorSubMenu, setAnchorSubMenu] = useState(false);
   const [isSubMenuOpen, setSubMenuOpen] = useState(false);
-
   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();
-    } // handleMobileMenuClose();
-
+    }
+    // handleMobileMenuClose();
   };
 
   useEffect(() => {
@@ -79,5 +77,4 @@ const GenericAppBarSubMenu = ({
     color: "inherit"
   }, sub_menu.icon), /*#__PURE__*/React.createElement("p", null, sub_menu.name))))));
 };
-
 export default GenericAppBarSubMenu;

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

@@ -17,6 +17,7 @@ const defaultState = {
   },
   mainMenu: []
 };
+
 /**
  * Generic App Bar component used to create dynamic top bar with dynamic menus.
  * 
@@ -86,13 +87,14 @@ Has three main part to it:
 
  * 
  */
-
 export const GenericAppBar = props => {
   const {
     appBarMenu,
     theme
-  } = { ...props,
-    appBarMenu: { ...defaultState,
+  } = {
+    ...props,
+    appBarMenu: {
+      ...defaultState,
       ...props.appBarMenu
     }
   };
@@ -138,36 +140,35 @@ export const GenericAppBar = props => {
       paddingRight: 6
     }
   }));
-  const classes = useStyles(); //---------------------------------------------------
+  const classes = useStyles();
+
+  //---------------------------------------------------
   // Hooks 
   //---------------------------------------------------
+  const [mobileMoreAnchorEl, setmobileMoreAnchorEl] = useState(null);
 
-  const [mobileMoreAnchorEl, setmobileMoreAnchorEl] = useState(null); //---------------------------------------------------
+  //---------------------------------------------------
   // Use Effect 
   //---------------------------------------------------
+
   //---------------------------------------------------
   // Local Functions 
   //---------------------------------------------------
-
   const handleMobileMenuOpen = event => {
     setmobileMoreAnchorEl(event.currentTarget);
   };
-
   const handleMobileMenuClose = () => {
     setmobileMoreAnchorEl(null);
   };
-
   const handleMenuClose = () => {
     handleMobileMenuClose();
   };
-
   const menu_divider = /*#__PURE__*/React.createElement(Typography, {
     className: classes.divider
   });
   const mobile_menu_divider = /*#__PURE__*/React.createElement(Typography, {
     className: classes.mobile_divider
   });
-
   const CloseContext = props => {
     const {
       onClick,
@@ -182,17 +183,17 @@ export const GenericAppBar = props => {
       "aria-label": "Menu"
     }, /*#__PURE__*/React.createElement(ArrowBackIcon, null)));
   };
-
   const TitleContext = () => /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     color: "inherit"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row"
-  }, appBarMenu.appBarTitle)); //? ------------------------------------------------
+  }, appBarMenu.appBarTitle));
+
+  //? ------------------------------------------------
   //! Menu Items
   //? ------------------------------------------------
 
-
   const MobileItemMenu = ({
     menu,
     idx
@@ -222,7 +223,6 @@ export const GenericAppBar = props => {
   }, /*#__PURE__*/React.createElement(IconButton, {
     color: "inherit"
   }, menu.icon), /*#__PURE__*/React.createElement("p", null, menu.name)), menu.displayDivider ? mobile_menu_divider : undefined)));
-
   const DesktopItemMenu = ({
     menu,
     idx
@@ -259,11 +259,12 @@ export const GenericAppBar = props => {
     onClick: () => {
       menu.onClick();
     }
-  }, menu.icon))))); //? ------------------------------------------------
+  }, menu.icon)))));
+
+  //? ------------------------------------------------
   //! Mobile menu
   //? ------------------------------------------------
 
-
   const renderMobileMenu = /*#__PURE__*/React.createElement(Menu, {
     anchorEl: mobileMoreAnchorEl,
     anchorOrigin: {
@@ -284,10 +285,11 @@ export const GenericAppBar = props => {
     key: `mobile_item_menu_${idx}`,
     menu: menu,
     idx: idx
-  })), /*#__PURE__*/React.createElement("div", null, mobile_menu_divider)))); //? ------------------------------------------------
+  })), /*#__PURE__*/React.createElement("div", null, mobile_menu_divider))));
+
+  //? ------------------------------------------------
   //! Main Menu Items
   //? ------------------------------------------------
-
   const MainItems = () => {
     const menuItems = (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true));
     return /*#__PURE__*/React.createElement("div", {
@@ -309,7 +311,6 @@ export const GenericAppBar = props => {
       }
     })))));
   };
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
@@ -331,17 +332,18 @@ export const GenericAppBar = props => {
     color: "inherit"
   }, /*#__PURE__*/React.createElement(MoreIcon, null)))))), renderMobileMenu));
 };
-export default GenericAppBar; // Specifies the default values for the props:
+export default GenericAppBar;
 
+// Specifies the default values for the props:
 GenericAppBar.defaultProps = {
   appBarMenu: defaultState,
   theme: undefined
-}; //Define the types associated with the prop types
+};
 
+//Define the types associated with the prop types
 GenericAppBar.propTypes = {
   /** The menu structure used to control the menu: */
   appBarMenu: PropTypes.object.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/Dialogs/GenericDialogWindow/index.js

@@ -22,17 +22,17 @@ export const GenericDialogWindow = props => {
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme); //---------------------------------------------------
+  const defaultTheme = createTheme(compTheme);
+
+  //---------------------------------------------------
   // Hooks 
   //---------------------------------------------------
-
   const [canSave, setCanSave] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [managedAppBarMenu, setManagedAppBarMenu] = useState(undefined);
   const [save_button_label, setSaveButtonLabel] = useState(undefined);
   const [onClickOverride, setOnClickOverride] = useState([]);
   const childRef = useRef();
-
   const onSave = () => {
     clearTimeout(debounce);
     debounce = setTimeout(() => {
@@ -40,7 +40,6 @@ export const GenericDialogWindow = props => {
       childRef.current ? childRef.current.childRefSave() : undefined;
     }, 300);
   };
-
   const closeDialog = () => {
     //returns the onClick function assigned to the appBarMenu.closeMenu.onClick
     try {
@@ -49,28 +48,24 @@ export const GenericDialogWindow = props => {
       console.error('Error no onClose function found in the appBarMenu.closeMenu, Please ensure the dialog has a valid closeMenu with a close function assigned to the onClick', error);
     }
   };
-
   const getSaveButtonLabel = () => {
-    let return_value = 'Save'; //returns the save label for the save button in the bottom right of the dialog.
+    let return_value = 'Save';
+    //returns the save label for the save button in the bottom right of the dialog.
     // The save label is taken from the mainMenu name item having an id='save'
-
     try {
       const save_menu = appBarMenu.mainMenu.find(mm => mm.id === 'save');
-
       if (save_menu && save_menu.name) {
         return_value = save_menu.name;
       }
     } catch (error) {}
-
     return return_value;
-  }; //?-------------------------------------------------------
+  };
+
+  //?-------------------------------------------------------
   //? Children on click callback override, updates the onclick for a given menu
   //?-------------------------------------------------------
-
-
   const updateObjectByID = (obj, id, onClick) => {
     if (!obj) return;
-
     if (obj.id && obj.id === id) {
       obj.onClick = onClick;
     } else if (typeof obj === 'object' && Array.isArray(obj)) {
@@ -80,10 +75,8 @@ export const GenericDialogWindow = props => {
     } else if (obj.subMenu) {
       updateObjectByID(obj.subMenu, id, onClick);
     }
-
     return obj;
   };
-
   const setMenuOnClickCallback = (id, onClick) => {
     //Used to set the onClick callback on a specific menu matching the id provided.
     //Example: Used by the children component to set the onClick of a menu.
@@ -96,14 +89,15 @@ export const GenericDialogWindow = props => {
       }];
     });
   };
-
   const setOverrides = () => {
     try {
       //Loop over all our on click overrides and apply the onClick callback for each id found in the onClickOverride state
+
       onClickOverride.forEach(item => {
         if (item && item.id) {
           setManagedAppBarMenu(previousState => {
-            return { ...previousState,
+            return {
+              ...previousState,
               mainMenu: updateObjectByID(previousState.mainMenu, item.id, item.onClick)
             };
           });
@@ -113,17 +107,18 @@ export const GenericDialogWindow = props => {
       console.error('Error in setMenuOnClickCallback: ', error);
     }
   };
-
   useEffect(() => {
     //Wait for the state to be updated then loop over the overrides to ensure they are properly applied
     setOverrides();
   }, [onClickOverride]);
   useEffect(() => {
     if (appBarMenu && appBarMenu.mainMenu && appBarMenu.mainMenu.length > 0) {
-      setManagedAppBarMenu({ ...appBarMenu,
+      setManagedAppBarMenu({
+        ...appBarMenu,
         mainMenu: [...appBarMenu.mainMenu.map(mm => {
           if (mm.id && mm.id === 'save') {
-            return { ...mm,
+            return {
+              ...mm,
               onClick: onSave,
               name: save_button_label ? save_button_label : mm.name,
               hideMenu: !(canSave && showSaveButton)
@@ -132,23 +127,23 @@ export const GenericDialogWindow = props => {
             return mm;
           }
         })]
-      }); // If we have a mainMenu item with the id='save' then override the onClick event to use the onSave function which reaches into the child ref
+      });
+
+      // If we have a mainMenu item with the id='save' then override the onClick event to use the onSave function which reaches into the child ref
       //Need to re-apply any onClick override to ensure they are still properly set by what was overridden from the child component.
       // setOverrides();
     }
   }, [appBarMenu, canSave, showSaveButton, save_button_label]);
-
   const handleOnClose = (event, reason) => {
     if (reason !== 'backdropClick' || closeOnBackdropClick) {
       closeDialog();
     }
-  }; // -----------------------------------------
+  };
+  // -----------------------------------------
   // Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.
   // I think this error comes only after a state has changed when multiple dialog windows are open they are fighting for focus.
   // Bug: https://github.com/mui/material-ui/issues/8741
   // -----------------------------------------
-
-
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement(Dialog, {
@@ -210,31 +205,22 @@ GenericDialogWindow.defaultProps = {
 GenericDialogWindow.propTypes = {
   /** Controls weather to open or close the dialog */
   open: PropTypes.bool,
-
   /** Any React component to be displayed inside of the dialog body */
   component: PropTypes.element,
-
   /** Any data needing to be passed down to the child component */
   data: PropTypes.any,
-
   /** To display or hide the save button on the dialog  */
   showSaveButton: PropTypes.bool,
-
   /** To display or hide the back button in the top left corner  */
   showBackButton: PropTypes.bool,
-
   /** Same props as the GenericAppBar component... */
   appBarMenu: PropTypes.object,
-
   /** Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.*/
   dialogSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
-
   /**If true, the dialog stretches to maxWidth. Notice that the dialog width grow is limited by the default margin. */
   fullWidth: PropTypes.bool,
-
   /**Determines if the dialog window will close when the user clicks on the backdrop area */
   closeOnBackdropClick: PropTypes.bool,
-
   /** 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/CanvasPaint/index.js

@@ -1,59 +1,59 @@
 import React, { useEffect, useRef } from 'react';
-import tinycolor from "tinycolor2"; // Brush colour and size
+import tinycolor from "tinycolor2";
+// Brush colour and size
+
 // // Geometry
+
 // // Drawing functions
+
 // // Event helpers
+
 // // Event handlers
 
 export const CanvasPain = () => {
   const canvas = useRef();
-  let context; //   // Set up our drawing context
+  let context;
+
+  //   // Set up our drawing context
   // // const canvas = document.getElementById("canvas");
+
   // canvas.current.width = window.innerWidth;
   // canvas.current.height = window.innerHeight - 10;
-
   let colour;
   const strokeWidth = 40;
-  const varyBrightness = 5; // Drawing state
+  const varyBrightness = 5;
 
+  // Drawing state
   let latestPoint;
   let drawing = false;
   let currentAngle;
-
   const mouseDown = evt => {
     if (drawing) {
       return;
     }
-
     evt.preventDefault();
     canvas.current.addEventListener("mousemove", mouseMove, false);
     startStroke([evt.offsetX, evt.offsetY]);
   };
-
   const mouseEnter = evt => {
     if (!mouseButtonIsDown(evt.buttons) || drawing) {
       return;
     }
-
     mouseDown(evt);
   };
-
   const endStroke = evt => {
     if (!drawing) {
       return;
     }
-
     drawing = false;
     evt.currentTarget.removeEventListener("mousemove", mouseMove, false);
   };
-
   const continueStroke = newPoint => {
     const newAngle = getNewAngle(latestPoint, newPoint, currentAngle);
     drawStroke(currentBrush, latestPoint, newPoint, currentAngle, newAngle);
     currentAngle = newAngle % (Math.PI * 2);
     latestPoint = newPoint;
   };
-
   const startStroke = point => {
     colour = document.getElementById("colourInput").value;
     currentAngle = undefined;
@@ -61,48 +61,38 @@ export const CanvasPain = () => {
     drawing = true;
     latestPoint = point;
   };
-
   const touchStart = evt => {
     if (drawing) {
       return;
     }
-
     evt.preventDefault();
     startStroke(getTouchPoint(evt));
   };
-
   const mouseMove = evt => {
     if (!drawing) {
       return;
     }
-
     continueStroke([evt.offsetX, evt.offsetY]);
   };
-
   const touchMove = evt => {
     if (!drawing) {
       return;
     }
-
     continueStroke(getTouchPoint(evt));
   };
-
   const touchEnd = evt => {
     drawing = false;
   };
-
   const varyColour = sourceColour => {
     const amount = Math.round(Math.random() * 2 * varyBrightness);
     const c = tinycolor(sourceColour);
     const varied = amount > varyBrightness ? c.brighten(amount - varyBrightness) : c.darken(amount);
     return varied.toHexString();
   };
-
   const makeBrush = size => {
     const brush = [];
     let bristleCount = Math.round(size / 3);
     const gap = strokeWidth / bristleCount;
-
     for (let i = 0; i < bristleCount; i++) {
       const distance = i === 0 ? 0 : gap * i + Math.random() * gap / 2 - gap / 2;
       brush.push({
@@ -111,33 +101,24 @@ export const CanvasPain = () => {
         colour: varyColour(colour)
       });
     }
-
     return brush;
   };
-
   let currentBrush = makeBrush(strokeWidth);
-
   const getNewAngle = (origin, destination, oldAngle) => {
     const bearing = getBearing(origin, destination);
-
     if (typeof oldAngle === "undefined") {
       console.log(bearing);
       return bearing;
     }
-
     return oldAngle - angleDiff(oldAngle, bearing);
   };
-
   const rotatePoint = (distance, angle, origin) => [origin[0] + distance * Math.cos(angle), origin[1] + distance * Math.sin(angle)];
-
   const getBearing = (origin, destination) => (Math.atan2(destination[1] - origin[1], destination[0] - origin[0]) - Math.PI / 2) % (Math.PI * 2);
-
   const angleDiff = (angleA, angleB) => {
     const twoPi = Math.PI * 2;
     const diff = (angleA - (angleB > 0 ? angleB : angleB + twoPi) + Math.PI) % twoPi - Math.PI;
     return diff < -Math.PI ? diff + twoPi : diff;
   };
-
   const drawStroke = (bristles, origin, destination, oldAngle, newAngle) => {
     bristles.forEach(bristle => {
       context.beginPath();
@@ -148,7 +129,6 @@ export const CanvasPain = () => {
       strokeBristle(bristleOrigin, bristleDestination, bristle, controlPoint);
     });
   };
-
   const strokeBristle = (origin, destination, bristle, controlPoint) => {
     context.beginPath();
     context.moveTo(origin[0], origin[1]);
@@ -162,22 +142,17 @@ export const CanvasPain = () => {
     context.lineTo(destination[0], destination[1]);
     context.stroke();
   };
-
   const getTouchPoint = evt => {
     if (!evt.currentTarget) {
       return [0, 0];
     }
-
     const rect = evt.currentTarget.getBoundingClientRect();
     const touch = evt.targetTouches[0];
     console.log(rect, touch);
     return [touch.clientX - rect.left, touch.clientY - rect.top];
   };
-
   const BUTTON = 0b01;
-
   const mouseButtonIsDown = buttons => (BUTTON & buttons) === BUTTON;
-
   useEffect(() => {
     // Register event handlers
     canvas.current.addEventListener("touchstart", touchStart, false);

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

@@ -41,11 +41,9 @@ export const toBase64 = async blob => {
     console.error('Error in toBase64 function of hte ImageCanvasDraw component: ', error);
   }
 };
-
 function valueLabelFormat(value) {
   return imageScaleMarks.findIndex(mark => mark.value === value) + 0.5;
 }
-
 const exportImage = async (thisFunction, saveableCanvas, outputFormat, imageCompressionOptions) => {
   try {
     const {
@@ -69,7 +67,6 @@ const exportImage = async (thisFunction, saveableCanvas, outputFormat, imageComp
     console.log('error in exportImage in ImageCanvasDraw comp: ', error);
   }
 };
-
 const Controls = props => {
   const {
     state,
@@ -89,7 +86,8 @@ const Controls = props => {
     color: state.color,
     onChange: (color, event) => {
       setState(previousState => {
-        return { ...previousState,
+        return {
+          ...previousState,
           color: rgbToHex(color.rgb)
         };
       });
@@ -108,7 +106,8 @@ const Controls = props => {
     value: state.lazyRadius,
     onChange: event => {
       setState(previousState => {
-        return { ...previousState,
+        return {
+          ...previousState,
           lazyRadius: Number(event.target.value)
         };
       });
@@ -130,7 +129,8 @@ const Controls = props => {
     value: state.brushRadius,
     onChange: event => {
       setState(previousState => {
-        return { ...previousState,
+        return {
+          ...previousState,
           brushRadius: Number(event.target.value)
         };
       });
@@ -149,16 +149,20 @@ const Controls = props => {
     defaultValue: 1.5,
     valueLabelFormat: valueLabelFormat,
     "aria-labelledby": "image-scale",
-    step: null // valueLabelDisplay="auto"
+    step: null
+    // valueLabelDisplay="auto"
     ,
     value: state.imageScale,
     onChange: event => {
       setState(previousState => {
-        return { ...previousState,
+        return {
+          ...previousState,
           imageScale: Number(event.target.value)
         };
-      }); // saveableCanvas.current.eraseAll();
+      });
+      // saveableCanvas.current.eraseAll();
     },
+
     marks: imageScaleMarks,
     min: 1.5,
     max: 2.5
@@ -188,5 +192,4 @@ const Controls = props => {
     }
   }, "Download")));
 };
-
 export default Controls;