Newfangled Package Modernizer

    tree-node-data

    2.0.1 • Public • Published

    tree-node-data

    tree-node-data assigns a set of structure meta data for each node in your tree data structure.

    Meta data includes parent, prev, prevSibling, next, nextSibling, siblingIndex, ancestors, numDescendants, numChildren.

    It is useful for building tree structure UI for data display and data traversal.

    Install

    npm install tree-node-data

    Features

    1. Fast. We use it to handle 4000+ nodes tree in production with no obvious delay.
    2. Clean. All added data are contained in the nodeData field; Original tree node data is intact.

    Example

    In short, it provides a function that assigns an extra field named nodeData to each node of your tree.

    See it live here.

    Origin Result
    [{
    name: 'Software',
    key: 1,
    children: [
      { 
        name: 'Graphic software',
        key: 2,
        children: [
          {
            name: 'Photoshop',
            key: 4,        
          },
          {
            name: 'Adobe CS3',
            key: 5,        
          }      
        ]
      }
    ]
    }]
    
    
    
    [{
      name: 'Software',
      key: 1,
      children: [{
        name: 'Graphic software',
        key: 2,
        children: [{
          name: 'Photoshop',
          key: 4,
          nodeData: {
            parent: 2,
            prev: 2,
            prevSibling: null,
            next: 5,
            nextSibling: 5,
            siblingIndex: 0,
            ancestors: [1, 2],
            numDescendants: 0,
            numChildren: 0
          }
        },
          {
            name: 'Adobe CS3',
            key: 5,
            nodeData: {
              parent: 2,
              prev: 4,
              prevSibling: 4,
              next: null,
              nextSibling: null,
              siblingIndex: 1,
              ancestors: [1, 2],
              numDescendants: 0,
              numChildren: 0
            }
          }],
        nodeData: {
          parent: 1,
          prev: 1,
          prevSibling: null,
          next: 4,
          nextSibling: null,
          siblingIndex: 0,
          ancestors: [1],
          numDescendants: 2,
          numChildren: 2
        }
      }],
      nodeData: {
        parent: null,
        prev: null,
        prevSibling: null,
        next: 2,
        nextSibling: null,
        siblingIndex: null,
        ancestors: [],
        numDescendants: 2,
        numChildren: 1
      }
    }];
    
    

    Node Data

    Field Description
    parent key value of parent node
    prevSibling key value of previous sibling node. null if the current node has no previous sibling node. i.e. it is the first/only child of its parent.
    nextSibling key value of next sibling node. null if the current node has no next sibling node. i.e. it is the last/only child of its parent.
    prev key value of previous node. Previous node is defined as previous sibling if found or parent node.
    next key value of next node. Next node is defined as next sibling node if found. Otherwise, it will be the 'nextSibling' of the closest ancestor that has a 'nextSibling';
    siblingIndex The integer index of the current node amongst its siblings. Index starts from 0.
    ancestors Array of key values of all ancestor nodes. This is useful for working out branch collapsed/expanded status.
    numDescendants This is the number of leaf nodes. This is useful for showing all items under a branch node.
    numChildren number of direct child nodes.

    API

    import assignNodeData from 'tree-node-data';
    
    const config = {
      childrenField: 'children', // e.g. customise the field for children nodes. e.g. 'subItems', default 'children'
      keyField: 'key', // e.g. customise the field for node key. e.g. 'id', default 'key'
    };
    
    const nodesWithData = assignNodeData(
      nodes, // array of tree nodes. 
      config,
    )
    

    Tips

    1. All nodes should have a distinct 'key' value.
    2. If you want to process a tree instead of an array of nodes, wrap the root node in an array as the parameter to assignNodeData;
    3. You may also want to use tree-node-util for looking up nodes from a tree using key values made available in 'nodeData'.
    4. tree-node-util and tree-node-data together provides the powerful tools for building complex tree data structure UIs;

    Install

    npm i tree-node-data

    DownloadsWeekly Downloads

    44

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    43.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • dlin-me