From 8be7854118bebeccbd68e15ebe9468283b93447a Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Mon, 6 Apr 2020 17:39:49 -0300
Subject: [PATCH] Initial changes for SidePanel

---
 platform/ui/index.js                          |  4 +-
 .../ui/src/components/SidePanel/SidePanel.jsx | 80 +++++++++++++++++++
 platform/ui/src/components/SidePanel/index.js |  2 +
 platform/ui/src/components/index.js           |  2 +
 platform/ui/src/views/Viewer/Viewer.js        | 40 ++++++++++
 platform/ui/src/views/Viewer/Viewer.mdx       | 14 ++++
 platform/ui/src/views/Viewer/index.js         |  2 +
 platform/ui/src/views/index.js                |  3 +-
 platform/viewer/src/App.js                    |  4 +-
 9 files changed, 146 insertions(+), 5 deletions(-)
 create mode 100644 platform/ui/src/components/SidePanel/SidePanel.jsx
 create mode 100644 platform/ui/src/components/SidePanel/index.js
 create mode 100644 platform/ui/src/views/Viewer/Viewer.js
 create mode 100644 platform/ui/src/views/Viewer/Viewer.mdx
 create mode 100644 platform/ui/src/views/Viewer/index.js

diff --git a/platform/ui/index.js b/platform/ui/index.js
index 4071bb71f..089356cc1 100644
--- a/platform/ui/index.js
+++ b/platform/ui/index.js
@@ -27,6 +27,7 @@ export {
   Label,
   NavBar,
   Select,
+  SidePanel,
   StudyListExpandedRow,
   StudyListPagination,
   StudyListTable,
@@ -41,5 +42,4 @@ export {
 } from './src/components';
 
 /** VIEWS */
-export { StudyList } from './src/views';
-export { ModalProvider, ModalConsumer, useModal, withModal, utils };
+export { StudyList, Viewer } from './src/views';
diff --git a/platform/ui/src/components/SidePanel/SidePanel.jsx b/platform/ui/src/components/SidePanel/SidePanel.jsx
new file mode 100644
index 000000000..62c08f088
--- /dev/null
+++ b/platform/ui/src/components/SidePanel/SidePanel.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Button, Icon } from '@ohif/ui';
+
+const baseStyle = {
+  maxWidth: '320px',
+};
+
+const dynamicStyle = {
+  open: {
+    left: {},
+    right: {},
+  },
+  closed: {
+    left: {},
+    right: {},
+  },
+};
+
+const sideClasses = {
+  left: 'border-r-1',
+  right: 'border-l-1',
+};
+
+const baseClassName =
+  'transition-all duration-300 ease-in-out h-100 bg-primary-light border-black';
+
+const SidePanel = ({
+  side,
+  className,
+  children,
+  defaultIsOpen,
+  componentName,
+  iconName,
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+
+  const style = Object.assign({}, isOpen ? openStyle : closedStyle, baseStyle);
+
+  return (
+    <div
+      className={classnames(className, baseClassName, sideClasses[side])}
+      style={style}
+    >
+      {isOpen ? (
+        <React.Fragment>
+          <div className="border-b-1">
+            {componentName}
+            <Button onClick={() => setIsOpen(false)}>
+              <Icon name="chevron-right" />
+            </Button>
+          </div>
+          {children}
+        </React.Fragment>
+      ) : (
+        <Button onClick={() => setIsOpen(true)}>
+          <div>
+            <Icon name={iconName} />
+            {componentName}
+          </div>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+SidePanel.defaultProps = {
+  defaultIsOpen: false,
+};
+
+SidePanel.propTypes = {
+  side: PropTypes.oneOf(['left', 'right']).isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  isOpen: PropTypes.bool,
+};
+
+export default SidePanel;
diff --git a/platform/ui/src/components/SidePanel/index.js b/platform/ui/src/components/SidePanel/index.js
new file mode 100644
index 000000000..68034ac14
--- /dev/null
+++ b/platform/ui/src/components/SidePanel/index.js
@@ -0,0 +1,2 @@
+import SidePanel from './SidePanel';
+export default SidePanel;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 5d289cdf6..d12f7389d 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -13,6 +13,7 @@ import InputText from './InputText';
 import Label from './Label';
 import NavBar from './NavBar';
 import Select from './Select';
+import SidePanel from './SidePanel';
 import Svg from './Svg';
 import StudyListExpandedRow from './StudyListExpandedRow';
 import StudyListPagination from './StudyListPagination';
@@ -41,6 +42,7 @@ export {
   Label,
   NavBar,
   Select,
+  SidePanel,
   Svg,
   StudyListExpandedRow,
   StudyListPagination,
diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js
new file mode 100644
index 000000000..c9e0ada40
--- /dev/null
+++ b/platform/ui/src/views/Viewer/Viewer.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { NavBar, SidePanel, Svg } from '@ohif/ui';
+
+const Viewer = () => {
+  return (
+    <div>
+      <NavBar className="justify-start">
+        <div className="m-3">
+          <Svg name="logo-ohif" />
+        </div>
+      </NavBar>
+      <div
+        className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+        style={{ height: 'calc(100vh - 57px' }}
+      >
+        <SidePanel
+          side="left"
+          className="h-100 bg-primary-light border-r-1 border-black"
+          iconName="launch-arrow"
+          componentName="Study List"
+        >
+          <div>GUSTAVO</div>
+        </SidePanel>
+        <div className="flex-1 h-100 overflow-hidden w-100 bg-black">
+          CONTENT
+        </div>
+        <SidePanel
+          side="right"
+          className="h-100 bg-primary-light border-l-1 border-black"
+          iconName="launch-arrow"
+          componentName="Measurements"
+        >
+          <div>GUSTAVO DO OUTRO LADO</div>
+        </SidePanel>
+      </div>
+    </div>
+  );
+};
+
+export default Viewer;
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx
new file mode 100644
index 000000000..391606b18
--- /dev/null
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@@ -0,0 +1,14 @@
+---
+name: Viewer
+menu: Views
+route: views/viewer
+---
+
+import { Playground, Props } from 'docz';
+import { Viewer } from '@ohif/ui';
+
+# Viewer
+
+<Playground>
+  <Viewer />
+</Playground>
diff --git a/platform/ui/src/views/Viewer/index.js b/platform/ui/src/views/Viewer/index.js
new file mode 100644
index 000000000..db3b46f12
--- /dev/null
+++ b/platform/ui/src/views/Viewer/index.js
@@ -0,0 +1,2 @@
+import Viewer from './Viewer';
+export default Viewer;
diff --git a/platform/ui/src/views/index.js b/platform/ui/src/views/index.js
index aeaa206c0..f81a5b727 100644
--- a/platform/ui/src/views/index.js
+++ b/platform/ui/src/views/index.js
@@ -1,3 +1,4 @@
 import StudyList from './StudyList';
+import Viewer from './Viewer';
 
-export { StudyList };
+export { StudyList, Viewer };
diff --git a/platform/viewer/src/App.js b/platform/viewer/src/App.js
index 5cf93cc9d..8c0e4f984 100644
--- a/platform/viewer/src/App.js
+++ b/platform/viewer/src/App.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { ThemeWrapper } from '@ohif/ui';
+import { ThemeWrapper, Viewer } from '@ohif/ui';
 
 import ConnectedStudyList from './connectedComponents/ConnectedStudyList';
 
 const App = () => {
   return (
     <ThemeWrapper>
-      <ConnectedStudyList />
+      <Viewer />
     </ThemeWrapper>
   );
 };