Add support for LayoutSelector

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
+import {
+  LayoutSelector as OHIFLayoutSelector,
+  ToolbarButton,
+  useViewportGrid,
+} from '@ohif/ui';
 
-function LayoutSelector() {
+function LayoutSelector({ onSelection }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [viewportGridState, dispatch] = useViewportGrid();
 
   useEffect(() => {
     function LayoutSelector() {
@@ -17,7 +22,7 @@ function LayoutSelector() {
     };
   }, [isOpen]);
 
-  const dropdownContent = isOpen ? OHIFLayoutSelector : undefined;
+  const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
   return (
     <ToolbarButton
@@ -27,7 +32,19 @@ function LayoutSelector() {
       onClick={() => {
         setIsOpen(!isOpen);
       }}
-      dropdownContent={dropdownContent}
+      dropdownContent={
+        <DropdownContent
+          onSelection={({ numRows, numCols }) => {
+            dispatch({
+              type: 'SET_LAYOUT',
+              payload: {
+                numCols,
+                numRows,
+              },
+            });
+          }}
+        />
+      }
       isActive={isOpen}
       type="primary"
     />
@@ -35,7 +52,14 @@ function LayoutSelector() {
 }
 
 LayoutSelector.propTypes = {
-  children: PropTypes.any.isRequired,
+  /* Callback for grid selection */
+  onSelection: PropTypes.func.isRequired,
+};
+
+LayoutSelector.defaultProps = {
+  onSelection: () => {
+    console.warn('layoutSelector missing `onSelection` prop');
+  },
 };
 
 export default LayoutSelector;

extensions/default/src/getToolbarModule.js

@@ -63,10 +63,6 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     {
       name: 'ohif.layoutSelector',
       defaultComponent: ToolbarLayoutSelector,
-      requiredConfig: [],
-      optionalConfig: [],
-      requiredProps: [],
-      optionalProps: [],
       clickHandler: (evt, clickedBtn, btnSectionName) => {},
     },
     {