Tree

Tree package for building Tree UI compoenent. It includes a fully customizable react component, stand-alone object builder and a custome HTML element.

Getting Started

npm i @egeonu/tree

Usage

A few examples of useful commands and/or tasks.

ReactTree

Props (input configuration)

export type Config = {
    data: Array<any> // input is an example
    name?: string // Name of tree
    collapsible?: boolean // Can collapse
    tree_container_class?: string
    tree_children_class?: string
    tree_element_class?: string
    tree_leaf_class?: string
    tree_parent_class?: string
    onclick?: any // Onclick callback
}

import { ReactTree } from "@egeonu/tree";

    const input = [
        {
            id: 1,
        },
        {
            id: 2,
            parents: [1]
        },
        {
            id: 3,
            parents: [2, 1]
        },
        {
            id: 4,
            parents: [2]
        },
        {
            id: 5,
            parents: [2, 3, 4]
        }
    ]

root.render(
    <ReactTree data={input} />
);

Expected output

TreeBuilder

import { TreeBuilder } from "@egeonu/tree";

    const input = [
        {
            id: 1,
        },
        {
            id: 2,
            parents: [1]
        },
        {
            id: 3,
            parents: [2, 1]
        },
        {
            id: 4,
            parents: [2]
        },
        {
            id: 5,
            parents: [2, 3, 4]
        }
    ]
    // with props
    const tree = new TreeBuilder({ data: input });
    console.log(tree.data);
    // without props
    tree = new TreeBuilder();
    tree.createTree(input);
    console.log(tree.data);
    // static invoke
    tree = TreeBuilder.createTree(input);
    console.log(tree);

Expected output

[
    {
      id: 1,
      children: [
        {
          id: 2,
          children: [
            {
              id: 3,
              children: [ { id: 5, children: [], data: undefined } ],
              data: undefined
            },
            {
              id: 4,
              children: [ { id: 5, children: [], data: undefined } ],
              data: undefined
            },
            { id: 5, children: [], data: undefined }
          ],
          data: undefined
        },
        {
          id: 3,
          children: [ { id: 5, children: [], data: undefined } ],
          data: undefined
        }
      ],
      data: undefined
    }
]

TreeNodeElement

• You can use the TreeNodeElement to build your own tree with more control.
• It will require some recursion, view example below. (This is from ReactTree)

  function startMap (tree: Array<TreeNode>) {
    let self = this;
    const container = document.getElementById("tree_container");
    for (const object of tree) {
      // Create contanier for the node
      const element = document.createElement("div");
      element.setAttribute("id", object.id);
      // Create container to hold node data
      const leaf = document.createElement("tree-node") as TreeNodeElement;
      leaf.innerHTML = object.data?.content ? object.data?.content : "";
      element.appendChild(leaf);
      if (object.children.length > 0) {
        // Map children for this node
        self.mapTree(element, object.children, 2, leaf);
      }
      // Append to main container
      container.appendChild(element);
    }
  }

  mapTree (container: HTMLElement, tree: Array<TreeNode>, gap: number, parentLeaf: TreeNodeElement) {
    let self = this;
    // Create container for the children
    const children = document.createElement("div");
    const child_id = container.id + "-row";
    children.setAttribute("id", child_id);
    // Add children container id to the parent
    parentLeaf.setAttribute("rowId", child_id);
    for (const object of tree) {
      // Create contanier for the node
      const element = document.createElement("div");
      element.setAttribute("id", object.id + "-" + container.id);
      // Create container to hold node data
      const leaf = document.createElement("tree-node") as TreeNodeElement;
      element.appendChild(leaf);
      leaf.innerHTML = object.data?.content ? object.data?.content : "";
      if (object.children.length > 0) {
        // Map children for this node
        self.mapTree(element, object.children, gap, leaf);
      }
      // Append to children container
      children.appendChild(element);
    }
    // Append to main container
    container.appendChild(children);
  }

• In this example we set the attribute rowId with the child_id representing the element we expect to hold the children of the current node.
• I choose to build child_id from a concatenation of all the parent ids' with the child to avoid collisions.
• This allows for the built in event listener to handle closing and opening the element holding the children.

To-Do

1. Style options: flat, tree, horizontal and vertical
2. Draw connector lines with SVG