@hypericon/mico 0.3.16 → 0.3.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -41,6 +41,8 @@ export declare const Tree: m.Component<{
|
|
|
41
41
|
toggleExpansionWithLabel?: boolean | undefined;
|
|
42
42
|
/** Optionally override the default nesting width */
|
|
43
43
|
nestingWidth?: string | undefined;
|
|
44
|
+
/** Optionally override the default toggle button width */
|
|
45
|
+
toggleButtonWidth?: string | undefined;
|
|
44
46
|
/** Optional CSS classes to apply to the root div */
|
|
45
47
|
class?: string | undefined;
|
|
46
48
|
/** Optional CSS styles to apply to the root div */
|
|
@@ -94,6 +96,8 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
|
|
|
94
96
|
toggleExpansionWithLabel?: boolean | undefined;
|
|
95
97
|
/** Optionally override the default nesting width */
|
|
96
98
|
nestingWidth?: string | undefined;
|
|
99
|
+
/** Optionally override the default toggle button width */
|
|
100
|
+
toggleButtonWidth?: string | undefined;
|
|
97
101
|
/** Optional CSS classes to apply to the root div */
|
|
98
102
|
class?: string | undefined;
|
|
99
103
|
/** Optional CSS styles to apply to the root div */
|
|
@@ -9,6 +9,7 @@ const mithril_1 = __importDefault(require("mithril"));
|
|
|
9
9
|
const icon_1 = require("../icon");
|
|
10
10
|
const DATA_TRANSFER_TYPE = "application/tree-data";
|
|
11
11
|
const DEFAULT_NESTING_WIDTH = "1.5rem";
|
|
12
|
+
const DEFAULT_TOGGLE_WIDTH = "1.5rem";
|
|
12
13
|
/**
|
|
13
14
|
* An untyped tree component (see `createTree<T>()`)
|
|
14
15
|
*/
|
|
@@ -51,6 +52,7 @@ function createTree() {
|
|
|
51
52
|
noToggleIcon: attrs.noToggleIcon,
|
|
52
53
|
toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
|
|
53
54
|
nestingWidth: attrs.nestingWidth || DEFAULT_NESTING_WIDTH,
|
|
55
|
+
toggleButtonWidth: attrs.toggleButtonWidth || DEFAULT_TOGGLE_WIDTH,
|
|
54
56
|
});
|
|
55
57
|
})),
|
|
56
58
|
]);
|
|
@@ -137,7 +139,7 @@ function createTree() {
|
|
|
137
139
|
style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
|
|
138
140
|
}, [
|
|
139
141
|
expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
|
|
140
|
-
style: `width: ${attrs.
|
|
142
|
+
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
141
143
|
// class: enableToggling ? `hover:text-primary` : `text-view-icon`,
|
|
142
144
|
disabled: !enableToggling,
|
|
143
145
|
onclick: (ev) => {
|
|
@@ -149,7 +151,7 @@ function createTree() {
|
|
|
149
151
|
},
|
|
150
152
|
}, attrs.expandedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-down" })) : undefined,
|
|
151
153
|
collapsed ? (0, mithril_1.default)("button.mico-tree-toggle", {
|
|
152
|
-
style: `width: ${attrs.
|
|
154
|
+
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
153
155
|
// class: enableToggling ? `hover:text-primary` : `text-view-icon`,
|
|
154
156
|
disabled: !enableToggling,
|
|
155
157
|
onclick: (ev) => {
|
|
@@ -161,7 +163,7 @@ function createTree() {
|
|
|
161
163
|
},
|
|
162
164
|
}, attrs.collapsedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-right" })) : undefined,
|
|
163
165
|
(!canHaveChildren) ? (0, mithril_1.default)(".mico-tree-toggle", {
|
|
164
|
-
style: `width: ${attrs.
|
|
166
|
+
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
165
167
|
}, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
|
|
166
168
|
(0, mithril_1.default)(".mico-tree-label", {
|
|
167
169
|
class: `${targettingDragClass}`,
|
|
@@ -210,6 +212,7 @@ function createTree() {
|
|
|
210
212
|
noToggleIcon: attrs.noToggleIcon,
|
|
211
213
|
toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
|
|
212
214
|
nestingWidth: attrs.nestingWidth,
|
|
215
|
+
toggleButtonWidth: attrs.toggleButtonWidth,
|
|
213
216
|
});
|
|
214
217
|
}),
|
|
215
218
|
(canHaveChildren && !hasChildren && emptyChildrenMessage !== undefined)
|