From b1c14cc3291fc67f022dcea06db4db1b0f6fae28 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 19 Oct 2016 10:23:25 -0400
Subject: [PATCH] Apply props-passing pattern to all components
---
src/components/blocks.js | 7 ++++++-
src/components/green-flag.js | 8 +++++++-
src/components/gui.js | 9 +++++++--
src/components/sprite-selector.js | 13 ++++++++++---
src/components/stage.js | 13 ++++++++++---
src/components/stop-all.js | 8 +++++++-
src/containers/blocks.js | 12 ++++++++++--
src/containers/green-flag.js | 11 ++++++++++-
src/containers/sprite-selector.js | 5 +++++
src/containers/stage.js | 9 ++++++++-
src/containers/stop-all.js | 6 +++++-
11 files changed, 85 insertions(+), 16 deletions(-)
diff --git a/src/components/blocks.js b/src/components/blocks.js
index fdd6f1467..357ae71b1 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 20be45505..ce7b490a5 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 861cda692..4e23bada0 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 93ddcb389..a37213d9b 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 4cdbc7895..89cfa4d15 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 10ed6c397..6b8f616bc 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 a43f18b9a..c9f07ce13 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 da97dff71..233313b79 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 b3c8ee744..2f5c83d44 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 11cf4b9e2..3a195ccf7 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 9e08aa16a..9b4f0f95d 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}
/>
);
}
--
GitLab