explorer

The Explorer constructor allows you to create a tree-like component:

function entry(API){

  const myContainer = document.getElementById() //DOM container

  const myExplorer = new API.Explorer({
    items: [
      {
        label: 'First item',
        items:[
          {
            label: 'Child 1',
            action(){
              console.log('Clicked child 1')
            }
          },
          {
            label: 'Child 2',
            action(){
              console.log('Clicked child 2')
            }
          }
        ]
      }
    ]
  })

  API.puffin.render(myExplorer, myContainer)	
}

Item properties:

• label: Item's text
• items: child items
• action: action on left-click
• mounted: action when item is created

Example of using mounted and showing items dinamically:

new API.Explorer({
  items: [
    {
      label: 'First item',
      mounted({ setItems }){
        state.on('doSomething',()=>{
          setItems([
            {
              label:' Dynamic items'
            }
          ])
        })
      }
    }
  ]
})