From 676b3d84b4136009dd04cc543e8b1d01eb90cbf8 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 22 Sep 2016 10:24:09 -0400
Subject: [PATCH] Add sprite selection skeleton component
---
src/components/gui.js | 2 ++
src/components/sprite-selector.js | 42 +++++++++++++++++++++++++++++++
2 files changed, 44 insertions(+)
create mode 100644 src/components/sprite-selector.js
diff --git a/src/components/gui.js b/src/components/gui.js
index 0b62b9946..773156937 100644
--- a/src/components/gui.js
+++ b/src/components/gui.js
@@ -2,6 +2,7 @@ const React = require('react');
const Blocks = require('./blocks');
const Renderer = require('scratch-render');
+const SpriteSelector = require('./sprite-selector');
const Stage = require('./stage');
const Toolbox = require('./toolbox');
const VM = require('scratch-vm');
@@ -38,6 +39,7 @@ class GUI extends React.Component {
return (
<div className="scratch-gui">
<Stage stageRef={stage => this.stage = stage} />
+ <SpriteSelector vm={this.props.vm} />
<Toolbox toolboxRef={toolbox => this.toolbox = toolbox} />
<Blocks
options={{
diff --git a/src/components/sprite-selector.js b/src/components/sprite-selector.js
new file mode 100644
index 000000000..804f458e7
--- /dev/null
+++ b/src/components/sprite-selector.js
@@ -0,0 +1,42 @@
+const React = require('react');
+
+class SpriteSelector extends React.Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ targets: {
+ targetList: []
+ }
+ };
+ this.targetsUpdate = this.targetsUpdate.bind(this);
+ this.onChange = this.onChange.bind(this);
+ }
+ componentDidMount () {
+ this.props.vm.on('targetsUpdate', this.targetsUpdate);
+ }
+ onChange (event) {
+ this.props.vm.setEditingTarget(event.target.value);
+ }
+ targetsUpdate (data) {
+ this.setState({targets: data});
+ }
+ render () {
+ return (
+ <select
+ multiple
+ value={[this.state.targets.editingTarget]}
+ onChange={this.onChange}
+ >
+ {this.state.targets.targetList.map(
+ target => <option value={target[0]} key={target[0]}>{target[1]}</option>
+ )}
+ </select>
+ );
+ }
+}
+
+SpriteSelector.propTypes = {
+ vm: React.PropTypes.object.isRequired
+};
+
+module.exports = SpriteSelector;
--
GitLab