From 3f0619848bd60992a0f488c2f35032e7a56a61de Mon Sep 17 00:00:00 2001
From: igoroctaviano <igoroctaviano@gmail.com>
Date: Thu, 25 Jun 2020 16:03:06 -0300
Subject: [PATCH] Update code to avoid intercepting onclick

---
 extensions/default/src/ViewerLayout/index.jsx     | 10 +++++-----
 extensions/default/src/getToolbarModule.js        | 10 +++++++---
 .../src/services/ToolBarService/ToolBarService.js | 15 +++++++--------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx
index 8a92a2d93..0e9a58904 100644
--- a/extensions/default/src/ViewerLayout/index.jsx
+++ b/extensions/default/src/ViewerLayout/index.jsx
@@ -58,9 +58,9 @@ function ViewerLayout({
   const defaultTool = { icon: 'tool-more-menu', label: 'More' };
   const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
   const [activeTool, setActiveTool] = useState(defaultTool);
-  const onSecondaryClickHandler = () => setActiveTool(defaultTool);
-  const onPrimaryClickHandler = (evt, btn) => {
-    setActiveTool(btn.props.isActive ? btn.props : defaultTool);
+
+  const setActiveToolHandler = (tool, isNested) => {
+    setActiveTool(isNested ? tool : defaultTool);
   };
 
   useEffect(() => {
@@ -69,8 +69,8 @@ function ViewerLayout({
       () => {
         console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
         const updatedToolbars = {
-          primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }),
-          secondary: ToolBarService.getButtonSection('secondary', { onClick: onSecondaryClickHandler }),
+          primary: ToolBarService.getButtonSection('primary', { setActiveTool: setActiveToolHandler }),
+          secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }),
         };
         setToolbars(updatedToolbars);
       }
diff --git a/extensions/default/src/getToolbarModule.js b/extensions/default/src/getToolbarModule.js
index 4cc66fda3..293e5cc43 100644
--- a/extensions/default/src/getToolbarModule.js
+++ b/extensions/default/src/getToolbarModule.js
@@ -9,7 +9,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     {
       name: 'ohif.divider',
       defaultComponent: ToolbarDivider,
-      clickHandler: () => {},
+      clickHandler: () => { },
     },
     {
       name: 'ohif.action',
@@ -30,7 +30,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
       optionalConfig: [],
       requiredProps: [],
       optionalProps: [],
-      clickHandler: (evt, clickedBtn, btnSectionName) => {
+      clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => {
         const { props } = clickedBtn;
         const allButtons = toolbarService.getButtons();
 
@@ -47,6 +47,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
             clickedBtn.config.groupName === btn.config.groupName
           ) {
             btn.props.isActive = false;
+
+            if (viewerProps.setActiveTool) {
+              viewerProps.setActiveTool(props, metadata.isNested);
+            }
           }
         });
 
@@ -63,7 +67,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     {
       name: 'ohif.layoutSelector',
       defaultComponent: ToolbarLayoutSelector,
-      clickHandler: (evt, clickedBtn, btnSectionName) => {},
+      clickHandler: (evt, clickedBtn, btnSectionName) => { },
     },
     {
       name: 'ohif.toggle',
diff --git a/platform/core/src/services/ToolBarService/ToolBarService.js b/platform/core/src/services/ToolBarService/ToolBarService.js
index 589839448..08cc1e3cb 100644
--- a/platform/core/src/services/ToolBarService/ToolBarService.js
+++ b/platform/core/src/services/ToolBarService/ToolBarService.js
@@ -79,7 +79,8 @@ export default class ToolBarService {
 
         btnIds.forEach(nestedBtnId => {
           const nestedBtn = this.buttons[nestedBtnId];
-          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, props);
+          const metadata = { isNested: true };
+          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props);
 
           nestedButtons.push(mappedNestedBtn);
         });
@@ -90,7 +91,8 @@ export default class ToolBarService {
       } else {
         const btnId = btnIdOrArray;
         const btn = this.buttons[btnId];
-        const mappedBtn = this._mapButtonToDisplay(btn, key, props);
+        const metadata = { isNested: false };
+        const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props);
 
         buttonsInSection.push(mappedBtn);
       }
@@ -136,7 +138,7 @@ export default class ToolBarService {
    * @param {*} btn
    * @param {*} btnSection
    */
-  _mapButtonToDisplay(btn, btnSection, props) {
+  _mapButtonToDisplay(btn, btnSection, metadata, props) {
     const { id, type, component } = btn;
     const buttonType = this._buttonTypes()[type];
 
@@ -146,7 +148,7 @@ export default class ToolBarService {
 
     const onClick = evt => {
       if (buttonType.clickHandler) {
-        buttonType.clickHandler(evt, btn, btnSection);
+        buttonType.clickHandler(evt, btn, btnSection, metadata, props);
       }
       if (btn.props.onClick) {
         btn.onClick(evt, btn, btnSection);
@@ -154,15 +156,12 @@ export default class ToolBarService {
       if (btn.props.clickHandler) {
         btn.clickHandler(evt, btn, btnSection);
       }
-      if (props && props.onClick) {
-        props.onClick(evt, btn, btnSection, props);
-      }
     };
 
     return {
       id,
       Component: component || buttonType.defaultComponent,
-      componentProps: Object.assign({}, btn.props, props, { onClick }), //
+      componentProps: Object.assign({}, btn.props, { onClick }), //
     };
   }
 }