Merge pull request #4389 from paulkaplan/fix-sound-reord

Fix sound reorder crash

src/containers/costume-tab.jsx

@@ -206,7 +206,7 @@ class CostumeTab extends React.Component {
         this.fileInput.click();
     }
     handleDrop (dropInfo) {
-        if (dropInfo.dragType === DragConstants.COSTUME && dropInfo.newIndex !== null) {
+        if (dropInfo.dragType === DragConstants.COSTUME) {
             const sprite = this.props.vm.editingTarget.sprite;
             const activeCostume = sprite.costumes[this.state.selectedCostumeIndex];
             this.props.vm.reorderCostume(this.props.vm.editingTarget.id,

src/containers/sound-tab.jsx

@@ -130,7 +130,7 @@ class SoundTab extends React.Component {
     }
 
     handleDrop (dropInfo) {
-        if (dropInfo.dragType === DragConstants.SOUND && dropInfo.newIndex !== null) {
+        if (dropInfo.dragType === DragConstants.SOUND) {
             const sprite = this.props.vm.editingTarget.sprite;
             const activeSound = sprite.sounds[this.state.selectedSoundIndex];
 

src/containers/target-pane.jsx

@@ -163,7 +163,7 @@ class TargetPane extends React.Component {
     }
     handleDrop (dragInfo) {
         const {sprite: targetId} = this.props.hoveredTarget;
-        if (dragInfo.dragType === DragConstants.SPRITE && dragInfo.newIndex !== null) {
+        if (dragInfo.dragType === DragConstants.SPRITE) {
             // Add one to both new and target index because we are not counting/moving the stage
             this.props.vm.reorderTarget(dragInfo.index + 1, dragInfo.newIndex + 1);
         } else if (dragInfo.dragType === DragConstants.BACKPACK_SPRITE) {

src/lib/sortable-hoc.jsx

@@ -33,9 +33,10 @@ const SortableHOC = function (WrappedComponent) {
                 }
                 this.containerBox = this.ref.getBoundingClientRect();
             } else if (!newProps.dragInfo.dragging && this.props.dragInfo.dragging) {
-                this.props.onDrop(Object.assign({}, this.props.dragInfo, {
-                    newIndex: this.getMouseOverIndex()
-                }));
+                const newIndex = this.getMouseOverIndex();
+                if (newIndex !== null) {
+                    this.props.onDrop(Object.assign({}, this.props.dragInfo, {newIndex}));
+                }
             }
         }
 
@@ -67,16 +68,22 @@ const SortableHOC = function (WrappedComponent) {
             }
             return ordering;
         }
+
         getMouseOverIndex () {
             // MouseOverIndex is the index that the current drag wants to place the
             // the dragging object. Obviously only exists if there is a drag (i.e. currentOffset).
+            // Return null if outside the container, zero if there are no boxes.
             let mouseOverIndex = null;
             if (this.props.dragInfo.currentOffset) {
                 const {x, y} = this.props.dragInfo.currentOffset;
                 const {top, left, bottom, right} = this.containerBox;
                 if (x >= left && x <= right && y >= top && y <= bottom) {
-                    mouseOverIndex = indexForPositionOnList(
-                        this.props.dragInfo.currentOffset, this.boxes);
+                    if (this.boxes.length === 0) {
+                        mouseOverIndex = 0;
+                    } else {
+                        mouseOverIndex = indexForPositionOnList(
+                            this.props.dragInfo.currentOffset, this.boxes);
+                    }
                 }
             }
             return mouseOverIndex;