pcm-shared-components 0.0.84 → 0.0.87

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

@@ -27,6 +27,7 @@ export const GenericDialogWindow = props => {
   const [is_loading, setIsLoading] = useState(false);
   const [managedAppBarMenu, setManagedAppBarMenu] = useState(undefined);
   const [save_button_label, setSaveButtonLabel] = useState(undefined);
+  const [onClickOverride, setOnClickOverride] = useState([]);
   const childRef = useRef();
 
   const onSave = () => {
@@ -47,7 +48,7 @@ export const GenericDialogWindow = props => {
   };
 
   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 {
@@ -59,11 +60,63 @@ export const GenericDialogWindow = props => {
     } 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 = useCallback((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
+    if (!onClickOverride.find(oco => oco.id.toLowerCase() === id.toLowerCase())) {
+      //Nice this override doesn't exist. Add it
+      setOnClickOverride(previousState => {
+        return [...previousState, {
+          id: id,
+          onClick: onClick
+        }];
+      });
+    }
+  }, [appBarMenu]);
+
+  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 => {
+        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) {
-      // 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
       setManagedAppBarMenu({ ...appBarMenu,
         mainMenu: [...appBarMenu.mainMenu.map(mm => {
           if (mm.id === 'save') {
@@ -76,7 +129,10 @@ 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
+      //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]); // -----------------------------------------
   // Note make sure to include disableEnforceFocus or else I'll have infinite error/warnings on Uncaught RangeError.
@@ -97,7 +153,7 @@ export const GenericDialogWindow = props => {
   }, /*#__PURE__*/React.createElement(GenericAppBar, {
     appBarMenu: managedAppBarMenu
   }), /*#__PURE__*/React.createElement(DialogContent, {
-    className: "pt-4 pl-0 pr-0 "
+    className: "pt-4 pl-0 pr-0 h-full w-full"
   }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
     className: "",
     enable: true
@@ -109,7 +165,8 @@ export const GenericDialogWindow = props => {
       setIsLoading,
       setSaveButtonLabel,
       closeDialog,
-      data: data
+      data: data,
+      setMenuOnClickCallback
     },
     ref: childRef
   }) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(DialogActions, {

package/package.json

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