hierarchical-tree
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