Add unstyled delete button for sprites

src/components/sprite-selector-item/sprite-selector-item.css

@@ -49,3 +49,8 @@
     white-space: nowrap;
     min-width: 0;
 }
+
+.sprite-delete-button {
+    background: red;
+    color: white;
+}

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -25,6 +25,12 @@ const SpriteSelectorItem = props => (
             />
         ) : null}
         <div className={styles.spriteName}>{props.name}</div>
+        <div
+            className={styles.spriteDeleteButton}
+            onClick={props.onDeleteButtonClick}
+        >
+            𝘅
+        </div>
     </Box>
 );
 
@@ -33,6 +39,7 @@ SpriteSelectorItem.propTypes = {
     costumeURL: React.PropTypes.string,
     name: React.PropTypes.string,
     onClick: React.PropTypes.func,
+    onDeleteButtonClick: React.PropTypes.func,
     selected: React.PropTypes.bool
 };
 

src/components/sprite-selector/sprite-selector.jsx

@@ -13,6 +13,7 @@ const SpriteSelectorComponent = function (props) {
         onChangeSpriteVisibility,
         onChangeSpriteX,
         onChangeSpriteY,
+        onDeleteSprite,
         onSelectSprite,
         selectedId,
         sprites,
@@ -59,6 +60,7 @@ const SpriteSelectorComponent = function (props) {
                                 name={sprites[id].name}
                                 selected={id === selectedId}
                                 onClick={onSelectSprite}
+                                onDeleteButtonClick={onDeleteSprite}
                             />
                         ))
                     }
@@ -75,6 +77,7 @@ SpriteSelectorComponent.propTypes = {
     onChangeSpriteVisibility: React.PropTypes.func,
     onChangeSpriteX: React.PropTypes.func,
     onChangeSpriteY: React.PropTypes.func,
+    onDeleteSprite: React.PropTypes.func,
     onSelectSprite: React.PropTypes.func,
     selectedId: React.PropTypes.string,
     sprites: React.PropTypes.shape({

src/components/target-pane/target-pane.jsx

@@ -43,6 +43,7 @@ class TargetPane extends React.Component {
             onChangeSpriteVisibility,
             onChangeSpriteX,
             onChangeSpriteY,
+            onDeleteSprite,
             onNewSpriteClick,
             onNewBackdropClick,
             onRequestCloseBackdropLibrary,
@@ -69,6 +70,7 @@ class TargetPane extends React.Component {
                     onChangeSpriteVisibility={onChangeSpriteVisibility}
                     onChangeSpriteX={onChangeSpriteX}
                     onChangeSpriteY={onChangeSpriteY}
+                    onDeleteSprite={onDeleteSprite}
                     onSelectSprite={onSelectSprite}
                 />
                 <Box className={styles.stageSelectorWrapper}>
@@ -150,6 +152,7 @@ TargetPane.propTypes = {
     onChangeSpriteVisibility: React.PropTypes.func,
     onChangeSpriteX: React.PropTypes.func,
     onChangeSpriteY: React.PropTypes.func,
+    onDeleteSprite: React.PropTypes.func,
     onNewBackdropClick: React.PropTypes.func,
     onNewSpriteClick: React.PropTypes.func,
     onRequestCloseBackdropLibrary: React.PropTypes.func,

src/containers/sprite-selector-item.jsx

@@ -7,22 +7,31 @@ class SpriteSelectorItem extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleClick'
+            'handleClick',
+            'handleDelete'
         ]);
     }
     handleClick (e) {
         e.preventDefault();
         this.props.onClick(this.props.id);
     }
+    handleDelete () {
+        // eslint-disable-next-line no-alert
+        if (window.confirm('Are you sure you want to delete this sprite?')) {
+            this.props.onDeleteButtonClick(this.props.id);
+        }
+    }
     render () {
         const {
             id, // eslint-disable-line no-unused-vars
             onClick, // eslint-disable-line no-unused-vars
+            onDeleteButtonClick, // eslint-disable-line no-unused-vars
             ...props
         } = this.props;
         return (
             <SpriteSelectorItemComponent
                 onClick={this.handleClick}
+                onDeleteButtonClick={this.handleDelete}
                 {...props}
             />
         );
@@ -34,6 +43,7 @@ SpriteSelectorItem.propTypes = {
     id: React.PropTypes.string,
     name: React.PropTypes.string,
     onClick: React.PropTypes.func,
+    onDeleteButtonClick: React.PropTypes.func,
     selected: React.PropTypes.bool
 };
 

src/containers/target-pane.jsx

@@ -23,6 +23,7 @@ class TargetPane extends React.Component {
             'handleChangeSpriteVisibility',
             'handleChangeSpriteX',
             'handleChangeSpriteY',
+            'handleDeleteSprite',
             'handleSelectSprite'
         ]);
     }
@@ -44,6 +45,9 @@ class TargetPane extends React.Component {
     handleChangeSpriteY (y) {
         this.props.vm.postSpriteInfo({y});
     }
+    handleDeleteSprite (id) {
+        this.props.vm.deleteSprite(id);
+    }
     handleSelectSprite (id) {
         this.props.vm.setEditingTarget(id);
     }
@@ -57,6 +61,7 @@ class TargetPane extends React.Component {
                 onChangeSpriteVisibility={this.handleChangeSpriteVisibility}
                 onChangeSpriteX={this.handleChangeSpriteX}
                 onChangeSpriteY={this.handleChangeSpriteY}
+                onDeleteSprite={this.handleDeleteSprite}
                 onSelectSprite={this.handleSelectSprite}
             />
         );