Nicely Packaged Make

    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.

    Install

    npm i xl-react-infinite-tree

    DownloadsWeekly Downloads

    264

    Version

    0.7.3

    License

    MIT

    Unpacked Size

    6.16 MB

    Total Files

    50

    Last publish

    Collaborators

    • bogdannechyporenko