react-d3-tree-editor v3.1.4

react-d3-tree-editor

React d3 editor is a d3 tree based editor, fully featured with context menu support. You can dynamicly edit, create and delete chiled nodes. nodes are based on icons you provide for styling.

Contents

• Demo
• Install
• Basic Usage
• Fully Featured Usage
• Props
• Context Menu
• License

Demo

• Find a demo on https://naihan.github.io/react-d3-tree-editor/

Install

npm install --save react-d3-tree-editor

Basic Usage

import React, { Component } from 'react'
import TreeEditor from 'react-d3-tree-editor'

export default class App extends Component {

  constructor() {
    
    //the actual tree data
    this.treeData = {
        name: 'Root Node',
        
        children: [{
            name: 'new node'
            
        }, {
            name: 'new node'
        }]
    }

    //the d3 tree config 
    this.treeConfig = {
      margin: {
        top: 20,
        right: 120,
        bottom: 20,
        left: 120
      },
      textMargin: 20,
      duration: 750,
      nodeSize: [40, 70]
    }
  }
  render() {
    return (
      return (
        <TreeEditor treeData={this.treeData}
            treeConfig={this.treeConfig}/>
        )
    )
  }
}

Fully Featured Usage

  class App extends React.Component {

      constructor(props) {
          super(props);
          
          this.treeRef = null;

          this.treeData = {
              //the actual data
              name: 'Root Node',
            
              children: [{
                  name: 'new node'
                  
              }, {
                  name: 'new node'
              }]
          }
          this.treeConfig = {
              //the d3 tree config 
              margin: {
                  top: 20,
                  right: 120,
                  bottom: 20,
                  left: 120
              },
              textMargin: 20,
              duration: 750,
              nodeSize: [40, 70]
          }
      }

      filterTextName = (d) => {
          //will be fired for each element once to decide which propery be used to display the name 
          return d.name;
      }


      contextMenuOpen = (d) => {
          console.log('contextMenuOpen');
          //will be fired when context menu opended
      }

      contextMenuClose = (d) => {
          console.log('contextMenuClose');
          //will be fired when context menu closed
      }

      selectImageLink = (d) => {
          //will be fired once for each element to decide the icon for that element
          return "http://mojedelo.webfactional.com/img/ikone/mdikona4.png"
      }

      getContextMenu = (e) => {
          //will be fired on each element for attaching a context menu
          return [{
                  title: 'Add Item',
                  action: () => {
                      this.treeRef.addNode(e, {
                          name: 'new node'
                      })
                  },
                  enabled: true
              },
              {
                  title: 'Delete Item',
                  action: (e) => {
                      this.treeRef.removeNode(e);
                  },
                  enabled: true
              },
              {
                  title: 'Delete Children',
                  action: () => {
                      this.treeRef.removeChildren(e);
                  },
                  enabled: true
              },
              {
                  title: 'Expand All',
                  action: () => {
                      this.treeRef.expandAllElements(e);
                      this.treeRef.update(e);
                  },
                  enabled: true
              },
              {
                  title: 'Collapse All',
                  action: () => {
                      this.treeRef.collapseAllElements(e);
                      this.treeRef.update(e);
                  },
                  enabled: true
              },

          ];
      }

      treeRenderedCallback = (d) => {
          console.log('treeRenderedCallback');
          //will be fired when tree finish render
      }
      render() {
          return (
          <TreeEditor treeData={this.treeData}
              treeConfig={this.treeConfig}
              onRef={ref => (this.treeRef=ref)}
              filterTextName={this.filterTextName}
              contextMenuOpen={this.contextMenuOpen}
              contextMenuClose={this.contextMenuClose}
              selectImageLink={this.selectImageLink}
              getContextMenu={this.getContextMenu}
              treeRenderedCallback={this.treeRenderedCallback}/>
          )
      }
  }

Props

#Context Menu

Context menu is an object array that each object consist of the following properties

• title: the title of the option that will be displayed
• enabled: (bool) will it be enabled or not.
• action: the action that will be executed on the tree node

    [
      {
        title: 'Collapse All',
        action: () => {
            this.treeRef.collapseAllElements(e);
            this.treeRef.update(e);
        },
        enabled: true
      }
    ]

License

MIT © https://github.com/Naihan/react-d3-tree-editor