diff --git a/src/components/green-flag/green-flag.jsx b/src/components/green-flag/green-flag.jsx
index 33086cf3d..d3c00d70c 100644
--- a/src/components/green-flag/green-flag.jsx
+++ b/src/components/green-flag/green-flag.jsx
@@ -1,30 +1,28 @@
const React = require('react');
const greenFlagIcon = require('./green-flag.svg');
-class GreenFlagComponent extends React.Component {
- render () {
- const {
- onClick,
- title,
- ...props
- } = this.props;
- return (
-
- );
- }
-}
+const GreenFlagComponent = function (props) {
+ const {
+ onClick,
+ title,
+ ...componentProps
+ } = props;
+ return (
+
+ );
+};
GreenFlagComponent.propTypes = {
onClick: React.PropTypes.func,
diff --git a/src/components/gui.jsx b/src/components/gui.jsx
index 4e23bada0..568d2e169 100644
--- a/src/components/gui.jsx
+++ b/src/components/gui.jsx
@@ -1,28 +1,26 @@
const React = require('react');
-class GUIComponent extends React.Component {
- render () {
- const {
- children,
- ...props
- } = this.props;
- return (
-
- {children}
-
- );
- }
-}
+const GUIComponent = function (props) {
+ const {
+ children,
+ ...componentProps
+ } = props;
+ return (
+
+ {children}
+
+ );
+};
GUIComponent.propTypes = {
children: React.PropTypes.node
diff --git a/src/components/sprite-selector.jsx b/src/components/sprite-selector.jsx
index a8384bb56..069829b73 100644
--- a/src/components/sprite-selector.jsx
+++ b/src/components/sprite-selector.jsx
@@ -1,48 +1,46 @@
const React = require('react');
-class SpriteSelectorComponent extends React.Component {
- render () {
- const {
- onChange,
- sprites,
- value,
- openNewSprite,
- openNewCostume,
- openNewBackdrop,
- ...props
- } = this.props;
- return (
-
+
- );
- }
-}
+ {sprites.map(sprite => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
SpriteSelectorComponent.propTypes = {
onChange: React.PropTypes.func,
diff --git a/src/components/stop-all/stop-all.jsx b/src/components/stop-all/stop-all.jsx
index bc135e1d6..a1208f7d3 100644
--- a/src/components/stop-all/stop-all.jsx
+++ b/src/components/stop-all/stop-all.jsx
@@ -1,30 +1,28 @@
const React = require('react');
const stopAllIcon = require('./stop-all.svg');
-class StopAllComponent extends React.Component {
- render () {
- const {
- onClick,
- title,
- ...props
- } = this.props;
- return (
-
- );
- }
-}
+const StopAllComponent = function (props) {
+ const {
+ onClick,
+ title,
+ ...componentProps
+ } = props;
+ return (
+
+ );
+};
StopAllComponent.propTypes = {
onClick: React.PropTypes.func,
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index a5977a9f7..f1bb945f4 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -17,7 +17,8 @@ class Blocks extends React.Component {
'onBlockGlowOn',
'onBlockGlowOff',
'onVisualReport',
- 'onWorkspaceUpdate'
+ 'onWorkspaceUpdate',
+ 'setBlocks'
]);
}
componentDidMount () {
@@ -72,6 +73,9 @@ class Blocks extends React.Component {
ScratchBlocks.Xml.domToWorkspace(dom, this.workspace);
ScratchBlocks.Events.enable();
}
+ setBlocks (blocks) {
+ this.blocks = blocks;
+ }
render () {
const {
options, // eslint-disable-line no-unused-vars
@@ -80,7 +84,7 @@ class Blocks extends React.Component {
} = this.props;
return (
(this.blocks = c)}
+ componentRef={this.setBlocks}
{...props}
/>
);
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 736c5d00e..53f2aa869 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -13,7 +13,8 @@ class Stage extends React.Component {
'detachMouseEvents',
'onMouseUp',
'onMouseMove',
- 'onMouseDown'
+ 'onMouseDown',
+ 'setCanvas'
]);
}
componentDidMount () {
@@ -68,6 +69,9 @@ class Stage extends React.Component {
this.props.vm.postIOData('mouse', data);
e.preventDefault();
}
+ setCanvas (canvas) {
+ this.canvas = canvas;
+ }
render () {
const {
vm, // eslint-disable-line no-unused-vars
@@ -75,7 +79,7 @@ class Stage extends React.Component {
} = this.props;
return (
(this.canvas = canvas)}
+ canvasRef={this.setCanvas}
{...props}
/>
);