xl-react-infinite-tree

0.7.3 • Public • Published

react-infinite-tree build status Coverage Status

NPM

The infinite-tree library for React.

Demo: http://cheton.github.io/react-infinite-tree

react-infinite-tree

Features

Browser Support

Chrome
Chrome
Edge
Edge
Firefox
Firefox
IE
IE
Opera
Opera
Safari
Safari
Yes Yes Yes 9+ Yes Yes

Installation

npm install --save react react-dom infinite-tree
npm install --save react-infinite-tree

Example

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:

License

Copyright (c) 2016 Cheton Wu

Licensed under the MIT License.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.7.3
    17
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.7.3
    17
  • 0.7.2
    0

Package Sidebar

Install

npm i xl-react-infinite-tree

Weekly Downloads

17

Version

0.7.3

License

MIT

Unpacked Size

6.16 MB

Total Files

50

Last publish

Collaborators

  • bogdannechyporenko