diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index af0ec8397..e809f6619 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -1,15 +1,90 @@ +const defaultsDeep = require('lodash.defaultsdeep'); const React = require('react'); +const VM = require('scratch-vm'); + +const MediaLibrary = require('../../lib/media-library'); +const shapeFromPropTypes = require('../../lib/shape-from-prop-types'); + +const Blocks = require('../../containers/blocks.jsx'); +const GreenFlag = require('../../containers/green-flag.jsx'); +const TargetPane = require('../../containers/target-pane.jsx'); +const Stage = require('../../containers/stage.jsx'); +const StopAll = require('../../containers/stop-all.jsx'); const styles = require('./gui.css'); -const GUIComponent = props => ( -
- {props.children} -
-); +const GUIComponent = props => { + let { + basePath, + blocksProps, + children, + greenFlagProps, + mediaLibrary, + targetPaneProps, + stageProps, + stopAllProps, + vm + } = props; + blocksProps = defaultsDeep({}, blocksProps, { + options: { + media: `${basePath}static/blocks-media/` + } + }); + if (children) { + return ( +
+ {children} +
+ ); + } + return ( +
+ + + + + +
+ ); +}; GUIComponent.propTypes = { - children: React.PropTypes.node + basePath: React.PropTypes.string, + blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}), + children: React.PropTypes.node, + greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}), + mediaLibrary: React.PropTypes.instanceOf(MediaLibrary), + stageProps: shapeFromPropTypes(Stage.propTypes, {omit: ['vm']}), + stopAllProps: shapeFromPropTypes(StopAll.propTypes, {omit: ['vm']}), + targetPaneProps: shapeFromPropTypes(TargetPane.propTypes, {omit: ['vm']}), + vm: React.PropTypes.instanceOf(VM) +}; + +GUIComponent.defaultProps = { + basePath: '/', + blocksProps: {}, + greenFlagProps: {}, + mediaLibrary: new MediaLibrary(), + targetPaneProps: {}, + stageProps: {}, + stopAllProps: {}, + vm: new VM() }; module.exports = GUIComponent; diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index af2d64480..c254817b4 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -1,17 +1,9 @@ -const defaultsDeep = require('lodash.defaultsdeep'); const React = require('react'); const VM = require('scratch-vm'); -const MediaLibrary = require('../lib/media-library'); -const shapeFromPropTypes = require('../lib/shape-from-prop-types'); const vmListenerHOC = require('../lib/vm-listener-hoc.jsx'); -const Blocks = require('./blocks.jsx'); const GUIComponent = require('../components/gui/gui.jsx'); -const GreenFlag = require('./green-flag.jsx'); -const TargetPane = require('./target-pane.jsx'); -const Stage = require('./stage.jsx'); -const StopAll = require('./stop-all.jsx'); class GUI extends React.Component { componentDidMount () { @@ -27,80 +19,26 @@ class GUI extends React.Component { this.props.vm.stopAll(); } render () { - let { - basePath, - blocksProps, - greenFlagProps, - mediaLibrary, + const { projectData, // eslint-disable-line no-unused-vars - targetPaneProps, - stageProps, - stopAllProps, vm, - ...guiProps + ...componentProps } = this.props; - blocksProps = defaultsDeep({}, blocksProps, { - options: { - media: `${basePath}static/blocks-media/` - } - }); - if (this.props.children) { - return ( - - {this.props.children} - - ); - } return ( - - - - - - - + ); } } GUI.propTypes = { - basePath: React.PropTypes.string, - blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}), - children: React.PropTypes.node, - greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}), - mediaLibrary: React.PropTypes.instanceOf(MediaLibrary), + ...GUIComponent.propTypes, projectData: React.PropTypes.string, - stageProps: shapeFromPropTypes(Stage.propTypes, {omit: ['vm']}), - stopAllProps: shapeFromPropTypes(StopAll.propTypes, {omit: ['vm']}), - targetPaneProps: shapeFromPropTypes(TargetPane.propTypes, {omit: ['vm']}), vm: React.PropTypes.instanceOf(VM) }; -GUI.defaultProps = { - basePath: '/', - blocksProps: {}, - greenFlagProps: {}, - mediaLibrary: new MediaLibrary(), - targetPaneProps: {}, - stageProps: {}, - stopAllProps: {}, - vm: new VM() -}; +GUI.defaultProps = GUIComponent.defaultProps; module.exports = vmListenerHOC(GUI);