ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>
2025-01-29 13:36:52 -05:00
1 parent ac5ae4a29e
commit a8d84443a9
@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  ToolButtonList,
+  ToolButton,
+  ToolButtonListDefault,
+  ToolButtonListDropDown,
+  ToolButtonListItem,
+  ToolButtonListDivider,
+} from '@ohif/ui-next';
+
+interface ButtonItem {
+  id: string;
+  icon?: string;
+  label?: string;
+  tooltip?: string;
+  isActive?: boolean;
+  disabledText?: string;
+  commands?: Record<string, unknown>;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface ToolButtonListWrapperProps {
+  groupId: string;
+  primary: ButtonItem;
+  items: ButtonItem[];
+  onInteraction?: (details: {
+    groupId: string;
+    itemId: string;
+    commands?: Record<string, unknown>;
+  }) => void;
+}
+
+/**
+ * Wraps the ToolButtonList component to handle the OHIF toolbar button structure
+ * @param props - Component props
+ * @returns Component
+ * // test
+ */
+export default function ToolButtonListWrapper({
+  groupId,
+  primary,
+  items,
+  onInteraction,
+}: ToolButtonListWrapperProps) {
+  return (
+    <ToolButtonList>
+      <ToolButtonListDefault>
+        <div
+          data-cy={`${groupId}-split-button-primary`}
+          data-tool={primary.id}
+          data-active={primary.isActive}
+        >
+          <ToolButton
+            {...primary}
+            onInteraction={({ itemId }) =>
+              onInteraction?.({ groupId, itemId, commands: primary.commands })
+            }
+            className={primary.className}
+          />
+        </div>
+      </ToolButtonListDefault>
+      <ToolButtonListDivider className={primary.isActive ? 'opacity-0' : 'opacity-100'} />
+      <div data-cy={`${groupId}-split-button-secondary`}>
+        <ToolButtonListDropDown>
+          {items.map(item => (
+            <ToolButtonListItem
+              key={item.id}
+              {...item}
+              data-cy={item.id}
+              data-tool={item.id}
+              data-active={item.isActive}
+              onSelect={() =>
+                onInteraction?.({ groupId, itemId: item.id, commands: item.commands })
+              }
+            >
+              <span className="pl-1">{item.label || item.tooltip || item.id}</span>
+            </ToolButtonListItem>
+          ))}
+        </ToolButtonListDropDown>
+      </div>
+    </ToolButtonList>
+  );
+}