1 files changed, 30 insertions, 48 deletions

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index bad3e3b69..b48c33f99 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,6 +7,9 @@ import React = require("react")
 import { TextField } from "../../../fields/TextField";
 import { observable, action } from "mobx";
 import "./CollectionTreeView.scss";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 export interface TreeViewProps {
     document: Document;
@@ -24,60 +27,39 @@ class TreeView extends React.Component<TreeViewProps> {
 
     /**
      * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
-     * @param document The document to render.
+     * @param childDocument The document to render.
      */
-    renderChild(document: Document) {
-        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+    renderChild(childDocument: Document) {
+        let reference = React.createRef<HTMLDivElement>();
 
-        // if the title hasn't loaded, immediately return the div
-        if (!title || title === "<Waiting>") {
-            return <div key={document.Id}></div>;
-        }
-
-        // otherwise, check if it's a collection.
-        else if (children && children !== "<Waiting>") {
-            // if it's not collapsed, then render the full TreeView.
-            if (!this.collapsed) {
-                return (
-                    <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
-                        {title.Data}
-                        <ul key={document.Id}>
-                            <TreeView
-                                document={document}
-                            />
-                        </ul>
-                    </li>
-                );
-            } else {
-                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
-            }
-        }
+        var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+        let onItemDown = setupDrag(reference, childDocument);
 
-        // finally, if it's a normal document, then render it as such.
-        else {
-            return <li key={document.Id}>{title.Data}</li>;
+        if (title && title != FieldWaiting) {
+            let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
+                <ul>
+                    <TreeView document={childDocument} />
+                </ul>;
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
+                    onClick={action(() => this.collapsed = !this.collapsed)} >
+                    {title.Data}
+                    {subView}
+                </li>
+            </div>
         }
+        return (null);
     }
 
     render() {
         var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-
-        if (children && children !== "<Waiting>") {
-            return (<div>
-                {children.Data.map(value => this.renderChild(value))}
-            </div>)
-            // let results: JSX.Element[] = [];
-
-            // // append a list item for each child in the collection
-            // children.Data.forEach((value) => {
-            //     results.push(this.renderChild(value));
-            // })
-
-            // return results;
-        } else {
-            return <div></div>;
-        }
+        return !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <div key={value.Id}>
+                    {this.renderChild(value)}
+                </div>)
+            )
     }
 }
 
@@ -88,11 +70,11 @@ export class CollectionTreeView extends CollectionViewBase {
     render() {
         let titleStr = "";
         let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
-        if (title && title !== "<Waiting>") {
+        if (title && title !== FieldWaiting) {
             titleStr = title.Data;
         }
         return (
-            <div>
+            <div className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
                 <h3>{titleStr}</h3>
                 <ul className="no-indent">
                     <TreeView