diff --git a/OHIFViewer-react/package.json b/OHIFViewer-react/package.json index aa43be1bb..b046c78e7 100644 --- a/OHIFViewer-react/package.json +++ b/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": { diff --git a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js b/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js index cc5f8b7bc..015b736c4 100644 --- a/OHIFViewer-react/src/FlexboxLayout/FlexboxLayout.js +++ b/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 (
-
+
- +
-
+
{/*{{> measurementLightTable (clone this)}}*/}
@@ -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; diff --git a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js b/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js index e9fb80088..4b89709a7 100644 --- a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js +++ b/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 (
- +
diff --git a/OHIFViewer-react/src/Viewer/Viewer.js b/OHIFViewer-react/src/Viewer/Viewer.js index 11a60dea3..5874e9b60 100644 --- a/OHIFViewer-react/src/Viewer/Viewer.js +++ b/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 {
{/**/} - +
); diff --git a/OHIFViewer-react/src/redux/ui.js b/OHIFViewer-react/src/redux/ui.js index fcf9501d4..776864e67 100644 --- a/OHIFViewer-react/src/redux/ui.js +++ b/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; } diff --git a/OHIFViewer-react/src/sha.js b/OHIFViewer-react/src/sha.js index 7ef41b114..456722165 100644 --- a/OHIFViewer-react/src/sha.js +++ b/OHIFViewer-react/src/sha.js @@ -1 +1 @@ -export default '4174018149a2ccfece83df3b190ba9aeed548521'; +export default 'c08d12cb36ad7b1ff310b4970a84bc7e6a14e6ed'; diff --git a/OHIFViewer-react/yarn.lock b/OHIFViewer-react/yarn.lock index 6c9affa2d..96fda6abf 100644 --- a/OHIFViewer-react/yarn.lock +++ b/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"