Update toolbar service and add active icon in nested button

extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx

@@ -2,32 +2,31 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedMenu({ children }) {
+function NestedMenu({ children, label, icon }) {
   const [isOpen, setIsOpen] = useState(false);
 
-  useEffect(() => {
-    function closeNestedMenu() {
-      if (isOpen) {
-        setIsOpen(false);
-      }
+  const toggleNestedMenu = () => setIsOpen(!isOpen);
+
+  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"
-      label="More"
-      icon="tool-more-menu"
-      onClick={() => {
-        setIsOpen(!isOpen);
-      }}
-      dropdownContent={dropdownContent}
+      id="NestedMenu"
+      label={label}
+      icon={icon}
+      onClick={toggleNestedMenu}
+      dropdownContent={isOpen && children}
       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' };
   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);
+  };
 
   useEffect(() => {
     const { unsubscribe } = ToolBarService.subscribe(
@@ -63,8 +69,8 @@ function ViewerLayout({
       () => {
         console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
         const updatedToolbars = {
-          primary: ToolBarService.getButtonSection('primary'),
-          secondary: ToolBarService.getButtonSection('secondary'),
+          primary: ToolBarService.getButtonSection('primary', { onClick: onPrimaryClickHandler }),
+          secondary: ToolBarService.getButtonSection('secondary', { onClick: onSecondaryClickHandler }),
         };
         setToolbars(updatedToolbars);
       }
@@ -86,11 +92,10 @@ function ViewerLayout({
 
             if (!isNested) {
               const { id, Component, componentProps } = toolDef;
-
               return <Component key={id} id={id} {...componentProps} />;
             } else {
               return (
-                <NestedMenu>
+                <NestedMenu icon={activeTool.icon} label={activeTool.label}>
                   <div className="flex">
                     {toolDef.map(x => {
                       const { id, Component, componentProps } = x;