Merge pull request #82 from spicyj/mc

Remove now-unnecessary mostRecentlyPlacedChild

Author: sophiebits

src/ReactART.js

@@ -51,7 +51,6 @@ function createComponent(name) {
     this.listeners = null;
     this._mountImage = null;
     this._renderedChildren = null;
-    this._mostRecentlyPlacedChild = null;
   };
   ReactARTComponent.displayName = name;
   for (var i = 1, l = arguments.length; i < l; i++) {
@@ -63,6 +62,22 @@ function createComponent(name) {
 
 // ContainerMixin for components that can hold ART nodes
 
+function injectAfter(parentNode, referenceNode, node) {
+  var beforeNode;
+  if (referenceNode == null) {
+    // node is supposed to be first.
+    beforeNode = parentNode.firstChild;
+  } else {
+    // node is supposed to be after referenceNode.
+    beforeNode = referenceNode.nextSibling;
+  }
+  if (beforeNode) {
+    node.injectBefore(beforeNode);
+  } else {
+    node.inject(parentNode);
+  }
+}
+
 var ContainerMixin = assign({}, ReactMultiChild.Mixin, {
 
   /**
@@ -72,29 +87,9 @@ var ContainerMixin = assign({}, ReactMultiChild.Mixin, {
    * @param {number} toIndex Destination index of the element.
    * @protected
    */
-  moveChild: function(child, toIndex) {
+  moveChild: function(child, afterNode, toIndex, lastIndex) {
     var childNode = child._mountImage;
-    var mostRecentlyPlacedChild = this._mostRecentlyPlacedChild;
-    if (mostRecentlyPlacedChild == null) {
-      // I'm supposed to be first.
-      if (childNode.previousSibling) {
-        if (this.node.firstChild) {
-          childNode.injectBefore(this.node.firstChild);
-        } else {
-          childNode.inject(this.node);
-        }
-      }
-    } else {
-      // I'm supposed to be after the previous one.
-      if (mostRecentlyPlacedChild.nextSibling !== childNode) {
-        if (mostRecentlyPlacedChild.nextSibling) {
-          childNode.injectBefore(mostRecentlyPlacedChild.nextSibling);
-        } else {
-          childNode.inject(this.node);
-        }
-      }
-    }
-    this._mostRecentlyPlacedChild = childNode;
+    injectAfter(this.node, afterNode, childNode);
   },
 
   /**
@@ -107,23 +102,7 @@ var ContainerMixin = assign({}, ReactMultiChild.Mixin, {
    */
   createChild: function(child, afterNode, childNode) {
     child._mountImage = childNode;
-    var mostRecentlyPlacedChild = this._mostRecentlyPlacedChild;
-    if (mostRecentlyPlacedChild == null) {
-      // I'm supposed to be first.
-      if (this.node.firstChild) {
-        childNode.injectBefore(this.node.firstChild);
-      } else {
-        childNode.inject(this.node);
-      }
-    } else {
-      // I'm supposed to be after the previous one.
-      if (mostRecentlyPlacedChild.nextSibling) {
-        childNode.injectBefore(mostRecentlyPlacedChild.nextSibling);
-      } else {
-        childNode.inject(this.node);
-      }
-    }
-    this._mostRecentlyPlacedChild = childNode;
+    injectAfter(this.node, afterNode, childNode);
   },
 
   /**
@@ -154,7 +133,6 @@ var ContainerMixin = assign({}, ReactMultiChild.Mixin, {
    * @override {ReactMultiChild.Mixin.updateChildren}
    */
   updateChildren: function(nextChildren, transaction, context) {
-    this._mostRecentlyPlacedChild = null;
     this._updateChildren(nextChildren, transaction, context);
   },
 
@@ -273,6 +251,7 @@ var NodeMixin = {
   },
 
   getNativeNode: function() {
+    return this.node;
   },
 
   getPublicInstance: function() {

src/__tests__/ReactART-test.js

@@ -182,6 +182,34 @@ describe('ReactART', function() {
     testDOMNodeStructure(realNode, expectedNewStructure);
   });
 
+  it('should be able to reorder many components', function() {
+    var container = document.createElement('div');
+
+    var Component = React.createClass({
+      render: function() {
+        var chars = this.props.chars.split('');
+        return (
+          <Surface>
+            {chars.map((text) => <Shape key={text} title={text} />)}
+          </Surface>
+        );
+      },
+    });
+
+    // Mini multi-child stress test: lots of reorders, some adds, some removes.
+    var before = 'abcdefghijklmnopqrst';
+    var after = 'mxhpgwfralkeoivcstzy';
+
+    var instance = ReactDOM.render(<Component chars={before} />, container);
+    var realNode = ReactDOM.findDOMNode(instance);
+    expect(realNode.textContent).toBe(before);
+
+    var instance = ReactDOM.render(<Component chars={after} />, container);
+    expect(realNode.textContent).toBe(after);
+
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
   it('renders composite with lifecycle inside group', function() {
     var mounted = false;
     var CustomShape = React.createClass({