Create window level dropdown menu

modes/longitudinal/src/toolbarButtons.js

@@ -1,5 +1,8 @@
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l
+import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
+import React from 'react';
+import classnames from 'classnames';
 
 export default [
   // Divider
@@ -29,13 +32,58 @@ export default [
     config: {
       groupName: 'primaryTool',
     },
+    component: ExpandableToolbarButton,
     props: {
       isActive: true,
       icon: 'tool-window-level',
-      label: 'Levels',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Wwwc' },
+      commands: {
+        'windowLevelPreset1': {
+          commandName: 'windowLevelPreset1',
+          commandOptions: {},
+        },
+        'windowLevelPreset2': {
+          commandName: 'windowLevelPreset2',
+          commandOptions: {},
+        },
+        'windowLevelPreset3': {
+          commandName: 'windowLevelPreset3',
+          commandOptions: {},
+        },
+        'windowLevelPreset4': {
+          commandName: 'windowLevelPreset4',
+          commandOptions: {},
+        },
+        'windowLevelPreset5': {
+          commandName: 'windowLevelPreset5',
+          commandOptions: {},
+        }
+      },
       type: 'primary',
+      content: ListMenu,
+      contentProps: {
+        options: [
+          { value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
+          { value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
+          { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
+          { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
+          { value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
+        ],
+        renderer: ({ title, subtitle, isActive, index }) => (
+          <>
+            <div>
+              <span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
+                {title}
+              </span>
+              <span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
+                {subtitle}
+              </span>
+            </div>
+            <span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
+          </>
+        )
+      }
     },
   },
   {