diff --git a/src/components/blocks.js b/src/components/blocks.js
index fdd6f146760a2014b5fb5d7018b9bc618da18955..357ae71b1f14617ed7cbb99e8abe624cbb5b89b0 100644
--- a/src/components/blocks.js
+++ b/src/components/blocks.js
@@ -2,9 +2,13 @@ const React = require('react');
class BlocksComponent extends React.Component {
render () {
+ const {
+ componentRef,
+ ...props
+ } = this.props;
return (
<div
- ref={this.props.componentRef}
+ ref={componentRef}
className="scratch-blocks"
style={{
position: 'absolute',
@@ -13,6 +17,7 @@ class BlocksComponent extends React.Component {
bottom: 0,
left: 0
}}
+ {...props}
/>
);
}
diff --git a/src/components/green-flag.js b/src/components/green-flag.js
index 20be45505677b855656029225b7b7a5ae04a9a64..ce7b490a57a746ec1e28e36fa3def732c3d76074 100644
--- a/src/components/green-flag.js
+++ b/src/components/green-flag.js
@@ -2,6 +2,11 @@ const React = require('react');
class GreenFlagComponent extends React.Component {
render () {
+ const {
+ onClick,
+ title,
+ ...props
+ } = this.props;
return (
<div
className="scratch-green-flag"
@@ -11,8 +16,9 @@ class GreenFlagComponent extends React.Component {
right: 440,
width: 50
}}
+ {...props}
>
- <button onClick={this.props.onClick}>{this.props.title}</button>
+ <button onClick={onClick}>{title}</button>
</div>
);
}
diff --git a/src/components/gui.js b/src/components/gui.js
index 861cda6928161dbb7ff460e8253698894c5ad30c..4e23bada095ce0cf216c52300b4aee438763e3a4 100644
--- a/src/components/gui.js
+++ b/src/components/gui.js
@@ -2,6 +2,10 @@ const React = require('react');
class GUIComponent extends React.Component {
render () {
+ const {
+ children,
+ ...props
+ } = this.props;
return (
<div
className="scratch-gui"
@@ -12,15 +16,16 @@ class GUIComponent extends React.Component {
bottom: 0,
left: 0
}}
+ {...props}
>
- {this.props.children}
+ {children}
</div>
);
}
}
GUIComponent.propTypes = {
- children: React.PropTypes.arrayOf(React.PropTypes.node)
+ children: React.PropTypes.node
};
module.exports = GUIComponent;
diff --git a/src/components/sprite-selector.js b/src/components/sprite-selector.js
index 93ddcb389b2237828aa7e5e8e684d5631e395933..a37213d9b25db729ea3736eab486ee28f942bc98 100644
--- a/src/components/sprite-selector.js
+++ b/src/components/sprite-selector.js
@@ -2,6 +2,12 @@ const React = require('react');
class SpriteSelectorComponent extends React.Component {
render () {
+ const {
+ onChange,
+ sprites,
+ value,
+ ...props
+ } = this.props;
return (
<div
style={{
@@ -9,13 +15,14 @@ class SpriteSelectorComponent extends React.Component {
top: 380,
right: 10,
}}
+ {...props}
>
<select
multiple
- value={this.props.value}
- onChange={this.props.onChange}
+ value={value}
+ onChange={onChange}
>
- {this.props.sprites.map(sprite => (
+ {sprites.map(sprite => (
<option value={sprite.id} key={sprite.id}>
{sprite.name}
</option>
diff --git a/src/components/stage.js b/src/components/stage.js
index 4cdbc78959e633ee286bb64ff3e1905976d53577..89cfa4d156220ecc7f31699c159dcb114b207ef2 100644
--- a/src/components/stage.js
+++ b/src/components/stage.js
@@ -2,17 +2,24 @@ const React = require('react');
class StageComponent extends React.Component {
render () {
+ const {
+ canvasRef,
+ width,
+ height,
+ ...props
+ } = this.props;
return (
<canvas
className="scratch-stage"
- ref={this.props.canvasRef}
+ ref={canvasRef}
style={{
position: 'absolute',
top: 10,
right: 10,
- width: this.props.width,
- height: this.props.height,
+ width: width,
+ height: height,
}}
+ {...props}
/>
);
}
diff --git a/src/components/stop-all.js b/src/components/stop-all.js
index 10ed6c397a13a57b393b6cb42dcc2ab583e6a408..6b8f616bc01211d1e1efa38372e9c98ac249ca4c 100644
--- a/src/components/stop-all.js
+++ b/src/components/stop-all.js
@@ -2,6 +2,11 @@ const React = require('react');
class StopAllComponent extends React.Component {
render () {
+ const {
+ onClick,
+ title,
+ ...props
+ } = this.props;
return (
<div
className="scratch-stop-all"
@@ -11,8 +16,9 @@ class StopAllComponent extends React.Component {
right: 400,
width: 50
}}
+ {...props}
>
- <button onClick={this.props.onClick}>{this.props.title}</button>
+ <button onClick={onClick}>{title}</button>
</div>
);
}
diff --git a/src/containers/blocks.js b/src/containers/blocks.js
index a43f18b9a3e927d500d8914fe3e29fdb5525aceb..c9f07ce13868b913d5336ea629629639248b9945 100644
--- a/src/containers/blocks.js
+++ b/src/containers/blocks.js
@@ -67,13 +67,21 @@ class Blocks extends React.Component {
onWorkspaceUpdate (data) {
ScratchBlocks.Events.disable();
this.workspace.clear();
- let dom = ScratchBlocks.Xml.textToDom(data.xml);
+ const dom = ScratchBlocks.Xml.textToDom(data.xml);
ScratchBlocks.Xml.domToWorkspace(dom, this.workspace);
ScratchBlocks.Events.enable();
}
render () {
+ const {
+ options, // eslint-disable-line no-unused-vars
+ vm, // eslint-disable-line no-unused-vars
+ ...props
+ } = this.props;
return (
- <BlocksComponent componentRef={c => this.blocks = c} />
+ <BlocksComponent
+ componentRef={c => this.blocks = c}
+ {...props}
+ />
);
}
}
diff --git a/src/containers/green-flag.js b/src/containers/green-flag.js
index da97dff719430c9c8fbab906cdf4463304ae0ba1..233313b7950bd4a387361e199fa25c666a403a15 100644
--- a/src/containers/green-flag.js
+++ b/src/containers/green-flag.js
@@ -13,7 +13,16 @@ class GreenFlag extends React.Component {
this.props.vm.greenFlag();
}
render () {
- return <GreenFlagComponent onClick={this.onClick} />;
+ const {
+ vm, // eslint-disable-line no-unused-vars
+ ...props
+ } = this.props;
+ return (
+ <GreenFlagComponent
+ onClick={this.onClick}
+ {...props}
+ />
+ );
}
}
diff --git a/src/containers/sprite-selector.js b/src/containers/sprite-selector.js
index b3c8ee744a269d72921305792b7b7b8853415dc0..2f5c83d44f702f089f5f7019c68772dbc5fbd0f4 100644
--- a/src/containers/sprite-selector.js
+++ b/src/containers/sprite-selector.js
@@ -23,6 +23,10 @@ class SpriteSelector extends React.Component {
this.setState({targets: data});
}
render () {
+ const {
+ vm, // eslint-disable-line no-unused-vars
+ ...props
+ } = this.props;
return (
<SpriteSelectorComponent
value={this.state.targets.editingTarget && [this.state.targets.editingTarget]}
@@ -33,6 +37,7 @@ class SpriteSelector extends React.Component {
name: target[1]
}
))}
+ {...props}
/>
);
}
diff --git a/src/containers/stage.js b/src/containers/stage.js
index 11cf4b9e26e4c57b1e534a43a9cc0f964713f5e1..3a195ccf77a8d04b7145258a0b5baf27346dbb53 100644
--- a/src/containers/stage.js
+++ b/src/containers/stage.js
@@ -84,8 +84,15 @@ class Stage extends React.Component {
this.animationFrame = requestAnimationFrame(this.animate);
}
render () {
+ const {
+ vm, // eslint-disable-line no-unused-vars
+ ...props
+ } = this.props;
return (
- <StageComponent canvasRef={canvas => this.canvas = canvas} />
+ <StageComponent
+ canvasRef={canvas => this.canvas = canvas}
+ {...props}
+ />
);
}
}
diff --git a/src/containers/stop-all.js b/src/containers/stop-all.js
index 9e08aa16a9fc1de20337a3ef1f0a8268f44ad87a..9b4f0f95d41c9489de41694113df949c3d225f98 100644
--- a/src/containers/stop-all.js
+++ b/src/containers/stop-all.js
@@ -13,10 +13,14 @@ class StopAll extends React.Component {
this.props.vm.stopAll();
}
render () {
+ const {
+ vm, // eslint-disable-line no-unused-vars
+ ...props
+ } = this.props;
return (
<StopAllComponent
onClick={this.onClick}
- {... this.props}
+ {...props}
/>
);
}