@primershop/strapi-plugin-status-manager 0.0.16 → 0.0.18
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/_chunks/HomePage-CYpSKXVE.mjs +2115 -0
- package/dist/_chunks/HomePage-D9xj2-y8.js +2115 -0
- package/dist/_chunks/index-BXToWkDF.js +227 -0
- package/dist/_chunks/index-CzxwE0pe.mjs +226 -0
- package/dist/admin/index.js +2 -11
- package/dist/admin/index.mjs +4 -6
- package/dist/server/index.js +601 -703
- package/dist/server/index.mjs +603 -702
- package/package.json +13 -14
- package/dist/admin/HomePage-Bez9ZXv-.js +0 -412
- package/dist/admin/HomePage-Dx9N0awm.mjs +0 -410
- package/dist/admin/index-BVybZ6IA.mjs +0 -280
- package/dist/admin/index-mATo7IeG.js +0 -283
|
@@ -0,0 +1,2115 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Typography, Flex, TextInput, Button, Dialog, SingleSelect, SingleSelectOption } from "@strapi/design-system";
|
|
3
|
+
import { useFetchClient, Layouts, Page } from "@strapi/strapi/admin";
|
|
4
|
+
import { useState, useEffect, useCallback } from "react";
|
|
5
|
+
import { Plus, Drag, Trash } from "@strapi/icons";
|
|
6
|
+
import { p as pluginPermissions } from "./index-CzxwE0pe.mjs";
|
|
7
|
+
function combine() {
|
|
8
|
+
for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
9
|
+
fns[_key] = arguments[_key];
|
|
10
|
+
}
|
|
11
|
+
return function cleanup() {
|
|
12
|
+
fns.forEach(function(fn) {
|
|
13
|
+
return fn();
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
function _arrayWithHoles(r) {
|
|
18
|
+
if (Array.isArray(r)) return r;
|
|
19
|
+
}
|
|
20
|
+
function _iterableToArrayLimit(r, l) {
|
|
21
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
22
|
+
if (null != t) {
|
|
23
|
+
var e, n, i, u, a = [], f = true, o = false;
|
|
24
|
+
try {
|
|
25
|
+
if (i = (t = t.call(r)).next, 0 === l) {
|
|
26
|
+
if (Object(t) !== t) return;
|
|
27
|
+
f = false;
|
|
28
|
+
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = true) ;
|
|
29
|
+
} catch (r2) {
|
|
30
|
+
o = true, n = r2;
|
|
31
|
+
} finally {
|
|
32
|
+
try {
|
|
33
|
+
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
|
|
34
|
+
} finally {
|
|
35
|
+
if (o) throw n;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
return a;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function _arrayLikeToArray$2(r, a) {
|
|
42
|
+
(null == a || a > r.length) && (a = r.length);
|
|
43
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
44
|
+
return n;
|
|
45
|
+
}
|
|
46
|
+
function _unsupportedIterableToArray$2(r, a) {
|
|
47
|
+
if (r) {
|
|
48
|
+
if ("string" == typeof r) return _arrayLikeToArray$2(r, a);
|
|
49
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
50
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function _nonIterableRest() {
|
|
54
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
55
|
+
}
|
|
56
|
+
function _slicedToArray(r, e) {
|
|
57
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$2(r, e) || _nonIterableRest();
|
|
58
|
+
}
|
|
59
|
+
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
60
|
+
var dist = {};
|
|
61
|
+
var bind$1 = {};
|
|
62
|
+
Object.defineProperty(bind$1, "__esModule", { value: true });
|
|
63
|
+
bind$1.bind = void 0;
|
|
64
|
+
function bind(target, _a) {
|
|
65
|
+
var type = _a.type, listener = _a.listener, options = _a.options;
|
|
66
|
+
target.addEventListener(type, listener, options);
|
|
67
|
+
return function unbind() {
|
|
68
|
+
target.removeEventListener(type, listener, options);
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
bind$1.bind = bind;
|
|
72
|
+
var bindAll$1 = {};
|
|
73
|
+
var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
|
|
74
|
+
__assign = Object.assign || function(t) {
|
|
75
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
76
|
+
s = arguments[i];
|
|
77
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
78
|
+
t[p] = s[p];
|
|
79
|
+
}
|
|
80
|
+
return t;
|
|
81
|
+
};
|
|
82
|
+
return __assign.apply(this, arguments);
|
|
83
|
+
};
|
|
84
|
+
Object.defineProperty(bindAll$1, "__esModule", { value: true });
|
|
85
|
+
bindAll$1.bindAll = void 0;
|
|
86
|
+
var bind_1 = bind$1;
|
|
87
|
+
function toOptions(value) {
|
|
88
|
+
if (typeof value === "undefined") {
|
|
89
|
+
return void 0;
|
|
90
|
+
}
|
|
91
|
+
if (typeof value === "boolean") {
|
|
92
|
+
return {
|
|
93
|
+
capture: value
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
return value;
|
|
97
|
+
}
|
|
98
|
+
function getBinding(original, sharedOptions) {
|
|
99
|
+
if (sharedOptions == null) {
|
|
100
|
+
return original;
|
|
101
|
+
}
|
|
102
|
+
var binding = __assign(__assign({}, original), { options: __assign(__assign({}, toOptions(sharedOptions)), toOptions(original.options)) });
|
|
103
|
+
return binding;
|
|
104
|
+
}
|
|
105
|
+
function bindAll(target, bindings, sharedOptions) {
|
|
106
|
+
var unbinds = bindings.map(function(original) {
|
|
107
|
+
var binding = getBinding(original, sharedOptions);
|
|
108
|
+
return (0, bind_1.bind)(target, binding);
|
|
109
|
+
});
|
|
110
|
+
return function unbindAll() {
|
|
111
|
+
unbinds.forEach(function(unbind) {
|
|
112
|
+
return unbind();
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
bindAll$1.bindAll = bindAll;
|
|
117
|
+
(function(exports$1) {
|
|
118
|
+
Object.defineProperty(exports$1, "__esModule", { value: true });
|
|
119
|
+
exports$1.bindAll = exports$1.bind = void 0;
|
|
120
|
+
var bind_12 = bind$1;
|
|
121
|
+
Object.defineProperty(exports$1, "bind", { enumerable: true, get: function() {
|
|
122
|
+
return bind_12.bind;
|
|
123
|
+
} });
|
|
124
|
+
var bind_all_1 = bindAll$1;
|
|
125
|
+
Object.defineProperty(exports$1, "bindAll", { enumerable: true, get: function() {
|
|
126
|
+
return bind_all_1.bindAll;
|
|
127
|
+
} });
|
|
128
|
+
})(dist);
|
|
129
|
+
var honeyPotDataAttribute = "data-pdnd-honey-pot";
|
|
130
|
+
function isHoneyPotElement(target) {
|
|
131
|
+
return target instanceof Element && target.hasAttribute(honeyPotDataAttribute);
|
|
132
|
+
}
|
|
133
|
+
function getElementFromPointWithoutHoneypot(client) {
|
|
134
|
+
var _document$elementsFro = document.elementsFromPoint(client.x, client.y), _document$elementsFro2 = _slicedToArray(_document$elementsFro, 2), top2 = _document$elementsFro2[0], second = _document$elementsFro2[1];
|
|
135
|
+
if (!top2) {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
if (isHoneyPotElement(top2)) {
|
|
139
|
+
return second !== null && second !== void 0 ? second : null;
|
|
140
|
+
}
|
|
141
|
+
return top2;
|
|
142
|
+
}
|
|
143
|
+
function _typeof(o) {
|
|
144
|
+
"@babel/helpers - typeof";
|
|
145
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
|
|
146
|
+
return typeof o2;
|
|
147
|
+
} : function(o2) {
|
|
148
|
+
return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
|
|
149
|
+
}, _typeof(o);
|
|
150
|
+
}
|
|
151
|
+
function toPrimitive(t, r) {
|
|
152
|
+
if ("object" != _typeof(t) || !t) return t;
|
|
153
|
+
var e = t[Symbol.toPrimitive];
|
|
154
|
+
if (void 0 !== e) {
|
|
155
|
+
var i = e.call(t, r);
|
|
156
|
+
if ("object" != _typeof(i)) return i;
|
|
157
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
158
|
+
}
|
|
159
|
+
return ("string" === r ? String : Number)(t);
|
|
160
|
+
}
|
|
161
|
+
function toPropertyKey(t) {
|
|
162
|
+
var i = toPrimitive(t, "string");
|
|
163
|
+
return "symbol" == _typeof(i) ? i : i + "";
|
|
164
|
+
}
|
|
165
|
+
function _defineProperty(e, r, t) {
|
|
166
|
+
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
167
|
+
value: t,
|
|
168
|
+
enumerable: true,
|
|
169
|
+
configurable: true,
|
|
170
|
+
writable: true
|
|
171
|
+
}) : e[r] = t, e;
|
|
172
|
+
}
|
|
173
|
+
var maxZIndex = 2147483647;
|
|
174
|
+
function ownKeys$3(e, r) {
|
|
175
|
+
var t = Object.keys(e);
|
|
176
|
+
if (Object.getOwnPropertySymbols) {
|
|
177
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
178
|
+
r && (o = o.filter(function(r2) {
|
|
179
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
180
|
+
})), t.push.apply(t, o);
|
|
181
|
+
}
|
|
182
|
+
return t;
|
|
183
|
+
}
|
|
184
|
+
function _objectSpread$3(e) {
|
|
185
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
186
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
187
|
+
r % 2 ? ownKeys$3(Object(t), true).forEach(function(r2) {
|
|
188
|
+
_defineProperty(e, r2, t[r2]);
|
|
189
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function(r2) {
|
|
190
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
return e;
|
|
194
|
+
}
|
|
195
|
+
var honeyPotSize = 2;
|
|
196
|
+
var halfHoneyPotSize = honeyPotSize / 2;
|
|
197
|
+
function floorToClosestPixel(point) {
|
|
198
|
+
return {
|
|
199
|
+
x: Math.floor(point.x),
|
|
200
|
+
y: Math.floor(point.y)
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
function pullBackByHalfHoneyPotSize(point) {
|
|
204
|
+
return {
|
|
205
|
+
x: point.x - halfHoneyPotSize,
|
|
206
|
+
y: point.y - halfHoneyPotSize
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
function preventGoingBackwardsOffScreen(point) {
|
|
210
|
+
return {
|
|
211
|
+
x: Math.max(point.x, 0),
|
|
212
|
+
y: Math.max(point.y, 0)
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
function preventGoingForwardsOffScreen(point) {
|
|
216
|
+
return {
|
|
217
|
+
x: Math.min(point.x, window.innerWidth - honeyPotSize),
|
|
218
|
+
y: Math.min(point.y, window.innerHeight - honeyPotSize)
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
function getHoneyPotRectFor(_ref) {
|
|
222
|
+
var client = _ref.client;
|
|
223
|
+
var point = preventGoingForwardsOffScreen(preventGoingBackwardsOffScreen(pullBackByHalfHoneyPotSize(floorToClosestPixel(client))));
|
|
224
|
+
return DOMRect.fromRect({
|
|
225
|
+
x: point.x,
|
|
226
|
+
y: point.y,
|
|
227
|
+
width: honeyPotSize,
|
|
228
|
+
height: honeyPotSize
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
function getRectStyles(_ref2) {
|
|
232
|
+
var clientRect = _ref2.clientRect;
|
|
233
|
+
return {
|
|
234
|
+
left: "".concat(clientRect.left, "px"),
|
|
235
|
+
top: "".concat(clientRect.top, "px"),
|
|
236
|
+
width: "".concat(clientRect.width, "px"),
|
|
237
|
+
height: "".concat(clientRect.height, "px")
|
|
238
|
+
};
|
|
239
|
+
}
|
|
240
|
+
function isWithin(_ref3) {
|
|
241
|
+
var client = _ref3.client, clientRect = _ref3.clientRect;
|
|
242
|
+
return (
|
|
243
|
+
// is within horizontal bounds
|
|
244
|
+
client.x >= clientRect.x && client.x <= clientRect.x + clientRect.width && // is within vertical bounds
|
|
245
|
+
client.y >= clientRect.y && client.y <= clientRect.y + clientRect.height
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
function mountHoneyPot(_ref4) {
|
|
249
|
+
var initial = _ref4.initial;
|
|
250
|
+
var element = document.createElement("div");
|
|
251
|
+
element.setAttribute(honeyPotDataAttribute, "true");
|
|
252
|
+
var clientRect = getHoneyPotRectFor({
|
|
253
|
+
client: initial
|
|
254
|
+
});
|
|
255
|
+
Object.assign(element.style, _objectSpread$3(_objectSpread$3({
|
|
256
|
+
// Setting a background color explicitly to avoid any inherited styles.
|
|
257
|
+
// Looks like this could be `opacity: 0`, but worried that _might_
|
|
258
|
+
// cause the element to be ignored on some platforms.
|
|
259
|
+
// When debugging, set backgroundColor to something like "red".
|
|
260
|
+
backgroundColor: "transparent",
|
|
261
|
+
position: "fixed",
|
|
262
|
+
// Being explicit to avoid inheriting styles
|
|
263
|
+
padding: 0,
|
|
264
|
+
margin: 0,
|
|
265
|
+
boxSizing: "border-box"
|
|
266
|
+
}, getRectStyles({
|
|
267
|
+
clientRect
|
|
268
|
+
})), {}, {
|
|
269
|
+
// We want this element to absorb pointer events,
|
|
270
|
+
// it's kind of the whole point 😉
|
|
271
|
+
pointerEvents: "auto",
|
|
272
|
+
// Want to make sure the honey pot is top of everything else.
|
|
273
|
+
// Don't need to worry about native drag previews, as they will
|
|
274
|
+
// have been rendered (and removed) before the honey pot is rendered
|
|
275
|
+
zIndex: maxZIndex
|
|
276
|
+
}));
|
|
277
|
+
document.body.appendChild(element);
|
|
278
|
+
var unbindPointerMove = dist.bind(window, {
|
|
279
|
+
type: "pointermove",
|
|
280
|
+
listener: function listener(event) {
|
|
281
|
+
var client = {
|
|
282
|
+
x: event.clientX,
|
|
283
|
+
y: event.clientY
|
|
284
|
+
};
|
|
285
|
+
clientRect = getHoneyPotRectFor({
|
|
286
|
+
client
|
|
287
|
+
});
|
|
288
|
+
Object.assign(element.style, getRectStyles({
|
|
289
|
+
clientRect
|
|
290
|
+
}));
|
|
291
|
+
},
|
|
292
|
+
// using capture so we are less likely to be impacted by event stopping
|
|
293
|
+
options: {
|
|
294
|
+
capture: true
|
|
295
|
+
}
|
|
296
|
+
});
|
|
297
|
+
return function finish(_ref5) {
|
|
298
|
+
var current = _ref5.current;
|
|
299
|
+
unbindPointerMove();
|
|
300
|
+
if (isWithin({
|
|
301
|
+
client: current,
|
|
302
|
+
clientRect
|
|
303
|
+
})) {
|
|
304
|
+
element.remove();
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
function cleanup() {
|
|
308
|
+
unbindPostDragEvents();
|
|
309
|
+
element.remove();
|
|
310
|
+
}
|
|
311
|
+
var unbindPostDragEvents = dist.bindAll(window, [
|
|
312
|
+
{
|
|
313
|
+
type: "pointerdown",
|
|
314
|
+
listener: cleanup
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
type: "pointermove",
|
|
318
|
+
listener: cleanup
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
type: "focusin",
|
|
322
|
+
listener: cleanup
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
type: "focusout",
|
|
326
|
+
listener: cleanup
|
|
327
|
+
},
|
|
328
|
+
// a 'pointerdown' should happen before 'dragstart', but just being super safe
|
|
329
|
+
{
|
|
330
|
+
type: "dragstart",
|
|
331
|
+
listener: cleanup
|
|
332
|
+
},
|
|
333
|
+
// if the user has dragged something out of the window
|
|
334
|
+
// and then is dragging something back into the window
|
|
335
|
+
// the first events we will see are "dragenter" (and then "dragover").
|
|
336
|
+
// So if we see any of these we need to clear the post drag fix.
|
|
337
|
+
{
|
|
338
|
+
type: "dragenter",
|
|
339
|
+
listener: cleanup
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
type: "dragover",
|
|
343
|
+
listener: cleanup
|
|
344
|
+
}
|
|
345
|
+
// Not adding a "wheel" event listener, as "wheel" by itself does not
|
|
346
|
+
// resolve the bug.
|
|
347
|
+
], {
|
|
348
|
+
// Using `capture` so less likely to be impacted by other code stopping events
|
|
349
|
+
capture: true
|
|
350
|
+
});
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
function makeHoneyPotFix() {
|
|
354
|
+
var latestPointerMove = null;
|
|
355
|
+
function bindEvents() {
|
|
356
|
+
latestPointerMove = null;
|
|
357
|
+
return dist.bind(window, {
|
|
358
|
+
type: "pointermove",
|
|
359
|
+
listener: function listener(event) {
|
|
360
|
+
latestPointerMove = {
|
|
361
|
+
x: event.clientX,
|
|
362
|
+
y: event.clientY
|
|
363
|
+
};
|
|
364
|
+
},
|
|
365
|
+
// listening for pointer move in capture phase
|
|
366
|
+
// so we are less likely to be impacted by events being stopped.
|
|
367
|
+
options: {
|
|
368
|
+
capture: true
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
function getOnPostDispatch() {
|
|
373
|
+
var finish = null;
|
|
374
|
+
return function onPostEvent(_ref6) {
|
|
375
|
+
var eventName = _ref6.eventName, payload = _ref6.payload;
|
|
376
|
+
if (eventName === "onDragStart") {
|
|
377
|
+
var input = payload.location.initial.input;
|
|
378
|
+
var initial = latestPointerMove !== null && latestPointerMove !== void 0 ? latestPointerMove : {
|
|
379
|
+
x: input.clientX,
|
|
380
|
+
y: input.clientY
|
|
381
|
+
};
|
|
382
|
+
finish = mountHoneyPot({
|
|
383
|
+
initial
|
|
384
|
+
});
|
|
385
|
+
}
|
|
386
|
+
if (eventName === "onDrop") {
|
|
387
|
+
var _finish;
|
|
388
|
+
var _input = payload.location.current.input;
|
|
389
|
+
(_finish = finish) === null || _finish === void 0 || _finish({
|
|
390
|
+
current: {
|
|
391
|
+
x: _input.clientX,
|
|
392
|
+
y: _input.clientY
|
|
393
|
+
}
|
|
394
|
+
});
|
|
395
|
+
finish = null;
|
|
396
|
+
latestPointerMove = null;
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
return {
|
|
401
|
+
bindEvents,
|
|
402
|
+
getOnPostDispatch
|
|
403
|
+
};
|
|
404
|
+
}
|
|
405
|
+
function _arrayWithoutHoles(r) {
|
|
406
|
+
if (Array.isArray(r)) return _arrayLikeToArray$2(r);
|
|
407
|
+
}
|
|
408
|
+
function _iterableToArray(r) {
|
|
409
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
410
|
+
}
|
|
411
|
+
function _nonIterableSpread() {
|
|
412
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
413
|
+
}
|
|
414
|
+
function _toConsumableArray(r) {
|
|
415
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$2(r) || _nonIterableSpread();
|
|
416
|
+
}
|
|
417
|
+
function once(fn) {
|
|
418
|
+
var cache = null;
|
|
419
|
+
return function wrapped() {
|
|
420
|
+
if (!cache) {
|
|
421
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
422
|
+
args[_key] = arguments[_key];
|
|
423
|
+
}
|
|
424
|
+
var result = fn.apply(this, args);
|
|
425
|
+
cache = {
|
|
426
|
+
result
|
|
427
|
+
};
|
|
428
|
+
}
|
|
429
|
+
return cache.result;
|
|
430
|
+
};
|
|
431
|
+
}
|
|
432
|
+
var isFirefox = once(function isFirefox2() {
|
|
433
|
+
if (process.env.NODE_ENV === "test") {
|
|
434
|
+
return false;
|
|
435
|
+
}
|
|
436
|
+
return navigator.userAgent.includes("Firefox");
|
|
437
|
+
});
|
|
438
|
+
var isSafari = once(function isSafari2() {
|
|
439
|
+
if (process.env.NODE_ENV === "test") {
|
|
440
|
+
return false;
|
|
441
|
+
}
|
|
442
|
+
var _navigator = navigator, userAgent = _navigator.userAgent;
|
|
443
|
+
return userAgent.includes("AppleWebKit") && !userAgent.includes("Chrome");
|
|
444
|
+
});
|
|
445
|
+
var symbols = {
|
|
446
|
+
isLeavingWindow: Symbol("leaving"),
|
|
447
|
+
isEnteringWindow: Symbol("entering")
|
|
448
|
+
};
|
|
449
|
+
function isLeavingWindowInSafari(_ref2) {
|
|
450
|
+
var dragLeave = _ref2.dragLeave;
|
|
451
|
+
if (!isSafari()) {
|
|
452
|
+
return false;
|
|
453
|
+
}
|
|
454
|
+
return dragLeave.hasOwnProperty(symbols.isLeavingWindow);
|
|
455
|
+
}
|
|
456
|
+
(function fixSafari() {
|
|
457
|
+
if (typeof window === "undefined") {
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
460
|
+
if (process.env.NODE_ENV === "test") {
|
|
461
|
+
return;
|
|
462
|
+
}
|
|
463
|
+
if (!isSafari()) {
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
function getInitialState() {
|
|
467
|
+
return {
|
|
468
|
+
enterCount: 0,
|
|
469
|
+
isOverWindow: false
|
|
470
|
+
};
|
|
471
|
+
}
|
|
472
|
+
var state = getInitialState();
|
|
473
|
+
function resetState() {
|
|
474
|
+
state = getInitialState();
|
|
475
|
+
}
|
|
476
|
+
dist.bindAll(
|
|
477
|
+
window,
|
|
478
|
+
[{
|
|
479
|
+
type: "dragstart",
|
|
480
|
+
listener: function listener() {
|
|
481
|
+
state.enterCount = 0;
|
|
482
|
+
state.isOverWindow = true;
|
|
483
|
+
}
|
|
484
|
+
}, {
|
|
485
|
+
type: "drop",
|
|
486
|
+
listener: resetState
|
|
487
|
+
}, {
|
|
488
|
+
type: "dragend",
|
|
489
|
+
listener: resetState
|
|
490
|
+
}, {
|
|
491
|
+
type: "dragenter",
|
|
492
|
+
listener: function listener(event) {
|
|
493
|
+
if (!state.isOverWindow && state.enterCount === 0) {
|
|
494
|
+
event[symbols.isEnteringWindow] = true;
|
|
495
|
+
}
|
|
496
|
+
state.isOverWindow = true;
|
|
497
|
+
state.enterCount++;
|
|
498
|
+
}
|
|
499
|
+
}, {
|
|
500
|
+
type: "dragleave",
|
|
501
|
+
listener: function listener(event) {
|
|
502
|
+
state.enterCount--;
|
|
503
|
+
if (state.isOverWindow && state.enterCount === 0) {
|
|
504
|
+
event[symbols.isLeavingWindow] = true;
|
|
505
|
+
state.isOverWindow = false;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
}],
|
|
509
|
+
// using `capture: true` so that adding event listeners
|
|
510
|
+
// in bubble phase will have the correct symbols
|
|
511
|
+
{
|
|
512
|
+
capture: true
|
|
513
|
+
}
|
|
514
|
+
);
|
|
515
|
+
})();
|
|
516
|
+
function isNodeLike(target) {
|
|
517
|
+
return "nodeName" in target;
|
|
518
|
+
}
|
|
519
|
+
function isFromAnotherWindow(eventTarget) {
|
|
520
|
+
return isNodeLike(eventTarget) && eventTarget.ownerDocument !== document;
|
|
521
|
+
}
|
|
522
|
+
function isLeavingWindow(_ref) {
|
|
523
|
+
var dragLeave = _ref.dragLeave;
|
|
524
|
+
var type = dragLeave.type, relatedTarget = dragLeave.relatedTarget;
|
|
525
|
+
if (type !== "dragleave") {
|
|
526
|
+
return false;
|
|
527
|
+
}
|
|
528
|
+
if (isSafari()) {
|
|
529
|
+
return isLeavingWindowInSafari({
|
|
530
|
+
dragLeave
|
|
531
|
+
});
|
|
532
|
+
}
|
|
533
|
+
if (relatedTarget == null) {
|
|
534
|
+
return true;
|
|
535
|
+
}
|
|
536
|
+
if (isFirefox()) {
|
|
537
|
+
return isFromAnotherWindow(relatedTarget);
|
|
538
|
+
}
|
|
539
|
+
return relatedTarget instanceof HTMLIFrameElement;
|
|
540
|
+
}
|
|
541
|
+
function getBindingsForBrokenDrags(_ref) {
|
|
542
|
+
var onDragEnd = _ref.onDragEnd;
|
|
543
|
+
return [
|
|
544
|
+
// ## Detecting drag ending for removed draggables
|
|
545
|
+
//
|
|
546
|
+
// If a draggable element is removed during a drag and the user drops:
|
|
547
|
+
// 1. if over a valid drop target: we get a "drop" event to know the drag is finished
|
|
548
|
+
// 2. if not over a valid drop target (or cancelled): we get nothing
|
|
549
|
+
// The "dragend" event will not fire on the source draggable if it has been
|
|
550
|
+
// removed from the DOM.
|
|
551
|
+
// So we need to figure out if a drag operation has finished by looking at other events
|
|
552
|
+
// We can do this by looking at other events
|
|
553
|
+
// ### First detection: "pointermove" events
|
|
554
|
+
// 1. "pointermove" events cannot fire during a drag and drop operation
|
|
555
|
+
// according to the spec. So if we get a "pointermove" it means that
|
|
556
|
+
// the drag and drop operations has finished. So if we get a "pointermove"
|
|
557
|
+
// we know that the drag is over
|
|
558
|
+
// 2. 🦊😤 Drag and drop operations are _supposed_ to suppress
|
|
559
|
+
// other pointer events. However, firefox will allow a few
|
|
560
|
+
// pointer event to get through after a drag starts.
|
|
561
|
+
// The most I've seen is 3
|
|
562
|
+
{
|
|
563
|
+
type: "pointermove",
|
|
564
|
+
listener: /* @__PURE__ */ function() {
|
|
565
|
+
var callCount = 0;
|
|
566
|
+
return function listener() {
|
|
567
|
+
if (callCount < 20) {
|
|
568
|
+
callCount++;
|
|
569
|
+
return;
|
|
570
|
+
}
|
|
571
|
+
onDragEnd();
|
|
572
|
+
};
|
|
573
|
+
}()
|
|
574
|
+
},
|
|
575
|
+
// ### Second detection: "pointerdown" events
|
|
576
|
+
// If we receive this event then we know that a drag operation has finished
|
|
577
|
+
// and potentially another one is about to start.
|
|
578
|
+
// Note: `pointerdown` fires on all browsers / platforms before "dragstart"
|
|
579
|
+
{
|
|
580
|
+
type: "pointerdown",
|
|
581
|
+
listener: onDragEnd
|
|
582
|
+
}
|
|
583
|
+
];
|
|
584
|
+
}
|
|
585
|
+
function getInput(event) {
|
|
586
|
+
return {
|
|
587
|
+
altKey: event.altKey,
|
|
588
|
+
button: event.button,
|
|
589
|
+
buttons: event.buttons,
|
|
590
|
+
ctrlKey: event.ctrlKey,
|
|
591
|
+
metaKey: event.metaKey,
|
|
592
|
+
shiftKey: event.shiftKey,
|
|
593
|
+
clientX: event.clientX,
|
|
594
|
+
clientY: event.clientY,
|
|
595
|
+
pageX: event.pageX,
|
|
596
|
+
pageY: event.pageY
|
|
597
|
+
};
|
|
598
|
+
}
|
|
599
|
+
var rafSchd = function rafSchd2(fn) {
|
|
600
|
+
var lastArgs = [];
|
|
601
|
+
var frameId = null;
|
|
602
|
+
var wrapperFn = function wrapperFn2() {
|
|
603
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
604
|
+
args[_key] = arguments[_key];
|
|
605
|
+
}
|
|
606
|
+
lastArgs = args;
|
|
607
|
+
if (frameId) {
|
|
608
|
+
return;
|
|
609
|
+
}
|
|
610
|
+
frameId = requestAnimationFrame(function() {
|
|
611
|
+
frameId = null;
|
|
612
|
+
fn.apply(void 0, lastArgs);
|
|
613
|
+
});
|
|
614
|
+
};
|
|
615
|
+
wrapperFn.cancel = function() {
|
|
616
|
+
if (!frameId) {
|
|
617
|
+
return;
|
|
618
|
+
}
|
|
619
|
+
cancelAnimationFrame(frameId);
|
|
620
|
+
frameId = null;
|
|
621
|
+
};
|
|
622
|
+
return wrapperFn;
|
|
623
|
+
};
|
|
624
|
+
var scheduleOnDrag = rafSchd(function(fn) {
|
|
625
|
+
return fn();
|
|
626
|
+
});
|
|
627
|
+
var dragStart = /* @__PURE__ */ function() {
|
|
628
|
+
var scheduled = null;
|
|
629
|
+
function schedule(fn) {
|
|
630
|
+
var frameId = requestAnimationFrame(function() {
|
|
631
|
+
scheduled = null;
|
|
632
|
+
fn();
|
|
633
|
+
});
|
|
634
|
+
scheduled = {
|
|
635
|
+
frameId,
|
|
636
|
+
fn
|
|
637
|
+
};
|
|
638
|
+
}
|
|
639
|
+
function flush() {
|
|
640
|
+
if (scheduled) {
|
|
641
|
+
cancelAnimationFrame(scheduled.frameId);
|
|
642
|
+
scheduled.fn();
|
|
643
|
+
scheduled = null;
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
return {
|
|
647
|
+
schedule,
|
|
648
|
+
flush
|
|
649
|
+
};
|
|
650
|
+
}();
|
|
651
|
+
function makeDispatch(_ref) {
|
|
652
|
+
var source = _ref.source, initial = _ref.initial, dispatchEvent = _ref.dispatchEvent;
|
|
653
|
+
var previous = {
|
|
654
|
+
dropTargets: []
|
|
655
|
+
};
|
|
656
|
+
function safeDispatch(args) {
|
|
657
|
+
dispatchEvent(args);
|
|
658
|
+
previous = {
|
|
659
|
+
dropTargets: args.payload.location.current.dropTargets
|
|
660
|
+
};
|
|
661
|
+
}
|
|
662
|
+
var dispatch = {
|
|
663
|
+
start: function start2(_ref2) {
|
|
664
|
+
var nativeSetDragImage = _ref2.nativeSetDragImage;
|
|
665
|
+
var location = {
|
|
666
|
+
current: initial,
|
|
667
|
+
previous,
|
|
668
|
+
initial
|
|
669
|
+
};
|
|
670
|
+
safeDispatch({
|
|
671
|
+
eventName: "onGenerateDragPreview",
|
|
672
|
+
payload: {
|
|
673
|
+
source,
|
|
674
|
+
location,
|
|
675
|
+
nativeSetDragImage
|
|
676
|
+
}
|
|
677
|
+
});
|
|
678
|
+
dragStart.schedule(function() {
|
|
679
|
+
safeDispatch({
|
|
680
|
+
eventName: "onDragStart",
|
|
681
|
+
payload: {
|
|
682
|
+
source,
|
|
683
|
+
location
|
|
684
|
+
}
|
|
685
|
+
});
|
|
686
|
+
});
|
|
687
|
+
},
|
|
688
|
+
dragUpdate: function dragUpdate(_ref3) {
|
|
689
|
+
var current = _ref3.current;
|
|
690
|
+
dragStart.flush();
|
|
691
|
+
scheduleOnDrag.cancel();
|
|
692
|
+
safeDispatch({
|
|
693
|
+
eventName: "onDropTargetChange",
|
|
694
|
+
payload: {
|
|
695
|
+
source,
|
|
696
|
+
location: {
|
|
697
|
+
initial,
|
|
698
|
+
previous,
|
|
699
|
+
current
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
},
|
|
704
|
+
drag: function drag(_ref4) {
|
|
705
|
+
var current = _ref4.current;
|
|
706
|
+
scheduleOnDrag(function() {
|
|
707
|
+
dragStart.flush();
|
|
708
|
+
var location = {
|
|
709
|
+
initial,
|
|
710
|
+
previous,
|
|
711
|
+
current
|
|
712
|
+
};
|
|
713
|
+
safeDispatch({
|
|
714
|
+
eventName: "onDrag",
|
|
715
|
+
payload: {
|
|
716
|
+
source,
|
|
717
|
+
location
|
|
718
|
+
}
|
|
719
|
+
});
|
|
720
|
+
});
|
|
721
|
+
},
|
|
722
|
+
drop: function drop(_ref5) {
|
|
723
|
+
var current = _ref5.current, updatedSourcePayload = _ref5.updatedSourcePayload;
|
|
724
|
+
dragStart.flush();
|
|
725
|
+
scheduleOnDrag.cancel();
|
|
726
|
+
safeDispatch({
|
|
727
|
+
eventName: "onDrop",
|
|
728
|
+
payload: {
|
|
729
|
+
source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source,
|
|
730
|
+
location: {
|
|
731
|
+
current,
|
|
732
|
+
previous,
|
|
733
|
+
initial
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
});
|
|
737
|
+
}
|
|
738
|
+
};
|
|
739
|
+
return dispatch;
|
|
740
|
+
}
|
|
741
|
+
var globalState = {
|
|
742
|
+
isActive: false
|
|
743
|
+
};
|
|
744
|
+
function canStart() {
|
|
745
|
+
return !globalState.isActive;
|
|
746
|
+
}
|
|
747
|
+
function getNativeSetDragImage(event) {
|
|
748
|
+
if (event.dataTransfer) {
|
|
749
|
+
return event.dataTransfer.setDragImage.bind(event.dataTransfer);
|
|
750
|
+
}
|
|
751
|
+
return null;
|
|
752
|
+
}
|
|
753
|
+
function hasHierarchyChanged(_ref) {
|
|
754
|
+
var current = _ref.current, next = _ref.next;
|
|
755
|
+
if (current.length !== next.length) {
|
|
756
|
+
return true;
|
|
757
|
+
}
|
|
758
|
+
for (var i = 0; i < current.length; i++) {
|
|
759
|
+
if (current[i].element !== next[i].element) {
|
|
760
|
+
return true;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
return false;
|
|
764
|
+
}
|
|
765
|
+
function start(_ref2) {
|
|
766
|
+
var event = _ref2.event, dragType = _ref2.dragType, getDropTargetsOver = _ref2.getDropTargetsOver, dispatchEvent = _ref2.dispatchEvent;
|
|
767
|
+
if (!canStart()) {
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
var initial = getStartLocation({
|
|
771
|
+
event,
|
|
772
|
+
dragType,
|
|
773
|
+
getDropTargetsOver
|
|
774
|
+
});
|
|
775
|
+
globalState.isActive = true;
|
|
776
|
+
var state = {
|
|
777
|
+
current: initial
|
|
778
|
+
};
|
|
779
|
+
setDropEffectOnEvent({
|
|
780
|
+
event,
|
|
781
|
+
current: initial.dropTargets
|
|
782
|
+
});
|
|
783
|
+
var dispatch = makeDispatch({
|
|
784
|
+
source: dragType.payload,
|
|
785
|
+
dispatchEvent,
|
|
786
|
+
initial
|
|
787
|
+
});
|
|
788
|
+
function updateState(next) {
|
|
789
|
+
var hasChanged = hasHierarchyChanged({
|
|
790
|
+
current: state.current.dropTargets,
|
|
791
|
+
next: next.dropTargets
|
|
792
|
+
});
|
|
793
|
+
state.current = next;
|
|
794
|
+
if (hasChanged) {
|
|
795
|
+
dispatch.dragUpdate({
|
|
796
|
+
current: state.current
|
|
797
|
+
});
|
|
798
|
+
}
|
|
799
|
+
}
|
|
800
|
+
function onUpdateEvent(event2) {
|
|
801
|
+
var input = getInput(event2);
|
|
802
|
+
var target = isHoneyPotElement(event2.target) ? getElementFromPointWithoutHoneypot({
|
|
803
|
+
x: input.clientX,
|
|
804
|
+
y: input.clientY
|
|
805
|
+
}) : event2.target;
|
|
806
|
+
var nextDropTargets = getDropTargetsOver({
|
|
807
|
+
target,
|
|
808
|
+
input,
|
|
809
|
+
source: dragType.payload,
|
|
810
|
+
current: state.current.dropTargets
|
|
811
|
+
});
|
|
812
|
+
if (nextDropTargets.length) {
|
|
813
|
+
event2.preventDefault();
|
|
814
|
+
setDropEffectOnEvent({
|
|
815
|
+
event: event2,
|
|
816
|
+
current: nextDropTargets
|
|
817
|
+
});
|
|
818
|
+
}
|
|
819
|
+
updateState({
|
|
820
|
+
dropTargets: nextDropTargets,
|
|
821
|
+
input
|
|
822
|
+
});
|
|
823
|
+
}
|
|
824
|
+
function cancel() {
|
|
825
|
+
if (state.current.dropTargets.length) {
|
|
826
|
+
updateState({
|
|
827
|
+
dropTargets: [],
|
|
828
|
+
input: state.current.input
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
dispatch.drop({
|
|
832
|
+
current: state.current,
|
|
833
|
+
updatedSourcePayload: null
|
|
834
|
+
});
|
|
835
|
+
finish();
|
|
836
|
+
}
|
|
837
|
+
function finish() {
|
|
838
|
+
globalState.isActive = false;
|
|
839
|
+
unbindEvents();
|
|
840
|
+
}
|
|
841
|
+
var unbindEvents = dist.bindAll(
|
|
842
|
+
window,
|
|
843
|
+
[{
|
|
844
|
+
// 👋 Note: we are repurposing the `dragover` event as our `drag` event
|
|
845
|
+
// this is because firefox does not publish pointer coordinates during
|
|
846
|
+
// a `drag` event, but does for every other type of drag event
|
|
847
|
+
// `dragover` fires on all elements that are being dragged over
|
|
848
|
+
// Because we are binding to `window` - our `dragover` is effectively the same as a `drag`
|
|
849
|
+
// 🦊😤
|
|
850
|
+
type: "dragover",
|
|
851
|
+
listener: function listener(event2) {
|
|
852
|
+
onUpdateEvent(event2);
|
|
853
|
+
dispatch.drag({
|
|
854
|
+
current: state.current
|
|
855
|
+
});
|
|
856
|
+
}
|
|
857
|
+
}, {
|
|
858
|
+
type: "dragenter",
|
|
859
|
+
listener: onUpdateEvent
|
|
860
|
+
}, {
|
|
861
|
+
type: "dragleave",
|
|
862
|
+
listener: function listener(event2) {
|
|
863
|
+
if (!isLeavingWindow({
|
|
864
|
+
dragLeave: event2
|
|
865
|
+
})) {
|
|
866
|
+
return;
|
|
867
|
+
}
|
|
868
|
+
updateState({
|
|
869
|
+
input: state.current.input,
|
|
870
|
+
dropTargets: []
|
|
871
|
+
});
|
|
872
|
+
if (dragType.startedFrom === "external") {
|
|
873
|
+
cancel();
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
}, {
|
|
877
|
+
// A "drop" can only happen if the browser allowed the drop
|
|
878
|
+
type: "drop",
|
|
879
|
+
listener: function listener(event2) {
|
|
880
|
+
state.current = {
|
|
881
|
+
dropTargets: state.current.dropTargets,
|
|
882
|
+
input: getInput(event2)
|
|
883
|
+
};
|
|
884
|
+
if (!state.current.dropTargets.length) {
|
|
885
|
+
cancel();
|
|
886
|
+
return;
|
|
887
|
+
}
|
|
888
|
+
event2.preventDefault();
|
|
889
|
+
setDropEffectOnEvent({
|
|
890
|
+
event: event2,
|
|
891
|
+
current: state.current.dropTargets
|
|
892
|
+
});
|
|
893
|
+
dispatch.drop({
|
|
894
|
+
current: state.current,
|
|
895
|
+
// When dropping something native, we need to extract the latest
|
|
896
|
+
// `.items` from the "drop" event as it is now accessible
|
|
897
|
+
updatedSourcePayload: dragType.type === "external" ? dragType.getDropPayload(event2) : null
|
|
898
|
+
});
|
|
899
|
+
finish();
|
|
900
|
+
}
|
|
901
|
+
}, {
|
|
902
|
+
// "dragend" fires when on the drag source (eg a draggable element)
|
|
903
|
+
// when the drag is finished.
|
|
904
|
+
// "dragend" will fire after "drop" (if there was a successful drop)
|
|
905
|
+
// "dragend" does not fire if the draggable source has been removed during the drag
|
|
906
|
+
// or for external drag sources (eg files)
|
|
907
|
+
// This "dragend" listener will not fire if there was a successful drop
|
|
908
|
+
// as we will have already removed the event listener
|
|
909
|
+
type: "dragend",
|
|
910
|
+
listener: function listener(event2) {
|
|
911
|
+
state.current = {
|
|
912
|
+
dropTargets: state.current.dropTargets,
|
|
913
|
+
input: getInput(event2)
|
|
914
|
+
};
|
|
915
|
+
cancel();
|
|
916
|
+
}
|
|
917
|
+
}].concat(_toConsumableArray(getBindingsForBrokenDrags({
|
|
918
|
+
onDragEnd: cancel
|
|
919
|
+
}))),
|
|
920
|
+
// Once we have started a managed drag operation it is important that we see / own all drag events
|
|
921
|
+
// We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`)
|
|
922
|
+
// all "drop" events in the bubble phase on the `document.body`.
|
|
923
|
+
// This meant that we never saw the "drop" event.
|
|
924
|
+
{
|
|
925
|
+
capture: true
|
|
926
|
+
}
|
|
927
|
+
);
|
|
928
|
+
dispatch.start({
|
|
929
|
+
nativeSetDragImage: getNativeSetDragImage(event)
|
|
930
|
+
});
|
|
931
|
+
}
|
|
932
|
+
function setDropEffectOnEvent(_ref3) {
|
|
933
|
+
var _current$;
|
|
934
|
+
var event = _ref3.event, current = _ref3.current;
|
|
935
|
+
var innerMost = (_current$ = current[0]) === null || _current$ === void 0 ? void 0 : _current$.dropEffect;
|
|
936
|
+
if (innerMost != null && event.dataTransfer) {
|
|
937
|
+
event.dataTransfer.dropEffect = innerMost;
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
function getStartLocation(_ref4) {
|
|
941
|
+
var event = _ref4.event, dragType = _ref4.dragType, getDropTargetsOver = _ref4.getDropTargetsOver;
|
|
942
|
+
var input = getInput(event);
|
|
943
|
+
if (dragType.startedFrom === "external") {
|
|
944
|
+
return {
|
|
945
|
+
input,
|
|
946
|
+
dropTargets: []
|
|
947
|
+
};
|
|
948
|
+
}
|
|
949
|
+
var dropTargets = getDropTargetsOver({
|
|
950
|
+
input,
|
|
951
|
+
source: dragType.payload,
|
|
952
|
+
target: event.target,
|
|
953
|
+
current: []
|
|
954
|
+
});
|
|
955
|
+
return {
|
|
956
|
+
input,
|
|
957
|
+
dropTargets
|
|
958
|
+
};
|
|
959
|
+
}
|
|
960
|
+
var lifecycle = {
|
|
961
|
+
canStart,
|
|
962
|
+
start
|
|
963
|
+
};
|
|
964
|
+
var ledger = /* @__PURE__ */ new Map();
|
|
965
|
+
function registerUsage(_ref) {
|
|
966
|
+
var typeKey = _ref.typeKey, mount2 = _ref.mount;
|
|
967
|
+
var entry = ledger.get(typeKey);
|
|
968
|
+
if (entry) {
|
|
969
|
+
entry.usageCount++;
|
|
970
|
+
return entry;
|
|
971
|
+
}
|
|
972
|
+
var initial = {
|
|
973
|
+
typeKey,
|
|
974
|
+
unmount: mount2(),
|
|
975
|
+
usageCount: 1
|
|
976
|
+
};
|
|
977
|
+
ledger.set(typeKey, initial);
|
|
978
|
+
return initial;
|
|
979
|
+
}
|
|
980
|
+
function register(args) {
|
|
981
|
+
var entry = registerUsage(args);
|
|
982
|
+
return function unregister() {
|
|
983
|
+
entry.usageCount--;
|
|
984
|
+
if (entry.usageCount > 0) {
|
|
985
|
+
return;
|
|
986
|
+
}
|
|
987
|
+
entry.unmount();
|
|
988
|
+
ledger.delete(args.typeKey);
|
|
989
|
+
};
|
|
990
|
+
}
|
|
991
|
+
function addAttribute(element, _ref) {
|
|
992
|
+
var attribute = _ref.attribute, value = _ref.value;
|
|
993
|
+
element.setAttribute(attribute, value);
|
|
994
|
+
return function() {
|
|
995
|
+
return element.removeAttribute(attribute);
|
|
996
|
+
};
|
|
997
|
+
}
|
|
998
|
+
function ownKeys$2(e, r) {
|
|
999
|
+
var t = Object.keys(e);
|
|
1000
|
+
if (Object.getOwnPropertySymbols) {
|
|
1001
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
1002
|
+
r && (o = o.filter(function(r2) {
|
|
1003
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
1004
|
+
})), t.push.apply(t, o);
|
|
1005
|
+
}
|
|
1006
|
+
return t;
|
|
1007
|
+
}
|
|
1008
|
+
function _objectSpread$2(e) {
|
|
1009
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
1010
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
1011
|
+
r % 2 ? ownKeys$2(Object(t), true).forEach(function(r2) {
|
|
1012
|
+
_defineProperty(e, r2, t[r2]);
|
|
1013
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function(r2) {
|
|
1014
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
1015
|
+
});
|
|
1016
|
+
}
|
|
1017
|
+
return e;
|
|
1018
|
+
}
|
|
1019
|
+
function _createForOfIteratorHelper$1(r, e) {
|
|
1020
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
1021
|
+
if (!t) {
|
|
1022
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) {
|
|
1023
|
+
t && (r = t);
|
|
1024
|
+
var _n = 0, F = function F2() {
|
|
1025
|
+
};
|
|
1026
|
+
return { s: F, n: function n() {
|
|
1027
|
+
return _n >= r.length ? { done: true } : { done: false, value: r[_n++] };
|
|
1028
|
+
}, e: function e2(r2) {
|
|
1029
|
+
throw r2;
|
|
1030
|
+
}, f: F };
|
|
1031
|
+
}
|
|
1032
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
1033
|
+
}
|
|
1034
|
+
var o, a = true, u = false;
|
|
1035
|
+
return { s: function s() {
|
|
1036
|
+
t = t.call(r);
|
|
1037
|
+
}, n: function n() {
|
|
1038
|
+
var r2 = t.next();
|
|
1039
|
+
return a = r2.done, r2;
|
|
1040
|
+
}, e: function e2(r2) {
|
|
1041
|
+
u = true, o = r2;
|
|
1042
|
+
}, f: function f() {
|
|
1043
|
+
try {
|
|
1044
|
+
a || null == t.return || t.return();
|
|
1045
|
+
} finally {
|
|
1046
|
+
if (u) throw o;
|
|
1047
|
+
}
|
|
1048
|
+
} };
|
|
1049
|
+
}
|
|
1050
|
+
function _unsupportedIterableToArray$1(r, a) {
|
|
1051
|
+
if (r) {
|
|
1052
|
+
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
|
|
1053
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
1054
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
function _arrayLikeToArray$1(r, a) {
|
|
1058
|
+
(null == a || a > r.length) && (a = r.length);
|
|
1059
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
1060
|
+
return n;
|
|
1061
|
+
}
|
|
1062
|
+
function copyReverse(array) {
|
|
1063
|
+
return array.slice(0).reverse();
|
|
1064
|
+
}
|
|
1065
|
+
function makeDropTarget(_ref) {
|
|
1066
|
+
var typeKey = _ref.typeKey, defaultDropEffect = _ref.defaultDropEffect;
|
|
1067
|
+
var registry = /* @__PURE__ */ new WeakMap();
|
|
1068
|
+
var dropTargetDataAtt = "data-drop-target-for-".concat(typeKey);
|
|
1069
|
+
var dropTargetSelector = "[".concat(dropTargetDataAtt, "]");
|
|
1070
|
+
function addToRegistry2(args) {
|
|
1071
|
+
registry.set(args.element, args);
|
|
1072
|
+
return function() {
|
|
1073
|
+
return registry.delete(args.element);
|
|
1074
|
+
};
|
|
1075
|
+
}
|
|
1076
|
+
function dropTargetForConsumers(args) {
|
|
1077
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1078
|
+
var existing = registry.get(args.element);
|
|
1079
|
+
if (existing) {
|
|
1080
|
+
console.warn("You have already registered a [".concat(typeKey, "] dropTarget on the same element"), {
|
|
1081
|
+
existing,
|
|
1082
|
+
proposed: args
|
|
1083
|
+
});
|
|
1084
|
+
}
|
|
1085
|
+
if (args.element instanceof HTMLIFrameElement) {
|
|
1086
|
+
console.warn("\n We recommend not registering <iframe> elements as drop targets\n as it can result in some strange browser event ordering.\n ".replace(/\s{2,}/g, " ").trim());
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
1089
|
+
var cleanup = combine(addAttribute(args.element, {
|
|
1090
|
+
attribute: dropTargetDataAtt,
|
|
1091
|
+
value: "true"
|
|
1092
|
+
}), addToRegistry2(args));
|
|
1093
|
+
return once(cleanup);
|
|
1094
|
+
}
|
|
1095
|
+
function getActualDropTargets(_ref2) {
|
|
1096
|
+
var _args$getData, _args$getData2, _args$getDropEffect, _args$getDropEffect2;
|
|
1097
|
+
var source = _ref2.source, target = _ref2.target, input = _ref2.input, _ref2$result = _ref2.result, result = _ref2$result === void 0 ? [] : _ref2$result;
|
|
1098
|
+
if (target == null) {
|
|
1099
|
+
return result;
|
|
1100
|
+
}
|
|
1101
|
+
if (!(target instanceof Element)) {
|
|
1102
|
+
if (target instanceof Node) {
|
|
1103
|
+
return getActualDropTargets({
|
|
1104
|
+
source,
|
|
1105
|
+
target: target.parentElement,
|
|
1106
|
+
input,
|
|
1107
|
+
result
|
|
1108
|
+
});
|
|
1109
|
+
}
|
|
1110
|
+
return result;
|
|
1111
|
+
}
|
|
1112
|
+
var closest = target.closest(dropTargetSelector);
|
|
1113
|
+
if (closest == null) {
|
|
1114
|
+
return result;
|
|
1115
|
+
}
|
|
1116
|
+
var args = registry.get(closest);
|
|
1117
|
+
if (args == null) {
|
|
1118
|
+
return result;
|
|
1119
|
+
}
|
|
1120
|
+
var feedback = {
|
|
1121
|
+
input,
|
|
1122
|
+
source,
|
|
1123
|
+
element: args.element
|
|
1124
|
+
};
|
|
1125
|
+
if (args.canDrop && !args.canDrop(feedback)) {
|
|
1126
|
+
return getActualDropTargets({
|
|
1127
|
+
source,
|
|
1128
|
+
target: args.element.parentElement,
|
|
1129
|
+
input,
|
|
1130
|
+
result
|
|
1131
|
+
});
|
|
1132
|
+
}
|
|
1133
|
+
var data = (_args$getData = (_args$getData2 = args.getData) === null || _args$getData2 === void 0 ? void 0 : _args$getData2.call(args, feedback)) !== null && _args$getData !== void 0 ? _args$getData : {};
|
|
1134
|
+
var dropEffect = (_args$getDropEffect = (_args$getDropEffect2 = args.getDropEffect) === null || _args$getDropEffect2 === void 0 ? void 0 : _args$getDropEffect2.call(args, feedback)) !== null && _args$getDropEffect !== void 0 ? _args$getDropEffect : defaultDropEffect;
|
|
1135
|
+
var record = {
|
|
1136
|
+
data,
|
|
1137
|
+
element: args.element,
|
|
1138
|
+
dropEffect,
|
|
1139
|
+
// we are collecting _actual_ drop targets, so these are
|
|
1140
|
+
// being applied _not_ due to stickiness
|
|
1141
|
+
isActiveDueToStickiness: false
|
|
1142
|
+
};
|
|
1143
|
+
return getActualDropTargets({
|
|
1144
|
+
source,
|
|
1145
|
+
target: args.element.parentElement,
|
|
1146
|
+
input,
|
|
1147
|
+
// Using bubble ordering. Same ordering as `event.getPath()`
|
|
1148
|
+
result: [].concat(_toConsumableArray(result), [record])
|
|
1149
|
+
});
|
|
1150
|
+
}
|
|
1151
|
+
function notifyCurrent(_ref3) {
|
|
1152
|
+
var eventName = _ref3.eventName, payload = _ref3.payload;
|
|
1153
|
+
var _iterator = _createForOfIteratorHelper$1(payload.location.current.dropTargets), _step;
|
|
1154
|
+
try {
|
|
1155
|
+
for (_iterator.s(); !(_step = _iterator.n()).done; ) {
|
|
1156
|
+
var _entry$eventName;
|
|
1157
|
+
var record = _step.value;
|
|
1158
|
+
var entry = registry.get(record.element);
|
|
1159
|
+
var args = _objectSpread$2(_objectSpread$2({}, payload), {}, {
|
|
1160
|
+
self: record
|
|
1161
|
+
});
|
|
1162
|
+
entry === null || entry === void 0 || (_entry$eventName = entry[eventName]) === null || _entry$eventName === void 0 || _entry$eventName.call(
|
|
1163
|
+
entry,
|
|
1164
|
+
// I cannot seem to get the types right here.
|
|
1165
|
+
// TS doesn't seem to like that one event can need `nativeSetDragImage`
|
|
1166
|
+
// @ts-expect-error
|
|
1167
|
+
args
|
|
1168
|
+
);
|
|
1169
|
+
}
|
|
1170
|
+
} catch (err) {
|
|
1171
|
+
_iterator.e(err);
|
|
1172
|
+
} finally {
|
|
1173
|
+
_iterator.f();
|
|
1174
|
+
}
|
|
1175
|
+
}
|
|
1176
|
+
var actions = {
|
|
1177
|
+
onGenerateDragPreview: notifyCurrent,
|
|
1178
|
+
onDrag: notifyCurrent,
|
|
1179
|
+
onDragStart: notifyCurrent,
|
|
1180
|
+
onDrop: notifyCurrent,
|
|
1181
|
+
onDropTargetChange: function onDropTargetChange(_ref4) {
|
|
1182
|
+
var payload = _ref4.payload;
|
|
1183
|
+
var isCurrent = new Set(payload.location.current.dropTargets.map(function(record2) {
|
|
1184
|
+
return record2.element;
|
|
1185
|
+
}));
|
|
1186
|
+
var visited = /* @__PURE__ */ new Set();
|
|
1187
|
+
var _iterator2 = _createForOfIteratorHelper$1(payload.location.previous.dropTargets), _step2;
|
|
1188
|
+
try {
|
|
1189
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) {
|
|
1190
|
+
var _entry$onDropTargetCh;
|
|
1191
|
+
var record = _step2.value;
|
|
1192
|
+
visited.add(record.element);
|
|
1193
|
+
var entry = registry.get(record.element);
|
|
1194
|
+
var isOver = isCurrent.has(record.element);
|
|
1195
|
+
var args = _objectSpread$2(_objectSpread$2({}, payload), {}, {
|
|
1196
|
+
self: record
|
|
1197
|
+
});
|
|
1198
|
+
entry === null || entry === void 0 || (_entry$onDropTargetCh = entry.onDropTargetChange) === null || _entry$onDropTargetCh === void 0 || _entry$onDropTargetCh.call(entry, args);
|
|
1199
|
+
if (!isOver) {
|
|
1200
|
+
var _entry$onDragLeave;
|
|
1201
|
+
entry === null || entry === void 0 || (_entry$onDragLeave = entry.onDragLeave) === null || _entry$onDragLeave === void 0 || _entry$onDragLeave.call(entry, args);
|
|
1202
|
+
}
|
|
1203
|
+
}
|
|
1204
|
+
} catch (err) {
|
|
1205
|
+
_iterator2.e(err);
|
|
1206
|
+
} finally {
|
|
1207
|
+
_iterator2.f();
|
|
1208
|
+
}
|
|
1209
|
+
var _iterator3 = _createForOfIteratorHelper$1(payload.location.current.dropTargets), _step3;
|
|
1210
|
+
try {
|
|
1211
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done; ) {
|
|
1212
|
+
var _entry$onDropTargetCh2, _entry$onDragEnter;
|
|
1213
|
+
var _record = _step3.value;
|
|
1214
|
+
if (visited.has(_record.element)) {
|
|
1215
|
+
continue;
|
|
1216
|
+
}
|
|
1217
|
+
var _args = _objectSpread$2(_objectSpread$2({}, payload), {}, {
|
|
1218
|
+
self: _record
|
|
1219
|
+
});
|
|
1220
|
+
var _entry = registry.get(_record.element);
|
|
1221
|
+
_entry === null || _entry === void 0 || (_entry$onDropTargetCh2 = _entry.onDropTargetChange) === null || _entry$onDropTargetCh2 === void 0 || _entry$onDropTargetCh2.call(_entry, _args);
|
|
1222
|
+
_entry === null || _entry === void 0 || (_entry$onDragEnter = _entry.onDragEnter) === null || _entry$onDragEnter === void 0 || _entry$onDragEnter.call(_entry, _args);
|
|
1223
|
+
}
|
|
1224
|
+
} catch (err) {
|
|
1225
|
+
_iterator3.e(err);
|
|
1226
|
+
} finally {
|
|
1227
|
+
_iterator3.f();
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
};
|
|
1231
|
+
function dispatchEvent(args) {
|
|
1232
|
+
actions[args.eventName](args);
|
|
1233
|
+
}
|
|
1234
|
+
function getIsOver(_ref5) {
|
|
1235
|
+
var source = _ref5.source, target = _ref5.target, input = _ref5.input, current = _ref5.current;
|
|
1236
|
+
var actual = getActualDropTargets({
|
|
1237
|
+
source,
|
|
1238
|
+
target,
|
|
1239
|
+
input
|
|
1240
|
+
});
|
|
1241
|
+
if (actual.length >= current.length) {
|
|
1242
|
+
return actual;
|
|
1243
|
+
}
|
|
1244
|
+
var lastCaptureOrdered = copyReverse(current);
|
|
1245
|
+
var actualCaptureOrdered = copyReverse(actual);
|
|
1246
|
+
var resultCaptureOrdered = [];
|
|
1247
|
+
for (var index = 0; index < lastCaptureOrdered.length; index++) {
|
|
1248
|
+
var _argsForLast$getIsSti;
|
|
1249
|
+
var last = lastCaptureOrdered[index];
|
|
1250
|
+
var fresh = actualCaptureOrdered[index];
|
|
1251
|
+
if (fresh != null) {
|
|
1252
|
+
resultCaptureOrdered.push(fresh);
|
|
1253
|
+
continue;
|
|
1254
|
+
}
|
|
1255
|
+
var parent = resultCaptureOrdered[index - 1];
|
|
1256
|
+
var lastParent = lastCaptureOrdered[index - 1];
|
|
1257
|
+
if ((parent === null || parent === void 0 ? void 0 : parent.element) !== (lastParent === null || lastParent === void 0 ? void 0 : lastParent.element)) {
|
|
1258
|
+
break;
|
|
1259
|
+
}
|
|
1260
|
+
var argsForLast = registry.get(last.element);
|
|
1261
|
+
if (!argsForLast) {
|
|
1262
|
+
break;
|
|
1263
|
+
}
|
|
1264
|
+
var feedback = {
|
|
1265
|
+
input,
|
|
1266
|
+
source,
|
|
1267
|
+
element: argsForLast.element
|
|
1268
|
+
};
|
|
1269
|
+
if (argsForLast.canDrop && !argsForLast.canDrop(feedback)) {
|
|
1270
|
+
break;
|
|
1271
|
+
}
|
|
1272
|
+
if (!((_argsForLast$getIsSti = argsForLast.getIsSticky) !== null && _argsForLast$getIsSti !== void 0 && _argsForLast$getIsSti.call(argsForLast, feedback))) {
|
|
1273
|
+
break;
|
|
1274
|
+
}
|
|
1275
|
+
resultCaptureOrdered.push(_objectSpread$2(_objectSpread$2({}, last), {}, {
|
|
1276
|
+
// making it clear to consumers this drop target is active due to stickiness
|
|
1277
|
+
isActiveDueToStickiness: true
|
|
1278
|
+
}));
|
|
1279
|
+
}
|
|
1280
|
+
return copyReverse(resultCaptureOrdered);
|
|
1281
|
+
}
|
|
1282
|
+
return {
|
|
1283
|
+
dropTargetForConsumers,
|
|
1284
|
+
getIsOver,
|
|
1285
|
+
dispatchEvent
|
|
1286
|
+
};
|
|
1287
|
+
}
|
|
1288
|
+
function _createForOfIteratorHelper(r, e) {
|
|
1289
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
1290
|
+
if (!t) {
|
|
1291
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
|
|
1292
|
+
t && (r = t);
|
|
1293
|
+
var _n = 0, F = function F2() {
|
|
1294
|
+
};
|
|
1295
|
+
return { s: F, n: function n() {
|
|
1296
|
+
return _n >= r.length ? { done: true } : { done: false, value: r[_n++] };
|
|
1297
|
+
}, e: function e2(r2) {
|
|
1298
|
+
throw r2;
|
|
1299
|
+
}, f: F };
|
|
1300
|
+
}
|
|
1301
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
1302
|
+
}
|
|
1303
|
+
var o, a = true, u = false;
|
|
1304
|
+
return { s: function s() {
|
|
1305
|
+
t = t.call(r);
|
|
1306
|
+
}, n: function n() {
|
|
1307
|
+
var r2 = t.next();
|
|
1308
|
+
return a = r2.done, r2;
|
|
1309
|
+
}, e: function e2(r2) {
|
|
1310
|
+
u = true, o = r2;
|
|
1311
|
+
}, f: function f() {
|
|
1312
|
+
try {
|
|
1313
|
+
a || null == t.return || t.return();
|
|
1314
|
+
} finally {
|
|
1315
|
+
if (u) throw o;
|
|
1316
|
+
}
|
|
1317
|
+
} };
|
|
1318
|
+
}
|
|
1319
|
+
function _unsupportedIterableToArray(r, a) {
|
|
1320
|
+
if (r) {
|
|
1321
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
1322
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
1323
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
1324
|
+
}
|
|
1325
|
+
}
|
|
1326
|
+
function _arrayLikeToArray(r, a) {
|
|
1327
|
+
(null == a || a > r.length) && (a = r.length);
|
|
1328
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
1329
|
+
return n;
|
|
1330
|
+
}
|
|
1331
|
+
function ownKeys$1(e, r) {
|
|
1332
|
+
var t = Object.keys(e);
|
|
1333
|
+
if (Object.getOwnPropertySymbols) {
|
|
1334
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
1335
|
+
r && (o = o.filter(function(r2) {
|
|
1336
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
1337
|
+
})), t.push.apply(t, o);
|
|
1338
|
+
}
|
|
1339
|
+
return t;
|
|
1340
|
+
}
|
|
1341
|
+
function _objectSpread$1(e) {
|
|
1342
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
1343
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
1344
|
+
r % 2 ? ownKeys$1(Object(t), true).forEach(function(r2) {
|
|
1345
|
+
_defineProperty(e, r2, t[r2]);
|
|
1346
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r2) {
|
|
1347
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
1348
|
+
});
|
|
1349
|
+
}
|
|
1350
|
+
return e;
|
|
1351
|
+
}
|
|
1352
|
+
function makeMonitor() {
|
|
1353
|
+
var registry = /* @__PURE__ */ new Set();
|
|
1354
|
+
var dragging = null;
|
|
1355
|
+
function tryAddToActive(monitor) {
|
|
1356
|
+
if (!dragging) {
|
|
1357
|
+
return;
|
|
1358
|
+
}
|
|
1359
|
+
if (!monitor.canMonitor || monitor.canMonitor(dragging.canMonitorArgs)) {
|
|
1360
|
+
dragging.active.add(monitor);
|
|
1361
|
+
}
|
|
1362
|
+
}
|
|
1363
|
+
function monitorForConsumers(args) {
|
|
1364
|
+
var entry = _objectSpread$1({}, args);
|
|
1365
|
+
registry.add(entry);
|
|
1366
|
+
tryAddToActive(entry);
|
|
1367
|
+
function cleanup() {
|
|
1368
|
+
registry.delete(entry);
|
|
1369
|
+
if (dragging) {
|
|
1370
|
+
dragging.active.delete(entry);
|
|
1371
|
+
}
|
|
1372
|
+
}
|
|
1373
|
+
return once(cleanup);
|
|
1374
|
+
}
|
|
1375
|
+
function dispatchEvent(_ref) {
|
|
1376
|
+
var eventName = _ref.eventName, payload = _ref.payload;
|
|
1377
|
+
if (eventName === "onGenerateDragPreview") {
|
|
1378
|
+
dragging = {
|
|
1379
|
+
canMonitorArgs: {
|
|
1380
|
+
initial: payload.location.initial,
|
|
1381
|
+
source: payload.source
|
|
1382
|
+
},
|
|
1383
|
+
active: /* @__PURE__ */ new Set()
|
|
1384
|
+
};
|
|
1385
|
+
var _iterator = _createForOfIteratorHelper(registry), _step;
|
|
1386
|
+
try {
|
|
1387
|
+
for (_iterator.s(); !(_step = _iterator.n()).done; ) {
|
|
1388
|
+
var monitor = _step.value;
|
|
1389
|
+
tryAddToActive(monitor);
|
|
1390
|
+
}
|
|
1391
|
+
} catch (err) {
|
|
1392
|
+
_iterator.e(err);
|
|
1393
|
+
} finally {
|
|
1394
|
+
_iterator.f();
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1397
|
+
if (!dragging) {
|
|
1398
|
+
return;
|
|
1399
|
+
}
|
|
1400
|
+
var active = Array.from(dragging.active);
|
|
1401
|
+
for (var _i = 0, _active = active; _i < _active.length; _i++) {
|
|
1402
|
+
var _monitor = _active[_i];
|
|
1403
|
+
if (dragging.active.has(_monitor)) {
|
|
1404
|
+
var _monitor$eventName;
|
|
1405
|
+
(_monitor$eventName = _monitor[eventName]) === null || _monitor$eventName === void 0 || _monitor$eventName.call(_monitor, payload);
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
if (eventName === "onDrop") {
|
|
1409
|
+
dragging.active.clear();
|
|
1410
|
+
dragging = null;
|
|
1411
|
+
}
|
|
1412
|
+
}
|
|
1413
|
+
return {
|
|
1414
|
+
dispatchEvent,
|
|
1415
|
+
monitorForConsumers
|
|
1416
|
+
};
|
|
1417
|
+
}
|
|
1418
|
+
function makeAdapter(_ref) {
|
|
1419
|
+
var typeKey = _ref.typeKey, mount2 = _ref.mount, dispatchEventToSource2 = _ref.dispatchEventToSource, onPostDispatch = _ref.onPostDispatch, defaultDropEffect = _ref.defaultDropEffect;
|
|
1420
|
+
var monitorAPI = makeMonitor();
|
|
1421
|
+
var dropTargetAPI = makeDropTarget({
|
|
1422
|
+
typeKey,
|
|
1423
|
+
defaultDropEffect
|
|
1424
|
+
});
|
|
1425
|
+
function dispatchEvent(args) {
|
|
1426
|
+
dispatchEventToSource2 === null || dispatchEventToSource2 === void 0 || dispatchEventToSource2(args);
|
|
1427
|
+
dropTargetAPI.dispatchEvent(args);
|
|
1428
|
+
monitorAPI.dispatchEvent(args);
|
|
1429
|
+
onPostDispatch === null || onPostDispatch === void 0 || onPostDispatch(args);
|
|
1430
|
+
}
|
|
1431
|
+
function start2(_ref2) {
|
|
1432
|
+
var event = _ref2.event, dragType = _ref2.dragType;
|
|
1433
|
+
lifecycle.start({
|
|
1434
|
+
event,
|
|
1435
|
+
dragType,
|
|
1436
|
+
getDropTargetsOver: dropTargetAPI.getIsOver,
|
|
1437
|
+
dispatchEvent
|
|
1438
|
+
});
|
|
1439
|
+
}
|
|
1440
|
+
function registerUsage2() {
|
|
1441
|
+
function mountAdapter() {
|
|
1442
|
+
var api = {
|
|
1443
|
+
canStart: lifecycle.canStart,
|
|
1444
|
+
start: start2
|
|
1445
|
+
};
|
|
1446
|
+
return mount2(api);
|
|
1447
|
+
}
|
|
1448
|
+
return register({
|
|
1449
|
+
typeKey,
|
|
1450
|
+
mount: mountAdapter
|
|
1451
|
+
});
|
|
1452
|
+
}
|
|
1453
|
+
return {
|
|
1454
|
+
registerUsage: registerUsage2,
|
|
1455
|
+
dropTarget: dropTargetAPI.dropTargetForConsumers,
|
|
1456
|
+
monitor: monitorAPI.monitorForConsumers
|
|
1457
|
+
};
|
|
1458
|
+
}
|
|
1459
|
+
var isAndroid = once(function isAndroid2() {
|
|
1460
|
+
return navigator.userAgent.toLocaleLowerCase().includes("android");
|
|
1461
|
+
});
|
|
1462
|
+
var androidFallbackText = "pdnd:android-fallback";
|
|
1463
|
+
var textMediaType = "text/plain";
|
|
1464
|
+
var URLMediaType = "text/uri-list";
|
|
1465
|
+
var elementAdapterNativeDataKey = "application/vnd.pdnd";
|
|
1466
|
+
var draggableRegistry = /* @__PURE__ */ new WeakMap();
|
|
1467
|
+
function addToRegistry(args) {
|
|
1468
|
+
draggableRegistry.set(args.element, args);
|
|
1469
|
+
return function cleanup() {
|
|
1470
|
+
draggableRegistry.delete(args.element);
|
|
1471
|
+
};
|
|
1472
|
+
}
|
|
1473
|
+
var honeyPotFix = makeHoneyPotFix();
|
|
1474
|
+
var adapter = makeAdapter({
|
|
1475
|
+
typeKey: "element",
|
|
1476
|
+
defaultDropEffect: "move",
|
|
1477
|
+
mount: function mount(api) {
|
|
1478
|
+
return combine(honeyPotFix.bindEvents(), dist.bind(document, {
|
|
1479
|
+
type: "dragstart",
|
|
1480
|
+
listener: function listener(event) {
|
|
1481
|
+
var _entry$dragHandle, _entry$getInitialData, _entry$getInitialData2, _entry$dragHandle2, _entry$getInitialData3, _entry$getInitialData4;
|
|
1482
|
+
if (!api.canStart(event)) {
|
|
1483
|
+
return;
|
|
1484
|
+
}
|
|
1485
|
+
if (event.defaultPrevented) {
|
|
1486
|
+
return;
|
|
1487
|
+
}
|
|
1488
|
+
if (!event.dataTransfer) {
|
|
1489
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1490
|
+
console.warn("\n It appears as though you have are not testing DragEvents correctly.\n\n - If you are unit testing, ensure you have polyfilled DragEvent.\n - If you are browser testing, ensure you are dispatching drag events correctly.\n\n Please see our testing guides for more information:\n https://atlassian.design/components/pragmatic-drag-and-drop/core-package/testing\n ".replace(/ {2}/g, ""));
|
|
1491
|
+
}
|
|
1492
|
+
return;
|
|
1493
|
+
}
|
|
1494
|
+
var target = event.target;
|
|
1495
|
+
if (!(target instanceof HTMLElement)) {
|
|
1496
|
+
return;
|
|
1497
|
+
}
|
|
1498
|
+
var entry = draggableRegistry.get(target);
|
|
1499
|
+
if (!entry) {
|
|
1500
|
+
return;
|
|
1501
|
+
}
|
|
1502
|
+
var input = getInput(event);
|
|
1503
|
+
var feedback = {
|
|
1504
|
+
element: entry.element,
|
|
1505
|
+
dragHandle: (_entry$dragHandle = entry.dragHandle) !== null && _entry$dragHandle !== void 0 ? _entry$dragHandle : null,
|
|
1506
|
+
input
|
|
1507
|
+
};
|
|
1508
|
+
if (entry.canDrag && !entry.canDrag(feedback)) {
|
|
1509
|
+
event.preventDefault();
|
|
1510
|
+
return;
|
|
1511
|
+
}
|
|
1512
|
+
if (entry.dragHandle) {
|
|
1513
|
+
var over = getElementFromPointWithoutHoneypot({
|
|
1514
|
+
x: input.clientX,
|
|
1515
|
+
y: input.clientY
|
|
1516
|
+
});
|
|
1517
|
+
if (!entry.dragHandle.contains(over)) {
|
|
1518
|
+
event.preventDefault();
|
|
1519
|
+
return;
|
|
1520
|
+
}
|
|
1521
|
+
}
|
|
1522
|
+
var nativeData = (_entry$getInitialData = (_entry$getInitialData2 = entry.getInitialDataForExternal) === null || _entry$getInitialData2 === void 0 ? void 0 : _entry$getInitialData2.call(entry, feedback)) !== null && _entry$getInitialData !== void 0 ? _entry$getInitialData : null;
|
|
1523
|
+
if (nativeData) {
|
|
1524
|
+
for (var _i = 0, _Object$entries = Object.entries(nativeData); _i < _Object$entries.length; _i++) {
|
|
1525
|
+
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], data = _Object$entries$_i[1];
|
|
1526
|
+
event.dataTransfer.setData(key, data !== null && data !== void 0 ? data : "");
|
|
1527
|
+
}
|
|
1528
|
+
}
|
|
1529
|
+
if (isAndroid() && !event.dataTransfer.types.includes(textMediaType) && !event.dataTransfer.types.includes(URLMediaType)) {
|
|
1530
|
+
event.dataTransfer.setData(textMediaType, androidFallbackText);
|
|
1531
|
+
}
|
|
1532
|
+
event.dataTransfer.setData(elementAdapterNativeDataKey, "");
|
|
1533
|
+
var payload = {
|
|
1534
|
+
element: entry.element,
|
|
1535
|
+
dragHandle: (_entry$dragHandle2 = entry.dragHandle) !== null && _entry$dragHandle2 !== void 0 ? _entry$dragHandle2 : null,
|
|
1536
|
+
data: (_entry$getInitialData3 = (_entry$getInitialData4 = entry.getInitialData) === null || _entry$getInitialData4 === void 0 ? void 0 : _entry$getInitialData4.call(entry, feedback)) !== null && _entry$getInitialData3 !== void 0 ? _entry$getInitialData3 : {}
|
|
1537
|
+
};
|
|
1538
|
+
var dragType = {
|
|
1539
|
+
type: "element",
|
|
1540
|
+
payload,
|
|
1541
|
+
startedFrom: "internal"
|
|
1542
|
+
};
|
|
1543
|
+
api.start({
|
|
1544
|
+
event,
|
|
1545
|
+
dragType
|
|
1546
|
+
});
|
|
1547
|
+
}
|
|
1548
|
+
}));
|
|
1549
|
+
},
|
|
1550
|
+
dispatchEventToSource: function dispatchEventToSource(_ref) {
|
|
1551
|
+
var _draggableRegistry$ge, _draggableRegistry$ge2;
|
|
1552
|
+
var eventName = _ref.eventName, payload = _ref.payload;
|
|
1553
|
+
(_draggableRegistry$ge = draggableRegistry.get(payload.source.element)) === null || _draggableRegistry$ge === void 0 || (_draggableRegistry$ge2 = _draggableRegistry$ge[eventName]) === null || _draggableRegistry$ge2 === void 0 || _draggableRegistry$ge2.call(
|
|
1554
|
+
_draggableRegistry$ge,
|
|
1555
|
+
// I cannot seem to get the types right here.
|
|
1556
|
+
// TS doesn't seem to like that one event can need `nativeSetDragImage`
|
|
1557
|
+
// @ts-expect-error
|
|
1558
|
+
payload
|
|
1559
|
+
);
|
|
1560
|
+
},
|
|
1561
|
+
onPostDispatch: honeyPotFix.getOnPostDispatch()
|
|
1562
|
+
});
|
|
1563
|
+
var dropTargetForElements = adapter.dropTarget;
|
|
1564
|
+
var monitorForElements = adapter.monitor;
|
|
1565
|
+
function draggable(args) {
|
|
1566
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1567
|
+
if (args.dragHandle && !args.element.contains(args.dragHandle)) {
|
|
1568
|
+
console.warn("Drag handle element must be contained in draggable element", {
|
|
1569
|
+
element: args.element,
|
|
1570
|
+
dragHandle: args.dragHandle
|
|
1571
|
+
});
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1575
|
+
var existing = draggableRegistry.get(args.element);
|
|
1576
|
+
if (existing) {
|
|
1577
|
+
console.warn("You have already registered a `draggable` on the same element", {
|
|
1578
|
+
existing,
|
|
1579
|
+
proposed: args
|
|
1580
|
+
});
|
|
1581
|
+
}
|
|
1582
|
+
}
|
|
1583
|
+
var cleanup = combine(
|
|
1584
|
+
// making the draggable register the adapter rather than drop targets
|
|
1585
|
+
// this is because you *must* have a draggable element to start a drag
|
|
1586
|
+
// but you _might_ not have any drop targets immediately
|
|
1587
|
+
// (You might create drop targets async)
|
|
1588
|
+
adapter.registerUsage(),
|
|
1589
|
+
addToRegistry(args),
|
|
1590
|
+
addAttribute(args.element, {
|
|
1591
|
+
attribute: "draggable",
|
|
1592
|
+
value: "true"
|
|
1593
|
+
})
|
|
1594
|
+
);
|
|
1595
|
+
return once(cleanup);
|
|
1596
|
+
}
|
|
1597
|
+
var isSafariOnIOS = once(function isSafariOnIOS2() {
|
|
1598
|
+
if (process.env.NODE_ENV === "test") {
|
|
1599
|
+
return false;
|
|
1600
|
+
}
|
|
1601
|
+
return isSafari() && "ontouchend" in document;
|
|
1602
|
+
});
|
|
1603
|
+
var centerUnderPointer = function centerUnderPointer2(_ref) {
|
|
1604
|
+
var container = _ref.container;
|
|
1605
|
+
var rect = container.getBoundingClientRect();
|
|
1606
|
+
return {
|
|
1607
|
+
x: rect.width / 2,
|
|
1608
|
+
y: rect.height / 2
|
|
1609
|
+
};
|
|
1610
|
+
};
|
|
1611
|
+
function pointerOutsideOfPreview(point) {
|
|
1612
|
+
return function getOffset(_ref) {
|
|
1613
|
+
var container = _ref.container;
|
|
1614
|
+
if (isSafariOnIOS() || isAndroid()) {
|
|
1615
|
+
return centerUnderPointer({
|
|
1616
|
+
container
|
|
1617
|
+
});
|
|
1618
|
+
}
|
|
1619
|
+
Object.assign(container.style, {
|
|
1620
|
+
borderInlineStart: "".concat(point.x, " solid transparent"),
|
|
1621
|
+
borderTop: "".concat(point.y, " solid transparent")
|
|
1622
|
+
});
|
|
1623
|
+
var computed = window.getComputedStyle(container);
|
|
1624
|
+
if (computed.direction === "rtl") {
|
|
1625
|
+
var box = container.getBoundingClientRect();
|
|
1626
|
+
return {
|
|
1627
|
+
x: box.width,
|
|
1628
|
+
y: 0
|
|
1629
|
+
};
|
|
1630
|
+
}
|
|
1631
|
+
return {
|
|
1632
|
+
x: 0,
|
|
1633
|
+
y: 0
|
|
1634
|
+
};
|
|
1635
|
+
};
|
|
1636
|
+
}
|
|
1637
|
+
function defaultOffset() {
|
|
1638
|
+
return {
|
|
1639
|
+
x: 0,
|
|
1640
|
+
y: 0
|
|
1641
|
+
};
|
|
1642
|
+
}
|
|
1643
|
+
function setCustomNativeDragPreview(_ref) {
|
|
1644
|
+
var render = _ref.render, nativeSetDragImage = _ref.nativeSetDragImage, _ref$getOffset = _ref.getOffset, getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
|
|
1645
|
+
var container = document.createElement("div");
|
|
1646
|
+
Object.assign(container.style, {
|
|
1647
|
+
// Ensuring we don't cause reflow when adding the element to the page
|
|
1648
|
+
// Using `position:fixed` rather than `position:absolute` so we are
|
|
1649
|
+
// positioned on the current viewport.
|
|
1650
|
+
// `position:fixed` also creates a new stacking context, so we don't need to do that here
|
|
1651
|
+
position: "fixed",
|
|
1652
|
+
// According to `mdn`, the element can be offscreen:
|
|
1653
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
|
|
1654
|
+
//
|
|
1655
|
+
// However, that information does not appear in the specs:
|
|
1656
|
+
// https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage-dev
|
|
1657
|
+
//
|
|
1658
|
+
// If the element is _completely_ offscreen, Safari@17.1 will cancel the drag
|
|
1659
|
+
top: 0,
|
|
1660
|
+
left: 0,
|
|
1661
|
+
// Using maximum possible z-index so that this element will always be on top
|
|
1662
|
+
// https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
|
|
1663
|
+
// Did not use `layers` in `@atlaskit/theme` because:
|
|
1664
|
+
// 1. This element is not a 'layer' in the conventional sense, as this element
|
|
1665
|
+
// is only created for a single frame for the browser to take a photo of it,
|
|
1666
|
+
// and then it is destroyed
|
|
1667
|
+
// 2. Did not want to add a dependency onto `@atlaskit/theme`
|
|
1668
|
+
// 3. Want to always be on top of product UI which might have higher z-index's
|
|
1669
|
+
zIndex: maxZIndex,
|
|
1670
|
+
// Avoiding any additional events caused by the new element (being super safe)
|
|
1671
|
+
pointerEvents: "none"
|
|
1672
|
+
});
|
|
1673
|
+
document.body.append(container);
|
|
1674
|
+
var unmount = render({
|
|
1675
|
+
container
|
|
1676
|
+
});
|
|
1677
|
+
queueMicrotask(function() {
|
|
1678
|
+
var previewOffset = getOffset({
|
|
1679
|
+
container
|
|
1680
|
+
});
|
|
1681
|
+
if (isSafari()) {
|
|
1682
|
+
var rect = container.getBoundingClientRect();
|
|
1683
|
+
if (rect.width === 0) {
|
|
1684
|
+
return;
|
|
1685
|
+
}
|
|
1686
|
+
container.style.left = "-".concat(rect.width - 1e-4, "px");
|
|
1687
|
+
}
|
|
1688
|
+
nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
|
|
1689
|
+
});
|
|
1690
|
+
function cleanup() {
|
|
1691
|
+
unbindMonitor();
|
|
1692
|
+
unmount === null || unmount === void 0 || unmount();
|
|
1693
|
+
document.body.removeChild(container);
|
|
1694
|
+
}
|
|
1695
|
+
var unbindMonitor = monitorForElements({
|
|
1696
|
+
// Remove portal in the dragstart event so that the user will never see it
|
|
1697
|
+
onDragStart: cleanup,
|
|
1698
|
+
// Backup: remove portal when the drop finishes (this would be an error case)
|
|
1699
|
+
onDrop: cleanup
|
|
1700
|
+
});
|
|
1701
|
+
}
|
|
1702
|
+
function reorder(_ref) {
|
|
1703
|
+
var list = _ref.list, startIndex = _ref.startIndex, finishIndex = _ref.finishIndex;
|
|
1704
|
+
if (startIndex === -1 || finishIndex === -1) {
|
|
1705
|
+
return Array.from(list);
|
|
1706
|
+
}
|
|
1707
|
+
var result = Array.from(list);
|
|
1708
|
+
var _result$splice = result.splice(startIndex, 1), _result$splice2 = _slicedToArray(_result$splice, 1), removed = _result$splice2[0];
|
|
1709
|
+
result.splice(finishIndex, 0, removed);
|
|
1710
|
+
return result;
|
|
1711
|
+
}
|
|
1712
|
+
function ownKeys(e, r) {
|
|
1713
|
+
var t = Object.keys(e);
|
|
1714
|
+
if (Object.getOwnPropertySymbols) {
|
|
1715
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
1716
|
+
r && (o = o.filter(function(r2) {
|
|
1717
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
1718
|
+
})), t.push.apply(t, o);
|
|
1719
|
+
}
|
|
1720
|
+
return t;
|
|
1721
|
+
}
|
|
1722
|
+
function _objectSpread(e) {
|
|
1723
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
1724
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
1725
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
1726
|
+
_defineProperty(e, r2, t[r2]);
|
|
1727
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
1728
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
1729
|
+
});
|
|
1730
|
+
}
|
|
1731
|
+
return e;
|
|
1732
|
+
}
|
|
1733
|
+
var getDistanceToEdge = {
|
|
1734
|
+
top: function top(rect, client) {
|
|
1735
|
+
return Math.abs(client.y - rect.top);
|
|
1736
|
+
},
|
|
1737
|
+
right: function right(rect, client) {
|
|
1738
|
+
return Math.abs(rect.right - client.x);
|
|
1739
|
+
},
|
|
1740
|
+
bottom: function bottom(rect, client) {
|
|
1741
|
+
return Math.abs(rect.bottom - client.y);
|
|
1742
|
+
},
|
|
1743
|
+
left: function left(rect, client) {
|
|
1744
|
+
return Math.abs(client.x - rect.left);
|
|
1745
|
+
}
|
|
1746
|
+
};
|
|
1747
|
+
var uniqueKey = Symbol("closestEdge");
|
|
1748
|
+
function attachClosestEdge(userData, _ref) {
|
|
1749
|
+
var _entries$sort$0$edge, _entries$sort$;
|
|
1750
|
+
var element = _ref.element, input = _ref.input, allowedEdges = _ref.allowedEdges;
|
|
1751
|
+
var client = {
|
|
1752
|
+
x: input.clientX,
|
|
1753
|
+
y: input.clientY
|
|
1754
|
+
};
|
|
1755
|
+
var rect = element.getBoundingClientRect();
|
|
1756
|
+
var entries = allowedEdges.map(function(edge) {
|
|
1757
|
+
return {
|
|
1758
|
+
edge,
|
|
1759
|
+
value: getDistanceToEdge[edge](rect, client)
|
|
1760
|
+
};
|
|
1761
|
+
});
|
|
1762
|
+
var addClosestEdge = (_entries$sort$0$edge = (_entries$sort$ = entries.sort(function(a, b) {
|
|
1763
|
+
return a.value - b.value;
|
|
1764
|
+
})[0]) === null || _entries$sort$ === void 0 ? void 0 : _entries$sort$.edge) !== null && _entries$sort$0$edge !== void 0 ? _entries$sort$0$edge : null;
|
|
1765
|
+
return _objectSpread(_objectSpread({}, userData), {}, _defineProperty({}, uniqueKey, addClosestEdge));
|
|
1766
|
+
}
|
|
1767
|
+
function extractClosestEdge(userData) {
|
|
1768
|
+
var _ref2;
|
|
1769
|
+
return (_ref2 = userData[uniqueKey]) !== null && _ref2 !== void 0 ? _ref2 : null;
|
|
1770
|
+
}
|
|
1771
|
+
const StatusManager = () => {
|
|
1772
|
+
const [statuses, setStatuses] = useState([]);
|
|
1773
|
+
const [newStatus, setNewStatus] = useState("");
|
|
1774
|
+
const [statusToDelete, setStatusToDelete] = useState(null);
|
|
1775
|
+
const [replacementStatus, setReplacementStatus] = useState("");
|
|
1776
|
+
const { get, post, put } = useFetchClient();
|
|
1777
|
+
const [instanceId] = useState(() => Symbol("instance-id"));
|
|
1778
|
+
useEffect(() => {
|
|
1779
|
+
const loadStatuses = async () => {
|
|
1780
|
+
const { data } = await get("primershop-status-manager/statuses");
|
|
1781
|
+
setStatuses(data);
|
|
1782
|
+
};
|
|
1783
|
+
loadStatuses();
|
|
1784
|
+
}, [get]);
|
|
1785
|
+
const validateInput = (value) => /^[a-zA-Z\s]+$/.test(value);
|
|
1786
|
+
const addStatus = async () => {
|
|
1787
|
+
if (!newStatus || !validateInput(newStatus))
|
|
1788
|
+
return alert("Only Latin characters allowed!");
|
|
1789
|
+
try {
|
|
1790
|
+
const { data } = await post("primershop-status-manager/status", {
|
|
1791
|
+
name: newStatus,
|
|
1792
|
+
published: false
|
|
1793
|
+
});
|
|
1794
|
+
setStatuses([...statuses, data]);
|
|
1795
|
+
setNewStatus("");
|
|
1796
|
+
} catch (error) {
|
|
1797
|
+
console.error("Error creating status:", error);
|
|
1798
|
+
}
|
|
1799
|
+
};
|
|
1800
|
+
const reorderItem = useCallback(
|
|
1801
|
+
async ({
|
|
1802
|
+
startIndex,
|
|
1803
|
+
indexOfTarget,
|
|
1804
|
+
closestEdgeOfTarget
|
|
1805
|
+
}) => {
|
|
1806
|
+
let finishIndex = indexOfTarget;
|
|
1807
|
+
if (closestEdgeOfTarget === "bottom") {
|
|
1808
|
+
finishIndex = indexOfTarget + 1;
|
|
1809
|
+
}
|
|
1810
|
+
if (startIndex < finishIndex) {
|
|
1811
|
+
finishIndex--;
|
|
1812
|
+
}
|
|
1813
|
+
if (finishIndex === startIndex) {
|
|
1814
|
+
return;
|
|
1815
|
+
}
|
|
1816
|
+
const reordered = reorder({
|
|
1817
|
+
list: statuses,
|
|
1818
|
+
startIndex,
|
|
1819
|
+
finishIndex
|
|
1820
|
+
});
|
|
1821
|
+
const orderedIds = reordered.map((status, index) => ({
|
|
1822
|
+
documentId: status.documentId,
|
|
1823
|
+
order: index
|
|
1824
|
+
}));
|
|
1825
|
+
await put("/primershop-status-manager/statuses/reorder", {
|
|
1826
|
+
statuses: orderedIds
|
|
1827
|
+
});
|
|
1828
|
+
setStatuses(reordered);
|
|
1829
|
+
},
|
|
1830
|
+
[statuses, put]
|
|
1831
|
+
);
|
|
1832
|
+
useEffect(() => {
|
|
1833
|
+
const statusElements = document.querySelectorAll("[data-status-id]");
|
|
1834
|
+
const cleanupFunctions = [];
|
|
1835
|
+
statusElements.forEach((element) => {
|
|
1836
|
+
const statusId = element.getAttribute("data-status-id");
|
|
1837
|
+
const index = statuses.findIndex((s) => s.documentId === statusId);
|
|
1838
|
+
const dragHandle = element.querySelector("[data-drag-handle]");
|
|
1839
|
+
if (!dragHandle) return;
|
|
1840
|
+
const draggableCleanup = draggable({
|
|
1841
|
+
element: dragHandle,
|
|
1842
|
+
getInitialData: () => ({
|
|
1843
|
+
statusId,
|
|
1844
|
+
index,
|
|
1845
|
+
instanceId
|
|
1846
|
+
}),
|
|
1847
|
+
onGenerateDragPreview({ nativeSetDragImage }) {
|
|
1848
|
+
setCustomNativeDragPreview({
|
|
1849
|
+
nativeSetDragImage,
|
|
1850
|
+
getOffset: pointerOutsideOfPreview({
|
|
1851
|
+
x: "16px",
|
|
1852
|
+
y: "8px"
|
|
1853
|
+
}),
|
|
1854
|
+
render({ container }) {
|
|
1855
|
+
const preview = document.createElement("div");
|
|
1856
|
+
preview.style.padding = "8px 16px";
|
|
1857
|
+
preview.style.backgroundColor = "#fff";
|
|
1858
|
+
preview.style.border = "1px solid #ccc";
|
|
1859
|
+
preview.style.borderRadius = "4px";
|
|
1860
|
+
preview.style.boxShadow = "0 2px 4px rgba(0,0,0,0.1)";
|
|
1861
|
+
const statusNameElement = element.querySelector("[data-status-name]");
|
|
1862
|
+
preview.textContent = statusNameElement?.textContent || "";
|
|
1863
|
+
container.appendChild(preview);
|
|
1864
|
+
return () => container.removeChild(preview);
|
|
1865
|
+
}
|
|
1866
|
+
});
|
|
1867
|
+
}
|
|
1868
|
+
});
|
|
1869
|
+
const dropTargetCleanup = dropTargetForElements({
|
|
1870
|
+
element,
|
|
1871
|
+
canDrop: ({ source }) => source.data.instanceId === instanceId,
|
|
1872
|
+
getData({ input }) {
|
|
1873
|
+
return attachClosestEdge(
|
|
1874
|
+
{ statusId, index, instanceId },
|
|
1875
|
+
{
|
|
1876
|
+
element,
|
|
1877
|
+
input,
|
|
1878
|
+
allowedEdges: ["top", "bottom"]
|
|
1879
|
+
}
|
|
1880
|
+
);
|
|
1881
|
+
},
|
|
1882
|
+
onDrag({ source, self: self2 }) {
|
|
1883
|
+
const isSource = source.element === dragHandle;
|
|
1884
|
+
if (isSource) return;
|
|
1885
|
+
const closestEdge = extractClosestEdge(self2.data);
|
|
1886
|
+
const sourceIndex = Number(source.data.index);
|
|
1887
|
+
const isItemBeforeSource = index === sourceIndex - 1;
|
|
1888
|
+
const isItemAfterSource = index === sourceIndex + 1;
|
|
1889
|
+
const isDropIndicatorHidden = isItemBeforeSource && closestEdge === "bottom" || isItemAfterSource && closestEdge === "top";
|
|
1890
|
+
if (isDropIndicatorHidden) return;
|
|
1891
|
+
element.style.background = `linear-gradient(${closestEdge === "top" ? 180 : 0}deg, rgba(136,131,214,0.4) 0%, rgba(255,255,255,0) 50%)`;
|
|
1892
|
+
},
|
|
1893
|
+
onDragLeave() {
|
|
1894
|
+
element.style.background = "";
|
|
1895
|
+
},
|
|
1896
|
+
onDrop({ source, self: self2 }) {
|
|
1897
|
+
element.style.background = "";
|
|
1898
|
+
const sourceData = source.data;
|
|
1899
|
+
const targetData = self2.data;
|
|
1900
|
+
const indexOfTarget = statuses.findIndex(
|
|
1901
|
+
(s) => s.documentId === targetData.statusId
|
|
1902
|
+
);
|
|
1903
|
+
if (indexOfTarget < 0) return;
|
|
1904
|
+
const closestEdgeOfTarget = extractClosestEdge(targetData);
|
|
1905
|
+
reorderItem({
|
|
1906
|
+
startIndex: sourceData.index,
|
|
1907
|
+
indexOfTarget,
|
|
1908
|
+
closestEdgeOfTarget
|
|
1909
|
+
});
|
|
1910
|
+
}
|
|
1911
|
+
});
|
|
1912
|
+
const combinedCleanup = combine(draggableCleanup, dropTargetCleanup);
|
|
1913
|
+
cleanupFunctions.push(combinedCleanup);
|
|
1914
|
+
});
|
|
1915
|
+
const monitorCleanup = monitorForElements({
|
|
1916
|
+
canMonitor: ({ source }) => source.data.instanceId === instanceId,
|
|
1917
|
+
onDrop({ location, source }) {
|
|
1918
|
+
const target = location.current.dropTargets[0];
|
|
1919
|
+
if (!target) return;
|
|
1920
|
+
const sourceData = source.data;
|
|
1921
|
+
const targetData = target.data;
|
|
1922
|
+
const indexOfTarget = statuses.findIndex(
|
|
1923
|
+
(s) => s.documentId === targetData.statusId
|
|
1924
|
+
);
|
|
1925
|
+
if (indexOfTarget < 0) return;
|
|
1926
|
+
const closestEdgeOfTarget = extractClosestEdge(targetData);
|
|
1927
|
+
reorderItem({
|
|
1928
|
+
startIndex: sourceData.index,
|
|
1929
|
+
indexOfTarget,
|
|
1930
|
+
closestEdgeOfTarget
|
|
1931
|
+
});
|
|
1932
|
+
}
|
|
1933
|
+
});
|
|
1934
|
+
return () => {
|
|
1935
|
+
cleanupFunctions.forEach((cleanup) => cleanup());
|
|
1936
|
+
monitorCleanup();
|
|
1937
|
+
};
|
|
1938
|
+
}, [statuses, reorderItem, instanceId]);
|
|
1939
|
+
const confirmDelete = (status) => {
|
|
1940
|
+
setStatusToDelete(status);
|
|
1941
|
+
};
|
|
1942
|
+
const deleteStatus = async () => {
|
|
1943
|
+
if (!replacementStatus) return alert("Select a replacement status!");
|
|
1944
|
+
const replacementStatusObj = statuses.find(
|
|
1945
|
+
(s) => s.name === replacementStatus
|
|
1946
|
+
);
|
|
1947
|
+
if (!replacementStatusObj) return alert("Replacement status not found!");
|
|
1948
|
+
try {
|
|
1949
|
+
await put("/primershop-status-manager/statuses/delete", {
|
|
1950
|
+
statusId: statusToDelete?.documentId,
|
|
1951
|
+
replacementId: replacementStatusObj.documentId
|
|
1952
|
+
});
|
|
1953
|
+
setStatuses(
|
|
1954
|
+
statuses.filter((s) => s.documentId !== statusToDelete?.documentId)
|
|
1955
|
+
);
|
|
1956
|
+
setStatusToDelete(null);
|
|
1957
|
+
setReplacementStatus("");
|
|
1958
|
+
} catch (error) {
|
|
1959
|
+
console.error("Error deleting status:", error);
|
|
1960
|
+
}
|
|
1961
|
+
};
|
|
1962
|
+
const togglePublish = async (id, published) => {
|
|
1963
|
+
try {
|
|
1964
|
+
await put(`/primershop-status-manager/statuses/${id}`, {
|
|
1965
|
+
published: !published
|
|
1966
|
+
});
|
|
1967
|
+
setStatuses(
|
|
1968
|
+
statuses.map(
|
|
1969
|
+
(s) => s.documentId === id ? { ...s, published: !published } : s
|
|
1970
|
+
)
|
|
1971
|
+
);
|
|
1972
|
+
} catch (error) {
|
|
1973
|
+
console.error("Error toggling publish status:", error);
|
|
1974
|
+
}
|
|
1975
|
+
};
|
|
1976
|
+
return /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
|
|
1977
|
+
/* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Status Manager" }),
|
|
1978
|
+
/* @__PURE__ */ jsxs(Flex, { marginTop: 4, gap: 2, children: [
|
|
1979
|
+
/* @__PURE__ */ jsx(
|
|
1980
|
+
TextInput,
|
|
1981
|
+
{
|
|
1982
|
+
placeholder: "Enter a status...",
|
|
1983
|
+
value: newStatus,
|
|
1984
|
+
onChange: (e) => setNewStatus(e.target.value)
|
|
1985
|
+
}
|
|
1986
|
+
),
|
|
1987
|
+
/* @__PURE__ */ jsx(Button, { onClick: addStatus, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: "Add Status" })
|
|
1988
|
+
] }),
|
|
1989
|
+
/* @__PURE__ */ jsx(Box, { marginTop: 4, children: statuses.map((status) => /* @__PURE__ */ jsxs(
|
|
1990
|
+
Flex,
|
|
1991
|
+
{
|
|
1992
|
+
"data-status-id": status.documentId,
|
|
1993
|
+
alignItems: "center",
|
|
1994
|
+
gap: 2,
|
|
1995
|
+
marginBottom: 2,
|
|
1996
|
+
paddingBottom: 2,
|
|
1997
|
+
style: {
|
|
1998
|
+
borderBottom: `1px solid gray`,
|
|
1999
|
+
minWidth: 300,
|
|
2000
|
+
userSelect: "none",
|
|
2001
|
+
touchAction: "none"
|
|
2002
|
+
},
|
|
2003
|
+
children: [
|
|
2004
|
+
/* @__PURE__ */ jsx(
|
|
2005
|
+
Box,
|
|
2006
|
+
{
|
|
2007
|
+
"data-drag-handle": true,
|
|
2008
|
+
style: {
|
|
2009
|
+
cursor: "grab",
|
|
2010
|
+
padding: "4px",
|
|
2011
|
+
display: "flex",
|
|
2012
|
+
alignItems: "center"
|
|
2013
|
+
},
|
|
2014
|
+
children: /* @__PURE__ */ jsx(Drag, {})
|
|
2015
|
+
},
|
|
2016
|
+
`dragHandle-${status.documentId}`
|
|
2017
|
+
),
|
|
2018
|
+
/* @__PURE__ */ jsx(
|
|
2019
|
+
Typography,
|
|
2020
|
+
{
|
|
2021
|
+
variant: "sigma",
|
|
2022
|
+
style: { display: "inline-block", marginRight: "auto" },
|
|
2023
|
+
"data-status-name": true,
|
|
2024
|
+
children: status.name
|
|
2025
|
+
}
|
|
2026
|
+
),
|
|
2027
|
+
/* @__PURE__ */ jsx(
|
|
2028
|
+
Button,
|
|
2029
|
+
{
|
|
2030
|
+
variant: status.published ? "success-light" : "secondary",
|
|
2031
|
+
onClick: () => togglePublish(status.documentId, status.published),
|
|
2032
|
+
children: status.published ? "Published" : "Unpublished"
|
|
2033
|
+
}
|
|
2034
|
+
),
|
|
2035
|
+
/* @__PURE__ */ jsxs(Dialog.Root, { onOpenChange: () => confirmDelete(status), children: [
|
|
2036
|
+
/* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Trash, {}), children: "Delete" }) }),
|
|
2037
|
+
/* @__PURE__ */ jsxs(Dialog.Content, { children: [
|
|
2038
|
+
/* @__PURE__ */ jsx(Dialog.Header, { children: "Delete status" }),
|
|
2039
|
+
statuses.length > 1 && statusToDelete && /* @__PURE__ */ jsxs(Dialog.Body, { children: [
|
|
2040
|
+
/* @__PURE__ */ jsx(Typography, { children: "Choose a replacement status before deleting:" }),
|
|
2041
|
+
/* @__PURE__ */ jsx(
|
|
2042
|
+
SingleSelect,
|
|
2043
|
+
{
|
|
2044
|
+
onChange: (value) => setReplacementStatus(value),
|
|
2045
|
+
placeholder: "Select replacement",
|
|
2046
|
+
children: statuses.filter(
|
|
2047
|
+
(s) => s.documentId !== statusToDelete.documentId
|
|
2048
|
+
).map((s) => /* @__PURE__ */ jsx(
|
|
2049
|
+
SingleSelectOption,
|
|
2050
|
+
{
|
|
2051
|
+
value: s.name,
|
|
2052
|
+
children: s.name
|
|
2053
|
+
},
|
|
2054
|
+
`statusChoice-${s.documentId}`
|
|
2055
|
+
))
|
|
2056
|
+
}
|
|
2057
|
+
),
|
|
2058
|
+
replacementStatus && /* @__PURE__ */ jsxs(Typography, { children: [
|
|
2059
|
+
"Replacing ",
|
|
2060
|
+
statusToDelete.name,
|
|
2061
|
+
" with ",
|
|
2062
|
+
replacementStatus
|
|
2063
|
+
] })
|
|
2064
|
+
] }),
|
|
2065
|
+
/* @__PURE__ */ jsxs(Dialog.Footer, { children: [
|
|
2066
|
+
/* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "tertiary", children: "Cancel" }) }),
|
|
2067
|
+
/* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(
|
|
2068
|
+
Button,
|
|
2069
|
+
{
|
|
2070
|
+
fullWidth: true,
|
|
2071
|
+
variant: "danger-light",
|
|
2072
|
+
onClick: deleteStatus,
|
|
2073
|
+
children: "Yes, delete"
|
|
2074
|
+
}
|
|
2075
|
+
) })
|
|
2076
|
+
] })
|
|
2077
|
+
] })
|
|
2078
|
+
] })
|
|
2079
|
+
]
|
|
2080
|
+
},
|
|
2081
|
+
`status-${status.documentId}`
|
|
2082
|
+
)) }, statuses.length)
|
|
2083
|
+
] });
|
|
2084
|
+
};
|
|
2085
|
+
const HomePage = () => {
|
|
2086
|
+
return /* @__PURE__ */ jsxs(Layouts.Root, { children: [
|
|
2087
|
+
/* @__PURE__ */ jsx(Page.Title, { children: "Status Manager" }),
|
|
2088
|
+
/* @__PURE__ */ jsx(Page.Main, { children: /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.accessStatusManager, children: /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
2089
|
+
Flex,
|
|
2090
|
+
{
|
|
2091
|
+
padding: 10,
|
|
2092
|
+
gap: {
|
|
2093
|
+
initial: 1,
|
|
2094
|
+
medium: 4,
|
|
2095
|
+
large: 8
|
|
2096
|
+
},
|
|
2097
|
+
direction: {
|
|
2098
|
+
initial: "column",
|
|
2099
|
+
medium: "row"
|
|
2100
|
+
},
|
|
2101
|
+
alignItems: {
|
|
2102
|
+
initial: "center",
|
|
2103
|
+
medium: "flex-start"
|
|
2104
|
+
},
|
|
2105
|
+
children: /* @__PURE__ */ jsxs(Box, { padding: 1, children: [
|
|
2106
|
+
/* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Status manager" }),
|
|
2107
|
+
/* @__PURE__ */ jsx(StatusManager, {})
|
|
2108
|
+
] })
|
|
2109
|
+
}
|
|
2110
|
+
) }) }) }) })
|
|
2111
|
+
] });
|
|
2112
|
+
};
|
|
2113
|
+
export {
|
|
2114
|
+
HomePage
|
|
2115
|
+
};
|