OHIF-333: Split Button (#1988)
* ohif-333: add component foundation * ohif-333: add expandable content and mocked data * ohif-333: improve ListMenu component for the new toolbar button and add radio behavior * ohif-333: add click outside behavior and update primary and secondary props * ohif-333: separate classes from markup * ohif-333: fix layout issues * ohif-333: extract window level component * ohif-333: update component returns * ohif-333: update chevron thickness * ohif-333: remove is active prop * Delete lerna-debug.log * ohif-333: clean toolbar and use example in ui package * ohif-333: update styles to avoid word break * ohif-333: fix ui package build Co-authored-by: Erik Ziegler <erik.sweed@gmail.com> Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
This commit is contained in:
31 files changed
+399
-939
No files matched your search
@@ -0,0 +1,194 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import OutsideClickHandler from 'react-outside-click-handler';
|
||||
|
||||
import { Icon, Tooltip, ListMenu } from '@ohif/ui';
|
||||
|
||||
const baseClasses = {
|
||||
Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
|
||||
Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
|
||||
Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
|
||||
PrimaryIcon: 'w-5 h-5',
|
||||
SecondaryIcon: 'w-4 h-full stroke-1',
|
||||
Separator: 'border-l pt-2 pb-2',
|
||||
Content: 'absolute z-10 top-0 mt-16'
|
||||
};
|
||||
|
||||
const classes = {
|
||||
Button: ({ isExpanded, primary }) => classNames(
|
||||
baseClasses.Button,
|
||||
!isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
|
||||
),
|
||||
Interface: 'h-full flex flex-row items-center',
|
||||
Primary: ({ primary, isExpanded }) => classNames(
|
||||
baseClasses.Primary,
|
||||
primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
|
||||
isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
|
||||
),
|
||||
Secondary: ({ isExpanded, primary }) => classNames(
|
||||
baseClasses.Secondary,
|
||||
isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
|
||||
: primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
|
||||
),
|
||||
PrimaryIcon: ({ primary, isExpanded }) => classNames(
|
||||
baseClasses.PrimaryIcon,
|
||||
primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
|
||||
),
|
||||
SecondaryIcon: ({ isExpanded }) => classNames(
|
||||
baseClasses.SecondaryIcon,
|
||||
isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
|
||||
),
|
||||
Separator: ({ primary, isExpanded, isHovering }) => classNames(
|
||||
baseClasses.Separator,
|
||||
isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
|
||||
),
|
||||
Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
|
||||
};
|
||||
|
||||
const SplitButton = ({
|
||||
isRadio,
|
||||
isAction,
|
||||
primary: _primary,
|
||||
secondary,
|
||||
onClick,
|
||||
items: _items,
|
||||
renderer,
|
||||
}) => {
|
||||
/* Bubbles up individual item clicks */
|
||||
const getSplitButtonItems = items => items.map((item, index) => ({
|
||||
...item,
|
||||
index,
|
||||
onClick: () => {
|
||||
if (item.onClick) item.onClick({ ...item, index });
|
||||
onClick({ item, index });
|
||||
|
||||
setState(state => ({
|
||||
...state,
|
||||
primary: !isAction ? { ...item, index } : state.primary,
|
||||
isExpanded: false,
|
||||
items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
|
||||
}));
|
||||
}
|
||||
}));
|
||||
|
||||
const [state, setState] = useState({
|
||||
primary: _primary,
|
||||
items: getSplitButtonItems(_items),
|
||||
isHovering: false,
|
||||
isExpanded: false
|
||||
});
|
||||
|
||||
const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
|
||||
const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
|
||||
const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
|
||||
const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
|
||||
const onPrimaryClickHandler = () => {
|
||||
const primary = { ...state.primary, isActive: !state.primary.isActive };
|
||||
state.primary.onClick(primary);
|
||||
setState(state => ({ ...state, isExpanded: false, primary }));
|
||||
};
|
||||
|
||||
return (
|
||||
<OutsideClickHandler onOutsideClick={outsideClickHandler}>
|
||||
<div name='SplitButton' className="relative">
|
||||
<div
|
||||
className={classes.Button({ ...state })}
|
||||
onMouseEnter={onMouseEnterHandler}
|
||||
onMouseLeave={onMouseLeaveHandler}
|
||||
>
|
||||
<div className={classes.Interface}>
|
||||
<div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
|
||||
<Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
|
||||
<div className='p-3 flex items-center justify-center h-full w-full'>
|
||||
<Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className={classes.Separator({ ...state })}></div>
|
||||
<div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
|
||||
<Tooltip
|
||||
isDisabled={state.isExpanded || !secondary.tooltip}
|
||||
content={secondary.tooltip}
|
||||
className="h-full"
|
||||
>
|
||||
<Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.Content({ ...state })}>
|
||||
<ListMenu items={state.items} renderer={renderer} />
|
||||
</div>
|
||||
</div>
|
||||
</OutsideClickHandler>
|
||||
);
|
||||
};
|
||||
|
||||
const DefaultListItemRenderer = ({ icon, label, isActive }) => (
|
||||
<div className={classNames(
|
||||
'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
|
||||
isActive && 'bg-primary-dark'
|
||||
)}
|
||||
>
|
||||
<span className='text-common-bright mr-4 text-base'>
|
||||
<Icon name={icon} className='w-5 h-5 text-common-bright' />
|
||||
</span>
|
||||
<span className='text-common-bright text-base mr-5'>
|
||||
{label}
|
||||
</span>
|
||||
</div >
|
||||
);
|
||||
|
||||
const noop = () => { };
|
||||
|
||||
SplitButton.defaultProps = {
|
||||
isRadio: false,
|
||||
isAction: false,
|
||||
primary: {
|
||||
label: null,
|
||||
tooltip: null,
|
||||
isActive: true,
|
||||
onClick: noop
|
||||
},
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: null,
|
||||
isActive: true,
|
||||
tooltip: 'More Measure Tools'
|
||||
},
|
||||
items: [],
|
||||
renderer: DefaultListItemRenderer,
|
||||
onClick: noop
|
||||
};
|
||||
|
||||
SplitButton.propTypes = {
|
||||
primary: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
tooltip: PropTypes.string,
|
||||
isActive: PropTypes.bool,
|
||||
}),
|
||||
secondary: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
tooltip: PropTypes.string,
|
||||
isActive: PropTypes.bool
|
||||
}),
|
||||
onClick: PropTypes.func,
|
||||
renderer: PropTypes.func,
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
tooltip: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
isActive: PropTypes.bool,
|
||||
})
|
||||
)
|
||||
};
|
||||
|
||||
export default SplitButton;
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: Split Button
|
||||
menu: General
|
||||
route: components/splitButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
|
||||
# Split Button
|
||||
|
||||
Split Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const mockedProps = {
|
||||
primary: {
|
||||
tooltip: 'W/L',
|
||||
icon: 'tool-window-level',
|
||||
onClick: (args) => console.debug('Primary click!', args)
|
||||
},
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: '',
|
||||
isActive: true,
|
||||
tooltip: 'More Measure Tools',
|
||||
},
|
||||
items: [
|
||||
{ id: '1', icon: 'tool-layout', label: 'Layout', onClick: (args) => console.debug('Item click!', args) },
|
||||
{ id: '2', icon: 'tool-window-level', label: 'W/L', onClick: (args) => console.debug('Item click!', args) },
|
||||
{ id: '3', icon: 'tool-length', label: 'Length', onClick: (args) => console.debug('Item click!', args) }
|
||||
],
|
||||
onClick: (args) => console.debug('Any click!', args)
|
||||
};
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<div className="flex flex-row min-h-16 w-full justify-center items-center bg-secondary-dark">
|
||||
<SplitButton {...mockedProps} isRadio />
|
||||
<SplitButton {...mockedProps} isAction renderer={WindowLevelMenuItem} items={[
|
||||
{ id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
|
||||
{ id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
|
||||
{ id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
|
||||
{ id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
|
||||
{ id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
|
||||
]} />
|
||||
<SplitButton {...mockedProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SplitButton} />
|
||||
@@ -0,0 +1,2 @@
|
||||
import SplitButton from './SplitButton';
|
||||
export default SplitButton;
|
||||
Reference in new issue
Block a user