Use hover to cycle costumes

src/components/library-item/library-item.jsx

@@ -14,6 +14,9 @@ class LibraryItem extends React.Component {
             'handleMouseLeave'
         ]);
     }
+    shouldComponentUpdate (nextProps) {
+        return this.props.iconURL !== nextProps.iconURL;
+    }
     handleClick (e) {
         this.props.onSelect(this.props.id);
         e.preventDefault();

src/containers/sprite-library.jsx

@@ -11,18 +11,55 @@ class SpriteLibrary extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleItemSelect'
+            'handleItemSelect',
+            'handleMouseEnter',
+            'handleMouseLeave',
+            'rotateCostume'
         ]);
+        this.state = {
+            activeSprite: null,
+            costumeIndex: 0,
+            sprites: spriteLibraryContent
+        };
+    }
+    componentWillReceiveProps (newProps) {
+        if (!newProps.visible) clearInterval(this.intervalId);
     }
     handleItemSelect (item) {
         this.props.vm.addSprite2(JSON.stringify(item.json));
     }
+    handleMouseEnter (item) {
+        this.setState({activeSprite: item});
+        if (this.intervalId) clearInterval(this.intervalId);
+        this.intervalId = setInterval(this.rotateCostume, 300);
+    }
+    handleMouseLeave () {
+        this.intervalId = clearInterval(this.intervalId);
+    }
+    rotateCostume () {
+        const costumes = this.state.activeSprite.json.costumes;
+        const nextCostumeIndex = (this.state.costumeIndex + 1) % costumes.length;
+        this.setState({
+            costumeIndex: nextCostumeIndex,
+            sprites: this.state.sprites.map(sprite => {
+                if (sprite.name === this.state.activeSprite.name) {
+                    return {
+                        ...sprite,
+                        md5: sprite.json.costumes[nextCostumeIndex].baseLayerMD5
+                    };
+                }
+                return sprite;
+            })
+        });
+    }
     render () {
         return (
             <LibraryComponent
-                data={spriteLibraryContent}
+                data={this.state.sprites}
                 title="Sprite Library"
                 visible={this.props.visible}
+                onItemMouseEnter={this.handleMouseEnter}
+                onItemMouseLeave={this.handleMouseLeave}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
             />