Fix bug with non-DOM-changed items

Flip Move is supposed to work even if the DOM order doesn't change.
For example, the Scrabble demo just uses transforms to move tiles
around on-screen without actually re-arranging the DOM nodes.

This fix allows those transformations once more.

dist/react-flip-move.js

@@ -254,20 +254,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'componentDidUpdate',
 	    value: function componentDidUpdate(previousProps) {
-	      var childKeys = this.props.children.map(function (c) {
-	        return c.key;
-	      }).join('');
-	      var prevChildKeys = previousProps.children.map(function (c) {
-	        return c.key;
-	      }).join('');
-
-	      // If the children have been re-arranged or added/removed, trigger the
-	      // main FLIP animation.
+	      // If the children have been re-arranged, moved, or added/removed,
+	      // trigger the main FLIP animation.
 	      //
 	      // This check is required so that we don't trigger a re-animation when the
 	      // `onFinishAll` handler is called, at the end of the animation, to remove
 	      // exited nodes.
-	      if (childKeys !== prevChildKeys) {
+	      if (this.props.children !== previousProps.children) {
 	        this.calculateAndAnimateChildren();
 	      }
 	    }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flip-move",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.",
   "main": "lib/index.js",
   "files": [

src/FlipMove.js

@@ -70,16 +70,13 @@ class FlipMove extends Component {
 
 
   componentDidUpdate(previousProps) {
-    const childKeys     = this.props.children.map( c => c.key).join('');
-    const prevChildKeys = previousProps.children.map( c => c.key).join('');
-
-    // If the children have been re-arranged or added/removed, trigger the
-    // main FLIP animation.
+    // If the children have been re-arranged, moved, or added/removed,
+    // trigger the main FLIP animation.
     //
     // This check is required so that we don't trigger a re-animation when the
     // `onFinishAll` handler is called, at the end of the animation, to remove
     // exited nodes.
-    if ( childKeys !== prevChildKeys ) {
+    if ( this.props.children !== previousProps.children ) {
       this.calculateAndAnimateChildren();
     }
   }

stories/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import shuffle from 'lodash/shuffle';
 import sampleSize from 'lodash/sampleSize';
+import range from 'lodash/range';
 
 import FlipMove from '../src/FlipMove.js';
 
@@ -62,45 +63,31 @@ storiesOf('FlipMove', module)
     <Controls
       mode='remove'
       enterAnimation={{
-        from: {
-          transform: 'translateY(-100px) rotate(90deg) scale(0)'
-        },
-        to: {
-          transform: '',
-        }
+        from: { transform: 'translateY(-100px) rotate(90deg) scale(0)' },
+        to: { transform: '' }
       }}
       leaveAnimation={{
-        from: {
-          transform: '',
-        },
-        to: {
-          transform: 'translateY(100px) rotate(-90deg) scale(0)'
-        }
+        from: { transform: '' },
+        to: { transform: 'translateY(100px) rotate(-90deg) scale(0)' }
       }}
     />
   ))
   .add('when adding/removing items - custom object with 3D rotate', () => (
     <Controls
       mode='remove'
       enterAnimation={{
-        from: {
-          transform: 'rotateX(135deg)'
-        },
-        to: {
-          transform: '',
-        }
+        from: { transform: 'rotateX(135deg)' },
+        to: { transform: '' }
       }}
       leaveAnimation={{
-        from: {
-          transform: '',
-        },
-        to: {
-          transform: 'rotateX(-120deg)',
-          opacity: 0.6
-        }
+        from: { transform: '' },
+        to: { transform: 'rotateX(-120deg)',   opacity: 0.6 }
       }}
     />
   ))
+  .add('when prop keys do not change, but items rearrange', () => (
+    <StaticItems />
+  ))
 
 // Controlling component
 const items = [
@@ -204,3 +191,40 @@ class Controls extends Component {
     );
   }
 }
+
+class StaticItems extends Component {
+  renderItems() {
+    return range(4).map( i => {
+      let left = Math.floor(Math.random() * 100) + 'px';
+      let top  = Math.floor(Math.random() * 100) + 'px';
+
+      return (
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            padding: '1rem',
+            background: '#F00',
+            left,
+            top
+          }}
+        >
+          Item!
+        </div>
+      );
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.forceUpdate.call(this, null)}>
+          UPDATE
+        </button>
+        <FlipMove>
+          { this.renderItems() }
+        </FlipMove>
+      </div>
+    );
+  }
+}