xl-react-infinite-tree
Version:
The infinite-tree library for React.
179 lines (159 loc) • 7.57 kB
Markdown
# react-infinite-tree [](https://travis-ci.org/cheton/react-infinite-tree) [](https://coveralls.io/github/cheton/react-infinite-tree?branch=master)
[](https://www.npmjs.com/package/react-infinite-tree)
The [infinite-tree](https://github.com/cheton/infinite-tree) library for React.
Demo: http://cheton.github.io/react-infinite-tree
[](http://cheton.github.io/react-infinite-tree)
## Features
* High performance infinite scroll with large data set
* [Customizable renderer](https://github.com/cheton/infinite-tree/wiki/Options#rowrenderer) to render the tree in any form
* [Load nodes on demand](https://github.com/cheton/infinite-tree/wiki/Options#loadnodes)
* Native HTML5 drag and drop API
* A rich set of [APIs](https://github.com/cheton/infinite-tree#api-documentation)
## Browser Support
<br>Chrome | <br>Edge | <br>Firefox | <br>IE | <br>Opera | <br>Safari
--- | --- | --- | --- | --- | --- |
Yes | Yes | Yes| 9+ | Yes | Yes |
## Installation
```bash
npm install --save react react-dom infinite-tree
npm install --save react-infinite-tree
```
## Example
```jsx
import React from 'react';
import classNames from 'classnames';
import InfiniteTree from 'react-infinite-tree';
import 'react-infinite-tree/dist/react-infinite-tree.css';
const data = {
id: 'fruit',
name: 'Fruit',
children: [{
id: 'apple',
name: 'Apple'
}, {
id: 'banana',
name: 'Banana',
children: [{
id: 'cherry',
name: 'Cherry',
loadOnDemand: true
}]
}]
};
class App extends React.Component {
tree = null;
componentDidMount() {
this.tree.loadData(data);
// Select the first node
this.tree.selectNode(this.tree.getChildNodes()[0]);
}
render() {
return (
<div>
<InfiniteTree
ref={(c) => this.tree = c.tree}
autoOpen={true}
loadNodes={(parentNode, done) => {
const suffix = parentNode.id.replace(/(\w)+/, '');
const nodes = [
{
id: 'node1' + suffix,
name: 'Node 1'
},
{
id: 'node2' + suffix,
name: 'Node 2'
}
];
setTimeout(() => {
done(null, nodes);
}, 1000);
}}
rowRenderer={(node, treeOptions) => {
const { id, name, loadOnDemand = false, children, state, props = {} } = node;
const droppable = treeOptions.droppable;
const { depth, open, path, total, selected = false } = state;
const more = node.hasChildren();
return (
<div
className={classNames(
'infinite-tree-item',
{ 'infinite-tree-selected': selected }
)}
data-id={id}
droppable={droppable}
>
<div
className="infinite-tree-node"
style={{ marginLeft: depth * 18 }}
>
{!more && loadOnDemand &&
<a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>►</a>
}
{more && open &&
<a className={classNames(treeOptions.togglerClass)}>▼</a>
}
{more && !open &&
<a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>►</a>
}
<span className="infinite-tree-title">{name}</span>
</div>
</div>
);
}}
selectable={true}
shouldSelectNode={(node) => {
if (!node || (node === this.tree.getSelectedNode())) {
return false; // Prevent from deselecting the current node
}
return true;
}}
onClick={(event) => {
// click event
const target = event.target || event.srcElement; // IE8
console.log('click:', target);
}}
onDoubleClick={(event) => {
// dblclick event
}}
onKeyDown={(event) => {
// keydown event
}}
onKeyUp={(event) => {
// keyup event
}}
onCloseNode={(node) => {
}}
onOpenNode={(node) => {
}}
onSelectNode={(node) => {
}}
onWillCloseNode={(node) => {
}}
onWillOpenNode={(node) => {
}}
onWillSelectNode={(node) => {
}}
onClusterWillChange={() => {
}}
onClusterDidChange={() => {
}}
onContentWillUpdate={() => {
}}
onContentDidUpdate={() => {
}}
/>
</div>
);
}
}
```
## API Documentation
Check out API documentation at [infinite-tree](https://github.com/cheton/infinite-tree/wiki):
* [Options](https://github.com/cheton/react-infinite-tree/wiki/Options)
* [Functions: Tree](https://github.com/cheton/react-infinite-tree/wiki/Functions:-Tree)
* [Functions: Node](https://github.com/cheton/react-infinite-tree/wiki/Functions:-Node)
* [Events](https://github.com/cheton/react-infinite-tree/wiki/Events)
## License
Copyright (c) 2016 Cheton Wu
Licensed under the [MIT License](LICENSE).