From f319092b84ff661f488ae5ecc9ddc69f16ad7974 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Thu, 14 May 2020 21:31:28 -0400
Subject: [PATCH] Cleanup @ohif/ui ViewportGrid API

---
 .../components/ViewportGrid/ViewportGrid.jsx  | 51 +++++++------------
 .../components/ViewportGrid/ViewportGrid.mdx  | 20 +++-----
 2 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
index cd9970c0d..b638846d7 100644
--- a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx
+++ b/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 }) => {
-  const ViewportPanes = viewportContents.map((viewportContent, index) => {
-    const isActive = index === activeViewportIndex;
-    return (
-      <div
-        key={index}
-        className={classnames(
-          'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
-          {
-            'border-2 border-primary-light -m-px': isActive,
-            'border border-secondary-light': !isActive,
-          }
-        )}
-        onClick={() => {
-          setActiveViewportIndex(index);
-        }}
-      >
-        {viewportContent}
-      </div>
-    );
-  });
+function ViewportGrid({ numRows, numCols, children }) {
+  const rowSize = 100 / numRows;
+  const colSize = 100 / numCols;
 
   return (
     <div
-      className={classnames(
-        'h-full w-full grid gap-2',
-        `grid-cols-${cols}`,
-        `grid-rows-${rows}`
-      )}
+      data-cy="viewport-grid"
+      style={{
+        display: 'grid',
+        gridTemplateRows: `repeat(${numRows}, ${rowSize}%)`,
+        gridTemplateColumns: `repeat(${numCols}, ${colSize}%)`,
+        height: '100%',
+        width: '100%',
+      }}
     >
-      {ViewportPanes}
+      {children}
     </div>
   );
-};
+}
 
 ViewportGrid.propTypes = {
-  rows: PropTypes.number.isRequired,
-  cols: PropTypes.number.isRequired,
-  viewportContents: PropTypes.arrayOf(PropTypes.node),
+  /** Number of columns */
+  numRows: PropTypes.number.isRequired,
+  /** Number of rows */
+  numCols: PropTypes.number.isRequired,
+  /** Array of React Components to render within grid */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
 };
 
 export default ViewportGrid;
diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx b/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
index 0ff396014..9a9ed932e 100644
--- a/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
+++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
@@ -21,18 +21,14 @@ import { ViewportGrid } from '@ohif/ui';
 
 <Playground>
   <div className="p-4 h-56">
-    <ViewportGrid
-      rows={1}
-      cols={2}
-      viewportContents={[
-        <div className="flex items-center justify-center h-full text-white">
-          Viewport1
-        </div>,
-        <div className="flex items-center justify-center h-full text-white">
-          Viewport2
-        </div>,
-      ]}
-    />
+    <ViewportGrid numRows={1} numCols={2}>
+      <div className="flex items-center justify-center h-full text-white">
+        Viewport1
+      </div>
+      <div className="flex items-center justify-center h-full text-white">
+        Viewport2
+      </div>
+    </ViewportGrid>
   </div>
 </Playground>