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>

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx

@@ -55,4 +55,4 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ToolbarButton} />
+<Props of={ExpandableToolbarButton} />

platform/ui/src/components/ListMenu/ListMenu.jsx

@@ -2,47 +2,35 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-const ListMenu = ({ options = [], renderer, onClick }) => {
+const ListMenu = ({ items = [], renderer, onClick }) => {
   const [selectedIndex, setSelectedIndex] = useState(null);
 
-  const ListItem = (props) => {
+  const ListItem = ({ item, index, isSelected }) => {
     const flex = 'flex flex-row justify-between items-center';
     const theme = 'bg-indigo-dark';
-    const hover = 'hover:bg-primary-dark';
-    const spacing = 'p-3 h-8';
+
+    const onClickHandler = () => {
+      setSelectedIndex(index);
+      onClick({ item, selectedIndex: index });
+      if (item.onClick) item.onClick({ ...item, index, isSelected });
+    };
 
     return (
-      <div
-        className={classnames(
-          flex,
-          theme,
-          spacing,
-          'cursor-pointer',
-          !props.isActive && hover,
-          props.isActive && 'bg-primary-light',
-        )}
-        onClick={props.onClick}
-      >
-        {renderer && renderer(props)}
+      <div className={classnames(flex, theme, 'cursor-pointer')} onClick={onClickHandler}>
+        {renderer && renderer({ ...item, index, isSelected })}
       </div>
     );
   };
 
   return (
     <div className="flex flex-col rounded-md bg-secondary-dark pt-2 pb-2">
-      {options.map((option, index) => {
-        const onClickHandler = () => {
-          setSelectedIndex(index);
-          onClick({ ...option, index });
-        };
-
+      {items.map((item, index) => {
         return (
           <ListItem
             key={`ListItem${index}`}
-            {...option}
             index={index}
-            isActive={selectedIndex === index}
-            onClick={onClickHandler}
+            isSelected={selectedIndex === index}
+            item={item}
           />
         );
       })}
@@ -53,7 +41,7 @@ const ListMenu = ({ options = [], renderer, onClick }) => {
 const noop = () => { };
 
 ListMenu.propTypes = {
-  options: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
   renderer: PropTypes.func.isRequired,
   onClick: PropTypes.func
 };

platform/ui/src/components/ListMenu/ListMenu.mdx

@@ -6,7 +6,7 @@ route: components/listMenu
 
 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { ListMenu } from '../';
+import { ListMenu, ToolbarButton } from '../';
 
 # List Menu
 
@@ -15,13 +15,13 @@ List Menus are used to populate expandable Toolbar.
 ## Import
 
 ```javascript
-import { ListMenu } from '@ohif/ui';
+import { ListMenu, ToolbarButton } from '@ohif/ui';
 ```
 
 <Playground>
   {() => {
     return (
-      <ToolbarButton options={[
+      <ToolbarButton items={[
         { value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
         { value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
         { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
@@ -49,4 +49,4 @@ import { ListMenu } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ToolbarButton} />
+<Props of={ListMenu} />

platform/ui/src/components/MeasurementTable/MeasurementTable.mdx

@@ -27,7 +27,7 @@ import { MeasurementTable } from '@ohif/ui';
       data: new Array(10).fill({}).map((el, i) => ({
         id: i + 1,
         label: 'Label short description',
-        displayText: '24.0 x 24.0 mm (S:4, I:22)',
+        displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
         isActive: activeMeasurementItem === i + 1,
       })),
       onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),

platform/ui/src/components/SplitButton/SplitButton.jsx

@@ -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;

platform/ui/src/components/SplitButton/SplitButton.mdx

@@ -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} />

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

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

platform/ui/src/components/StudyBrowser/StudyBrowser.mdx

@@ -95,7 +95,7 @@ import { StudyBrowser } from '@ohif/ui';
     return (
       <div className="flex flex-1" style={{height: '400px'}}>
         <div className="overflow-hidden w-64">
-          <StudyBrowser tabs={tabs} />
+          <StudyBrowser tabs={tabs} activeTabName='primary' expandedStudyInstanceUIDs={[]} />
         </div>
       </div>
     );

platform/ui/src/components/StudyListFilter/StudyListFilter.mdx

@@ -6,14 +6,15 @@ route: components/studyListFilter
 
 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { StudyListFilter } from '../';
+import { StudyListFilter, Modal } from '../';
+import { ModalProvider } from '../../contextProviders';
 
 # Study List Filter
 
 ## Import
 
 ```javascript
-import { StudyListFilter } from '@ohif/ui';
+import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
 ```
 
 ## Basic usage
@@ -101,14 +102,16 @@ import { StudyListFilter } from '@ohif/ui';
       });
     };
     return (
-      <StudyListFilter
-        numOfStudies={100}
-        filtersMeta={filtersMeta}
-        filterValues={filterValues}
-        onChange={setFilterValues}
-        clearFilters={() => setFilterValues(defaultFilterValues)}
-        isFiltering={isFiltering(filterValues, defaultFilterValues)}
-      />
+      <ModalProvider modal={Modal}>
+        <StudyListFilter
+          numOfStudies={100}
+          filtersMeta={filtersMeta}
+          filterValues={filterValues}
+          onChange={setFilterValues}
+          clearFilters={() => setFilterValues(defaultFilterValues)}
+          isFiltering={isFiltering(filterValues, defaultFilterValues)}
+        />
+      </ModalProvider>
     );
   }}
 </Playground>

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx.todo

@@ -26,7 +26,7 @@ import { ThumbnailTracked } from '@ohif/ui';
         seriesNumber={4}
         numInstances={902}
         onClick={() => alert('Thumbnail was clicked!')}
-        viewportIdentificator="A"
+        viewportIdentificator={["A"]}
         isTracked={true}
         isActive={false}
       />

platform/ui/src/components/Tooltip/Tooltip.jsx

@@ -43,7 +43,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =
 
   return (
     <div
-      className="relative "
+      className="relative h-full"
       onMouseOver={handleMouseOver}
       onFocus={handleMouseOver}
       onMouseOut={handleMouseOut}
@@ -88,7 +88,7 @@ Tooltip.defaultProps = {
 };
 
 Tooltip.propTypes = {
-/** prevents tooltip from rendering despite hover/active/sticky */
+  /** prevents tooltip from rendering despite hover/active/sticky */
   isDisabled: PropTypes.bool,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   position: PropTypes.oneOf([

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
+  <>
+    <div className={classNames(
+      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+      isSelected && 'bg-primary-dark'
+    )}
+    >
+      <span className='text-common-bright mr-2 text-base whitespace-no-wrap'>
+        {title}
+      </span>
+      <span className='flex-1 text-aqua-pale font-thin text-sm whitespace-no-wrap'>
+        {subtitle}
+      </span>
+      <span className='text-primary-active ml-5 text-sm whitespace-no-wrap'>{index + 1}</span>
+    </div>
+  </>
+);
+
+WindowLevelMenuItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+export default WindowLevelMenuItem;

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.mdx

@@ -0,0 +1,33 @@
+---
+name: Window Level Menu Item
+menu: General
+route: components/windowLevelMenuItem
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
+
+# Window Level Menu Item
+
+Window Level Menu Item are used as renderer of the ListMenu.
+
+## Import
+
+```javascript
+import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    return (
+      <div className="py-10 flex justify-center">
+        <ListMenu renderer={WindowLevelMenuItem} items={[]} />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={WindowLevelMenuItem} />

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

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

platform/ui/src/components/index.js

@@ -25,6 +25,7 @@ import Notification from './Notification';
 import Select from './Select';
 import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
+import SplitButton from './SplitButton';
 import StudyBrowser from './StudyBrowser';
 import StudyItem from './StudyItem';
 import StudyListExpandedRow from './StudyListExpandedRow';
@@ -55,6 +56,7 @@ import ViewportActionBar from './ViewportActionBar';
 import ViewportDownloadForm from './ViewportDownloadForm';
 import ViewportGrid from './ViewportGrid';
 import ViewportPane from './ViewportPane';
+import WindowLevelMenuItem from './WindowLevelMenuItem';
 import UserPreferences from './UserPreferences';
 import HotkeysPreferences from './HotkeysPreferences';
 import HotkeyField from './HotkeyField';
@@ -94,6 +96,7 @@ export {
   Select,
   SegmentationTable,
   SidePanel,
+  SplitButton,
   StudyBrowser,
   StudyItem,
   StudyListExpandedRow,
@@ -123,4 +126,5 @@ export {
   ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
+  WindowLevelMenuItem
 };