Merge pull request #10 from browngraphicslab/treeview

Treeview

1 files changed, 104 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
new file mode 100644
index 000000000..52e853bf7
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -0,0 +1,104 @@
+import { observer } from "mobx-react";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../../fields/TextField";
+import { observable, action } from "mobx";
+import "./CollectionTreeView.scss";
+
+export interface TreeViewProps {
+    document: Document;
+}
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class TreeView extends React.Component<TreeViewProps> {
+
+    @observable
+    collapsed: boolean = false;
+
+    /**
+     * 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.
+     */
+    renderChild(document: Document) {
+        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // 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>
+            }
+        }
+
+        // finally, if it's a normal document, then render it as such.
+        else {
+            return <li key={document.Id}>{title.Data}</li>;
+        }
+    }
+
+    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>;
+        }
+    }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
+
+    render() {
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== "<Waiting>") {
+            titleStr = title.Data;
+        }
+        return (
+            <div>
+                <h3>{titleStr}</h3>
+                <ul className="no-indent">
+                    <TreeView
+                        document={this.props.Document}
+                    />
+                </ul>
+            </div>
+        );
+    }
+}
\ No newline at end of file