remove "Toolbar" and ViewportToolbar from @ohif/ui
Unecessary wrappers for displaying ToolbarButtons
This commit is contained in:
dannyrb committed
1 parent
38203c9b31
commit
3cec88b552
9 files changed
+16
-334
No files matched your search
@@ -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 (
|
||||
<div className={classnames('flex', classes.type[type])}>
|
||||
{tools.map((tool) => {
|
||||
const { id, onClick, icon, label, dropdownContent } = tool;
|
||||
const isActive = activeTool === tool.id;
|
||||
return (
|
||||
<div className="relative flex justify-center" key={tool.id}>
|
||||
<ToolbarButton
|
||||
id={id}
|
||||
isActive={isActive}
|
||||
onClick={onClick}
|
||||
icon={icon}
|
||||
label={label}
|
||||
dropdownContent={dropdownContent}
|
||||
type={type}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!!moreTools.length && (
|
||||
<>
|
||||
<span className="w-1 border-l h-8 self-center mx-2 border-common-dark" />
|
||||
<Tooltip position="bottom" content="More tools">
|
||||
<IconButton
|
||||
className={classnames(
|
||||
'mx-1 text-common-bright hover:bg-primary-dark hover:text-primary-light'
|
||||
)}
|
||||
color="inherit"
|
||||
>
|
||||
<Icon name="tool-more-menu" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
@@ -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';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
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: (
|
||||
<div>
|
||||
{dropdownContent.map((row, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<span className="text-base text-white">{row.name}</span>
|
||||
<span className="text-base text-primary-light ml-3">
|
||||
{row.value}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-base text-primary-active ml-4">{i}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<div className="py-10 px-4 flex flex-col justify-center">
|
||||
<div className="mb-4">
|
||||
<Typography className="mb-2">Primary Toolbar</Typography>
|
||||
<Toolbar
|
||||
moreTools={moreTools}
|
||||
activeTool={activeTool}
|
||||
tools={tools}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Typography className="mb-2">Secondary Toolbar</Typography>
|
||||
<Toolbar tools={secondaryTools} type="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Toolbar} />
|
||||
@@ -1,2 +0,0 @@
|
||||
import Toolbar from './Toolbar';
|
||||
export default Toolbar;
|
||||
@@ -51,6 +51,7 @@ ToolbarButton.defaultProps = {
|
||||
};
|
||||
|
||||
ToolbarButton.propTypes = {
|
||||
/* Influences background/hover styling */
|
||||
type: PropTypes.oneOf(['primary', 'secondary']),
|
||||
id: PropTypes.string.isRequired,
|
||||
isActive: PropTypes.bool,
|
||||
|
||||
Reference in new issue
Block a user