expandable-node

A library for creating a tree like node structure.

npm i expandable-node

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:

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:

Technology used to build this library

• TypeScript Starter (License)
• Material design icons (License)

License

Released under MIT license.