Merge pull request scratchfoundation#29 from rschamp/declutter

YAGNI: Remove clutter from GUI component
picklesrus · Dec 20, 2016 · f9172d3 · f9172d3
2 parents 8ce79f0 + b85c61a
commit f9172d3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 50 deletions.
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
@@ -1,9 +1,6 @@
-const defaultsDeep = require('lodash.defaultsdeep');
 const React = require('react');
 const VM = require('scratch-vm');
 
-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');
@@ -13,24 +10,15 @@ const StopAll = require('../../containers/stop-all.jsx');
 const Box = require('../box/box.jsx');
 
 const GUIComponent = props => {
-    let {
+    const {
         basePath,
-        blocksProps,
         children,
-        greenFlagProps,
-        targetPaneProps,
-        stageProps,
-        stopAllProps,
-        vm
+        vm,
+        ...componentProps
     } = props;
-    blocksProps = defaultsDeep({}, blocksProps, {
-        options: {
-            media: `${basePath}static/blocks-media/`
-        }
-    });
     if (children) {
         return (
-            <Box>
+            <Box {...componentProps}>
                 {children}
             </Box>
         );
@@ -40,6 +28,7 @@ const GUIComponent = props => {
             grow={1}
             height="100%"
             style={{overflow: 'hidden'}}
+            {...componentProps}
         >
             <Box
                 direction="column"
@@ -55,8 +44,10 @@ const GUIComponent = props => {
                 />
                 <Blocks
                     grow={1}
+                    options={{
+                        media: `${basePath}static/blocks-media/`
+                    }}
                     vm={vm}
-                    {...blocksProps}
                 />
             </Box>
             <Box
@@ -72,46 +63,28 @@ const GUIComponent = props => {
                         marginTop: 8
                     }}
                 >
-                    <GreenFlag
-                        vm={vm}
-                        {...greenFlagProps}
-                    />
-                    <StopAll
-                        vm={vm}
-                        {...stopAllProps}
-                    />
+                    <GreenFlag vm={vm} />
+                    <StopAll vm={vm} />
                 </Box>
                 <Stage
                     shrink={0}
                     vm={vm}
-                    {...stageProps}
                 />
                 <TargetPane
                     grow={1}
                     vm={vm}
-                    {...targetPaneProps}
                 />
             </Box>
         </Box>
     );
 };
 GUIComponent.propTypes = {
     basePath: React.PropTypes.string,
-    blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}),
     children: React.PropTypes.node,
-    greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}),
-    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: {},
-    targetPaneProps: {},
-    stageProps: {},
-    stopAllProps: {},
     vm: new VM()
 };
 module.exports = GUIComponent;
diff --git a/src/lib/shape-from-prop-types.js b/src/lib/shape-from-prop-types.js