ywana-core8 0.0.982 → 0.0.984

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.982",
+  "version": "0.0.984",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/tree.css

@@ -42,6 +42,11 @@
     width: 100%;
 }
 
+.tree-item>.label>.clickable:hover {
+    cursor: pointer;
+    color: var(--accent-color);
+}
+
 .tree-item>.actions {
     padding: 0 .5rem;
     color: var(--text-color-lighter);

package/src/html/tree.js

@@ -18,15 +18,21 @@ export const Tree = ({ nodes = [], children }) => {
 /**
  * Tree Node
  */
-export const TreeNode = ({ icon = 'folder', label, tooltip, open=false, children, actions }) => {
+export const TreeNode = ({ id, icon = 'folder', label, tooltip, open=false, children, actions, onSelect }) => {
 
     const labelTxt = label ? <Text format={TEXTFORMATS.STRING}>{label}</Text> : null
 
+    function select() {
+        if (onSelect) onSelect(id)
+    }
+
+    const clickable = onSelect ? "clickable" : ""
+
     return (
-        <details className="tree-node" open={open}>
+        <details className="tree-node" open={open} >
             <summary className="tree-item">
                 { icon ? <Icon icon={icon} size="small" small /> : null }
-                <div className="label">{labelTxt}</div>
+                <div className={`label ${clickable}`} onClick={select} >{labelTxt}</div>
                 <div className="actions">{actions}</div>
             </summary>
             {children}