Cleanup @ohif/ui ViewportGrid API

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -1,46 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 
-const ViewportGrid = ({ rows, cols, viewportContents }) => {
+function ViewportGrid({ numRows, numCols, children }) {
-  const ViewportPanes = viewportContents.map((viewportContent, index) => {
+  const rowSize = 100 / numRows;
-    const isActive = index === activeViewportIndex;
+  const colSize = 100 / numCols;
+
   return (
     <div
-        key={index}
+      data-cy="viewport-grid"
-        className={classnames(
+      style={{
-          'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
+        display: 'grid',
-          {
+        gridTemplateRows: `repeat(${numRows}, ${rowSize}%)`,
-            'border-2 border-primary-light -m-px': isActive,
+        gridTemplateColumns: `repeat(${numCols}, ${colSize}%)`,
-            'border border-secondary-light': !isActive,
+        height: '100%',
-          }
+        width: '100%',
-        )}
-        onClick={() => {
-          setActiveViewportIndex(index);
       }}
     >
-        {viewportContent}
+      {children}
     </div>
   );
-  });
+}
-
-  return (
-    <div
-      className={classnames(
-        'h-full w-full grid gap-2',
-        `grid-cols-${cols}`,
-        `grid-rows-${rows}`
-      )}
-    >
-      {ViewportPanes}
-    </div>
-  );
-};
 
 ViewportGrid.propTypes = {
-  rows: PropTypes.number.isRequired,
+  /** Number of columns */
-  cols: PropTypes.number.isRequired,
+  numRows: PropTypes.number.isRequired,
-  viewportContents: PropTypes.arrayOf(PropTypes.node),
+  /** Number of rows */
+  numCols: PropTypes.number.isRequired,
+  /** Array of React Components to render within grid */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
 };
 
 export default ViewportGrid;

platform/ui/src/components/ViewportGrid/ViewportGrid.mdx

@@ -21,18 +21,14 @@ import { ViewportGrid } from '@ohif/ui';
 
 <Playground>
   <div className="p-4 h-56">
-    <ViewportGrid
+    <ViewportGrid numRows={1} numCols={2}>
-      rows={1}
-      cols={2}
-      viewportContents={[
       <div className="flex items-center justify-center h-full text-white">
         Viewport1
-        </div>,
+      </div>
       <div className="flex items-center justify-center h-full text-white">
         Viewport2
-        </div>,
+      </div>
-      ]}
+    </ViewportGrid>
-    />
   </div>
 </Playground>