@exienta-test/react-tree v0.5.3

React Tree View with API

This is a simple react tree view using an API do describe the tree structure

##Disclaimer Use this at your own risk. No warranty explicit or implied is provided. Your are fully responsible for any direct of indirect copyright or patent infringement arising from the use of this package in whatever scenario.

##Please note that this package is published for test purposes and not for productive use!

Feel free to get inspired by it or copy it, but do not rely on it and do expect massive breaking changes and be prepared to see it disappear completely.

Below is an example React Typescript app showing how to use the tree view. Copy this into a standard React Typescript code template.

import React from 'react';
import './App.css';
import {ReactTreeView,ReactTreeViewListener} from "@exienta-test/react-tree";
import {TreeApi, TreeNode} from "@exienta-test/react-tree";

class StdTreeNode implements TreeNode<DummyData> {


    constructor(id: string, title: string, hasChildren: boolean, children?: TreeNode<DummyData>[]) {
        this.id = id;
        this.title = title;
        this.hasChildren = hasChildren;
        this.children = children;
    }

    children?: TreeNode<DummyData>[];
    hasChildren: boolean;
    id: string;
    title: string;

}

class MyListener implements ReactTreeViewListener<DummyData>{

    constructor(){}

    selectionChanged(selected: TreeNode<DummyData>[]){
        var msg="";
        if (selected!=undefined){
            var count:number=0;
            selected.forEach(function (treeNode: TreeNode<DummyData>) {
                if (count>0){
                    msg+=", ";
                }
                msg+=treeNode.title;
                count++;
            });
        }
        console.log("listener: "+msg);
    }
}

class DummyData{
    someValue?: number;
}

class TreeViewImpl implements TreeApi<DummyData> {
    async getRoot(): Promise<TreeNode<DummyData>> {
        return new Promise<StdTreeNode>((resolve, reject) => {
            setTimeout(() => resolve(new StdTreeNode("1", "title 1", true, undefined)), 200);
        });
    }

    async updateChildren(treeNode: TreeNode<DummyData>): Promise<TreeNode<DummyData>> {
        if (treeNode.hasChildren) {
            treeNode.children = new Array<TreeNode<DummyData>>();
            for (let i = 0; i < 7; i++) {
                var child: StdTreeNode = new StdTreeNode(treeNode.id + i, treeNode.title + " " + i, i % 2 == 0 && treeNode.id.length < 5);
                treeNode.children.push(child);
            }
        }
        return new Promise<StdTreeNode>((resolve, reject) => {
            setTimeout(() => resolve(treeNode));
        });
    }
}


function App() {
    const treeApi: TreeApi<DummyData> = new TreeViewImpl();
    var listeners:ReactTreeViewListener<DummyData>[]=new Array();
    listeners.push(new MyListener());
    return (
        <div className="App">
            test<br/>
            <div style={{textAlign: "left"}}>
                <ReactTreeView treeApi={treeApi} selectable={true} multiSelect={false} listeners={listeners}/>
            </div>
        </div>
    );
}

export default App;