TreeView.js

'use strict'

import React, { Component } from 'react';
import cx from 'classnames';
import ReactDOM from 'react-dom'
import Tree from 'react-ui-tree'

import './tmp/react-ui-tree.less';
import './tmp/theme.less';
import './tmp/app.less';

var treeData = require('./meta/treedata');

export default class TreeView extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tree: treeData,
      active: true
    }
    console.log('[TreeView] props:',props)
  }

  getInitialState() {
    return {
      active: null,
      tree: treeData
    }
  }

  handleChange(_tree) {
    this.setState({
      tree: _tree
    });
  }

  updateTree() {
    console.log('[TreeView.renderNode] this.state:',this.state)
    //console.log('this.refs.newvalue:',this.refs.newvalue.value)
    var treeData = this.state.tree;
    treeData.children.push({module: this.refs.newvalue.value});
    this.setState({
      tree: treeData
    });
  }

  renderNode(node) {
    console.log('[TreeView.renderNode] node:',node)
    console.log('[TreeView.renderNode] this.state:',this.state)
    return (
      <span className={cx('node', {
        'is-active': node === this.state.active
        })} onClick={this.onClickNode.bind(null, node)}>
        {node.module}
      </span>
    );
  }

  onClickNode(node) {
    this.setState({
      active: node
    });
  }

  render() {
    return (
      <div className="app">
        <div className="tree">
          <Tree
            paddingLeft={20}
            tree={this.state.tree}
            onChange={this.handleChange.bind(this)}
            isNodeCollapsed={this.isNodeCollapsed}
            renderNode={this.renderNode.bind(this)}
          />
        </div>
        <div className="inspector">
          <button onClick={this.updateTree.bind(this)}>update tree</button>
          <input type="string" id="new-value" ref="newvalue"/>
          <pre>
          {JSON.stringify(this.state.tree, null, '  ')}
          </pre>
         </div>
      </div>
    );
  }
}