Swap RoomList to react-beautiful-dnd

Includes themeing

See matrix-org/matrix-react-sdk#1711

src/components/structures/RoomSubList.js

@@ -20,8 +20,8 @@ limitations under the License.
 var React = require('react');
 var ReactDOM = require('react-dom');
 var classNames = require('classnames');
-var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk');
+import { Droppable } from 'react-beautiful-dnd';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var Unread = require('matrix-react-sdk/lib/Unread');
@@ -32,6 +32,7 @@ var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/A
 import Modal from 'matrix-react-sdk/lib/Modal';
 import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 
+
 // turn this on for drop & drag console debugging galore
 var debug = false;
 
@@ -326,9 +327,7 @@ var RoomSubList = React.createClass({
         });
     },
 
-    calcManualOrderTagData: function(room) {
-        const index = this.state.sortedList.indexOf(room);
-
+    calcManualOrderTagData: function(index) {
         // we sort rooms by the lexicographic ordering of the 'order' metadata on their tags.
         // for convenience, we calculate this for now a floating point number between 0.0 and 1.0.
 
@@ -375,12 +374,14 @@ var RoomSubList = React.createClass({
     makeRoomTiles: function() {
         var self = this;
         var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
-        return this.state.sortedList.map(function(room) {
+        return this.state.sortedList.map(function(room, index) {
             // XXX: is it evil to pass in self as a prop to RoomTile?
             return (
                 <DNDRoomTile
+                    index={index} // For DND
                     room={ room }
                     roomSubList={ self }
+                    tagName={self.props.tagName}
                     key={ room.roomId }
                     collapsed={ self.props.collapsed || false}
                     unread={ Unread.doesRoomHaveUnreadMessages(room) }
@@ -566,12 +567,18 @@ var RoomSubList = React.createClass({
                           </TruncatedList>;
             }
 
-            return connectDropTarget(
-                <div>
-                    { this._getHeaderJsx() }
-                    { subList }
-                </div>
-            );
+            const subListContent = <div>
+                { this._getHeaderJsx() }
+                { subList }
+            </div>;
+
+            return this.props.editable ? <Droppable droppableId={"room-sub-list-droppable_" + this.props.tagName}>
+                { (provided, snapshot) => (
+                    <div ref={provided.innerRef}>
+                        { subListContent }
+                    </div>
+                ) }
+            </Droppable> : subListContent;
         }
         else {
             var Loader = sdk.getComponent("elements.Spinner");
@@ -585,11 +592,4 @@ var RoomSubList = React.createClass({
     }
 });
 
-// Export the wrapped version, inlining the 'collect' functions
-// to more closely resemble the ES7
-module.exports =
-DropTarget('RoomTile', roomListTarget, function(connect) {
-    return {
-        connectDropTarget: connect.dropTarget(),
-    }
-})(RoomSubList);
+module.exports = RoomSubList;