pcm-shared-components 2.1.106 → 2.1.108

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

@@ -1,13 +1,10 @@
-import React, { Fragment, useState, useEffect } from "react";
-import { Typography, Button, Tooltip, IconButton, Toolbar, MenuItem, Menu, AppBar, Badge } from "@mui/material";
-import { makeStyles } from '@mui/styles';
+import React, { useState, Fragment } from 'react';
+import { Typography, Button, Tooltip, IconButton, Toolbar, MenuItem, Menu, AppBar, Divider } from '@mui/material';
+import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import Divider from '@mui/material/Divider';
-import { ThemeProvider } from '@mui/system';
-import { createTheme, useTheme } from '@mui/material/styles';
-import MoreIcon from "@mui/icons-material/MoreVert";
+import MoreIcon from '@mui/icons-material/MoreVert';
 import GenericAppBarSubMenu from './components/GenericAppBarSubMenu';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 const defaultState = {
   appBarTitle: '',
   showBackButton: true,
@@ -20,72 +17,6 @@ const defaultState = {
 
 /**
  * Generic App Bar component used to create dynamic top bar with dynamic menus.
- * 
- *
- * ## Importing the component
-
-```//PitchCamp shared component
-import {GenericAppBar} from 'pcm-shared-components';
-```
-
-## Component Props
-
-* Expects only one parameters: **appBarMenu**
-* 
-Has three main part to it:
-    * 
-    * - **appBarTitle**: ```String``` controls title
-    * - **showBackButton**: ```Bool``` controls if we show the back arrow button beside the title
-    * - **closeMenu**: ```Object``` controls the back button
-    *   - onClick: ```Callback```
-    *   - name: ```String```
-    * - **mainMenu**: Array controls the main menu items
-    *   - id: ```string``` uniquely identifies the menu so it can be manipulated by other processes
-    *   - onClick: ```Callback```
-    *   - icon: ```Icon```
-    *   - name: ```String```
-    *   - isButton: ```Bool``` controls if the menu is displayed as a Button or and IconButton default is IconButton
-    *   - hideMenu: ```Bool``` controls if the menu item is displayed or not
-    *   - displayDivider: ```Bool``` display a divider after the menu.
-    *   - subMenu: ```Array``` of menus, same structure as the ```mainMenu```
-    * 
-``` js 
-    {
-        appBarTitle: '',
-        showBackButton: true,
-
-        closeMenu:{
-           onClick : callback,
-           name: 'Any tooltip'
-       },
-
-       mainMenu: [
-          {
-            onClick: callback,
-            icon: <Icon/>,
-            name: 'Menu Name',
-            isButton: true,
-            hideMenu: false,
-            displayDivider: true,
-            subMenu:[
-                {
-                onClick: callback,
-                icon: <Icon />,
-                name: 'Sub Menu Name',
-                },
-                {
-                    ...
-                },
-            ]
-          },
-          {
-              ...
-          },
-        ]
-    }
-```
-
- * 
  */
 export const GenericAppBar = props => {
   const {
@@ -98,91 +29,56 @@ export const GenericAppBar = props => {
       ...props.appBarMenu
     }
   };
-  const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme);
-  const useStyles = makeStyles(() => ({
-    root: {
-      flexGrow: 1
-    },
-    menuButton: {
-      marginLeft: -18,
-      fontSize: 20
-    },
-    appContextMenu: {
-      background: "#58524c"
-    },
-    grow: {
-      flexGrow: 1
-    },
-    divider: {
-      borderLeft: "0.1em solid #aeaeae",
-      padding: "0.5em",
-      margin: "10px 10px 10px 10px",
-      height: 5
-    },
-    mobile_divider: {
-      borderBottom: "0.1em solid #aeaeae",
-      width: "100%"
-    },
-    sectionDesktop: {
-      display: "none",
-      [compTheme.breakpoints.up("md")]: {
-        display: "flex"
-      }
-    },
-    sectionMobile: {
-      display: "flex",
-      [compTheme.breakpoints.up("md")]: {
-        display: "none"
-      }
-    },
-    gutters: {
-      paddingRight: 6
-    }
-  }));
-  const classes = useStyles();
 
-  //---------------------------------------------------
-  // Hooks 
-  //---------------------------------------------------
-  const [mobileMoreAnchorEl, setmobileMoreAnchorEl] = useState(null);
+  // Uses the default MUI theme if none is passed.
+  const compTheme = theme || useTheme();
+  const defaultTheme = createTheme(compTheme);
 
   //---------------------------------------------------
-  // Use Effect 
+  // Hooks
   //---------------------------------------------------
+  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
 
   //---------------------------------------------------
-  // Local Functions 
+  // Local Functions
   //---------------------------------------------------
   const handleMobileMenuOpen = event => {
-    setmobileMoreAnchorEl(event.currentTarget);
+    setMobileMoreAnchorEl(event.currentTarget);
   };
   const handleMobileMenuClose = () => {
-    setmobileMoreAnchorEl(null);
+    setMobileMoreAnchorEl(null);
   };
   const handleMenuClose = () => {
     handleMobileMenuClose();
   };
   const menu_divider = /*#__PURE__*/React.createElement(Typography, {
-    className: classes.divider
+    sx: {
+      borderLeft: '0.1em solid #aeaeae',
+      p: '0.5em',
+      m: '10px',
+      height: 5
+    }
   });
   const mobile_menu_divider = /*#__PURE__*/React.createElement(Typography, {
-    className: classes.mobile_divider
+    sx: {
+      borderBottom: '0.1em solid #aeaeae',
+      width: '100%'
+    }
   });
-  const CloseContext = props => {
-    const {
-      onClick,
-      name
-    } = props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      title: name
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      onClick: onClick,
-      className: classes.menuButton,
-      color: "inherit",
-      "aria-label": "Menu"
-    }, /*#__PURE__*/React.createElement(ArrowBackIcon, null)));
-  };
+  const CloseContext = ({
+    onClick,
+    name
+  }) => /*#__PURE__*/React.createElement(Tooltip, {
+    title: name
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClick,
+    color: "inherit",
+    "aria-label": "Menu",
+    sx: {
+      ml: -2.25,
+      fontSize: 20
+    }
+  }, /*#__PURE__*/React.createElement(ArrowBackIcon, null)));
   const TitleContext = () => /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     color: "inherit"
@@ -198,21 +94,20 @@ export const GenericAppBar = props => {
     menu,
     idx
   }) => /*#__PURE__*/React.createElement("div", {
-    key: 'main_menu_bar_items'
+    key: `main_menu_bar_items_mobile_${idx}`
   }, menu.subMenu && menu.subMenu.length > 0 ? /*#__PURE__*/React.createElement("div", {
     key: `menu_bar__${menu.icon}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row",
-    key: `main_sub_items_${new Date()}`
+    key: `main_sub_items_${idx}`
   }, /*#__PURE__*/React.createElement(GenericAppBarSubMenu, {
     menu: menu,
-    classes: classes,
     full_menu: true
   }), menu.displayDivider ? mobile_menu_divider : undefined)) : /*#__PURE__*/React.createElement("div", {
     key: `main_menu_item_${idx}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full",
-    key: `main_sub_items_${new Date()}`
+    key: `main_sub_items_${idx}`
   }, /*#__PURE__*/React.createElement(MenuItem, {
     key: `mobile_menu_item_${idx}`,
     className: "flex flex-row",
@@ -230,34 +125,32 @@ export const GenericAppBar = props => {
     key: `main_menu_bar_items__${idx}`
   }, menu.subMenu && menu.subMenu.length > 0 ? /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row",
-    key: `main_sub_items_${new Date()}`
+    key: `main_sub_items_${idx}`
   }, /*#__PURE__*/React.createElement(GenericAppBarSubMenu, {
     key: `common_grid_app_bar_sub_desktop_${idx}`,
-    menu: menu,
-    classes: classes
-  }), menu.displayDivider ? menu_divider : /*#__PURE__*/React.createElement("div", {
-    className: ""
-  })) : /*#__PURE__*/React.createElement("div", {
+    menu: menu
+  }), menu.displayDivider ? menu_divider : /*#__PURE__*/React.createElement("div", null)) : /*#__PURE__*/React.createElement("div", {
     className: "h-full my-auto",
     key: `main_menu_item_${idx}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-row h-full m-auto",
-    key: `main_sub_items_${new Date()}`
+    key: `main_sub_items_${idx}`
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: menu.name
   }, menu.isButton ? /*#__PURE__*/React.createElement(Button, {
     startIcon: menu.icon,
     color: "inherit",
-    "aria-owns": "menu-appbar",
     onClick: () => {
       menu.onClick();
     }
   }, menu.name) : /*#__PURE__*/React.createElement(IconButton, {
-    className: classes.menuButton,
     color: "inherit",
-    "aria-owns": "menu-appbar",
     onClick: () => {
       menu.onClick();
+    },
+    sx: {
+      ml: -2.25,
+      fontSize: 20
     }
   }, menu.icon)))));
 
@@ -268,17 +161,19 @@ export const GenericAppBar = props => {
   const renderMobileMenu = /*#__PURE__*/React.createElement(Menu, {
     anchorEl: mobileMoreAnchorEl,
     anchorOrigin: {
-      vertical: "top",
-      horizontal: "right"
+      vertical: 'top',
+      horizontal: 'right'
     },
     transformOrigin: {
-      vertical: "top",
-      horizontal: "right"
+      vertical: 'top',
+      horizontal: 'right'
     },
     open: Boolean(mobileMoreAnchorEl),
-    onClose: () => handleMenuClose()
+    onClose: handleMenuClose
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.root
+    style: {
+      flexGrow: 1
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col"
   }, mobile_menu_divider, (appBarMenu.mainMenu || []).map((menu, idx) => /*#__PURE__*/React.createElement(MobileItemMenu, {
@@ -294,8 +189,9 @@ export const GenericAppBar = props => {
     const menuItems = (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true));
     return /*#__PURE__*/React.createElement("div", {
       className: "flex flex-row"
-    }, menuItems.map((menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesktopItemMenu, {
-      key: `desktop_item_menu_${idx}`,
+    }, menuItems.map((menu, idx) => /*#__PURE__*/React.createElement(Fragment, {
+      key: `desktop_item_menu_wrapper_${idx}`
+    }, /*#__PURE__*/React.createElement(DesktopItemMenu, {
       menu: menu,
       idx: idx
     }), idx < menuItems.length - 1 && /*#__PURE__*/React.createElement(React.Fragment, null, menu.displayDivider ? /*#__PURE__*/React.createElement(Divider, {
@@ -314,21 +210,32 @@ export const GenericAppBar = props => {
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.root
+    style: {
+      flexGrow: 1
+    }
   }, /*#__PURE__*/React.createElement(AppBar, {
     position: "static"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     variant: "dense",
-    className: classes.gutters
+    sx: {
+      pr: 0.75 // 6px, replacing classes.gutters
+    }
   }, /*#__PURE__*/React.createElement(React.Fragment, null, appBarMenu.showBackButton && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CloseContext, appBarMenu.closeMenu)), /*#__PURE__*/React.createElement(TitleContext, null), /*#__PURE__*/React.createElement("div", {
-    className: classes.grow
+    style: {
+      flexGrow: 1
+    }
   }), /*#__PURE__*/React.createElement("div", {
-    className: classes.sectionDesktop
+    // Desktop
+    style: {
+      display: 'none'
+    },
+    className: "hidden md:flex"
   }, /*#__PURE__*/React.createElement(MainItems, null)), /*#__PURE__*/React.createElement("div", {
-    className: classes.sectionMobile
+    // Mobile
+    className: "flex md:hidden"
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-haspopup": "true",
-    onClick: event => handleMobileMenuOpen(event),
+    onClick: handleMobileMenuOpen,
     color: "inherit"
   }, /*#__PURE__*/React.createElement(MoreIcon, null)))))), renderMobileMenu));
 };
@@ -340,10 +247,10 @@ GenericAppBar.defaultProps = {
   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 object to use on this component, if none provided then the MUI theme provider theme is used */
   theme: PropTypes.object
 };

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, cloneElement } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, Toolbar, AppBar } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { ThemeProvider } from '@mui/system';
@@ -163,7 +163,7 @@ export const GenericDialogWindow = props => {
     enable: true
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full h-full "
-  }, component ? /*#__PURE__*/React.cloneElement(component, {
+  }, component ? /*#__PURE__*/cloneElement(component, {
     parentProps: {
       canSave,
       setCanSave,

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

@@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect, cloneElement } from 'react';
+import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, Toolbar, AppBar } from '@mui/material';
+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 PerfectScrollbar from '../../Tools/PCMScrollbar';
+import GenericAppBar from '../GenericAppBar';
+import PropTypes from 'prop-types';
+let debounce;
+export const GenericDialogWindow = props => {
+  const {
+    open,
+    component,
+    data,
+    showSaveButton = false,
+    showBackButton = true,
+    dialogSize = 'false',
+    appBarMenu = undefined,
+    fullWidth = false,
+    closeOnBackdropClick,
+    theme
+  } = props;
+  const compTheme = theme ? theme : useTheme();
+  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(() => {
+      //! Allows this parent component to call a sub function inside of the child component
+      childRef.current ? childRef.current.childRefSave() : undefined;
+    }, 300);
+  };
+  const closeDialog = () => {
+    //returns the onClick function assigned to the appBarMenu.closeMenu.onClick
+    try {
+      appBarMenu.closeMenu.onClick();
+    } catch (error) {
+      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.
+    // 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)) {
+      for (var i = 0; i < obj.length; i++) {
+        updateObjectByID(obj[i], id, onClick);
+      }
+    } 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.
+    // A menu must have a unique id object matching the id on which we are searching for and a callback function must be provided
+    //Need to filter out previous ids and add the new ones
+    setOnClickOverride(previousState => {
+      return [...previousState.filter(ps => ps.id !== id), {
+        id: id,
+        onClick: onClick
+      }];
+    });
+  };
+  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,
+              mainMenu: updateObjectByID(previousState.mainMenu, item.id, item.onClick)
+            };
+          });
+        }
+      });
+    } catch (error) {
+      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,
+        mainMenu: [...appBarMenu.mainMenu.map(mm => {
+          if (mm.id && mm.id === 'save') {
+            return {
+              ...mm,
+              onClick: onSave,
+              name: save_button_label ? save_button_label : mm.name,
+              hideMenu: !(canSave && showSaveButton)
+            };
+          } else {
+            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
+      //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, {
+    disableEnforceFocus: true,
+    open: open,
+    onClose: handleOnClose,
+    maxWidth: dialogSize,
+    fullScreen: dialogSize && !fullWidth ? false : true,
+    fullWidth: fullWidth,
+    className: ""
+  }, /*#__PURE__*/React.createElement(GenericAppBar, {
+    appBarMenu: managedAppBarMenu
+  }), /*#__PURE__*/React.createElement(DialogContent, {
+    className: "pt-4 pl-0 pr-0 h-full"
+  }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    className: "w-fit",
+    enable: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full "
+  }, component ? /*#__PURE__*/cloneElement(component, {
+    parentProps: {
+      canSave,
+      setCanSave,
+      isLoading,
+      setIsLoading,
+      setSaveButtonLabel,
+      closeDialog,
+      data: data,
+      setMenuOnClickCallback
+    },
+    ref: childRef
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null)))), showSaveButton && /*#__PURE__*/React.createElement(DialogActions, {
+    className: "my-4 w-fit"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-start w-full"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: `${dialogSize === 'sm' || dialogSize === 'xs' || dialogSize === 'md' ? 'w-full' : 'w-auto'}`,
+    variant: "contained",
+    color: "primary",
+    onClick: onSave,
+    disabled: !canSave
+  }, save_button_label ? save_button_label : getSaveButtonLabel()))), /*#__PURE__*/React.createElement(LoadingBackdrop, {
+    isLoading: isLoading
+  })));
+};
+export default GenericDialogWindow;
+GenericDialogWindow.defaultProps = {
+  open: false,
+  component: undefined,
+  data: undefined,
+  showSaveButton: true,
+  showBackButton: true,
+  appBarMenu: undefined,
+  dialogSize: false,
+  fullWidth: false,
+  closeOnBackdropClick: false,
+  theme: undefined
+};
+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
+};