Manual Reference Source
import NodesTree from 'cloudify-stage/basic/NodesTree.js'
public class | source

NodesTree

Extends:

react~Component → 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_0

<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

NodesTree_1

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>
);

Static Member Summary

Static Public Members
public static

propTypes

Static Public Members

public static defaultProps: * source

propTypes

All propTypes are available at rc-tree.

In the table below only overridden props are listed.

Properties:

NameTypeAttributeDescription
treeData object[]
  • optional
  • default: []

primary content, alternative to adding tree nodes as children

selectable boolean
  • optional
  • default: false

specifies whether tree node can be selected

showIcon boolean
  • optional
  • default: false

specifies whether show icon on the left side of node

showLine boolean
  • optional
  • default: true

specifies whether show line connecting nodes on the same level