Merge pull request #62 from JakeSidSmith/react-14

React 0.14+

README.md

@@ -62,25 +62,25 @@ __[Demo](http://jakesidsmith.github.io/react-reorder/)__
     ```javascript
     <Reorder
       // The key of each object in your list to use as the element key
-      itemKey='name',
+      itemKey='name'
       // Lock horizontal to have a vertical list
-      lock='horizontal',
+      lock='horizontal'
       // The milliseconds to hold an item for before dragging begins
-      holdTime='500',
+      holdTime='500'
       // The list to display
       list={[
         {name: 'Item 1'},
         {name: 'Item 2'},
         {name: 'Item 3'}
-      ]},
+      ]}
       // A template to display for each list item
-      template={ListItem},
+      template={ListItem}
       // Function that is called once a reorder has been performed
-      callback={this.callback},
+      callback={this.callback}
       // Class to be applied to the outer list element
-      listClass='my-list',
+      listClass='my-list'
       // Class to be applied to each list item's wrapper element
-      itemClass='list-item',
+      itemClass='list-item'
       // A function to be called if a list item is clicked (before hold time is up)
       itemClicked={this.itemClicked}
       // The item to be selected (adds 'selected' class)
@@ -116,13 +116,14 @@ __[Demo](http://jakesidsmith.github.io/react-reorder/)__
       // Class to be applied to each list item's wrapper element
       itemClass: 'list-item',
       // A function to be called if a list item is clicked (before hold time is up)
-      itemClicked: this.itemClicked
+      itemClicked: this.itemClicked,
       // The item to be selected (adds 'selected' class)
-      selected: this.state.selected
+      selected: this.state.selected,
       // The key to compare from the selected item object with each item object
-      selectedKey: 'uuid'
+      selectedKey: 'uuid',
       // Allows reordering to be disabled
-      disableReorder: false})
+      disableReorder: false
+    })
     ```
 
 5. Callback functions
@@ -145,9 +146,11 @@ __[Demo](http://jakesidsmith.github.io/react-reorder/)__
 
     **Note: `event` will be the synthetic React event for either `mouseup` or `touchend`, and both contain `clientX` & `clientY` values (for ease of use)**
 
-## Requirements
+## Compatibility / Requirements
 
-* React (tested in v0.12.2)
+* Version `2.x` tested and working with React `0.14`
+
+* Versions `1.x` tested and working with React `0.12` - `0.13`
 
 * requirejs / commonjs / browserify (__Optional, but recommended*__)
 

examples/src/js/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var Reorder = require('../../../index');
 
 var ListItem = React.createClass({
@@ -123,4 +124,4 @@ var Main = React.createClass({
   }
 });
 
-React.render(React.createElement(Main), document.getElementById('app'));
+ReactDOM.render(React.createElement(Main), document.getElementById('app'));

index.js

@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  var getReorderComponent = function (React) {
+  var getReorderComponent = function (React, ReactDOM) {
 
     return React.createClass({
       displayName: 'Reorder',
@@ -85,8 +85,8 @@
         var downPos = {
           clientY: event.clientY,
           clientX: event.clientX,
-          scrollTop: self.getDOMNode().scrollTop,
-          scrollLeft: self.getDOMNode().scrollLeft
+          scrollTop: ReactDOM.findDOMNode(self).scrollTop,
+          scrollLeft: ReactDOM.findDOMNode(self).scrollLeft
         };
 
         this.setState({
@@ -124,7 +124,7 @@
 
         // Reorder callback
         if (this.state.held && this.state.dragged && typeof this.props.callback === 'function') {
-          var listElements = this.nodesToArray(this.getDOMNode().childNodes);
+          var listElements = this.nodesToArray(ReactDOM.findDOMNode(this).childNodes);
           var newIndex = listElements.indexOf(this.state.dragged.target);
 
           this.props.callback(event, this.state.dragged.item, this.state.dragged.index, newIndex, this.state.list);
@@ -159,7 +159,7 @@
         return Math.max(Math.min(value / 4, this.constants.SCROLL_AREA), this.constants.SCROLL_AREA / 5);
       },
       dragScrollY: function () {
-        var element = this.getDOMNode();
+        var element = ReactDOM.findDOMNode(this);
         var rect = element.getBoundingClientRect();
         var scrollArea = this.getScrollArea(rect.height);
 
@@ -173,7 +173,7 @@
         }
       },
       dragScrollX: function () {
-        var element = this.getDOMNode();
+        var element = ReactDOM.findDOMNode(this);
         var rect = element.getBoundingClientRect();
         var scrollArea = this.getScrollArea(rect.width);
 
@@ -187,7 +187,7 @@
         }
       },
       handleDragScrollY: function (event) {
-        var rect = this.getDOMNode().getBoundingClientRect();
+        var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
 
         if (!this.scrollIntervalY && this.props.lock !== 'vertical') {
           if (event.clientY < rect.top + this.constants.SCROLL_AREA) {
@@ -203,7 +203,7 @@
         }
       },
       handleDragScrollX: function (event) {
-        var rect = this.getDOMNode().getBoundingClientRect();
+        var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
 
         if (!this.scrollIntervalX && this.props.lock !== 'horizontal') {
           if (event.clientX < rect.left + this.constants.SCROLL_AREA) {
@@ -239,7 +239,7 @@
           event.preventDefault();
           this.setDraggedPosition(event);
 
-          var listElements = this.nodesToArray(this.getDOMNode().childNodes);
+          var listElements = this.nodesToArray(ReactDOM.findDOMNode(this).childNodes);
           var collision = this.findCollision(listElements, event);
 
           if (collision) {
@@ -461,19 +461,24 @@
   // Export for commonjs / browserify
   if (typeof exports !== 'undefined') {
     var React = require('react');
+    var ReactDOM = require('react-dom');
+
     if (typeof module !== 'undefined' && module.exports) {
-      exports = module.exports = getReorderComponent(React);
+      exports = module.exports = getReorderComponent(React, ReactDOM);
     }
-    exports.Reorder = getReorderComponent(React);
-  } else if (typeof root !== 'undefined' && typeof root.React !== 'undefined') {
+
+    exports.Reorder = getReorderComponent(React, ReactDOM);
+  } else if (typeof root !== 'undefined' &&
+    typeof root.React !== 'undefined' &&
+    typeof root.ReactDOM !== 'undefined') {
     // Add to root object
-    root.Reorder = getReorderComponent(root.React);
+    root.Reorder = getReorderComponent(root.React, root.ReactDOM);
   }
 
   // Define for requirejs
   if (root && typeof root.define === 'function' && root.define.amd) {
-    root.define(['react'], function(React) {
-      return getReorderComponent(React);
+    root.define(['react', 'react-dom'], function(React, ReactDOM) {
+      return getReorderComponent(React, ReactDOM);
     });
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Drag & drop, touch enabled, reorderable / sortable list, React component",
   "author": "Jake 'Sid' Smith",
   "license": "MIT",
@@ -30,13 +30,13 @@
     "mobile",
     "touch"
   ],
-  "dependencies": {
-    "react": "<0.14"
-  },
+  "dependencies": {},
   "devDependencies": {
     "browserify": "=12.0.1",
     "http-server": "=0.8.5",
     "less": "=2.5.3",
+    "react": ">=0.14.7",
+    "react-dom": ">=0.14.7",
     "watchify": "=3.6.1"
   }
 }