Fix issue where dragPayload was being invalidated for sprites

Use PureComponent instead since it is a simple shouldComponentUpdate check now.

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

@@ -80,7 +80,7 @@ const SpriteList = function (props) {
                                     [styles.raised]: isRaised,
                                     [styles.receivedBlocks]: receivedBlocks
                                 })}
-                                dragPayload={sprite}
+                                dragPayload={sprite.id}
                                 dragType={DragConstants.SPRITE}
                                 id={sprite.id}
                                 index={index}

src/containers/sprite-selector-item.jsx

@@ -14,7 +14,7 @@ import SpriteSelectorItemComponent from '../components/sprite-selector-item/spri
 
 const dragThreshold = 3; // Same as the block drag threshold
 
-class SpriteSelectorItem extends React.Component {
+class SpriteSelectorItem extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -33,16 +33,6 @@ class SpriteSelectorItem extends React.Component {
         // Asset ID of the current decoded costume
         this.decodedAssetId = null;
     }
-    shouldComponentUpdate (nextProps) {
-        // Ignore dragPayload due to https://github.com/LLK/scratch-gui/issues/3172.
-        // This function should be removed once the issue is fixed.
-        for (const property in nextProps) {
-            if (property !== 'dragPayload' && this.props[property] !== nextProps[property]) {
-                return true;
-            }
-        }
-        return false;
-    }
     getCostumeData () {
         if (this.props.costumeURL) return this.props.costumeURL;
         if (!this.props.asset) return null;
@@ -153,10 +143,7 @@ SpriteSelectorItem.propTypes = {
     asset: PropTypes.instanceOf(storage.Asset),
     costumeURL: PropTypes.string,
     dispatchSetHoveredSprite: PropTypes.func.isRequired,
-    dragPayload: PropTypes.shape({
-        name: PropTypes.string,
-        body: PropTypes.string
-    }),
+    dragPayload: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     dragType: PropTypes.string,
     dragging: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/lib/backpack/sprite-payload.js

 import jpegThumbnail from './jpeg-thumbnail';
 
-const spritePayload = (sprite, vm) => vm.exportSprite(
-    sprite.id,
-    'base64'
-).then(zippedSprite => {
-    const payload = {
-        type: 'sprite',
-        name: sprite.name,
-        mime: 'application/zip',
-        body: zippedSprite,
-        // Filled in below
-        thumbnail: ''
-    };
+const spritePayload = (id, vm) => {
+    const target = vm.runtime.getTargetById(id);
+    if (!target) return null;
 
-    const costumeDataUrl = sprite.costume.asset.encodeDataURI();
-    return jpegThumbnail(costumeDataUrl).then(thumbnail => {
-        payload.thumbnail = thumbnail.replace('data:image/jpeg;base64,', '');
-        return payload;
+    return vm.exportSprite(
+        id,
+        'base64'
+    ).then(zippedSprite => {
+        const payload = {
+            type: 'sprite',
+            name: target.sprite.name,
+            mime: 'application/zip',
+            body: zippedSprite,
+            // Filled in below
+            thumbnail: ''
+        };
+
+        const costumeDataUrl = target.sprite.costumes[target.currentCostume].asset.encodeDataURI();
+
+        return jpegThumbnail(costumeDataUrl).then(thumbnail => {
+            payload.thumbnail = thumbnail.replace('data:image/jpeg;base64,', '');
+            return payload;
+        });
     });
-});
+};
 
 export default spritePayload;