NodesTree

NodesTree is a tree component, it wraps rc-tree component.

See rc-tree component for details about props and detailed usage information.

Access

Stage.Basic.NodesTree

Usage

Simple example

<NodesTree defaultExpandAll>
  <NodesTree.Node title='root' key="0">
    <NodesTree.Node title='1' key="1"></NodesTree.Node>
    <NodesTree.Node title='2' key="2">
      <NodesTree.Node title='5' key="5"></NodesTree.Node>
      <NodesTree.Node title='6' key="6"></NodesTree.Node>
    </NodesTree.Node>
    <NodesTree.Node title='3' key="3"></NodesTree.Node>
    <NodesTree.Node title='4' key="4">
      <NodesTree.Node title='7' key="7"></NodesTree.Node>
    </NodesTree.Node>
  </NodesTree.Node>
</NodesTree>

Customized tree used for blueprints archive content view

const loop = data => {
  return data.map(item => {
    if (item.children) {
      return (
        <NodesTree.Node key={item.key}
                        title={<span><Icon className="treeIcon" name="folder open outline"/>{item.title}</span>}>
          {loop(item.children)}
        </NodesTree.Node>
      );
    }
    return <NodesTree.Node key={item.key}
                           title={<span><Icon className="treeIcon" name="file outline"/>{item.title}</span>}/>;
  });
};

return (
  <NodesTree showLine selectable defaultExpandAll onSelect={this._selectFile.bind(this)}>
    <NodesTree.Node title={<Label color='purple' horizontal>{this.props.data.blueprintId}</Label>} key="0">
      {loop(this.props.data.tree.children)}
    </NodesTree.Node>
  </NodesTree>
);