pcm-shared-components 0.0.166 → 0.0.169

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

@@ -8,6 +8,15 @@ import { createTheme, useTheme } from '@mui/material/styles';
 import MoreIcon from "@mui/icons-material/MoreVert";
 import GenericAppBarSubMenu from './components/GenericAppBarSubMenu';
 import PropTypes from "prop-types";
+const defaultState = {
+  appBarTitle: '',
+  showBackButton: true,
+  closeMenu: {
+    onClick: () => {},
+    name: ''
+  },
+  mainMenu: []
+};
 /**
  * Generic App Bar component used to create dynamic top bar with dynamic menus.
  * 
@@ -25,6 +34,7 @@ import {GenericAppBar} from 'pcm-shared-components';
 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```
@@ -41,6 +51,7 @@ Has three main part to it:
 ``` js 
     {
         appBarTitle: '',
+        showBackButton: true,
 
         closeMenu:{
            onClick : callback,
@@ -80,7 +91,11 @@ export const GenericAppBar = props => {
   const {
     appBarMenu,
     theme
-  } = props;
+  } = { ...props,
+    appBarMenu: { ...defaultState,
+      ...props.appBarMenu
+    }
+  };
   const compTheme = theme ? theme : useTheme();
   const defaultTheme = createTheme(compTheme);
   const useStyles = makeStyles(() => ({
@@ -230,8 +245,7 @@ export const GenericAppBar = props => {
     key: `main_sub_items_${new Date()}`
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: menu.name
-  }, menu.isButton ? /*#__PURE__*/React.createElement(Button // className={classes.menuButton}
-  , {
+  }, menu.isButton ? /*#__PURE__*/React.createElement(Button, {
     startIcon: menu.icon,
     color: "inherit",
     "aria-owns": "menu-appbar",
@@ -294,12 +308,7 @@ export const GenericAppBar = props => {
         marginRight: 24
       }
     })))));
-  }; // const MainItemMenu = () => (
-  //     <div className='flex flex-row'>
-  //         <MainItems key='main_item_id' />
-  //     </div>
-  // );
-
+  };
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: defaultTheme
@@ -310,7 +319,7 @@ export const GenericAppBar = props => {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     variant: "dense",
     className: classes.gutters
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CloseContext, appBarMenu.closeMenu)), /*#__PURE__*/React.createElement(TitleContext, null), /*#__PURE__*/React.createElement("div", {
+  }, /*#__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
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionDesktop
@@ -325,7 +334,7 @@ export const GenericAppBar = props => {
 export default GenericAppBar; // Specifies the default values for the props:
 
 GenericAppBar.defaultProps = {
-  appBarMenu: {},
+  appBarMenu: defaultState,
   theme: undefined
 }; //Define the types associated with the prop types
 

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

@@ -14,9 +14,11 @@ export const GenericDialogWindow = props => {
     component,
     data,
     showSaveButton = false,
+    showBackButton = true,
     dialogSize = 'false',
     appBarMenu = undefined,
     fullWidth = false,
+    closeOnBackdropClick,
     theme
   } = props;
   const compTheme = theme ? theme : useTheme();
@@ -134,19 +136,25 @@ export const GenericDialogWindow = props => {
       //Need to re-apply any onClick override to ensure they are still properly set by what was overridden from the child component.
       // setOverrides();
     }
-  }, [appBarMenu, can_save, showSaveButton, save_button_label]); // -----------------------------------------
+  }, [appBarMenu, can_save, 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: closeDialog,
-    onBackdropClick: false,
+    onClose: handleOnClose,
     maxWidth: dialogSize,
     fullScreen: dialogSize && !fullWidth ? false : true,
     fullWidth: fullWidth,
@@ -190,9 +198,11 @@ GenericDialogWindow.defaultProps = {
   component: undefined,
   data: undefined,
   showSaveButton: true,
+  showBackButton: true,
   appBarMenu: undefined,
   dialogSize: false,
   fullWidth: false,
+  closeOnBackdropClick: false,
   theme: undefined
 };
 GenericDialogWindow.propTypes = {
@@ -208,6 +218,9 @@ GenericDialogWindow.propTypes = {
   /** 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,
 
@@ -217,6 +230,9 @@ GenericDialogWindow.propTypes = {
   /**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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.166",
+  "version": "0.0.169",
   "private": false,
   "main": "dist/index.js",
   "babel": {