Package Exports

react-abstract-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-abstract-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

AbstractTree

A simple way create hierarchical components in React JS.

Hierarchical ui-components are ubiquitous in interfaces. Every time it takes much efforts to build and walking the tree. Different ui elements under the hood may contain the same hierarchical structure. Therefore the universal AbstractTree component is created. It doesn't depend on the view. You decide how it will look!

You can create CheckboxTree component and so on based on AbstractTree.

Examples

Checkout the examples (add examples) how creates yours components.

About

As you already know, stateless React component is pure function which depends on props and return view:

f(props) -> view

AbstractTree is also pure function, but you should define renderTree callback which return your view (jsx):

A(props, renderTree) -> renderTree(tree, handleClick) -> view

You can read about renderTree below.

Props

Property	Type	Description	Default
`nodes`	Array	Required. Specifies the tree nodes and their children.
`renderTree`	Function	Required. `(tree, handleNodeClick) => React.Node`. It render your hierarchical component
`value`	Array	An array of checked nodes ids.	`[]`
`name`	String	A Tree name	`tree`
`onChange`	Function	`({event, value}) => void`. `value` has array of new checked nodes ids	`undefined`
`onError`	Function	`({suggestedValue, message, type}) => void`. Error handler	`undefined`

Node Type

Individual nodes within the nodes property can have the following structure:

Property	Type	Description
`label`	stirng	Required. The node's label.
`id`	string	Required. The node's id.
`children`	array	An array of child nodes.

`renderTree`

add docs