Fixes for opening/closing sidebar

OHIFViewer-react/package.json

@@ -23,7 +23,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.1",
-    "react-viewerbase": "^0.1.4",
+    "react-viewerbase": "^0.1.5",
     "redux": "^4.0.1"
   },
   "scripts": {

OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js

@@ -4,7 +4,7 @@ import OHIF from 'ohif-core';
 import cornerstone from 'cornerstone-core';
 import { StudyBrowser } from 'react-viewerbase';
 import ViewerMain from './ViewerMain.js';
-import ToolbarRow from './ToolbarRow.js';
+import ConnectedToolbarRow from './ConnectedToolbarRow.js';
 
 import './FlexboxLayout.css';
 // TODO: Where should we put ViewerMain? ohif-core or react-viewerbase?
@@ -69,8 +69,6 @@ class FlexboxLayout extends Component {
         super(props);
 
         this.state = {
-            leftSidebarOpen: true, // TODO: switch to false by default. Leaving it like this for testing
-            rightSidebarOpen: false,
             studiesForBrowser: this.getStudiesForBrowser(),
         };
 
@@ -139,25 +137,25 @@ class FlexboxLayout extends Component {
 
     render() {
         let mainContentClassName = "main-content"
-        if (this.state.leftSidebarOpen) {
+        if (this.props.leftSidebarOpen) {
             mainContentClassName += ' sidebar-left-open';
         }
 
-        if (this.state.rightSidebarOpen) {
+        if (this.props.rightSidebarOpen) {
             mainContentClassName += ' sidebar-right-open';
         }
 
         // TODO[react]: Add measurementLightTable
         return (
             <div className="FlexboxLayout">
-                <div className={this.state.leftSidebarOpen ? "sidebar-menu sidebar-left sidebar-open" : "sidebarMenu sidebar-left"}>
+                <div className={this.props.leftSidebarOpen ? "sidebar-menu sidebar-left sidebar-open" : "sidebar-menu sidebar-left"}>
                     <StudyBrowser studies={this.state.studiesForBrowser}/>
                 </div>
                 <div className={mainContentClassName}>
-                    <ToolbarRow/>
+                    <ConnectedToolbarRow/>
                     <ViewerMain studies={this.props.studies}/>
                 </div>
-                <div className={this.state.rightSidebarOpen ? "sidebar-menu sidebar-right sidebar-open" : "sidebarMenu sidebar-right"}>
+                <div className={this.props.rightSidebarOpen ? "sidebar-menu sidebar-right sidebar-open" : "sidebar-menu sidebar-right"}>
                     {/*{{> measurementLightTable (clone this)}}*/}
                 </div>
             </div>
@@ -166,7 +164,9 @@ class FlexboxLayout extends Component {
 }
 
 FlexboxLayout.propTypes = {
-    studies: PropTypes.array.isRequired
+    studies: PropTypes.array.isRequired,
+    leftSidebarOpen: PropTypes.bool.isRequired,
+    rightSidebarOpen: PropTypes.bool.isRequired,
 };
 
 export default FlexboxLayout;

OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js

@@ -1,9 +1,28 @@
 import React, { Component } from "react";
 import ConnectedToolbarSection from './ConnectedToolbarSection';
+import PropTypes from 'prop-types';
 import { RoundedButtonGroup } from 'react-viewerbase';
 import './ToolbarRow.css';
 
 class ToolbarRow extends Component {
+    static propTypes = {
+        leftSidebarOpen: PropTypes.bool.isRequired,
+        rightSidebarOpen: PropTypes.bool.isRequired,
+        setLeftSidebarOpen: PropTypes.func,
+        setRightSidebarOpen: PropTypes.func
+    };
+
+    static defaultProps = {
+        leftSidebarOpen: false,
+        rightSidebarOpen: false
+    };
+
+    onLeftSidebarValueChanged = (value) => {
+        this.props.setLeftSidebarOpen(!!value);
+
+        console.log('value changed: ', value);
+    }
+
     render() {
         const leftSidebarToggle = [{
             value: 'studies',
@@ -11,15 +30,14 @@ class ToolbarRow extends Component {
             svgWidth: 15,
             svgHeight: 13,
             bottomLabel: 'Series',
-            onValueChanged: (value) => {
-                console.log('value changed: ', value);
-            }
         }];
 
+        const leftSidebarValue = this.props.leftSidebarOpen ? leftSidebarToggle[0].value : null;
+
         return (<div className="ToolbarRow">
             <div className="clearfix">
                 <div className="pull-left m-t-1">
-                    <RoundedButtonGroup options={leftSidebarToggle}/>
+                    <RoundedButtonGroup options={leftSidebarToggle} value={leftSidebarValue} onValueChanged={this.onLeftSidebarValueChanged}/>
                 </div>
                 <ConnectedToolbarSection/>
                 <div className="pull-right m-t-1 rm-x-1">

OHIFViewer-react/src/Viewer/Viewer.js

@@ -4,7 +4,7 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from 'ohif-core';
 import { CineDialog } from 'react-viewerbase';
-import FlexboxLayout from '../FlexboxLayout/FlexboxLayout.js';
+import ConnectedFlexboxLayout from '../FlexboxLayout/ConnectedFlexboxLayout.js';
 import './Viewer.css';
 
 /**
@@ -86,7 +86,7 @@ class Viewer extends Component {
                 </div>
                 <div id="viewer" className='Viewer'>
                     {/*<ToolbarSection/>*/}
-                    <FlexboxLayout studies={this.state.studies}/>
+                    <ConnectedFlexboxLayout studies={this.state.studies}/>
                 </div>
             </>
         );

OHIFViewer-react/src/redux/ui.js

@@ -1,14 +1,15 @@
 const defaultState = {
-    sidebarLeftOpen: true,
-    sidebarRightOpen: true,
+    leftSidebarOpen: true,
+    rightSidebarOpen: false,
 }
 
 const ui = (state = defaultState, action) => {
+    console.log(action);
     switch (action.type) {
-        case 'TOGGLE_LEFT_SIDEBAR':
-            return Object.assign({}, state, { sidebarLeftOpen: !state.sidebarLeftOpen });
-        case 'TOGGLE_RIGHT_SIDEBAR':
-            return Object.assign({}, state, { sidebarRightOpen: !state.sidebarRightOpen });
+        case 'SET_LEFT_SIDEBAR_OPEN':
+            return Object.assign({}, state, { leftSidebarOpen: action.state });
+        case 'SET_RIGHT_SIDEBAR_OPEN':
+            return Object.assign({}, state, { rightSidebarOpen: action.state });
         default:
             return state;
     }

OHIFViewer-react/src/sha.js

@@ -1 +1 @@
-export default '4174018149a2ccfece83df3b190ba9aeed548521';
+export default 'c08d12cb36ad7b1ff310b4970a84bc7e6a14e6ed';

OHIFViewer-react/yarn.lock

@@ -8288,10 +8288,10 @@ react-scripts@^2.1.1:
   optionalDependencies:
     fsevents "1.2.4"
 
-react-viewerbase@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/react-viewerbase/-/react-viewerbase-0.1.4.tgz#3df7c35e3af3cc1b1a42a8d295ab28bb086efca3"
-  integrity sha512-uj5AMJ9gdHxSJ8JmNVOS3ri9RdVhCAUFf2OX0u5qJ20vpkp3gUHE9ENjZdjYEQ8222g7jhB4d3EM1Jd8wALYNA==
+react-viewerbase@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/react-viewerbase/-/react-viewerbase-0.1.5.tgz#a5ef7fd852ead91c74fb0068a7cb97c922a9c17a"
+  integrity sha512-196Req5szlhpvQWivxZmQzF3dMj2vCJtjnyusullRd8isTdaK+cLaCuKBRiJ5Eo6zwM69uTXj7ar8BHQARRzeQ==
   dependencies:
     classnames "^2.2.6"