make toolbar reusable to use as secondary

platform/ui/index.js

@@ -28,7 +28,6 @@ export {
   MeasurementTable,
   NavBar,
   Notification,
-  PrimaryToolbar,
   Select,
   SegmentationTable,
   SidePanel,
@@ -47,6 +46,7 @@ export {
   Thumbnail,
   ThumbnailSR,
   ThumbnailList,
+  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,

platform/ui/src/components/PrimaryToolbar/index.js

@@ -1,2 +0,0 @@
-import PrimaryToolbar from './PrimaryToolbar';
-export default PrimaryToolbar;

platform/ui/src/components/Toolbar/Toolbar.jsx

@@ -4,9 +4,16 @@ import classnames from 'classnames';
 
 import { ToolbarButton, IconButton, Icon, Tooltip } from '@ohif/ui';
 
-const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
+const classes = {
+  type: {
+    primary: '',
+    secondary: 'w-full items-center bg-primary-dark px-3',
+  },
+};
+
+const Toolbar = ({ activeTool, tools, moreTools, type }) => {
   return (
-    <div className="flex">
+    <div className={classnames('flex', classes.type[type])}>
       {tools.map((tool) => {
         const { id, onClick, icon, label, dropdownContent } = tool;
         const isActive = activeTool === tool.id;
@@ -19,13 +26,14 @@ const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
               icon={icon}
               label={label}
               dropdownContent={dropdownContent}
+              type={type}
             />
           </div>
         );
       })}
       {!!moreTools.length && (
         <>
-          <span className="w-1 border-l py-4 mx-2 border-common-dark" />
+          <span className="w-1 border-l h-8 self-center mx-2 border-common-dark" />
           <Tooltip position="bottom" content="More tools">
             <IconButton
               className={classnames(
@@ -42,12 +50,14 @@ const PrimaryToolbar = ({ activeTool, tools, moreTools }) => {
   );
 };
 
-PrimaryToolbar.defaultProps = {
+Toolbar.defaultProps = {
   activeTool: '',
   moreTools: [],
+  type: 'primary',
 };
 
-PrimaryToolbar.propTypes = {
+Toolbar.propTypes = {
+  type: PropTypes.oneOf(['primary', 'secondary']),
   activeTool: PropTypes.string,
   tools: PropTypes.arrayOf(
     PropTypes.shape({
@@ -76,4 +86,4 @@ PrimaryToolbar.propTypes = {
   ),
 };
 
-export default PrimaryToolbar;
+export default Toolbar;

platform/ui/src/components/Toolbar/Toolbar.mdx

@@ -1,22 +1,22 @@
 ---
-name: Primary Toolbar
+name: Toolbar
 menu: Data Display
-route: components/primaryToolbar
+route: components/toolbar
 ---
 
 import { useState } from 'react';
-import { Playground } from 'docz';
+import { Playground, Props } from 'docz';
 import classnames from 'classnames';
-import { PrimaryToolbar } from '@ohif/ui';
+import { Toolbar } from '@ohif/ui';
 
-# Primary Toolbar
+# Toolbar
 
-Primary Toolbar is used to create a list of tools.
+A Toolbar is used to create a list of tools.
 
 ## Import
 
 ```javascript
-import { PrimaryToolbar } from '@ohif/ui';
+import { Toolbar } from '@ohif/ui';
 ```
 
 <Playground>
@@ -112,11 +112,7 @@ import { PrimaryToolbar } from '@ohif/ui';
     ];
     return (
       <div className="py-10 flex justify-center">
-        <PrimaryToolbar
-          moreTools={moreTools}
-          activeTool={activeTool}
-          tools={tools}
-        />
+        <Toolbar moreTools={moreTools} activeTool={activeTool} tools={tools} />
       </div>
     );
   }}
@@ -124,4 +120,4 @@ import { PrimaryToolbar } from '@ohif/ui';
 
 ## Properties
 
-<Props of={PrimaryToolbar} />
+<Props of={Toolbar} />

platform/ui/src/components/Toolbar/index.js

@@ -0,0 +1,2 @@
+import Toolbar from './Toolbar';
+export default Toolbar;

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

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { IconButton, Icon, Tooltip } from '@ohif/ui';
 
 const ToolbarButton = ({
+  type,
   id,
   isActive,
   onClick,
@@ -12,6 +13,17 @@ const ToolbarButton = ({
   label,
   dropdownContent,
 }) => {
+  const classes = {
+    type: {
+      primary: isActive
+        ? 'text-black'
+        : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+      secondary: isActive
+        ? 'text-black'
+        : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
+    },
+  };
+
   const shouldShowDropdown = !!isActive && !!dropdownContent;
   return (
     <div key={id}>
@@ -21,10 +33,7 @@ const ToolbarButton = ({
       >
         <IconButton
           variant={isActive ? 'contained' : 'text'}
-          className={classnames('mx-1', {
-            'text-black': isActive,
-            'text-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
-          })}
+          className={classnames('mx-1', classes.type[type])}
           onClick={onClick}
           key={id}
         >
@@ -38,9 +47,11 @@ const ToolbarButton = ({
 ToolbarButton.defaultProps = {
   dropdownContent: null,
   isActive: false,
+  type: 'primary',
 };
 
 ToolbarButton.propTypes = {
+  type: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

platform/ui/src/components/index.js

@@ -15,7 +15,6 @@ import MeasurementTable from './MeasurementTable';
 import NavBar from './NavBar';
 import Notification from './Notification';
 import Select from './Select';
-import PrimaryToolbar from './PrimaryToolbar';
 import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
 import StudyBrowser from './StudyBrowser';
@@ -33,6 +32,7 @@ import ThemeWrapper from './ThemeWrapper/';
 import Thumbnail from './Thumbnail';
 import ThumbnailSR from './ThumbnailSR';
 import ThumbnailList from './ThumbnailList';
+import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
@@ -56,7 +56,6 @@ export {
   MeasurementTable,
   NavBar,
   Notification,
-  PrimaryToolbar,
   Select,
   SegmentationTable,
   SidePanel,
@@ -75,6 +74,7 @@ export {
   Thumbnail,
   ThumbnailSR,
   ThumbnailList,
+  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,

platform/ui/src/views/Viewer/components/Header.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NavBar, Svg, Icon, IconButton, PrimaryToolbar } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui';
 
 const Header = () => {
   const [activeTool, setActiveTool] = useState('Zoom');
@@ -89,11 +89,7 @@ const Header = () => {
           </div>
         </div>
         <div className="flex items-center">
-          <PrimaryToolbar
-            tools={tools}
-            activeTool={activeTool}
-            moreTools={tools}
-          />
+          <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
         </div>
         <div className="flex items-center">
           <span className="mr-3 text-common-light text-lg">

platform/ui/src/views/Viewer/components/ViewportToolBar.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
 
-import { Icon, IconButton } from '@ohif/ui';
+import { Toolbar } from '@ohif/ui';
 
 const ViewportToolbar = () => {
-  const [activeTool, setActiveTool] = useState(null);
   const tools = [
     {
       id: 'Annotate',
@@ -13,6 +12,7 @@ const ViewportToolbar = () => {
       type: null,
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Annotate' },
+      onClick: () => console.log('Activate Annotate'),
     },
     {
       id: 'Bidirectional',
@@ -21,6 +21,7 @@ const ViewportToolbar = () => {
       type: null,
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Bidirectional' },
+      onClick: () => console.log('Activate Bidirectional'),
     },
     {
       id: 'Elipse',
@@ -29,6 +30,7 @@ const ViewportToolbar = () => {
       type: null,
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Elipse' },
+      onClick: () => console.log('Activate Elipse'),
     },
     {
       id: 'Length',
@@ -37,58 +39,10 @@ const ViewportToolbar = () => {
       type: null,
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Length' },
+      onClick: () => console.log('Activate Length'),
     },
   ];
-  const renderToolbar = () => {
-    return tools.map((tool, i) => {
-      const isActive = activeTool === tool.id;
-      return (
-        <div
-          className="relative flex justify-center showTooltipOnHover"
-          key={tool.id}
-        >
-          <IconButton
-            variant={isActive ? 'contained' : 'text'}
-            className={classnames('mx-1', {
-              'text-black': isActive,
-              'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white': !isActive,
-            })}
-            onClick={(e) => {
-              setActiveTool(tool.id);
-            }}
-          >
-            <Icon name={tool.icon} />
-          </IconButton>
-          <div
-            className={classnames(
-              'tooltip tooltip-up bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
-            )}
-          >
-            {tool.label}
-            <svg
-              className="absolute text-primary-dark w-full h-4 left-0 stroke-secondary-main"
-              style={{ top: -15 }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
-        </div>
-      );
-    });
-  };
-  return (
-    <div
-      className={classnames(
-        'flex w-full items-center bg-primary-dark px-3 py-2'
-      )}
-    >
-      <div className="flex items-center">{renderToolbar()}</div>
-    </div>
-  );
+  return <Toolbar type="secondary" tools={tools} />;
 };
 
 export default ViewportToolbar;