Use container for selector to handle behavioral callbacks

src/components/asset-panel/selector.jsx

 const React = require('react');
 
-const SpriteSelectorItem = require('../sprite-selector-item/sprite-selector-item.jsx');
+const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx');
+
 const Box = require('../box/box.jsx');
 const styles = require('./selector.css');
 
@@ -23,24 +24,18 @@ const Selector = props => {
                 {newText}
             </Box>
             <Box className={styles.listArea}>
-                {items.map((item, index) => {
-                    const _onItemClick = () => onItemClick(item);
-                    const _onDeleteClick = e => {
-                        e.stopPropagation();
-                        onDeleteClick(item);
-                    };
-                    return (
-                        <SpriteSelectorItem
-                            className={styles.listItem}
-                            costumeURL={item.image}
-                            key={`asset-${index}`}
-                            name={item.name}
-                            selected={index === selectedItemIndex}
-                            onClick={_onItemClick}
-                            onDeleteButtonClick={_onDeleteClick}
-                        />
-                    );
-                })}
+                {items.map((item, index) => (
+                    <SpriteSelectorItem
+                        className={styles.listItem}
+                        costumeURL={item.image}
+                        id={index}
+                        key={`asset-${index}`}
+                        name={item.name}
+                        selected={index === selectedItemIndex}
+                        onClick={onItemClick}
+                        onDeleteButtonClick={onDeleteClick}
+                    />
+                ))}
             </Box>
         </Box>
     );

src/containers/costume-tab.jsx

@@ -21,22 +21,21 @@ class CostumeTab extends React.Component {
         this.state = {selectedCostumeIndex: 0};
     }
 
-    handleSelectCostume (item) {
-        this.setState({selectedCostumeIndex: this.props.vm.editingTarget.getCostumeIndexByName(item.name)});
+    handleSelectCostume (costumeIndex) {
+        this.setState({selectedCostumeIndex: costumeIndex});
     }
 
-    handleDeleteCostume (item) {
+    handleDeleteCostume (costumeIndex) {
         // @todo the VM should handle all of this logic
         const {editingTarget} = this.props.vm;
-        const i = editingTarget.getCostumeIndexByName(item.name);
 
-        if (i === editingTarget.currentCostume) {
-            editingTarget.setCostume(i - 1);
+        if (costumeIndex === editingTarget.currentCostume) {
+            editingTarget.setCostume(costumeIndex - 1);
         }
 
         editingTarget.sprite.costumes = editingTarget.sprite.costumes
-            .slice(0, i)
-            .concat(editingTarget.sprite.costumes.slice(i + 1));
+            .slice(0, costumeIndex)
+            .concat(editingTarget.sprite.costumes.slice(costumeIndex + 1));
         this.props.vm.emitTargetsUpdate();
         // @todo not sure if this is getting redrawn correctly
         this.props.vm.runtime.requestRedraw();

src/containers/sound-tab.jsx

@@ -16,38 +16,24 @@ class SoundTab extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'getSoundIndexByName',
             'handleSelectSound',
             'handleDeleteSound'
         ]);
         this.state = {selectedSoundIndex: 0};
     }
 
-    getSoundIndexByName (name) {
-        // @todo should be in VM
-        let i = -1;
-        this.props.vm.editingTarget.sprite.sounds.forEach((sound, soundIndex) => {
-            if (sound.name === name) {
-                i = soundIndex;
-            }
-        });
-        return i;
-    }
-
-    handleSelectSound (item) {
-        const selectedSoundIndex = this.getSoundIndexByName(item.name);
-        const sound = this.props.vm.editingTarget.sprite.sounds[selectedSoundIndex];
+    handleSelectSound (soundIndex) {
+        const sound = this.props.vm.editingTarget.sprite.sounds[soundIndex];
         this.props.vm.editingTarget.audioPlayer.playSound(sound.md5);
-        this.setState({selectedSoundIndex});
+        this.setState({selectedSoundIndex: soundIndex});
     }
 
-    handleDeleteSound (item) {
+    handleDeleteSound (soundIndex) {
         // @todo the VM should handle all of this logic
         const {editingTarget} = this.props.vm;
-        const i = this.getSoundIndexByName(item.name);
         editingTarget.sprite.sounds = editingTarget.sprite.sounds
-            .slice(0, i)
-            .concat(editingTarget.sprite.sounds.slice(i + 1));
+            .slice(0, soundIndex)
+            .concat(editingTarget.sprite.sounds.slice(soundIndex + 1));
         this.props.vm.emitTargetsUpdate();
         this.props.vm.runtime.requestRedraw();