@hypericon/mico 0.3.12 → 0.3.13

package/dist/components/tree/Tree.d.ts

@@ -13,11 +13,22 @@ export declare const Tree: m.Component<{
     /** Enable debug logging of certain events */
     enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
-    ontoggle?: ((node: TreeNode<any>, expanded: boolean, recursive: boolean) => void) | undefined;
+    ontoggle?: ((toggle: {
+        node: TreeNode<any>;
+        expanded: boolean;
+        recursive: boolean;
+    }) => void) | undefined;
     /** Function called when a node label is clicked */
-    onclick?: ((node: TreeNode<any>) => void) | undefined;
+    onclick?: ((click: {
+        ev: MouseEvent;
+        node: TreeNode<any>;
+    }) => void) | undefined;
     /** Function called when a node has been dragged to a new position in the tree */
-    onreorder?: ((moved: any, target: any, above: boolean) => void) | undefined;
+    onreorder?: ((reorder: {
+        moved: any;
+        target: any;
+        above: boolean;
+    }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
     emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed folder */
@@ -51,11 +62,22 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
     /** Enable debug logging of certain events */
     enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
-    ontoggle?: ((node: TreeNode<TNodeData>, expanded: boolean, recursive: boolean) => void) | undefined;
+    ontoggle?: ((toggle: {
+        node: TreeNode<TNodeData>;
+        expanded: boolean;
+        recursive: boolean;
+    }) => void) | undefined;
     /** Function called when a node label is clicked */
-    onclick?: ((node: TreeNode<TNodeData>) => void) | undefined;
+    onclick?: ((click: {
+        ev: MouseEvent;
+        node: TreeNode<TNodeData>;
+    }) => void) | undefined;
     /** Function called when a node has been dragged to a new position in the tree */
-    onreorder?: ((moved: TNodeData, target: TNodeData, above: boolean) => void) | undefined;
+    onreorder?: ((reorder: {
+        moved: TNodeData;
+        target: TNodeData;
+        above: boolean;
+    }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
     emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed folder */

package/dist/components/tree/Tree.js

@@ -43,7 +43,7 @@ function createTree() {
                         enableLogging: attrs.enableLogging,
                         ontoggle: attrs.ontoggle,
                         onclick: attrs.onclick,
-                        reorder: attrs.onreorder,
+                        onreorder: attrs.onreorder,
                         emptyChildrenMessage: attrs.emptyChildrenMessage,
                         collapsedIcon: attrs.collapsedIcon,
                         expandedIcon: attrs.expandedIcon,
@@ -59,7 +59,7 @@ function createTree() {
             this.isReorderingOver = false;
             this.handleClick = (ev, node) => {
                 var _a;
-                (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, node);
+                (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, { ev, node });
             };
             this.handleDragStart = (ev, node) => {
                 if (!enableReordering)
@@ -104,7 +104,7 @@ function createTree() {
                     // attrs.reorderfinish?.();
                     const droppedOnSelf = (0, utils_1.compareObjects)(movedNodeData, node.data);
                     if (!droppedOnSelf) {
-                        (_a = attrs.reorder) === null || _a === void 0 ? void 0 : _a.call(attrs, movedNodeData, node.data, this.isTargettingAbove);
+                        (_a = attrs.onreorder) === null || _a === void 0 ? void 0 : _a.call(attrs, { moved: movedNodeData, target: node.data, above: this.isTargettingAbove });
                     }
                 }
                 this.isReorderingOver = false;
@@ -123,7 +123,7 @@ function createTree() {
             const hasChildren = node.children !== undefined && (node.children.length > 0);
             const expanded = canHaveChildren && node.expanded;
             const collapsed = canHaveChildren && !node.expanded;
-            const targettingBackgroundClass = this.isReorderingOver ? (this.isTargettingAbove ? "mico-tree-reorder-above" : "mico-tree-reorder-below") : "";
+            const targettingDragClass = this.isReorderingOver ? (this.isTargettingAbove ? "mico-tree-reorder-above" : "mico-tree-reorder-below") : "";
             return (0, mithril_1.default)("li.mico-tree-node", {
             // key: item.key,
             }, [
@@ -133,31 +133,31 @@ function createTree() {
                 }, [
                     expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
                         style: `width: 1.5rem; flex: none;`,
-                        class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
                             var _a;
                             if (!enableToggling)
                                 return;
                             node.expanded = false;
-                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, false, ev.altKey);
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: false, recursive: ev.altKey });
                         },
                     }, attrs.expandedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-down" })) : undefined,
                     collapsed ? (0, mithril_1.default)("button.mico-tree-toggle", {
                         style: `width: 1.5rem; flex: none;`,
-                        class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
                             var _a;
                             if (!enableToggling)
                                 return;
                             node.expanded = true;
-                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, true, ev.altKey);
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: true, recursive: ev.altKey });
                         },
                     }, attrs.collapsedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-right" })) : undefined,
-                    (0, mithril_1.default)("", {
-                        class: `${targettingBackgroundClass}`,
-                        style: "position: relative; flex: 1 1 0%; display: flex; flex-direction: column; overflow-x: hidden;",
+                    (0, mithril_1.default)("button.mico-tree-label", {
+                        class: `${targettingDragClass}`,
+                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
                         draggable: enableReordering,
                         onclick: (ev) => {
                             var _a;
@@ -165,7 +165,7 @@ function createTree() {
                             // If labels should toggle expansion, toggle expansion
                             if (attrs.toggleExpansionWithLabel && enableToggling) {
                                 node.expanded = !expanded;
-                                (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, !expanded, ev.altKey);
+                                (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: !expanded, recursive: ev.altKey });
                             }
                         },
                         ondragstart: (ev) => this.handleDragStart(ev, node),
@@ -175,7 +175,9 @@ function createTree() {
                         ondrop: (ev) => this.handleDrop(ev, node),
                         ondragend: (ev) => this.handleDragEnd(ev, node),
                     }, [
-                        (typeof node.label === "string") ? (0, mithril_1.default)("span", node.label) : node.label,
+                        (typeof node.label === "string")
+                            ? (0, mithril_1.default)("span", node.label)
+                            : node.label,
                     ]),
                 ]),
                 // Any nested children within the item
@@ -188,7 +190,7 @@ function createTree() {
                             enableReordering: attrs.enableReordering,
                             ontoggle: attrs.ontoggle,
                             onclick: attrs.onclick,
-                            reorder: attrs.reorder,
+                            onreorder: attrs.onreorder,
                             // reorderstart: attrs.reorderstart,
                             // reorderover: attrs.reorderover,
                             // reorderfinish: attrs.reorderfinish,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",