@asup/context-menu 1.3.11 → 1.4.0
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.
- package/dist/cjs/main.css +32 -0
- package/dist/cjs/main.css.map +1 -1
- package/dist/cjs/main.js +202 -33
- package/dist/cjs/main.js.map +1 -1
- package/dist/context-menu.d.ts +7 -1
- package/dist/context-menu.d.ts.map +1 -1
- package/dist/main.css +32 -0
- package/dist/main.css.map +1 -1
- package/dist/main.js +205 -36
- package/dist/main.js.map +1 -1
- package/package.json +2 -1
package/dist/cjs/main.css
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
|
+
.aiw-AutoHeight-module-pDlSVW-autoHeightWrapper {
|
|
2
|
+
transition-timing-function: height ease-in-out;
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
position: relative;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.aiw-AutoHeight-module-pDlSVW-autoHeightInner {
|
|
9
|
+
opacity: 1;
|
|
10
|
+
flex: 1;
|
|
11
|
+
height: fit-content;
|
|
12
|
+
display: block;
|
|
13
|
+
position: absolute;
|
|
14
|
+
inset: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.aiw-AutoHeight-module-pDlSVW-autoHeightInner.aiw-AutoHeight-module-pDlSVW-resize {
|
|
18
|
+
opacity: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.aiw-AutoHeight-module-pDlSVW-autoHeightTransition {
|
|
22
|
+
opacity: 0;
|
|
23
|
+
flex: 1;
|
|
24
|
+
height: fit-content;
|
|
25
|
+
position: absolute;
|
|
26
|
+
inset: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.aiw-AutoHeight-module-pDlSVW-autoHeightTransition.aiw-AutoHeight-module-pDlSVW-resize {
|
|
30
|
+
opacity: 1;
|
|
31
|
+
}
|
|
32
|
+
|
|
1
33
|
.aiw-ContextMenu-module-WinFxq-anchor {
|
|
2
34
|
-webkit-font-smoothing: antialiased;
|
|
3
35
|
-moz-osx-font-smoothing: grayscale;
|
package/dist/cjs/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;ACzEA;;;;;;;AAOA;;;;;;;;;;;;;AAeA;;;;AAIA;;;;AAKA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;;ACzDA;;;;AAIA;;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;AAiBA;;;;AAIA;;;;;;;;AAQA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;AAOA;;;;;AAKA;;;;;AAKA;;;;;;AAMA","sources":["
|
|
1
|
+
{"mappings":"ACAA;;;;;;;AAOA;;;;;;;;;AAYA;;;;AAIA;;;;;;;;AAWA;;;;AClCA;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;ACzEA;;;;;;;AAOA;;;;;;;;;;;;;AAeA;;;;AAIA;;;;AAKA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;;ACzDA;;;;AAIA;;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;AAiBA;;;;AAIA;;;;;;;;AAQA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;AAOA;;;;;AAKA;;;;;AAKA;;;;;;AAMA","sources":["cda29194bad29cfe","src/components/AutoHeight.module.css","src/components/ContextMenu.module.css","src/components/LowMenu.module.css","src/components/ContextWindow.module.css"],"sourcesContent":["@import \"9137536ad63f8e03\";\n@import \"630df238250c5b7f\";\n@import \"c4d631588337cb29\";\n@import \"864ea8cd88b57e56\";\n",".autoHeightWrapper {\n overflow: hidden;\n transition-timing-function: height ease-in-out;\n box-sizing: border-box;\n position: relative;\n}\n\n.autoHeightInner {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n display: block;\n height: fit-content;\n flex: 1;\n}\n\n.autoHeightInner.resize {\n opacity: 0;\n}\n\n.autoHeightTransition {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n height: fit-content;\n flex: 1;\n}\n\n.autoHeightTransition.resize {\n opacity: 1;\n}\n",".anchor {\n position: absolute;\n top: 0;\n left: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\",\n \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 9pt;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.contextMenuHandler {\n height: fit-content;\n width: fit-content;\n}\n\n.contextMenu {\n position: absolute;\n border: 1px solid;\n border-color: rgb(17, 20, 24);\n opacity: 1;\n background-color: rgb(251, 253, 246);\n z-index: 10000;\n box-shadow: 4px 4px 4px rgb(64, 64, 64, 0.75);\n transition: opacity 0.3s linear;\n}\n\n.contextMenu.hidden {\n opacity: 0;\n}\n\n.contextMenu.visible {\n opacity: 1;\n}\n\n.contextMenuItem {\n color: rgb(17, 20, 24);\n cursor: pointer;\n padding: 0 4px;\n min-width: 80px;\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n}\n\n.contextMenuItem.disabled {\n background-color: rgba(0, 0, 0, 0.2);\n cursor: not-allowed;\n}\n\n.contextMenuItem:first-child {\n padding-top: 4px;\n}\n\n.contextMenuItem:last-child {\n padding-bottom: 4px;\n}\n\n.contextMenuItem:not(.disabled):hover {\n background-color: rgb(251, 233, 230);\n}\n\n.contextMenuItem .caretHolder {\n align-self: flex-end;\n}\n\n.contextMenuItem .caretHolder .subMenu {\n z-index: 1;\n position: relative;\n}\n\n.contextMenuItemLabel {\n flex-grow: 1;\n height: 19px;\n}\n",".lowMenu {\n z-index: 2;\n position: absolute;\n margin: 0px;\n transition: opacity 0.3s linear;\n}\n\n.lowMenuButtonHolder {\n border: 2px solid rgb(17, 20, 24);\n border-top-right-radius: 4px;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n background-color: rgb(17, 20, 24);\n box-shadow: 2px 2px 2px rgb(64, 64, 64, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n gap: 2px;\n row-gap: 2px;\n width: fit-content;\n}\n\n.lowMenu.hidden {\n opacity: 0;\n}\n\n.lowMenu.visible,\n.lowMenu:hover {\n opacity: 1;\n}\n\n.lowMenuItem {\n background-color: rgb(251, 253, 246);\n border: 0;\n color: rgb(17, 20, 24);\n cursor: pointer;\n padding: 0 4px;\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n}\n\n.lowMenuItem.disabled {\n background-color: rgba(200, 200, 200);\n cursor: not-allowed;\n}\n\n.lowMenuItem:not(.disabled):hover {\n background-color: rgb(251, 233, 230);\n}\n\n.lowMenu-item .caretHolder {\n align-self: flex-end;\n}\n\n.lowMenuItem .caretHolder .subMenu {\n z-index: 1;\n position: relative;\n}\n",".contextWindowAnchor {\n position: relative;\n}\n\n.contextWindow {\n z-index: 2001;\n border: 1px black solid;\n margin: 0;\n padding: 4px;\n background-color: rgb(250, 250, 250);\n box-shadow: 6px 6px 6px rgb(64, 64, 64, 0.5);\n transition: opacity 0.25s linear;\n justify-content: flex-start;\n position: absolute;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-bottom-left-radius: 8px;\n resize: both;\n overflow: auto;\n max-height: 95vh;\n max-width: 95vw;\n}\n\n.contextWindowTitle {\n border-bottom: 1px black dashed;\n box-sizing: unset;\n padding-bottom: 4px;\n margin: 0 4px 3px 4px;\n height: 24px;\n line-height: 24px;\n max-height: 24px;\n cursor: grab;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: calc(100% - 8px);\n}\n\n.contextWindowTitle.moving {\n cursor: grabbing;\n}\n\n.contextWindowTitleText {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: calc(100% - 16px);\n}\n\n.contextWindowTitleClose {\n display: flex;\n color: black;\n height: 16px;\n width: 16px;\n border-radius: 3px;\n margin-left: 2px;\n cursor: pointer;\n line-height: 16px;\n}\n\n.contextWindowTitleClose:hover {\n background-color: black;\n color: white;\n}\n\n.contextWindowBody {\n overflow: auto;\n padding-bottom: 8px;\n margin-right: 4px;\n height: calc(100% - 40px);\n}\n\n.contextWindowBody::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-track {\n background: white;\n border-radius: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-thumb {\n background: lightgrey;\n border: none;\n border-radius: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-thumb:hover {\n background: grey;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/cjs/main.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
+
var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
|
|
3
|
+
var $gTuX4$swchelperscjs_object_spread_propscjs = require("@swc/helpers/cjs/_object_spread_props.cjs");
|
|
4
|
+
var $gTuX4$swchelperscjs_object_without_propertiescjs = require("@swc/helpers/cjs/_object_without_properties.cjs");
|
|
2
5
|
var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
|
|
3
6
|
var $gTuX4$react = require("react");
|
|
4
7
|
var $gTuX4$reactdom = require("react-dom");
|
|
@@ -32,6 +35,7 @@ function $parcel$interopDefault(a) {
|
|
|
32
35
|
|
|
33
36
|
var $a68bd8a6c0fd98c2$exports = {};
|
|
34
37
|
|
|
38
|
+
$parcel$export($a68bd8a6c0fd98c2$exports, "AutoHeight", function () { return $95149596d5a7ed2b$export$77bf000da9303d1; });
|
|
35
39
|
$parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuHandler", function () { return $3c568ee547c732c3$export$ed4f9641643dc7e4; });
|
|
36
40
|
$parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindow", function () { return $46fb0088a1bbb6d8$export$1af8984c69ba1b24; });
|
|
37
41
|
$parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindowStack", function () { return $16208d559c772441$export$9f37482ccd50dad2; });
|
|
@@ -40,6 +44,139 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindowStack", function () { re
|
|
|
40
44
|
|
|
41
45
|
|
|
42
46
|
|
|
47
|
+
var $796f463330153c24$exports = {};
|
|
48
|
+
|
|
49
|
+
$parcel$export($796f463330153c24$exports, "autoHeightInner", function () { return $796f463330153c24$export$df919f6b0f7f84e6; }, function (v) { return $796f463330153c24$export$df919f6b0f7f84e6 = v; });
|
|
50
|
+
$parcel$export($796f463330153c24$exports, "autoHeightTransition", function () { return $796f463330153c24$export$edb29c5fcd06f0aa; }, function (v) { return $796f463330153c24$export$edb29c5fcd06f0aa = v; });
|
|
51
|
+
$parcel$export($796f463330153c24$exports, "autoHeightWrapper", function () { return $796f463330153c24$export$563bd8f955c52746; }, function (v) { return $796f463330153c24$export$563bd8f955c52746 = v; });
|
|
52
|
+
$parcel$export($796f463330153c24$exports, "resize", function () { return $796f463330153c24$export$4380c87abf28fdf; }, function (v) { return $796f463330153c24$export$4380c87abf28fdf = v; });
|
|
53
|
+
var $796f463330153c24$export$df919f6b0f7f84e6;
|
|
54
|
+
var $796f463330153c24$export$edb29c5fcd06f0aa;
|
|
55
|
+
var $796f463330153c24$export$563bd8f955c52746;
|
|
56
|
+
var $796f463330153c24$export$4380c87abf28fdf;
|
|
57
|
+
$796f463330153c24$export$df919f6b0f7f84e6 = `aiw-AutoHeight-module-pDlSVW-autoHeightInner`;
|
|
58
|
+
$796f463330153c24$export$edb29c5fcd06f0aa = `aiw-AutoHeight-module-pDlSVW-autoHeightTransition`;
|
|
59
|
+
$796f463330153c24$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHeightWrapper`;
|
|
60
|
+
$796f463330153c24$export$4380c87abf28fdf = `aiw-AutoHeight-module-pDlSVW-resize`;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
function $95149596d5a7ed2b$export$77bf000da9303d1(_param) {
|
|
64
|
+
var { children: children, hide: hide, duration: duration = 300 } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
65
|
+
"children",
|
|
66
|
+
"hide",
|
|
67
|
+
"duration"
|
|
68
|
+
]);
|
|
69
|
+
const wrapperRef = (0, $gTuX4$react.useRef)(null);
|
|
70
|
+
const innerRef = (0, $gTuX4$react.useRef)(null);
|
|
71
|
+
const transitionRef = (0, $gTuX4$react.useRef)(null);
|
|
72
|
+
const [deployedChildren, setDeployedChildren] = (0, $gTuX4$react.useState)(null);
|
|
73
|
+
const [height, setHeight] = (0, $gTuX4$react.useState)(null);
|
|
74
|
+
const [isResizing, setIsResizing] = (0, $gTuX4$react.useState)(null);
|
|
75
|
+
// Trigger height change on children update
|
|
76
|
+
(0, $gTuX4$react.useLayoutEffect)(()=>{
|
|
77
|
+
const wrapper = wrapperRef.current;
|
|
78
|
+
const inner = innerRef.current;
|
|
79
|
+
// Ensure we have drawn - which is always true
|
|
80
|
+
if (wrapper && inner) {
|
|
81
|
+
// No transitionRef means we are in the initial draw phase
|
|
82
|
+
if (!transitionRef.current && deployedChildren !== children) {
|
|
83
|
+
setIsResizing("draw");
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
// End the transition, this will remove the transitionRef from the DOM
|
|
87
|
+
if (isResizing === "remove") {
|
|
88
|
+
setIsResizing(null);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
const transition = transitionRef === null || transitionRef === void 0 ? void 0 : transitionRef.current;
|
|
92
|
+
if (!transition) return;
|
|
93
|
+
var _inner_offsetHeight;
|
|
94
|
+
// Initial draw to get the height of children and deployed children
|
|
95
|
+
const childrenHeight = (_inner_offsetHeight = inner.offsetHeight) !== null && _inner_offsetHeight !== void 0 ? _inner_offsetHeight : 0;
|
|
96
|
+
var _transition_offsetHeight;
|
|
97
|
+
const deployedHeight = hide ? 1 : (_transition_offsetHeight = transition.offsetHeight) !== null && _transition_offsetHeight !== void 0 ? _transition_offsetHeight : 0;
|
|
98
|
+
// if deployed children height is different, update the state
|
|
99
|
+
if (childrenHeight !== deployedHeight) {
|
|
100
|
+
switch(isResizing){
|
|
101
|
+
case "draw":
|
|
102
|
+
setIsResizing("resize");
|
|
103
|
+
break;
|
|
104
|
+
case "resize":
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
setHeight(deployedHeight);
|
|
108
|
+
const handleTransitionEnd = ()=>{
|
|
109
|
+
wrapper.removeEventListener("transitionend", handleTransitionEnd);
|
|
110
|
+
setDeployedChildren(children);
|
|
111
|
+
setIsResizing("remove");
|
|
112
|
+
};
|
|
113
|
+
wrapper.addEventListener("transitionend", handleTransitionEnd);
|
|
114
|
+
} else if (childrenHeight !== height) {
|
|
115
|
+
setHeight(childrenHeight);
|
|
116
|
+
setDeployedChildren(children);
|
|
117
|
+
setIsResizing("remove");
|
|
118
|
+
} else if (children !== deployedChildren) {
|
|
119
|
+
setDeployedChildren(children);
|
|
120
|
+
setIsResizing("remove");
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}, [
|
|
124
|
+
children,
|
|
125
|
+
deployedChildren,
|
|
126
|
+
height,
|
|
127
|
+
hide,
|
|
128
|
+
isResizing
|
|
129
|
+
]);
|
|
130
|
+
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), {
|
|
131
|
+
className: (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightWrapper,
|
|
132
|
+
ref: wrapperRef,
|
|
133
|
+
style: (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
|
|
134
|
+
height: height ? `${height}px` : "auto",
|
|
135
|
+
transitionDuration: `${duration}ms`
|
|
136
|
+
}, rest.style),
|
|
137
|
+
children: [
|
|
138
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
139
|
+
ref: innerRef,
|
|
140
|
+
className: [
|
|
141
|
+
(0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightInner,
|
|
142
|
+
isResizing ? (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports)))[isResizing] : ""
|
|
143
|
+
].join(" "),
|
|
144
|
+
style: isResizing ? {
|
|
145
|
+
transition: `opacity ${duration}ms ease-in-out`
|
|
146
|
+
} : hide ? {
|
|
147
|
+
opacity: 0,
|
|
148
|
+
height: 0
|
|
149
|
+
} : {},
|
|
150
|
+
children: deployedChildren
|
|
151
|
+
}),
|
|
152
|
+
isResizing && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
153
|
+
className: [
|
|
154
|
+
(0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightTransition,
|
|
155
|
+
(0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports)))[isResizing]
|
|
156
|
+
].join(" "),
|
|
157
|
+
ref: transitionRef,
|
|
158
|
+
style: {
|
|
159
|
+
transition: `opacity ${duration}ms ease-in-out`
|
|
160
|
+
},
|
|
161
|
+
children: hide || !children ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
162
|
+
style: {
|
|
163
|
+
height: "1px"
|
|
164
|
+
}
|
|
165
|
+
}) : children
|
|
166
|
+
})
|
|
167
|
+
]
|
|
168
|
+
}));
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
43
180
|
var $da5a7b95ca760552$exports = {};
|
|
44
181
|
|
|
45
182
|
$parcel$export($da5a7b95ca760552$exports, "anchor", function () { return $da5a7b95ca760552$export$2e2992790a6f69a8; }, function (v) { return $da5a7b95ca760552$export$2e2992790a6f69a8 = v; });
|
|
@@ -140,8 +277,10 @@ const $1e1f300656d89038$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toCl
|
|
|
140
277
|
onMouseDownCapture: (e)=>{
|
|
141
278
|
e.preventDefault();
|
|
142
279
|
e.stopPropagation();
|
|
143
|
-
|
|
144
|
-
|
|
280
|
+
if (!entry.disabled) {
|
|
281
|
+
if (entry.action) entry.action(target, e);
|
|
282
|
+
toClose();
|
|
283
|
+
}
|
|
145
284
|
},
|
|
146
285
|
children: entry.label
|
|
147
286
|
}) : entry.label,
|
|
@@ -166,7 +305,7 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $gTuX4$react
|
|
|
166
305
|
top: `${yPos}px`,
|
|
167
306
|
left: `${xPos}px`
|
|
168
307
|
},
|
|
169
|
-
|
|
308
|
+
onContextMenu: (e)=>{
|
|
170
309
|
e.preventDefault();
|
|
171
310
|
e.stopPropagation();
|
|
172
311
|
},
|
|
@@ -318,7 +457,13 @@ $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25.displayName = "LowMenu";
|
|
|
318
457
|
|
|
319
458
|
|
|
320
459
|
const $3c568ee547c732c3$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react.createContext)(null);
|
|
321
|
-
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (
|
|
460
|
+
const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{
|
|
461
|
+
var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
462
|
+
"children",
|
|
463
|
+
"menuItems",
|
|
464
|
+
"showLowMenu"
|
|
465
|
+
]);
|
|
466
|
+
var _divHandlderRef_current;
|
|
322
467
|
// Check for higher content menu
|
|
323
468
|
const higherContext = (0, $gTuX4$react.useContext)($3c568ee547c732c3$export$fc58dc71afe92de2);
|
|
324
469
|
const thisMenuItems = (0, $gTuX4$react.useMemo)(()=>[
|
|
@@ -350,10 +495,11 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
350
495
|
const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $gTuX4$react.useState)(false);
|
|
351
496
|
const [mouseOverMenu, setMouseOverMenu] = (0, $gTuX4$react.useState)(false);
|
|
352
497
|
// Get holder position
|
|
353
|
-
const divHandlerPos = divHandlderRef ? divHandlderRef.current
|
|
498
|
+
const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
|
|
354
499
|
// Handle click off the menu
|
|
355
500
|
const handleClick = (0, $gTuX4$react.useCallback)((e)=>{
|
|
356
|
-
|
|
501
|
+
var _menuRef_current;
|
|
502
|
+
if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuVisible(false);
|
|
357
503
|
}, []);
|
|
358
504
|
// Update the document click handler
|
|
359
505
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
@@ -385,14 +531,14 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
385
531
|
menuItems: thisMenuItems
|
|
386
532
|
},
|
|
387
533
|
children: [
|
|
388
|
-
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
389
|
-
ref: divHandlderRef
|
|
390
|
-
|
|
534
|
+
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({
|
|
535
|
+
ref: divHandlderRef
|
|
536
|
+
}, rest), {
|
|
391
537
|
className: [
|
|
392
538
|
(0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuHandler,
|
|
393
539
|
rest.className
|
|
394
540
|
].join(" "),
|
|
395
|
-
onContextMenu: (e)=>{
|
|
541
|
+
onContextMenu: async (e)=>{
|
|
396
542
|
if (!showLowMenu) {
|
|
397
543
|
setMenuInDom(true);
|
|
398
544
|
e.preventDefault();
|
|
@@ -405,7 +551,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
405
551
|
}, 1);
|
|
406
552
|
}
|
|
407
553
|
},
|
|
408
|
-
onMouseEnter: (e)=>{
|
|
554
|
+
onMouseEnter: async (e)=>{
|
|
409
555
|
if (showLowMenu) {
|
|
410
556
|
setMenuInDom(true);
|
|
411
557
|
setMouseOverHandlerDiv(false);
|
|
@@ -416,7 +562,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
416
562
|
}
|
|
417
563
|
rest.onMouseEnter && rest.onMouseEnter(e);
|
|
418
564
|
},
|
|
419
|
-
onMouseLeave: (e)=>{
|
|
565
|
+
onMouseLeave: async (e)=>{
|
|
420
566
|
if (showLowMenu) {
|
|
421
567
|
removeController.current.abort();
|
|
422
568
|
removeController.current = new AbortController();
|
|
@@ -425,7 +571,7 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
425
571
|
rest.onMouseLeave && rest.onMouseLeave(e);
|
|
426
572
|
},
|
|
427
573
|
children: children
|
|
428
|
-
}),
|
|
574
|
+
})),
|
|
429
575
|
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
430
576
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
431
577
|
onMouseEnter: ()=>{
|
|
@@ -464,6 +610,9 @@ $3c568ee547c732c3$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
|
|
|
464
610
|
|
|
465
611
|
|
|
466
612
|
|
|
613
|
+
|
|
614
|
+
|
|
615
|
+
|
|
467
616
|
const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
|
|
468
617
|
if (!divRef.current) return {
|
|
469
618
|
translateX: 0,
|
|
@@ -543,7 +692,17 @@ const $16208d559c772441$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000
|
|
|
543
692
|
$16208d559c772441$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
|
|
544
693
|
|
|
545
694
|
|
|
546
|
-
const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = (
|
|
695
|
+
const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = (_param)=>{
|
|
696
|
+
var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [
|
|
697
|
+
"id",
|
|
698
|
+
"visible",
|
|
699
|
+
"title",
|
|
700
|
+
"titleElement",
|
|
701
|
+
"children",
|
|
702
|
+
"onOpen",
|
|
703
|
+
"onClose"
|
|
704
|
+
]);
|
|
705
|
+
var _rest_style, _rest_style1, _rest_style2, _rest_style3;
|
|
547
706
|
const windowStack = (0, $gTuX4$react.useContext)((0, $16208d559c772441$export$aff5d0593e3727b0));
|
|
548
707
|
const windowId = (0, $gTuX4$react.useRef)(null);
|
|
549
708
|
const divRef = (0, $gTuX4$react.useRef)(null);
|
|
@@ -551,9 +710,11 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
551
710
|
const [windowInDOM, setWindowInDOM] = (0, $gTuX4$react.useState)(false);
|
|
552
711
|
const [windowVisible, setWindowVisible] = (0, $gTuX4$react.useState)(false);
|
|
553
712
|
const zIndex = (0, $gTuX4$react.useMemo)(()=>{
|
|
554
|
-
|
|
713
|
+
var _windowStack_currentWindows_find;
|
|
714
|
+
var _windowStack_currentWindows_find_zIndex;
|
|
715
|
+
return (_windowStack_currentWindows_find_zIndex = windowStack === null || windowStack === void 0 ? void 0 : (_windowStack_currentWindows_find = windowStack.currentWindows.find((w)=>w.windowId === windowId.current)) === null || _windowStack_currentWindows_find === void 0 ? void 0 : _windowStack_currentWindows_find.zIndex) !== null && _windowStack_currentWindows_find_zIndex !== void 0 ? _windowStack_currentWindows_find_zIndex : 1;
|
|
555
716
|
}, [
|
|
556
|
-
windowStack
|
|
717
|
+
windowStack === null || windowStack === void 0 ? void 0 : windowStack.currentWindows
|
|
557
718
|
]);
|
|
558
719
|
// Position
|
|
559
720
|
const windowPos = (0, $gTuX4$react.useRef)({
|
|
@@ -634,35 +795,41 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
634
795
|
windowStack,
|
|
635
796
|
windowVisible
|
|
636
797
|
]);
|
|
798
|
+
var _rest_style_minHeight, _rest_style_minWidth, _rest_style_maxHeight, _rest_style_maxWidth;
|
|
637
799
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
638
800
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
|
|
639
801
|
ref: divRef,
|
|
640
802
|
children: [
|
|
641
|
-
!windowStack && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
642
|
-
...rest,
|
|
803
|
+
!windowStack && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), {
|
|
643
804
|
children: [
|
|
644
|
-
|
|
805
|
+
process.env.NODE_ENV !== "production" && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
806
|
+
style: {
|
|
807
|
+
backgroundColor: "red",
|
|
808
|
+
color: "white",
|
|
809
|
+
padding: "8px",
|
|
810
|
+
fontSize: "1000"
|
|
811
|
+
},
|
|
812
|
+
children: "WARNING: No ContextWindowStack found"
|
|
813
|
+
}),
|
|
645
814
|
children
|
|
646
815
|
]
|
|
647
|
-
}),
|
|
648
|
-
windowStack && windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
649
|
-
...rest,
|
|
816
|
+
})),
|
|
817
|
+
windowStack && windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), {
|
|
650
818
|
ref: windowRef,
|
|
651
819
|
id: id,
|
|
652
820
|
className: [
|
|
653
821
|
(0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
|
|
654
822
|
rest.className
|
|
655
823
|
].join(" "),
|
|
656
|
-
style: {
|
|
657
|
-
...rest.style,
|
|
824
|
+
style: (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest.style), {
|
|
658
825
|
opacity: moving ? 0.8 : windowVisible ? 1 : 0,
|
|
659
826
|
visibility: windowVisible ? "visible" : "hidden",
|
|
660
|
-
zIndex: zIndex
|
|
661
|
-
minHeight: rest.style
|
|
662
|
-
minWidth: rest.style
|
|
663
|
-
maxHeight: rest.style
|
|
664
|
-
maxWidth: rest.style
|
|
665
|
-
},
|
|
827
|
+
zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
|
|
828
|
+
minHeight: (_rest_style_minHeight = (_rest_style = rest.style) === null || _rest_style === void 0 ? void 0 : _rest_style.minHeight) !== null && _rest_style_minHeight !== void 0 ? _rest_style_minHeight : "150px",
|
|
829
|
+
minWidth: (_rest_style_minWidth = (_rest_style1 = rest.style) === null || _rest_style1 === void 0 ? void 0 : _rest_style1.minWidth) !== null && _rest_style_minWidth !== void 0 ? _rest_style_minWidth : "200px",
|
|
830
|
+
maxHeight: (_rest_style_maxHeight = (_rest_style2 = rest.style) === null || _rest_style2 === void 0 ? void 0 : _rest_style2.maxHeight) !== null && _rest_style_maxHeight !== void 0 ? _rest_style_maxHeight : "1000px",
|
|
831
|
+
maxWidth: (_rest_style_maxWidth = (_rest_style3 = rest.style) === null || _rest_style3 === void 0 ? void 0 : _rest_style3.maxWidth) !== null && _rest_style_maxWidth !== void 0 ? _rest_style_maxWidth : "1000px"
|
|
832
|
+
}),
|
|
666
833
|
onClickCapture: (e)=>{
|
|
667
834
|
windowId && windowId.current && windowStack.pushToTop(windowId.current);
|
|
668
835
|
rest.onClickCapture && rest.onClickCapture(e);
|
|
@@ -689,14 +856,16 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
689
856
|
}),
|
|
690
857
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
691
858
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleClose,
|
|
859
|
+
role: "button",
|
|
860
|
+
"aria-label": "Close",
|
|
861
|
+
onClick: onClose,
|
|
862
|
+
title: `Close ${title && title.trim() !== "" ? title : "window"}`,
|
|
692
863
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", {
|
|
693
864
|
xmlns: "http://www.w3.org/2000/svg",
|
|
694
865
|
width: "16",
|
|
695
866
|
height: "16",
|
|
696
867
|
fill: "currentColor",
|
|
697
868
|
viewBox: "0 0 16 16",
|
|
698
|
-
"aria-label": "Close window",
|
|
699
|
-
onClick: onClose,
|
|
700
869
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("path", {
|
|
701
870
|
d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
|
|
702
871
|
})
|
|
@@ -711,7 +880,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
711
880
|
})
|
|
712
881
|
})
|
|
713
882
|
]
|
|
714
|
-
}), document.body)
|
|
883
|
+
})), document.body)
|
|
715
884
|
]
|
|
716
885
|
});
|
|
717
886
|
};
|