Pull @ohif/ui ViewportPane into separate component and expose

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useDrop } from 'react-dnd';
+
+function ViewportPane({ children, isActive, onDrop }) {
+  const [{ isHovered, isHighlighted }, drop] = useDrop({
+    accept: 'displayset',
+    // TODO: pass in as prop?
+    drop: (displaySet, monitor) => {
+      const canDrop = monitor.canDrop();
+      const isOver = monitor.isOver();
+
+      if (canDrop && isOver && onDrop) {
+        const { StudyInstanceUID, displaySetInstanceUID } = displaySet;
+
+        onDrop({
+          //viewportIndex, StudyInstanceUID, displaySetInstanceUID
+        });
+      }
+    },
+    // Monitor, and collect props; returned as values by `useDrop`
+    collect: monitor => ({
+      isHighlighted: monitor.canDrop(),
+      isHovered: monitor.isOver(),
+    }),
+  });
+
+  return (
+    <div
+      ref={drop}
+      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,
+        }
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+ViewportPane.propTypes = {
+  /** The ViewportComp */
+  children: PropTypes.node.isRequired,
+  /** Bool to show active styling */
+  isActive: PropTypes.bool.isRequired,
+  /** Function that handles drop events */
+  onDrop: PropTypes.func.isRequired,
+};
+
+export default ViewportPane;

platform/ui/src/components/ViewportPane/ViewportPane.mdx

@@ -0,0 +1,33 @@
+---
+name: ViewportPane
+menu: General
+route: components/viewport-pane
+---
+
+import { Playground, Props } from 'docz';
+import { ViewportGrid, ViewportPane } from '@ohif/ui';
+
+# ViewportPane
+
+Used to display viewports in the viewer page.
+
+## Import
+
+```javascript
+import { ViewportPane } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4 h-56">
+    <ViewportGrid>
+      <ViewportPane><h3>Hello</h3></ViewportPane>
+      <ViewportPane><h3>World</h3></ViewportPane>
+    </ViewportGrid>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ViewportPane} />

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

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

platform/ui/src/components/index.js

@@ -43,6 +43,7 @@ import Typography from './Typography';
 import Viewport from './Viewport';
 import ViewportActionBar from './ViewportActionBar';
 import ViewportGrid from './ViewportGrid';
+import ViewportPane from './ViewportPane';
 
 export {
   Button,
@@ -91,4 +92,5 @@ export {
   Viewport,
   ViewportActionBar,
   ViewportGrid,
+  ViewportPane,
 };