diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..1110330b Binary files /dev/null and b/.DS_Store differ diff --git a/example/.DS_Store b/example/.DS_Store new file mode 100644 index 00000000..1cb3d704 Binary files /dev/null and b/example/.DS_Store differ diff --git a/example/app.js b/example/app.js index 121b8e6d..2c0d4279 100644 --- a/example/app.js +++ b/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 ( + + +
+
+ + QuickLinks + + +
+ +
+ +
+
+
+ + Log Tree + + +
+
+ + Search For files + + + +
+
+ + +
+
+ + + File Preview + + + + + + + + ) + }; +} + +class RenderFile extends Component { + + constructor(props) { + super(props); + this.state = { + node: this.props.node + } + } + + + + render() { + + return ( + + + Current File = {this.props.node.module} + + + Open in new tab + +