Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
electron-tree-view
Advanced tools
Readme
A very minimal tree viewer for electron webviews with virtual dom.
$ npm i electron-tree-view
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')
})
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. requiredcontainer
: a DOM node to which the tree will be appended. requiredchildren
: 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.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.
opts.renderRoot = (hx, children) => {}
overwrite the rendering of the root element.
hx
template string function used for rendering dom nodeschildren
string containing traversed childrendefault:
(hx, children) => {
return hx`<div class="tree-view">${children}</div>`
}
notes:
tree-view
classopts.renderItem = (hx, data, children, loadHook, clickElem, createChild) => {}
overwrite the rendering of each node.
hx
template string function used for rendering dom nodesdata
data for the current node being renderedchildren
array of children below the current nodeloadHook
hook to setup the click handler properlyclickElem
click handler to attach to the anchorcreateChild
function used to render child nodesdefault:
(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:
loaded
attribute set to loadHook
onclick
attribute set to clickElem
elem
opts
here; label function will not be usedopts.renderChild = (hx, children) => {}
overwrite the rendering of a child node.
hx
template string function used for rendering dom nodeschildren
string containing traversed childdefault:
(hx, children) => {
return hx`<li>${children}</li>`
}
FAQs
A tree viewer for Electron webviews with virtual dom.
The npm package electron-tree-view receives a total of 24 weekly downloads. As such, electron-tree-view popularity was classified as not popular.
We found that electron-tree-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.