From fe57becb2cc82a90b9ce37a69ead9d7a92ba8df7 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Thu, 14 May 2020 21:31:48 -0400
Subject: [PATCH] Pull @ohif/ui ViewportPane into separate component and expose

---
 .../components/ViewportPane/ViewportPane.jsx  | 54 +++++++++++++++++++
 .../components/ViewportPane/ViewportPane.mdx  | 33 ++++++++++++
 .../ui/src/components/ViewportPane/index.js   |  2 +
 platform/ui/src/components/index.js           |  2 +
 4 files changed, 91 insertions(+)
 create mode 100644 platform/ui/src/components/ViewportPane/ViewportPane.jsx
 create mode 100644 platform/ui/src/components/ViewportPane/ViewportPane.mdx
 create mode 100644 platform/ui/src/components/ViewportPane/index.js

diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx
new file mode 100644
index 000000000..bbe01cbc2
--- /dev/null
+++ b/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;
diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.mdx b/platform/ui/src/components/ViewportPane/ViewportPane.mdx
new file mode 100644
index 000000000..feadf2525
--- /dev/null
+++ b/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} />
diff --git a/platform/ui/src/components/ViewportPane/index.js b/platform/ui/src/components/ViewportPane/index.js
new file mode 100644
index 000000000..d15888c80
--- /dev/null
+++ b/platform/ui/src/components/ViewportPane/index.js
@@ -0,0 +1,2 @@
+import ViewportPane from './ViewportPane.jsx';
+export default ViewportPane;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index de8b4e48e..9a5589f90 100644
--- a/platform/ui/src/components/index.js
+++ b/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,
 };