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

Co-authored-by: sedghi <ar.sedghi@gmail.com>

extensions/cornerstone/src/getToolbarModule.tsx

@@ -1,14 +1,8 @@
 import { Enums } from '@cornerstonejs/tools';
-
-const getToggledClassName = (isToggled: boolean) => {
-  return isToggled
-    ? '!text-primary-active'
-    : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
-};
+import { utils } from '@ohif/ui-next';
 
 const getDisabledState = (disabledText?: string) => ({
   disabled: true,
-  className: '!text-common-bright ohif-disabled',
   disabledText: disabledText ?? 'Not available on the current viewport',
 });
 
@@ -93,9 +87,6 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         return {
           disabled: false,
-          className: isPrimaryActive
-            ? '!text-black bg-primary-light rounded'
-            : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light rounded',
           // Todo: isActive right now is used for nested buttons where the primary
           // button needs to be fully rounded (vs partial rounded) when active
           // otherwise it does not have any other use
@@ -153,9 +144,9 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
     },
     {
       name: 'evaluate.action',
-      evaluate: ({ viewportId, button }) => {
+      evaluate: () => {
         return {
-          className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
+          disabled: false,
         };
       },
     },
@@ -190,7 +181,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         if (!synchronizers?.length) {
           return {
-            className: getToggledClassName(false),
+            className: utils.getToggledClassName(false),
           };
         }
 
@@ -204,7 +195,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         if (!synchronizers?.length) {
           return {
-            className: getToggledClassName(false),
+            className: utils.getToggledClassName(false),
           };
         }
 
@@ -216,7 +207,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         const isEnabled = synchronizer?._enabled;
 
         return {
-          className: getToggledClassName(isEnabled),
+          className: utils.getToggledClassName(isEnabled),
         };
       },
     },
@@ -239,14 +230,13 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
         if (!prop) {
           return {
             disabled: false,
-            className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light',
           };
         }
 
         const isToggled = prop;
 
         return {
-          className: getToggledClassName(isToggled),
+          className: utils.getToggledClassName(isToggled),
         };
       },
     },
@@ -275,7 +265,7 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         return {
           disabled: false,
-          className: getToggledClassName(isMpr),
+          className: utils.getToggledClassName(isMpr),
         };
       },
     },
@@ -304,6 +294,6 @@ function _evaluateToggle({
   const isOff = offModes.includes(toolGroup.getToolOptions(toolName).mode);
 
   return {
-    className: getToggledClassName(!isOff),
+    className: utils.getToggledClassName(!isOff),
   };
 }

extensions/cornerstone/src/index.tsx

@@ -160,7 +160,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
       ViewportActionCornersProvider
     );
 
-    const { syncGroupService, customizationService } = servicesManager.services;
+    const { syncGroupService } = servicesManager.services;
     syncGroupService.registerCustomSynchronizer('frameview', createFrameViewSynchronizer);
 
     return init.call(this, props);