hierarchical-tree
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

hierarchical-tree tree-icon

Introduction

This is utility support to convert array to hierarchical tree faster. And it supported for more function:

  • Move node to node's children
  • Swap node
  • Delete node
  • Insert node data ....

Usage

import TreeModules from "hierarchical-tree";
const { TreeFactory } = TreeModules;
const data = [
    {id: "1", name: 'parent1'},
    {id: "21", name: 'children2-1', parentId: "2"},
    {id: "2", name: 'parent2'},
    {id: "11", name: 'children1-1', parentId: "1"},
    {id: "12", name: 'children1-2', parentId: "1"},
    {id: "13", name: 'children1-3', parentId: "1"},
];
const tree = new TreeFactory(data);
const treeData =  treeData.getData();
const treeJSON =  treeData.getJSON();

Module

module.exports = {
    TreeFactory,
    HierarchicalTree,
    constants: { TREE_ACTION_TRANSFER, DEFAULT_ROOT }
};

Input interface

Your input data required some field bellow

Properties Description Type
id uniq id string
name name for node string
parentId parentId of node string or undefined

Api

Properties Description Type Default Note
id uniq string '' _
name name of node string '' _
parentId for calculate which is parent's of node string '' _
children array of node's child AbstractTreeNode [ ] _
parent parent of this node AbstractTreeNode undefined _
level level of node in tree. Root node has level = 0 number 0 ...coming...
setParent set new parent for this node (data: AbstractTreeNode) => void _ _
move move from node to node, if move fail it return undefined ({ from, to, type }: TransferParams) => number or undefined type: TREE_ACTION_TRANSFER _
swap same move function but swap child too ({ from, to, type }: TransferParams) => number or undefined type: TREE_ACTION_TRANSFER _
removeChild remove child and return index number when success or undefined when it fail (id: string) => number or undefined _ _
appendChild opposite with removeChild (children: AbstractTreeNode[], index?: number) => number or undefined _ _
findDeep find deep child of this node call action (id: string) => AbstractTreeNode or undefined _ _
getRelativePath get relativePath from root () => string _ ...coming...

[!TIP] You can follow this interface for detail:

interface AbstractTreeNode {
    id: string;
    name: string;
    parentId?: string;
    children: AbstractTreeNode[];
    parent?: AbstractTreeNode;
    level?: number;
    root?: AbstractTreeNode;

    _init: (props: TreeNodeProps) => this;
    _setRoot: (node: AbstractTreeNode) => AbstractTreeNode;

    setLevel: (val: number) => void;
    setParent: (data: AbstractTreeNode) => void;
    move: ({ from, to, type }: TransferParams) => number | undefined;
    swap: ({ from, to, type }: TransferParams) => number | undefined;
    removeChild: (id: string) => number | undefined;
    appendChild: (children: AbstractTreeNode[], index?: number) => number | undefined;
    findDeep: (id: string) => AbstractTreeNode | undefined;
    getRelativePath: () => string;
}

enum TREE_ACTION_TRANSFER {
    ID = 'id',
    PATH = 'path',
    NODE = 'node',
}

interface TransferParams {
    from?: AbstractTreeNode | string;
    to: AbstractTreeNode | string;
    type?: TREE_ACTION_TRANSFER | string;
}

interface JSONData extends Pick<AbstractTreeNode, 'id' | 'name' | 'parentId' | 'children' | 'level'> {}

If you want to contribute to development. Please come to CONTRIBUTING

Package Sidebar

Install

npm i hierarchical-tree

Weekly Downloads

1

Version

1.2.1

License

MIT

Unpacked Size

20.9 kB

Total Files

6

Last publish

Collaborators

  • mrtranduc1994