From a6bdf09ba6c101e2a7393c906b11290cd689719d Mon Sep 17 00:00:00 2001
From: Tim Mickel <tim.mickel@gmail.com>
Date: Thu, 20 Oct 2016 13:29:00 -0400
Subject: [PATCH] Various nits
---
src/components/costume-canvas.js | 6 ++--
src/components/library.js | 6 ++--
src/components/modal.js | 8 ++++--
src/components/sprite-selector.js | 9 ++++--
src/containers/backdrop-library.js | 3 +-
src/containers/costume-library.js | 3 +-
src/containers/gui.js | 44 ++++++++++++++++++------------
src/containers/sprite-library.js | 3 +-
8 files changed, 52 insertions(+), 30 deletions(-)
diff --git a/src/components/costume-canvas.js b/src/components/costume-canvas.js
index 73c6002b6..ac0646756 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 39dec362a..cd0dd8769 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 791814424..a2c257149 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 f6d0e7159..da00622bf 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 c57d0a367..2c36868ad 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 1e1d849ab..f33b97b0d 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 0ae3e8483..2a3c56bb2 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 99efc2386..9de69a367 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)}
+ />;
}
}
--
GitLab