diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index af0ec8397998d0a8ba54e032e57d7d5fc4a7babe..e809f661912b6add400b59a356be00ce863b97f3 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 => ( - <div className={styles.gui}> - {props.children} - </div> -); +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 ( + <div className={styles.gui}> + {children} + </div> + ); + } + return ( + <div className={styles.gui}> + <GreenFlag + vm={vm} + {...greenFlagProps} + /> + <StopAll + vm={vm} + {...stopAllProps} + /> + <Stage + vm={vm} + {...stageProps} + /> + <TargetPane + mediaLibrary={mediaLibrary} + vm={vm} + {... targetPaneProps} + /> + <Blocks + vm={vm} + {... blocksProps} + /> + </div> + ); +}; 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 af2d6448065190ff2bedc440e1394c9e5235d01f..c254817b4bd02a77149645fcf28e32675cf38dde 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 ( - <GUIComponent {... guiProps}> - {this.props.children} - </GUIComponent> - ); - } return ( - <GUIComponent {... guiProps}> - <GreenFlag - vm={vm} - {...greenFlagProps} - /> - <StopAll - vm={vm} - {...stopAllProps} - /> - <Stage - vm={vm} - {...stageProps} - /> - <TargetPane - mediaLibrary={mediaLibrary} - vm={vm} - {... targetPaneProps} - /> - <Blocks - vm={vm} - {... blocksProps} - /> - </GUIComponent> + <GUIComponent + vm={vm} + {...componentProps} + /> ); } } 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);