Merge pull request #1806 from OHIF/feat/ohif-151

OHIF-151: Replace the "..." icon in more menu with active tool in menu.

extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx

@@ -2,33 +2,32 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedMenu({ children }) {
+function NestedMenu({ children, label, icon, isActive }) {
   const [isOpen, setIsOpen] = useState(false);
 
-  useEffect(() => {
+  const toggleNestedMenu = () => setIsOpen(!isOpen);
-    function closeNestedMenu() {
+
+  const closeNestedMenu = () => {
     if (isOpen) {
       setIsOpen(false);
     }
-    }
+  };
+
+  useEffect(() => {
     window.addEventListener('click', closeNestedMenu);
     return () => {
       window.removeEventListener('click', closeNestedMenu);
     };
   }, [isOpen]);
 
-  const dropdownContent = isOpen ? children : undefined;
-
   return (
     <ToolbarButton
-      id="More"
+      id="NestedMenu"
-      label="More"
+      label={label}
-      icon="tool-more-menu"
+      icon={icon}
-      onClick={() => {
+      onClick={toggleNestedMenu}
-        setIsOpen(!isOpen);
+      dropdownContent={isOpen && children}
-      }}
+      isActive={isActive || isOpen}
-      dropdownContent={dropdownContent}
-      isActive={isOpen}
       type="primary"
     />
   );
@@ -36,6 +35,13 @@ function NestedMenu({ children }) {
 
 NestedMenu.propTypes = {
   children: PropTypes.any.isRequired,
+  icon: PropTypes.string,
+  label: PropTypes.string,
+};
+
+NestedMenu.defaultProps = {
+  icon: "tool-more-menu",
+  label: "More",
 };
 
 export default NestedMenu;

extensions/default/src/ViewerLayout/index.jsx

@@ -55,7 +55,13 @@ function ViewerLayout({
     };
   };
 
+  const defaultTool = { icon: 'tool-more-menu', label: 'More', isActive: false };
   const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
+  const [activeTool, setActiveTool] = useState(defaultTool);
+
+  const setActiveToolHandler = (tool, isNested) => {
+    setActiveTool(isNested ? tool : defaultTool);
+  };
 
   const onPrimaryClickHandler = (evt, btn) => {
     if (btn.props && btn.props.commands && evt.value && btn.props.commands[evt.value]) {
@@ -70,8 +76,8 @@ function ViewerLayout({
       () => {
         console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
         const updatedToolbars = {
-          primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }),
+          primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler, setActiveTool: setActiveToolHandler }),
-          secondary: ToolBarService.getButtonSection('secondary'),
+          secondary: ToolBarService.getButtonSection('secondary', { setActiveTool: setActiveToolHandler }),
         };
         setToolbars(updatedToolbars);
       }
@@ -93,11 +99,10 @@ function ViewerLayout({
 
             if (!isNested) {
               const { id, Component, componentProps } = toolDef;
-
               return <Component key={id} id={id} {...componentProps} />;
             } else {
               return (
-                <NestedMenu>
+                <NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
                   <div className="flex">
                     {toolDef.map(x => {
                       const { id, Component, componentProps } = x;

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',

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);
@@ -162,7 +164,7 @@ export default class ToolBarService {
     return {
       id,
       Component: component || buttonType.defaultComponent,
-      componentProps: Object.assign({}, btn.props, props, { onClick }), //
+      componentProps: Object.assign({}, btn.props, { onClick }), //
     };
   }
 }

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -25,6 +25,7 @@ const ToolbarButton = ({
   };
 
   const shouldShowDropdown = !!isActive && !!dropdownContent;
+
   return (
     <div key={id}>
       <Tooltip