diff --git a/src/Board.js b/src/Board.js index 3de574c3ba1236a8cd0eb9011231899c0f030be0..c7a4c1e2f6efe6d9167712850366d33fa9c6bad6 100755 --- a/src/Board.js +++ b/src/Board.js @@ -2,7 +2,7 @@ import React from 'react'; // Tab-based dynamic layout manager import FlexLayout from 'flexlayout-react'; // MobX, a state manager -import {toJS} from 'mobx' +import {reaction, toJS} from 'mobx' import {observer} from 'mobx-react' // The React Components that are going into tabs import {VideoStream, DemoVideoStream} from './VideoStream' @@ -26,6 +26,8 @@ class Board extends React.Component { super(props) this.state = {model: FlexLayout.Model.fromJson(json)} + reaction(() => this.props.store.sharedData.get('newTab'), this.addTab.bind(this)); + this.refLayout = React.createRef(); } @@ -77,12 +79,15 @@ class Board extends React.Component { }, null); } - onAdd(event) { - this.refLayout.current.addTabWithDragAndDropIndirect("Add panel<br>(Drag to location)", { - component: "h-gauge", - name: "added", - config: {value: 0.5} - }, null); + addTab() { + if (this.props.store.sharedData.has('newTab')) { + const {component, name} = this.props.store.sharedData.get('newTab'); + this.refLayout.current.addTabWithDragAndDrop(`Add ${name}<br>(Drag to location)`, { + component: component, + name: "New tab" + }, null); + this.props.store.sharedData.delete('newTab') + } } /** diff --git a/src/Menu/index.js b/src/Menu/index.js index 7cb5bf297de22215ea4f76f13c003807cd16acac..58ebe8cad9aafa3436cbc0d1df49ae6dd3469a58 100644 --- a/src/Menu/index.js +++ b/src/Menu/index.js @@ -27,14 +27,12 @@ export function Menu(props) { Custom </div> - <NavItem eventKey="demo"> + <NavItem eventKey="demo" onClick={() => props.drag('h-gauge', "Horizontal Gauge")}> <NavIcon> - {/* <a href="#"> */} - <img className="menu-button" - src={window.location.origin + "/images/icons/dashboard-grey.svg"} - alt="Demo mode" - /> - {/* </a> */} + <img className="menu-button" + src={window.location.origin + "/images/icons/dashboard-grey.svg"} + alt="Demo mode" + /> </NavIcon> <NavText> Demo @@ -167,4 +165,4 @@ export function Menu(props) { </SideNav.Nav> </SideNav> ) -} +}) diff --git a/src/index.js b/src/index.js index 7d2c6311c71fd49f4041c843b693b143c9f91121..05796c31917fc211344850267c0f7363f4aa4e6d 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,7 @@ class ObservableStore { this.modal.mode = null; this.modal.component = null; } + dragging = false } decorate(ObservableStore, { components: observable, @@ -82,10 +83,14 @@ class Main extends React.Component { </div>); } + function addTab(component, name) { + this.store.sharedData.set('newTab', {component: component, name: name}); + } + return ( <div id="level-1"> <div id="menu"> - <Menu ros={this.ros}/> + <Menu ros={this.ros} store={this.store} drag={addTab.bind(this)}/> </div> <div id="level-2"> <div id="header">