1 files changed, 67 insertions, 39 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 273f312dd..4075ff423 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -8,6 +8,9 @@ import { TextField } from "../../../fields/TextField";
 import { observable, action } from "mobx";
 import "./CollectionTreeView.scss";
 import { EditableView } from "../EditableView";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 export interface TreeViewProps {
     document: Document;
@@ -42,38 +45,60 @@ 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>();
+        var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+        let onItemDown = setupDrag(reference, childDocument);
 
-        // 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 (title && title != FieldWaiting) {
             // if it's not collapsed, then render the full TreeView.
+            var subView = null;
+
             if (!this.collapsed) {
-                return (
-                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                subView =
+                    <li key={childDocument.Id} onClick={action(() => this.collapsed = true)} >
                         {this.renderBullet(BulletType.Collapsible)}
                         {title.Data}
-                        <ul key={document.Id}>
-                            <TreeView
-                                document={document}
-                            />
+                        <ul key={childDocument.Id}>
+                            <TreeView document={childDocument} />
                         </ul>
                     </li>
-                );
             } else {
-                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>
+                subView = <li key={childDocument.Id} onClick={action(() => this.collapsed = false)}>
                     {this.renderBullet(BulletType.Collapsed)}
                     {title.Data}
                 </li>
             }
+
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                {subView}
+            </div>
+
+
+            // let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
+            //     <ul key={childDocument.Id}>
+            //         <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>
+        }
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={childDocument.Id}></div>;
+        }
+
+        // otherwise, check if it's a collection.
+        else if (children && children !== "<Waiting>") {
+
         }
 
         // finally, if it's a normal document, then render it as such.
@@ -91,19 +116,19 @@ class TreeView extends React.Component<TreeViewProps> {
                         return true;
                     }}></EditableView>
             </li>;
+
+            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>)
-        } else {
-            return <div></div>;
-        }
+        return !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <div key={value.Id}>
+                    {this.renderChild(value)}
+                </div>)
+            )
     }
 }
 
@@ -114,21 +139,24 @@ 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 id="body">
-                <h3><EditableView contents={titleStr}
-                    height={72} GetValue={() => {
-                        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
-                        if (title && title !== "<Waiting>")
-                            return title.Data;
-                        return "";
-                    }} SetValue={(value: string) => {
-                        this.props.Document.SetData(KeyStore.Title, value, TextField);
-                        return true;
-                    }}></EditableView></h3>
+            <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
+                <h3>
+                    <EditableView contents={titleStr}
+                        height={72} GetValue={() => {
+                            let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+                            if (title && title !== "<Waiting>")
+                                return title.Data;
+                            return "";
+                        }} SetValue={(value: string) => {
+                            this.props.Document.SetData(KeyStore.Title, value, TextField);
+                            return true;
+                        }}>
+                    </EditableView>
+                </h3>
                 <ul className="no-indent">
                     <TreeView
                         document={this.props.Document}