Create new ToolbarButton type for Layout Selector; wire up custom UI; prep for viewportGridService usage

platform/ui/src/components/LayoutSelector/LayoutSelector.jsx

@@ -0,0 +1,80 @@
+// // SEE:
+// // https://github.com/OHIF/Viewers/blob/b58aa4575ab72fe3f493cc5a4261b4f8256516ab/platform/viewer/src/appExtensions/MeasurementsPanel/index.js#L18-L49
+// import React from 'react';
+// import { useViewportGrid } from '@ohif/ui';
+
+// function getCommandsModule({ servicesManager }) {
+//   const { UIDialogService } = servicesManager.services;
+
+//   const definitions = {
+//     toggleLayoutSelectionDialog: {
+//       commandFn: () => {
+//         if (!UIDialogService) {
+//           window.alert(
+//             'Unable to show dialog; no UI Dialog Service available.'
+//           );
+//           return;
+//         }
+
+//         // TODO: use SimpleDialog component
+//         // TODO: update position on window resize
+//         // TODO: Expand service API to check if dialog w/ ID is already open
+//         // TODO: Import and call `useViewportGrid`
+//         UIDialogService.dismiss({ id: 'layoutSelection' });
+//         UIDialogService.create({
+//           id: 'layoutSelection',
+//           centralize: true,
+//           isDraggable: false,
+//           showOverlay: true,
+//           content: Test,
+//         });
+//       },
+//       storeContexts: [],
+//       options: {},
+//       context: 'VIEWER',
+//     },
+//   };
+
+//   return {
+//     definitions,
+//     defaultContext: 'VIEWER',
+//   };
+// }
+
+// function Test() {
+//   const [
+//     { numCols, numRows, activeViewportIndex, viewports },
+//     dispatch,
+//   ] = useViewportGrid();
+
+//   return (
+//     <div
+//       onClick={() => {
+//         dispatch({
+//           type: 'SET_LAYOUT',
+//           payload: {
+//             numCols: 2,
+//             numRows: 2,
+//           },
+//         });
+//       }}
+//       style={{ color: 'white' }}
+//     >
+//       Hello World!
+//     </div>
+//   );
+// }
+
+// export default getCommandsModule;
+
+import React from 'react';
+
+function LayoutSelector() {
+  return (
+    <>
+      <div>LAYOUT SELECTOR PLACEHOLDER!</div>
+    </>
+  );
+}
+
+export default LayoutSelector;

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

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

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -60,7 +60,7 @@ ToolbarButton.propTypes = {
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */
-  dropdownContent: PropTypes.node,
+  dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
 export default ToolbarButton;

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

@@ -65,7 +65,7 @@ const Tooltip = ({ content, isSticky, position, tight, children }) => {
             }
           )}
         >
-          {content}
+          {typeof content === 'function' ? content() : content}
           <svg
             className="absolute h-4 text-primary-dark stroke-secondary-main"
             style={arrowPositionStyle[position]}
@@ -87,7 +87,7 @@ Tooltip.defaultProps = {
 };
 
 Tooltip.propTypes = {
-  content: PropTypes.node.isRequired,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   position: PropTypes.oneOf([
     'bottom',
     'bottom-left',

platform/ui/src/components/index.js

@@ -12,6 +12,7 @@ import InputLabelWrapper from './InputLabelWrapper';
 import InputMultiSelect from './InputMultiSelect';
 import InputText from './InputText';
 import Label from './Label';
+import LayoutSelector from './LayoutSelector';
 import MeasurementTable from './MeasurementTable';
 import Modal from './Modal';
 import NavBar from './NavBar';
@@ -60,6 +61,7 @@ export {
   InputMultiSelect,
   InputText,
   Label,
+  LayoutSelector,
   MeasurementTable,
   Modal,
   NavBar,