From 16994e35f8d94a37dc5626f2c2dce50256f78252 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 15 Jan 2019 12:42:34 -0500
Subject: [PATCH] Allow drop event in sortableHOC even when there are no items
 to sort.

This is used because the sortable drop is also used for general dropping as well as sorting drop, so you need to be able to drop into a sortable list that does not contain any items.

Make the corresponding reorder code be more careful to check if there is a newIndex.
---
 src/containers/costume-tab.jsx | 2 +-
 src/containers/sound-tab.jsx   | 2 +-
 src/containers/target-pane.jsx | 2 +-
 src/lib/sortable-hoc.jsx       | 7 +++----
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 5df459150..8f2717e96 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -206,7 +206,7 @@ class CostumeTab extends React.Component {
         this.fileInput.click();
     }
     handleDrop (dropInfo) {
-        if (dropInfo.dragType === DragConstants.COSTUME) {
+        if (dropInfo.dragType === DragConstants.COSTUME && dropInfo.newIndex !== null) {
             const sprite = this.props.vm.editingTarget.sprite;
             const activeCostume = sprite.costumes[this.state.selectedCostumeIndex];
             this.props.vm.reorderCostume(this.props.vm.editingTarget.id,
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
index 3df93b1f6..d8731b4c3 100644
--- a/src/containers/sound-tab.jsx
+++ b/src/containers/sound-tab.jsx
@@ -130,7 +130,7 @@ class SoundTab extends React.Component {
     }
 
     handleDrop (dropInfo) {
-        if (dropInfo.dragType === DragConstants.SOUND) {
+        if (dropInfo.dragType === DragConstants.SOUND && dropInfo.newIndex !== null) {
             const sprite = this.props.vm.editingTarget.sprite;
             const activeSound = sprite.sounds[this.state.selectedSoundIndex];
 
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index eb4100969..b63a72a36 100644
--- a/src/containers/target-pane.jsx
+++ b/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) {
+        if (dragInfo.dragType === DragConstants.SPRITE && dragInfo.newIndex !== null) {
             // 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) {
diff --git a/src/lib/sortable-hoc.jsx b/src/lib/sortable-hoc.jsx
index d3f9c59e1..57087867b 100644
--- a/src/lib/sortable-hoc.jsx
+++ b/src/lib/sortable-hoc.jsx
@@ -33,10 +33,9 @@ const SortableHOC = function (WrappedComponent) {
                 }
                 this.containerBox = this.ref.getBoundingClientRect();
             } else if (!newProps.dragInfo.dragging && this.props.dragInfo.dragging) {
-                const newIndex = this.getMouseOverIndex();
-                if (newIndex !== null) {
-                    this.props.onDrop(Object.assign({}, this.props.dragInfo, {newIndex}));
-                }
+                this.props.onDrop(Object.assign({}, this.props.dragInfo, {
+                    newIndex: this.getMouseOverIndex()
+                }));
             }
         }
 
-- 
GitLab