Completed migration of droptargets for react-dnd. Fixed #16

prakhar1989 · Jun 7, 2015 · 508dc8f · 508dc8f
1 parent e59e3e6
commit 508dc8f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 65 deletions.
diff --git a/js/components/Application.js b/js/components/Application.js
@@ -3,6 +3,8 @@ var Reflux = require('reflux');
 var QuestionModal = require('./QuestionModal');
 var AlertBox = require('./AlertBox');
 var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+var { DragDropContext } = require('react-dnd');
+var HTML5Backend = require('react-dnd/modules/backends/HTML5');
 
 var Pallet = require('./Pallet'),
     Toolbox = require('./Toolbox'),
@@ -40,4 +42,4 @@ var Application = React.createClass({
     }
 });
 
-module.exports = Application;
+module.exports = DragDropContext(HTML5Backend)(Application);
diff --git a/js/components/Block.js b/js/components/Block.js
@@ -1,5 +1,4 @@
 var React = require('react');
-var ReactDND = require('react-dnd');
 var ItemTypes = require('./ItemTypes');
 var Question = require('./Question');
 var SurveyActions = require('../actions/SurveyActions');
@@ -8,20 +7,24 @@ var ToggleParam = require('./ToggleParam');
 var { List } = require('immutable');
 var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 var cx = require('classnames');
+var { DropTarget } = require('react-dnd');
+
+var blockTarget = {
+    drop(props, monitor, component) {
+        component.handleQuestionDrop();
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDropTarget: connect.dropTarget(),
+        canDrop: monitor.canDrop(),
+        isOver: monitor.isOver()
+    }
+}
 
 var Block = React.createClass({
-    mixins: [ReactDND.DragDropMixin, PureRenderMixin],
-    statics: {
-        configureDragDrop: function(register) {
-            register(ItemTypes.QUESTION, {
-                dropTarget: {
-                    acceptDrop: function(component, item) {
-                        component.handleQuestionDrop();
-                    }
-                }
-            });
-        }
-    },
+    mixins: [PureRenderMixin],
     propTypes: {
         id: React.PropTypes.string.isRequired,
         questions: React.PropTypes.instanceOf(List),
@@ -39,6 +42,14 @@ var Block = React.createClass({
         }
     },
     render() {
+        var { canDrop, isOver, connectDropTarget } = this.props;
+        var classes = cx({
+            'item block': true,
+            'dragging': canDrop,
+            'hovering': isOver
+        });
+
+        // render questions
         var questions = this.props.questions.map(q => {
             return <Question
                         key={q.get('id')}
@@ -50,16 +61,8 @@ var Block = React.createClass({
                         freetext={q.get('freetext')} />
         });
 
-        var dropState = this.getDropState(ItemTypes.QUESTION);
-        var classes = cx({
-            'item block': true,
-            'dragging': dropState.isDragging,
-            'hovering': dropState.isHovering
-        });
-
-        return (
-            <div className={classes} {...this.dropTargetFor(ItemTypes.QUESTION)}>
-
+        return connectDropTarget(
+            <div className={classes}> 
                 <div className="controls-area">
                     <ul>
                       <li><i title="Delete Block" className="ion-trash-b" onClick={this.handleDelete}></i></li>
@@ -96,4 +99,4 @@ var Block = React.createClass({
     }
 });
 
-module.exports = Block;
+module.exports = DropTarget(ItemTypes.QUESTION, blockTarget, collect)(Block);
diff --git a/js/components/Question.js b/js/components/Question.js
@@ -1,5 +1,4 @@
 var React = require('react');
-var ReactDND = require('react-dnd');
 var Options = require('./Options');
 var ItemTypes = require('./ItemTypes');
 var SurveyActions = require('../actions/SurveyActions');
@@ -9,18 +8,7 @@ var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 var cx = require('classnames');
 
 var Question = React.createClass({
-    mixins: [ReactDND.DragDropMixin, PureRenderMixin],
-    statics: {
-        configureDragDrop: function(register) {
-            register(ItemTypes.OPTION, {
-                dropTarget: {
-                    acceptDrop: function(component, item) {
-                        component.handleOptionDrop();
-                    }
-                }
-            })
-        }
-    },
+    mixins: [PureRenderMixin],
     propTypes: {
         options: React.PropTypes.instanceOf(List).isRequired,
         id: React.PropTypes.string.isRequired,
@@ -64,11 +52,8 @@ var Question = React.createClass({
         }
     },
     render: function() {
-        var dropState = this.getDropState(ItemTypes.OPTION);
         var classes = cx({
-            'item question': true,
-            'dragging': dropState.isDragging,
-            'hovering': dropState.isHovering
+            'item question': true
         });
 
         // placeholder for taking input when text is clicked
@@ -79,7 +64,7 @@ var Question = React.createClass({
                         onKeyPress={this.handleEdit} />;
 
         return (
-            <div className={classes} {...this.dropTargetFor(ItemTypes.OPTION)}>
+            <div className={classes}>
 
                 <div className="qtext-area">
                   <span className="qtext" onClick={this.toggleInput}>

diff --git a/js/components/Survey.js b/js/components/Survey.js
@@ -1,42 +1,43 @@
 var React = require('react');
-var ReactDND = require('react-dnd');
 var Block = require('./Block');
 var SurveyActions = require('../actions/SurveyActions');
 var ItemTypes = require('./ItemTypes');
 var HelpText = require('./HelpText');
 var { List } = require('immutable');
 var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 var cx = require('classnames');
+var { DropTarget } = require('react-dnd');
+
+var surveyTarget = {
+    drop(props, monitor, component) {
+        component.handleBlockDrop();
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDropTarget: connect.dropTarget(),
+        canDrop: monitor.canDrop(),
+        isOver: monitor.isOver()
+    }
+}
 
 var Survey = React.createClass({
-    mixins:[ReactDND.DragDropMixin, PureRenderMixin],
-    statics: {
-        configureDragDrop: function(register) {
-            register(ItemTypes.BLOCK, {
-                dropTarget: {
-                    acceptDrop: function(component, item) {
-                        component.handleBlockDrop();
-                    }
-                }
-            })
-        }
-    },
+    mixins:[PureRenderMixin],
     propTypes: {
         survey: React.PropTypes.instanceOf(List)
     },
     handleBlockDrop() {
         SurveyActions.blockDropped();
     },
-    render: function() {
-        var survey = this.props.survey;
-        var dropState = this.getDropState(ItemTypes.BLOCK);
+    render() {
+        var { survey, canDrop, isOver, connectDropTarget } = this.props;
         var classes = cx({
             'survey': true,
-            'dragging': dropState.isDragging,
-            'hovering': dropState.isHovering
+            'dragging': canDrop,
+            'hovering': isOver
         });
 
-
         var blocks = survey.map(block =>
             <Block key={block.get('id')}
                 id={block.get('id')}
@@ -46,12 +47,12 @@ var Survey = React.createClass({
                 questions={block.get('questions')} />
         );
 
-        return (
-            <div className={classes} {...this.dropTargetFor(ItemTypes.BLOCK)}>
+        return connectDropTarget(
+            <div className={classes}>
                  { survey.count() > 0 ? blocks : <HelpText itemType="Block" /> }
             </div>
         )
     }
 });
 
-module.exports = Survey;
+module.exports = DropTarget(ItemTypes.BLOCK, surveyTarget, collect)(Survey);