Added search, draggable property and links in node support.

example/app.js

@@ -6,13 +6,258 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Tree from '../lib/react-ui-tree.js';
 import tree from './tree';
+import links from './quicklinks'
 import packageJSON from '../package.json';
+import _ from 'lodash';
+import Grid from 'material-ui/Grid';
+import Table, {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow
+} from "material-ui/Table";
+import Paper from "material-ui/Paper";
+import Input, { InputLabel } from 'material-ui/Input';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import Typography from 'material-ui/Typography';
 
-class App extends Component {
-  state = {
-    active: null,
-    tree: tree
+
+class SearchTree extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+        query : "",
+        original_tree: tree,
+        current_tree: tree,
+        file_node: {
+          link:"",
+          module:""
+        }
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.changeUrl = this.changeUrl.bind(this);
+  }
+
+  handleSubmit(event) {
+    alert('A name was submitted: ' + this.state.query);
+    event.preventDefault();
+  }
+
+  handleChange(event) {
+    this.setState({query: event.target.value});
+    let thisQuery = event.target.value;
+    if(thisQuery.length > 0) {
+      this.getNewTree(thisQuery);
+    }
+    else {
+      this.setState({current_tree: this.state.original_tree});
+    }
+    // we need to change the current tree state so that
+    // we get the new tree rendered automatically.
+  }
+
+  changeUrl(node) {
+    this.setState({file_node: node});
+  }
+
+  getNewTree(thisQuery) {
+      let original_tree_clone = _.cloneDeep(this.state.original_tree);
+      let newTree = this.recursiveTreeConstruct(thisQuery, original_tree_clone);
+      if(newTree != null) {
+        this.setState({current_tree: newTree});
+      }
+      else {
+        this.setState({
+            current_tree: {
+              module: "No results"
+            }
+        });
+    }
+  }
+
+  recursiveTreeConstruct(query, thisTree) {
+
+    // We will check if the current level has the matched pattern.
+    // Exception is that we need the parent always.
+    if(thisTree.module != null) {
+      if(thisTree.module.toLowerCase().indexOf(query.toLowerCase()) > -1 && thisTree.module != "Logs") {
+        thisTree.collapsed = false;
+        // maybe add a close all children function...?
+        return thisTree;
+      }
+      // If it doesn't, then we check if the below path has matched pattern.
+      else if(thisTree.children != null) {
+        let newChildNodes = [];
+        thisTree.children.forEach(node => {
+          let newnode = this.recursiveTreeConstruct(query, node);
+          if(newnode) {
+            newChildNodes.push(newnode);
+          }
+        });
+
+        if(newChildNodes.length > 0) {
+          thisTree.children = newChildNodes;
+          thisTree.collapsed = false;
+          return thisTree;
+        }
+        else {
+          return null;
+        }
+      }
+    }
+    return null;
+  }
+
+  render() {
+    return (
+          <Grid container>
+          <Grid item xs={4}>
+            <br/>
+            <br/>
+            <Typography variant="headline" component="h3">
+              QuickLinks
+            </Typography>
+            <Paper>
+              <div className="quickLinks">
+                <QuickLinks />
+              </div>
+            </Paper>
+            <br/>
+            <br/>
+            <br/>
+            <Typography variant="headline" component="h3">
+              Log Tree
+            </Typography>
+
+            <div className="app">
+              <div className="tree">
+              <FormControl onSubmit={this.handleSubmit}>
+                <InputLabel htmlFor="file-query">Search For files</InputLabel>
+                <Input id="file-query" type="text" value={this.state.query} onChange={this.handleChange} name="search_query" />
+              </FormControl>
+                <TreeComponent
+                  tree={this.state.current_tree}
+                  changeUrl={this.changeUrl}
+                />
+              </div>
+            </div>
+            </Grid>
+            <Grid item xs={8} xl={8}>
+              <br/>
+              <br/>
+
+            <Typography variant="headline" component="h3">
+              File Preview
+            </Typography>
+
+              <Paper className="preview_holder">
+              <RenderFile node={this.state.file_node}/>
+              </Paper>
+            </Grid>
+            </Grid>
+    )
+  };
+}
+
+class RenderFile extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      node: this.props.node
+    }
+  }
+
+
+
+  render() {
+
+    return (
+      <span>
+        <Typography component="p">
+          Current File = {this.props.node.module}
+        </Typography>
+        <Typography component="p">
+          <a href={this.props.node.link} target="blank">Open in new tab</a>
+        </Typography>
+        <iframe id="preview_window" src={this.props.node.link} />
+      </span>
+    )
+  }
+}
+
+class DisplayQuery extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: this.props.query
+    }
+  }
+
+  render() {
+    return (
+      <div>
+       Searching For - {this.props.query}
+      </div>
+    )
+  }
+}
+
+class QuickLinks extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      links: links
+    };
+  }
+
+  returnRow = row => {
+    console.log(row)
+    return (
+      <tr>
+        <td>{row.component}</td>
+        <td><a href="{row.link}">{row.link}</a></td>
+      </tr>
+    )
+  }
+
+  render() {
+    return (
+      <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Component</TableCell>
+                    <TableCell>QuickLinks </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {
+                    links.map(function(link, i) {
+                      return <TableRow key={link.head}>
+                              <TableCell>{link.head}</TableCell>
+                              <TableCell><a href={link.link}>{link.component}</a></TableCell>
+                            </TableRow>;
+                    })
+                  }
+                </TableBody>
+      </Table>
+    )
   };
+}
+
+class TreeComponent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: null
+    };
+  }
 
   renderNode = node => {
     return (
@@ -27,48 +272,26 @@ class App extends Component {
     );
   };
 
+
   onClickNode = node => {
     this.setState({
       active: node
     });
+    this.props.changeUrl(node);
   };
 
   render() {
     return (
-      <div className="app">
-        <div className="tree">
-          <Tree
-            paddingLeft={20}
-            tree={this.state.tree}
-            onChange={this.handleChange}
-            isNodeCollapsed={this.isNodeCollapsed}
-            renderNode={this.renderNode}
-          />
-        </div>
-        <div className="inspector">
-          <h1>
-            {packageJSON.name} {packageJSON.version}
-          </h1>
-          <button onClick={this.updateTree}>update tree</button>
-          <pre>{JSON.stringify(this.state.tree, null, '  ')}</pre>
-        </div>
-      </div>
+              <Tree
+                paddingLeft={20}
+                tree={this.props.tree}
+                draggable={false}
+                onChange={this.handleChange}
+                isNodeCollapsed={this.isNodeCollapsed}
+                renderNode={this.renderNode}
+              />
     );
   }
-
-  handleChange = tree => {
-    this.setState({
-      tree: tree
-    });
-  };
-
-  updateTree = () => {
-    const { tree } = this.state;
-    tree.children.push({ module: 'test' });
-    this.setState({
-      tree: tree
-    });
-  };
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(<SearchTree />, document.getElementById('app'));

example/app.less

@@ -4,11 +4,6 @@
   box-sizing: border-box;
 }
 
-body {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-}
 
 .inspector {
   margin-left: 400px;
@@ -18,3 +13,24 @@ body {
     font-size: 13px;
   }
 }
+
+thead {
+  margin: 10px;
+}
+
+iframe {
+  height: 100%;
+  width: 100%;
+  min-height: 85vh;
+  max-height: 85vh;
+}
+
+.preview_holder {
+  height: 100%;
+  width: 100%;
+}
+
+.tree {
+  // height: 70vh;
+  // bottom: 30px;
+}

example/index.html

@@ -4,7 +4,9 @@
   <title>react-ui-tree</title>
 </head>
 <body>
-  <a href="https://github.com/pqx/react-ui-tree"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
 
   <div id="app"></div>
   <script src="https://unpkg.com/react@15/dist/react.js"></script>

example/quicklinks.js

@@ -0,0 +1,16 @@
+module.exports = [
+    {
+        "head": "Test Component",
+        "component": "ambarieu-maintvdf", 
+        "link": "http://testqelog.s3.amazonaws.com/qelogs/nat/86028/amb-pu-eu-maintvdf/split-2/nat-yc-r7-kmls-amb-pu-eu-maintvdf-2/test-logs/ambarieu-maintvdf/report/html/index.html"
+    }, 
+    {
+        "head": "Cluster Test log",
+        "component": "console.log", 
+        "link": "http://testqelog.s3.amazonaws.com/qelogs/nat/86028/amb-pu-eu-maintvdf/split-2/nat-yc-r7-kmls-amb-pu-eu-maintvdf-2/test-logs/ctr-e138-1518143905142-45393-01-000002.hwx.site/console.log"
+    }, 
+    {
+        "head": "All cluster logs",
+        "component": "All cluster logs", 
+        "link": "http://logserver.eng.hortonworks.com/?prefix=qelogs/nat/86028/amb-pu-eu-maintvdf/split-2/nat-yc-r7-kmls-amb-pu-eu-maintvdf-2/"
+    }];