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