@hypericon/mico 0.3.14 → 0.3.16

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

@@ -31,12 +31,16 @@ export declare const Tree: m.Component<{
     }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
     emptyChildrenMessage?: string | undefined;
-    /** Optionally override the default icon for a collapsed folder */
-    collapsedIcon?: m.Vnode<any, {}> | undefined;
-    /** Optionally override the default icon for an expanded folder */
-    expandedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally override the default icon for a collapsed node */
+    collapsedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default icon for an expanded node */
+    expandedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default toggle icon for a node that cannot toggle */
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
     toggleExpansionWithLabel?: boolean | undefined;
+    /** Optionally override the default nesting width */
+    nestingWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
     class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
@@ -80,12 +84,16 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
     }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
     emptyChildrenMessage?: string | undefined;
-    /** Optionally override the default icon for a collapsed folder */
-    collapsedIcon?: m.Vnode<any, {}> | undefined;
-    /** Optionally override the default icon for an expanded folder */
-    expandedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally override the default icon for a collapsed node */
+    collapsedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default icon for an expanded node */
+    expandedIcon?: m.Vnode<any, any> | undefined;
+    /** Optionally override the default toggle icon for a node that cannot toggle */
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
     toggleExpansionWithLabel?: boolean | undefined;
+    /** Optionally override the default nesting width */
+    nestingWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
     class?: string | undefined;
     /** Optional CSS styles to apply to the root div */

package/dist/components/tree/Tree.js

@@ -8,6 +8,7 @@ const utils_1 = require("@hypericon/utils");
 const mithril_1 = __importDefault(require("mithril"));
 const icon_1 = require("../icon");
 const DATA_TRANSFER_TYPE = "application/tree-data";
+const DEFAULT_NESTING_WIDTH = "1.5rem";
 /**
  * An untyped tree component (see `createTree<T>()`)
  */
@@ -47,7 +48,9 @@ function createTree() {
                         emptyChildrenMessage: attrs.emptyChildrenMessage,
                         collapsedIcon: attrs.collapsedIcon,
                         expandedIcon: attrs.expandedIcon,
+                        noToggleIcon: attrs.noToggleIcon,
                         toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                        nestingWidth: attrs.nestingWidth || DEFAULT_NESTING_WIDTH,
                     });
                 })),
             ]);
@@ -66,6 +69,8 @@ function createTree() {
                     return;
                 if (!ev.dataTransfer)
                     return;
+                if (node.draggable === false)
+                    return;
                 attrs.enableLogging && console.log(`start dragging`, node.data);
                 ev.dataTransfer.setData(DATA_TRANSFER_TYPE, JSON.stringify(node.data));
                 ev.dataTransfer.effectAllowed = "move";
@@ -132,7 +137,7 @@ function createTree() {
                     style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
                 }, [
                     expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
-                        style: `width: 1.5rem; flex: none;`,
+                        style: `width: ${attrs.nestingWidth}; flex: none;`,
                         // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
@@ -144,7 +149,7 @@ function createTree() {
                         },
                     }, 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;`,
+                        style: `width: ${attrs.nestingWidth}; flex: none;`,
                         // class: enableToggling ? `hover:text-primary` : `text-view-icon`,
                         disabled: !enableToggling,
                         onclick: (ev) => {
@@ -155,10 +160,13 @@ function createTree() {
                             (_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,
+                    (!canHaveChildren) ? (0, mithril_1.default)(".mico-tree-toggle", {
+                        style: `width: ${attrs.nestingWidth}; flex: none;`,
+                    }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
                     (0, mithril_1.default)(".mico-tree-label", {
                         class: `${targettingDragClass}`,
                         style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
-                        draggable: enableReordering,
+                        draggable: enableReordering && (node.draggable !== false),
                         onclick: (ev) => {
                             var _a;
                             this.handleClick(ev, node);
@@ -181,7 +189,9 @@ function createTree() {
                     ]),
                 ]),
                 // Any nested children within the item
-                (expanded) ? (0, mithril_1.default)("ul", [
+                (expanded) ? (0, mithril_1.default)("ul", {
+                    style: `margin-left: ${attrs.nestingWidth};`,
+                }, [
                     ...(node.children || []).map((child, i) => {
                         return (0, mithril_1.default)(TreeNode, {
                             // key: child.key,
@@ -197,7 +207,9 @@ function createTree() {
                             emptyChildrenMessage: attrs.emptyChildrenMessage,
                             collapsedIcon: attrs.collapsedIcon,
                             expandedIcon: attrs.expandedIcon,
+                            noToggleIcon: attrs.noToggleIcon,
                             toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                            nestingWidth: attrs.nestingWidth,
                         });
                     }),
                     (canHaveChildren && !hasChildren && emptyChildrenMessage !== undefined)

package/dist/components/tree/tree-node.interface.d.ts

@@ -2,6 +2,8 @@ import m from "mithril";
 export interface TreeNode<T extends object = {}> {
     label: string | m.Vnode<any>;
     expanded: boolean;
+    /** Optionally disable dragging where it would otherwise be enabled */
+    draggable?: boolean;
     children?: TreeNode<T>[];
     data: T;
 }

package/package.json

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