Options
All
  • Public
  • Public/Protected
  • All
Menu

expandable-node

expandable-node

A library for creating a tree like node structure.

npm i expandable-node

Basic configuration

Usage

API documentation: https://mkolodiy.github.io/expandable-node/

Options

Object containing values needed for creating a new node.

Name Optional Description
container Defines id or class of a HTML element which should be used to create a new node.
callbacks Defines an object containing callbacks for all buttons defined for a node.
types Defines an array of types that can be used for a node.
nodes Defines an array of nodes.

Callbacks

Name Optional Description
deleteBtnCb Defines a callback function for the delete button.
editBtnCb Defines a callback function for the edit button.
expandBtnCb Defines a callback function for the expand button.
selectCb Defines a callback function for the selection of a node.

Types

Array containing type objects that might be used in a node.

Name Optional Description
type Defines the name of the type.
cssClass Defines a css class that should be appended to a expendable node.

Nodes

Array containing node objects that should be displayed in the provided container.

Name Optional Description
id Defines a unique id of a node.
description Defines a description of a node.
enableEditBtn Defines if the edit button should be shown for a node.
type Defines the name of the type.
childNodes Defines an array of child nodes that a node might contain.

Basic configuration

Following code snippet shows a simple configuration:

import { ExpNode } from 'expandable-node';

const options = {
  container: 'container',
  nodes: [
    {
      id: 'node01',
      description: 'Level 1 node.',
      childNodes: [
        {
          id: 'node01-childNode01',
          description: 'Level 2 node.'
        },
        {
          id: 'node01-childNode02',
          description: 'Level 2 node.'
        }
      ]
    }
  ]
};

ExpNode.create(options);

Using the configuration above you will get the following output:

Basic configuration

Full configuration

Following code snippets shows a full configuration:

.green-node {
  background-image: none;
  background-color: green;
}

.magenta-node {
  background-image: none;
  background-color: magenta;
}
import { ExpNode } from 'expandable-node';

const editBtnCb = function(node) {
  console.log('editBtnCb');
  console.log(node);
};

const deleteBtnCb = function(node) {
  console.log('deleteBtnCb');
  console.log(node);
};

const expandBtnCb = function(node) {
  console.log('expandBtnCb');
  console.log(node);
};

const selectCb = function(node) {
  console.log('selectCb');
  console.log(node);
};

const options = {
  container: 'container',
  callbacks: {
    editBtnCb: editBtnCb,
    deleteBtnCb: deleteBtnCb,
    expandBtnCb: expandBtnCb,
    selectCb: selectCb
  },
  types: [
    {
      type: 'greenNode',
      cssClass: 'green-node'
    },
    {
      type: 'magentaNode',
      cssClass: 'magenta-node'
    }
  ],
  nodes: [
    {
      id: 'node01',
      description: 'Level 1 node.',
      enableEditBtn: true,
      type: 'greenNode',
      childNodes: [
        {
          id: 'node01-childNode01',
          description: 'Level 2 node.',
          enableEditBtn: true,
          type: 'magentaNode',
          childNodes: [
            {
              id: 'node01-childNode01-childNode01',
              description: 'Level 3 node.',
              enableEditBtn: true,
              type: 'greenNode'
            }
          ]
        },
        {
          id: 'node01-childNode02',
          description: 'Level 2 node.',
          enableEditBtn: true,
          type: 'magentaNode'
        }
      ]
    },
    {
      id: 'node02',
      description: 'Level 1 node.',
      enableEditBtn: true,
      type: 'greenNode'
    }
  ]
};

ExpNode.create(options);

Using the configuration above you will get the following output:

Full configuration

Technology used to build this library

License

Released under MIT license.

Generated using TypeDoc