Skip to content

A very minimal tree viewer for electron webviews with virtual dom.

Notifications You must be signed in to change notification settings

gerhardberger/electron-tree-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

electron tree view

A very minimal tree viewer for electron webviews with virtual dom.

install

$ npm i electron-tree-view

usage

const root = {
  name: 'foo',
  children: [{
    name: 'bar',
    children: [{
      name: 'bar',
      children: []
    }, {
      name: 'baz',
      children: []
    }]
  }]
}

const tree = require('electron-tree-view')({
  root,
  container: document.querySelector('.container'),
  children: c => c.children,
  label: c => c.name
})

tree.on('selected', item => {
  // adding a new children to every selected item
  item.children.push({ name: 'foo', children: [] })

  tree.loop.update({ root })

  console.log('item selected')
})

api

const tree = require('electron-tree-view')(opts)

creates a new tree view. the opts object can contain:

  • root: the root node of the tree data structure. required
  • container: a DOM node to which the tree will be appended. required
  • children: by default the program checks for the children property of a tree node to add children, but if it called something else, or you want custom behaviour, then implement this function that returns the children as an array.
  • label: by default the program checks for the name property of a tree node to display a text for a node, but if it called something else, or you want custom behaviour, then implement this function that returns a string to display.
  • filter: a function (Child => Boolean) that can determine which child element to let through to display. This can be used to hide certain children nodes.
  • overwrite rendering of nodes - see overwriting rendering below.

tree.on('selected', item => {})

fires when an item has been clicked.

tree.on('deselected', item => {})

fires when an item has been clicked again and it closed.

tree.select(node)

selects node of the tree programatically.

overwriting rendering

opts.renderRoot = (hx, children) => {}

overwrite the rendering of the root element.

  • hx template string function used for rendering dom nodes
  • children string containing traversed children

default:

(hx, children) => {
  return hx`<div class="tree-view">${children}</div>`
}

notes:

  • make sure you include the tree-view class

opts.renderItem = (hx, data, children, loadHook, clickElem, createChild) => {}

overwrite the rendering of each node.

  • hx template string function used for rendering dom nodes
  • data data for the current node being rendered
  • children array of children below the current node
  • loadHook hook to setup the click handler properly
  • clickElem click handler to attach to the anchor
  • createChild function used to render child nodes

default:

(hx, data, children, loadHook, clickElem, createChild) => {
  return hx`<div class="elem" loaded=${loadHook}>
    <a href="#" class="header" onclick=${clickElem}>
      <div>
        ${children.length === 0 ? '' : hx`<img src="${__dirname + '/images/chevron.png'}" class="chevron" />`}
        <span>${opts.label ? opts.label(data) : data.name}</span>
      </div>
    </a>
    <ul>
      ${children.map(createChild)}
    </ul>
  </div>`
}

notes:

  • make sure the parent element includes the loaded attribute set to loadHook
  • make sure a clickable element has onclick attribute set to clickElem
  • make sure the parent element has the class elem
  • you can't use opts here; label function will not be used

opts.renderChild = (hx, children) => {}

overwrite the rendering of a child node.

  • hx template string function used for rendering dom nodes
  • children string containing traversed child

default:

(hx, children) => {
  return hx`<li>${children}</li>`
}

About

A very minimal tree viewer for electron webviews with virtual dom.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published