From 3cec88b55278c17c5abb928ca0c23109c349d8d2 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Sun, 14 Jun 2020 21:57:45 -0400 Subject: [PATCH] remove "Toolbar" and ViewportToolbar from @ohif/ui Unecessary wrappers for displaying ToolbarButtons --- platform/ui/index.js | 1 - .../ui/src/components/Toolbar/Toolbar.jsx | 89 --------- .../ui/src/components/Toolbar/Toolbar.mdx | 172 ------------------ platform/ui/src/components/Toolbar/index.js | 2 - .../ToolbarButton/ToolbarButton.jsx | 1 + platform/ui/src/views/Viewer/Viewer.js | 17 +- platform/ui/src/views/Viewer/Viewer.mdx | 3 +- .../ui/src/views/Viewer/components/Header.js | 18 +- .../Viewer/components/ViewportToolBar.js | 47 ----- 9 files changed, 16 insertions(+), 334 deletions(-) delete mode 100644 platform/ui/src/components/Toolbar/Toolbar.jsx delete mode 100644 platform/ui/src/components/Toolbar/Toolbar.mdx delete mode 100644 platform/ui/src/components/Toolbar/index.js delete mode 100644 platform/ui/src/views/Viewer/components/ViewportToolBar.js diff --git a/platform/ui/index.js b/platform/ui/index.js index 94ff8071c..c726b37f5 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -67,7 +67,6 @@ export { ThumbnailNoImage, ThumbnailTracked, ThumbnailList, - Toolbar, ToolbarButton, Tooltip, Typography, diff --git a/platform/ui/src/components/Toolbar/Toolbar.jsx b/platform/ui/src/components/Toolbar/Toolbar.jsx deleted file mode 100644 index dd4c11f5b..000000000 --- a/platform/ui/src/components/Toolbar/Toolbar.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -import { ToolbarButton, IconButton, Icon, Tooltip } from '@ohif/ui'; - -const classes = { - type: { - primary: '', - secondary: 'w-full items-center bg-primary-dark px-3', - }, -}; - -const Toolbar = ({ activeTool, tools, moreTools, type }) => { - return ( -
- {tools.map((tool) => { - const { id, onClick, icon, label, dropdownContent } = tool; - const isActive = activeTool === tool.id; - return ( -
- -
- ); - })} - {!!moreTools.length && ( - <> - - - - - - - - )} -
- ); -}; - -Toolbar.defaultProps = { - activeTool: '', - moreTools: [], - type: 'primary', -}; - -Toolbar.propTypes = { - type: PropTypes.oneOf(['primary', 'secondary']), - activeTool: PropTypes.string, - tools: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - label: PropTypes.string, - icon: PropTypes.string, - commandName: PropTypes.string, - commandOptions: PropTypes.shape({ - toolName: PropTypes.string, - }), - onClick: PropTypes.func, - dropdownContent: PropTypes.node, - }) - ).isRequired, - moreTools: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - label: PropTypes.string, - icon: PropTypes.string, - commandName: PropTypes.string, - commandOptions: PropTypes.shape({ - toolName: PropTypes.string, - }), - onClick: PropTypes.func, - }) - ), -}; - -export default Toolbar; diff --git a/platform/ui/src/components/Toolbar/Toolbar.mdx b/platform/ui/src/components/Toolbar/Toolbar.mdx deleted file mode 100644 index f6837e83c..000000000 --- a/platform/ui/src/components/Toolbar/Toolbar.mdx +++ /dev/null @@ -1,172 +0,0 @@ ---- -name: Toolbar -menu: Data Display -route: components/toolbar ---- - -import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import classnames from 'classnames'; -import { Toolbar, Typography } from '@ohif/ui'; - -# Toolbar - -A Toolbar is used to create a list of tools. - -## Import - -```javascript -import { Toolbar } from '@ohif/ui'; -``` - - - {() => { - const [activeTool, setActiveTool] = useState('Zoom'); - const dropdownContent = [ - { - name: 'Soft tissue', - value: '400/40', - }, - { name: 'Lung', value: '1500 / -600' }, - { name: 'Liver', value: '150 / 90' }, - { name: 'Bone', value: '2500 / 480' }, - { name: 'Brain', value: '80 / 40' }, - ]; - const tools = [ - { - id: 'Zoom', - label: 'Zoom', - icon: 'tool-zoom', - commandName: 'setToolActive', - commandOptions: { toolName: 'Zoom' }, - onClick: () => setActiveTool('Zoom'), - }, - { - id: 'Wwwc', - label: 'Levels', - icon: 'tool-window-level', - commandName: 'setToolActive', - commandOptions: { toolName: 'Wwwc' }, - onClick: () => setActiveTool('Wwwc'), - dropdownContent: ( -
- {dropdownContent.map((row, i) => ( -
-
- {row.name} - - {row.value} - -
- {i} -
- ))} -
- ), - }, - { - id: 'Pan', - label: 'Pan', - icon: 'tool-move', - commandName: 'setToolActive', - commandOptions: { toolName: 'Pan' }, - onClick: () => setActiveTool('Pan'), - }, - { - id: 'Capture', - label: 'Capture', - icon: 'tool-capture', - commandName: 'setToolActive', - commandOptions: { toolName: 'Capture' }, - onClick: () => setActiveTool('Capture'), - }, - { - id: 'Layout', - label: 'Layout', - icon: 'tool-layout', - commandName: 'setToolActive', - commandOptions: { toolName: 'Layout' }, - onClick: () => setActiveTool('Layout'), - }, - ]; - const moreTools = [ - { - id: 'Zoom 2', - label: 'Zoom', - icon: 'tool-zoom', - commandName: 'setToolActive', - commandOptions: { toolName: 'Zoom' }, - onClick: () => setActiveTool('Zoom 2'), - }, - { - id: 'Layout 2', - label: 'Layout', - icon: 'tool-layout', - commandName: 'setToolActive', - commandOptions: { toolName: 'Layout' }, - onClick: () => setActiveTool('Layout 2'), - }, - ]; - const secondaryTools = [ - { - id: 'Annotate', - label: 'Annotate', - icon: 'tool-annotate', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Annotate' }, - onClick: () => console.log('Activate Annotate'), - }, - { - id: 'Bidirectional', - label: 'Bidirectional', - icon: 'tool-bidirectional', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Bidirectional' }, - onClick: () => console.log('Activate Bidirectional'), - }, - { - id: 'Elipse', - label: 'Elipse', - icon: 'tool-elipse', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Elipse' }, - onClick: () => console.log('Activate Elipse'), - }, - { - id: 'Length', - label: 'Length', - icon: 'tool-length', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Length' }, - onClick: () => console.log('Activate Length'), - }, - ]; - return ( -
-
- Primary Toolbar - -
-
- Secondary Toolbar - -
-
- ); - }} - - -## Properties - - diff --git a/platform/ui/src/components/Toolbar/index.js b/platform/ui/src/components/Toolbar/index.js deleted file mode 100644 index 7bd64e01f..000000000 --- a/platform/ui/src/components/Toolbar/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Toolbar from './Toolbar'; -export default Toolbar; diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx index fb44a3a24..4c94af2fc 100644 --- a/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx +++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.jsx @@ -51,6 +51,7 @@ ToolbarButton.defaultProps = { }; ToolbarButton.propTypes = { + /* Influences background/hover styling */ type: PropTypes.oneOf(['primary', 'secondary']), id: PropTypes.string.isRequired, isActive: PropTypes.bool, diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js index 55629d2a8..aa521c267 100644 --- a/platform/ui/src/views/Viewer/Viewer.js +++ b/platform/ui/src/views/Viewer/Viewer.js @@ -1,14 +1,7 @@ import React from 'react'; -import { - SidePanel, - StudyBrowser, - DragAndDropProvider, - ViewportGrid, - ViewportPane, -} from '@ohif/ui'; +import { SidePanel, StudyBrowser, DragAndDropProvider } from '@ohif/ui'; import Header from './components/Header'; -import ViewportToolbar from './components/ViewportToolBar'; const Viewer = () => { return ( @@ -16,7 +9,7 @@ const Viewer = () => {
{ > -
- +
+ {/* */}
CONTENT
{ componentLabel="Measurements" defaultIsOpen={false} > -
+
panel placeholder
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx index 3fe5ea9a1..a0f37581a 100644 --- a/platform/ui/src/views/Viewer/Viewer.mdx +++ b/platform/ui/src/views/Viewer/Viewer.mdx @@ -25,7 +25,6 @@ import { } from '@ohif/ui'; import Header from './components/Header'; -import ViewportToolbar from './components/ViewportToolBar'; import { tabs } from './studyBrowserMockData'; @@ -76,7 +75,7 @@ import { tabs } from './studyBrowserMockData'; {/* TOOLBAR + GRID */}
- + {/* Secondary Toolbar */}
{/* VIEWPORT GRID CONTAINER */}
diff --git a/platform/ui/src/views/Viewer/components/Header.js b/platform/ui/src/views/Viewer/components/Header.js index fb90b06e4..b41739755 100644 --- a/platform/ui/src/views/Viewer/components/Header.js +++ b/platform/ui/src/views/Viewer/components/Header.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui'; +import { NavBar, Svg, Icon, IconButton } from '@ohif/ui'; const Header = () => { const [activeTool, setActiveTool] = useState('Zoom'); @@ -34,15 +34,15 @@ const Header = () => { {dropdownContent.map((row, i) => (
{row.name} - + {row.value}
- {i} + {i}
))}
@@ -75,12 +75,12 @@ const Header = () => { ]; return ( -
+
-
+
alert('Navigate to previous page')} /> @@ -89,10 +89,10 @@ const Header = () => {
- + {/* */}
- + FOR INVESTIGATIONAL USE ONLY { - const tools = [ - { - id: 'Annotate', - label: 'Annotate', - icon: 'tool-annotate', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Annotate' }, - onClick: () => console.log('Activate Annotate'), - }, - { - id: 'Bidirectional', - label: 'Bidirectional', - icon: 'tool-bidirectional', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Bidirectional' }, - onClick: () => console.log('Activate Bidirectional'), - }, - { - id: 'Elipse', - label: 'Elipse', - icon: 'tool-elipse', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Elipse' }, - onClick: () => console.log('Activate Elipse'), - }, - { - id: 'Length', - label: 'Length', - icon: 'tool-length', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Length' }, - onClick: () => console.log('Activate Length'), - }, - ]; - return ; -}; - -export default ViewportToolbar;