diff --git a/src/components/costume-canvas.js b/src/components/costume-canvas.js
index 73c6002b6b6b82124f05ecf7daaf2a320476ddad..ac0646756ff97c7d05e940c52f46bffc57681be5 100644
--- a/src/components/costume-canvas.js
+++ b/src/components/costume-canvas.js
@@ -90,9 +90,11 @@ class CostumeCanvas extends React.Component {
}
}
render () {
- return <canvas ref='costumeCanvas'
+ return <canvas
+ ref='costumeCanvas'
width={this.props.width}
- height={this.props.height} />;
+ height={this.props.height}
+ />;
}
}
diff --git a/src/components/library.js b/src/components/library.js
index 39dec362a6fe05c7e737c0a80444ef9eedd85212..cd0dd87690a9d2ab5d0da26a0c7cd0177c6f48b4 100644
--- a/src/components/library.js
+++ b/src/components/library.js
@@ -42,8 +42,10 @@ class LibraryComponent extends React.Component {
};
return (
- <ModalComponent onRequestClose={this.props.onRequestClose}
- visible={this.props.visible}>
+ <ModalComponent
+ onRequestClose={this.props.onRequestClose}
+ visible={this.props.visible}
+ >
<h1>{this.props.title}</h1>
<div style={scrollGridStyle}>
{gridItems}
diff --git a/src/components/modal.js b/src/components/modal.js
index 791814424c2c74041eb0082e61c6609d947d8b1b..a2c25714964efa80c0a5f5580e12b360ac050844 100644
--- a/src/components/modal.js
+++ b/src/components/modal.js
@@ -8,10 +8,14 @@ class ModalComponent extends React.Component {
ref="modal"
style={this.props.modalStyle}
isOpen={this.props.visible}
- onRequestClose={this.props.onRequestClose}>
+ onRequestClose={this.props.onRequestClose}
+ >
<div
onClick={this.props.onRequestClose}
- style={this.props.closeButtonStyle}>x</div>
+ style={this.props.closeButtonStyle}
+ >
+ x
+ </div>
{this.props.children}
</ReactModal>
);
diff --git a/src/components/sprite-selector.js b/src/components/sprite-selector.js
index f6d0e7159ccbe82917f1bd77c8ae30f6e15b2176..da00622bf8f21b0c8d3b2cb57576af7d3015eb91 100644
--- a/src/components/sprite-selector.js
+++ b/src/components/sprite-selector.js
@@ -6,6 +6,9 @@ class SpriteSelectorComponent extends React.Component {
onChange,
sprites,
value,
+ openNewSprite,
+ openNewCostume,
+ openNewBackdrop,
...props
} = this.props;
return (
@@ -29,9 +32,9 @@ class SpriteSelectorComponent extends React.Component {
))}
</select>
<p>
- <button onClick={this.props.openNewSprite}>New sprite</button>
- <button onClick={this.props.openNewCostume}>New costume</button>
- <button onClick={this.props.openNewBackdrop}>New backdrop</button>
+ <button onClick={openNewSprite}>New sprite</button>
+ <button onClick={openNewCostume}>New costume</button>
+ <button onClick={openNewBackdrop}>New backdrop</button>
</p>
</div>
);
diff --git a/src/containers/backdrop-library.js b/src/containers/backdrop-library.js
index c57d0a367c1bf18b15d6b50220e5a64b280c840d..2c36868adfef91f33986cf1e432bc8fa6f56ec67 100644
--- a/src/containers/backdrop-library.js
+++ b/src/containers/backdrop-library.js
@@ -36,7 +36,8 @@ class BackdropLibrary extends React.Component {
visible={this.props.visible}
data={this.state.backdropData}
onRequestClose={this.props.onRequestClose}
- onItemSelected={this.selectItem.bind(this)} />;
+ onItemSelected={this.selectItem.bind(this)}
+ />;
}
}
diff --git a/src/containers/costume-library.js b/src/containers/costume-library.js
index 1e1d849ab449f1e293279230be667cec6e4bc520..f33b97b0d7367fd2330ece46b49f79bcff8d8d53 100644
--- a/src/containers/costume-library.js
+++ b/src/containers/costume-library.js
@@ -36,7 +36,8 @@ class CostumeLibrary extends React.Component {
visible={this.props.visible}
data={this.state.costumeData}
onRequestClose={this.props.onRequestClose}
- onItemSelected={this.selectItem.bind(this)} />;
+ onItemSelected={this.selectItem.bind(this)}
+ />;
}
}
diff --git a/src/containers/gui.js b/src/containers/gui.js
index 0ae3e8483a5450714e4416da3fe164a1767ba58b..2a3c56bb206225901c10f5ef794e1ae9ddef7ba8 100644
--- a/src/containers/gui.js
+++ b/src/containers/gui.js
@@ -1,3 +1,4 @@
+const bindAll = require('lodash.bindall');
const defaultsDeep = require('lodash.defaultsdeep');
const React = require('react');
const VM = require('scratch-vm');
@@ -19,6 +20,7 @@ const BackdropLibrary = require('./backdrop-library');
class GUI extends React.Component {
constructor (props) {
super(props);
+ bindAll(this, ['closeModal']);
this.vmManager = new VMManager(this.props.vm);
this.mediaLibrary = new MediaLibrary();
this.state = {currentModal: null};
@@ -45,10 +47,13 @@ class GUI extends React.Component {
}
render () {
let {
+ backdropLibraryProps,
basePath,
blocksProps,
+ costumeLibraryProps,
greenFlagProps,
projectData, // eslint-disable-line no-unused-vars
+ spriteLibraryProps,
spriteSelectorProps,
stageProps,
stopAllProps,
@@ -60,6 +65,21 @@ class GUI extends React.Component {
media: basePath + 'static/blocks-media/'
}
});
+ spriteLibraryProps = {
+ mediaLibrary: this.mediaLibrary,
+ onRequestClose: this.closeModal,
+ visible: this.state.currentModal == 'sprite-library'
+ };
+ costumeLibraryProps = {
+ mediaLibrary: this.mediaLibrary,
+ onRequestClose: this.closeModal,
+ visible: this.state.currentModal == 'costume-library'
+ };
+ backdropLibraryProps = {
+ mediaLibrary: this.mediaLibrary,
+ onRequestClose: this.closeModal,
+ visible: this.state.currentModal == 'backdrop-library'
+ };
if (this.props.children) {
return (
<GUIComponent {... guiProps}>
@@ -74,24 +94,9 @@ class GUI extends React.Component {
<Stage vm={vm} {...stageProps} />
<SpriteSelector vm={vm} {... spriteSelectorProps} />
<Blocks vm={vm} {... blocksProps} />
-<SpriteLibrary
- vm={this.props.vm}
- mediaLibrary={this.mediaLibrary}
- onRequestClose={this.closeModal.bind(this)}
- visible={this.state.currentModal == 'sprite-library'}
- key='sprite-library' />
- <CostumeLibrary
- vm={this.props.vm}
- mediaLibrary={this.mediaLibrary}
- onRequestClose={this.closeModal.bind(this)}
- visible={this.state.currentModal == 'costume-library'}
- key='costume-library' />
- <BackdropLibrary
- vm={this.props.vm}
- mediaLibrary={this.mediaLibrary}
- onRequestClose={this.closeModal.bind(this)}
- visible={this.state.currentModal == 'backdrop-library'}
- key='backdrop-library' />
+ <SpriteLibrary vm={vm} {...spriteLibraryProps} />
+ <CostumeLibrary vm={vm} {...costumeLibraryProps} />
+ <BackdropLibrary vm={vm} {...backdropLibraryProps} />
</GUIComponent>
);
}
@@ -99,11 +104,14 @@ class GUI extends React.Component {
}
GUI.propTypes = {
+ backdropLibraryProps: React.PropTypes.object,
basePath: React.PropTypes.string,
blocksProps: React.PropTypes.object,
+ costumeLibraryProps: React.PropTypes.object,
children: React.PropTypes.node,
greenFlagProps: React.PropTypes.object,
projectData: React.PropTypes.string,
+ spriteLibraryProps: React.PropTypes.object,
spriteSelectorProps: React.PropTypes.object,
stageProps: React.PropTypes.object,
stopAllProps: React.PropTypes.object,
diff --git a/src/containers/sprite-library.js b/src/containers/sprite-library.js
index 99efc2386fd0aa47894d6f25888466df6188f116..9de69a367fd463f0ea922e1c4f8714ebb2d27d9e 100644
--- a/src/containers/sprite-library.js
+++ b/src/containers/sprite-library.js
@@ -47,7 +47,8 @@ class SpriteLibrary extends React.Component {
data={libraryData}
mediaLibrary={this.props.mediaLibrary}
onRequestClose={this.props.onRequestClose}
- onItemSelected={this.selectItem.bind(this)} />;
+ onItemSelected={this.selectItem.bind(this)}
+ />;
}
}