Migrated drag sources to new API. #16

js/components/DraggableBlock.js

@@ -1,39 +1,33 @@
-var React = require('react'),
-    ReactDND = require('react-dnd');
-
+var React = require('react');
+var { DragSource } = require('react-dnd');
 var ItemTypes = require('./ItemTypes.js');
 
-var DraggableBlock = React.createClass({
-    mixins: [ReactDND.DragDropMixin],
-    statics: {
-        configureDragDrop: function(register) {
-            register(ItemTypes.BLOCK, {
-                dragSource: {
-                    beginDrag: function(component) {
-                        // TODO: use this to transfer data
-                        return {
-                            item: {
-                            }
-                        };
-                    }
-                }
-            });
+var blockSource = {
+    beginDrag(props) {
+        return {
+            item: {}
         }
-    },
-    render() {
-        var style = {};
+    }
+};
 
-        var isDragging = this.getDragState(ItemTypes.BLOCK).isDragging;
-        style.opacity = isDragging ? 0.4 : 1;
+function collect(connect, monitor) {
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    }
+}
+
+var DraggableBlock = React.createClass({
+    render() {
+        var { isDragging, connectDragSource } = this.props;
 
-        return (
-            <div {...this.dragSourceFor(ItemTypes.BLOCK)}
-                style={style} className="draggable">
+        return connectDragSource(
+            <div style={{opacity: isDragging ? 0.4 : 1 }} className="draggable">
                 <i className="ion-plus-circled"></i>
                 Block
             </div>
         )
     }
 });
 
-module.exports = DraggableBlock;
+module.exports = DragSource(ItemTypes.BLOCK, blockSource, collect)(DraggableBlock);

js/components/DraggableQuestion.js

@@ -1,38 +1,33 @@
-var React = require('react'),
-    ReactDND = require('react-dnd');
-
+var React = require('react');
+var { DragSource } = require('react-dnd');
 var ItemTypes = require('./ItemTypes');
 
-var DraggableQuestion = React.createClass({
-    mixins: [ReactDND.DragDropMixin],
-    statics: {
-        configureDragDrop: function(register) {
-            register(ItemTypes.QUESTION, {
-                dragSource: {
-                    beginDrag: function(component) {
-                        // TODO: use this to transfer data
-                        return {
-                            item: {
-                            }
-                        };
-                    }
-                }
-            });
+var questionSource = {
+    beginDrag(props) {
+        return {
+            item: {}
         }
-    },
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    }
+}
+
+var DraggableQuestion = React.createClass({
     render() {
-        var style = {};
-        var isDragging = this.getDragState(ItemTypes.QUESTION).isDragging;
-        style.opacity = isDragging ? 0.4 : 1;
+        var { isDragging, connectDragSource } = this.props;
 
-        return (
-            <div {...this.dragSourceFor(ItemTypes.QUESTION)}
-                style={style} className="draggable">
+        return connectDragSource(
+            <div style={{opacity: isDragging ? 0.4 : 1}} className="draggable">
                 <i className="ion-plus-circled"></i>
                 Question
             </div>
         )
     }
 });
 
-module.exports = DraggableQuestion;
+module.exports = DragSource(ItemTypes.QUESTION, questionSource, collect)(DraggableQuestion);

package.json

@@ -24,7 +24,7 @@
     "node-libs-browser": "^0.5.0",
     "react": "^0.13.1",
     "react-bootstrap": "^0.20.1",
-    "react-dnd": "0.9.8",
+    "react-dnd": "1.1.0",
     "react-tag-input": "0.0.7",
     "reflux": "^0.2.7",
     "webpack": "^1.9.7",