Prefer direct ToolbarButtons usage over ToolbarSection

src/App.js

@@ -4,16 +4,15 @@ import {
   CommandsManager,
   ExtensionManager,
   HotkeysManager,
-  redux,
   utils,
 } from 'ohif-core';
 import React, { Component } from 'react';
 import {
-  getDefaultToolbarButtons,
   getUserManagerForOpenIdConnectClient,
   initWebWorkers,
 } from './utils/index.js';
 
+import { I18nextProvider } from 'react-i18next';
 // import ConnectedToolContextMenu from './connectedComponents/ConnectedToolContextMenu';
 import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
 // import OHIFDicomHtmlExtension from 'ohif-dicom-html-extension';
@@ -27,9 +26,8 @@ import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import WhiteLabellingContext from './WhiteLabellingContext';
 import appCommands from './appCommands';
-import setupTools from './setupTools';
 import i18n from '@ohif/i18n';
-import { I18nextProvider } from 'react-i18next';
+import setupTools from './setupTools';
 import store from './store';
 
 // ~~~~ APP SETUP

src/connectedComponents/ToolbarRow.js

@@ -1,13 +1,13 @@
 import './ToolbarRow.css';
 
 import React, { Component } from 'react';
+import { RoundedButtonGroup, ToolbarButton } from 'react-viewerbase';
+import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 import { MODULE_TYPES } from 'ohif-core';
 import PropTypes from 'prop-types';
-import { RoundedButtonGroup } from 'react-viewerbase';
-import { extensionManager } from './../App.js';
 
 class ToolbarRow extends Component {
   static propTypes = {
@@ -23,6 +23,31 @@ class ToolbarRow extends Component {
     rightSidebarOpen: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    const toolbarModules = extensionManager.modules[MODULE_TYPES.TOOLBAR];
+    const toolbarButtonDefinitions = toolbarModules[0].module.definitions;
+
+    // TODO:
+    // ToolbarSection for Each ToolbarButton
+    // Render buttons
+    // On click, depending on Type, pass props to registered command in commands manager?
+    // If it's a tool that can be active... Mark it as active?
+    // - Tools that are on/off?
+    // - Tools that can be bound to multiple buttons?
+
+    // Normal ToolbarButtons...
+    // Maybe filtered by the active context(s)?
+    // Buttons can handle their own clicks. No reason for the container to do it?
+    // Just how high do we need to hoist this state?
+    // Why ToolbarRow instead of just Toolbar? Do we have any others?
+    this.state = {
+      toolbarButtons: toolbarButtonDefinitions,
+      activeButtons: [],
+    };
+  }
+
   onLeftSidebarValueChanged = value => {
     this.props.setLeftSidebarOpen(!!value);
   };
@@ -56,19 +81,13 @@ class ToolbarRow extends Component {
       ? rightSidebarToggle[0].value
       : null;
 
-    const availableToolbarModules =
+    //const getButtonComponents = _getButtonComponents.bind(this);
-      extensionManager.modules[MODULE_TYPES.TOOLBAR];
+    const buttonComponents = _getButtonComponents.call(
-    const toolbarModuleDefinition = availableToolbarModules.find(
+      this,
-      moduleDefinition => moduleDefinition.extensionId === this.props.pluginId
+      this.state.toolbarButtons,
+      this.state.activeButtons
     );
 
-    let pluginComp;
-    if (toolbarModuleDefinition) {
-      const PluginComponent = toolbarModuleDefinition.module;
-
-      pluginComp = <PluginComponent />;
-    }
-
     return (
       <div className="ToolbarRow">
         <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
@@ -78,7 +97,7 @@ class ToolbarRow extends Component {
             onValueChanged={this.onLeftSidebarValueChanged}
           />
         </div>
-        {pluginComp}
+        {buttonComponents}
         <ConnectedLayoutButton />
         <ConnectedPluginSwitch />
         <div className="pull-right m-t-1 rm-x-1" style={{ marginLeft: 'auto' }}>
@@ -93,4 +112,38 @@ class ToolbarRow extends Component {
   }
 }
 
+/**
+ * Determine which extension buttons should be showing, if they're
+ * active, and what their onClick behavior should be.
+ */
+function _getButtonComponents(toolbarButtons, activeButtons) {
+  return toolbarButtons.map((button, index) => {
+    // TODO: If `button.buttons`, use `ExpandedToolMenu`
+    // I don't believe any extensions currently leverage this
+    return (
+      <ToolbarButton
+        key={button.id}
+        label={button.label}
+        icon={button.icon}
+        onClick={(evt, props) => {
+          if (button.commandName) {
+            const options = Object.assign({ evt }, button.commandOptions);
+            commandsManager.runCommand(button.commandName, options);
+          }
+
+          // TODO: Use Types ENUM
+          // TODO: We can update this to be a `getter` on the extension to query
+          //       For the active tools after we apply our updates?
+          if (button.type === 'setToolActive') {
+            this.setState({
+              activeButtons: [button.id],
+            });
+          }
+        }}
+        isActive={activeButtons.includes(toolbarButtons.id)}
+      />
+    );
+  });
+}
+
 export default ToolbarRow;

src/utils/index.js

@@ -1,9 +1,4 @@
-import getDefaultToolbarButtons from './getDefaultToolbarButtons.js';
 import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js';
 import initWebWorkers from './initWebWorkers.js';
 
-export {
+export { getUserManagerForOpenIdConnectClient, initWebWorkers };
-  getDefaultToolbarButtons,
-  getUserManagerForOpenIdConnectClient,
-  initWebWorkers,
-};