@lodashventure/medusa-banner 0.0.8 → 0.1.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.
|
@@ -3,651 +3,13 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
3
3
|
const adminSdk = require("@medusajs/admin-sdk");
|
|
4
4
|
const icons = require("@medusajs/icons");
|
|
5
5
|
const core = require("@dnd-kit/core");
|
|
6
|
-
const
|
|
6
|
+
const sortable = require("@dnd-kit/sortable");
|
|
7
7
|
const ui = require("@medusajs/ui");
|
|
8
8
|
const lucideReact = require("lucide-react");
|
|
9
|
+
const react = require("react");
|
|
9
10
|
const reactQuery = require("@tanstack/react-query");
|
|
11
|
+
const utilities = require("@dnd-kit/utilities");
|
|
10
12
|
const reactDropzone = require("react-dropzone");
|
|
11
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
12
|
-
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
13
|
-
function useCombinedRefs() {
|
|
14
|
-
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
15
|
-
refs[_key] = arguments[_key];
|
|
16
|
-
}
|
|
17
|
-
return React.useMemo(
|
|
18
|
-
() => (node) => {
|
|
19
|
-
refs.forEach((ref) => ref(node));
|
|
20
|
-
},
|
|
21
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
22
|
-
refs
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
26
|
-
function isWindow(element) {
|
|
27
|
-
const elementString = Object.prototype.toString.call(element);
|
|
28
|
-
return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
|
|
29
|
-
elementString === "[object global]";
|
|
30
|
-
}
|
|
31
|
-
function isNode(node) {
|
|
32
|
-
return "nodeType" in node;
|
|
33
|
-
}
|
|
34
|
-
function getWindow(target) {
|
|
35
|
-
var _target$ownerDocument, _target$ownerDocument2;
|
|
36
|
-
if (!target) {
|
|
37
|
-
return window;
|
|
38
|
-
}
|
|
39
|
-
if (isWindow(target)) {
|
|
40
|
-
return target;
|
|
41
|
-
}
|
|
42
|
-
if (!isNode(target)) {
|
|
43
|
-
return window;
|
|
44
|
-
}
|
|
45
|
-
return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
|
|
46
|
-
}
|
|
47
|
-
const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
|
|
48
|
-
let ids = {};
|
|
49
|
-
function useUniqueId(prefix, value) {
|
|
50
|
-
return React.useMemo(() => {
|
|
51
|
-
if (value) {
|
|
52
|
-
return value;
|
|
53
|
-
}
|
|
54
|
-
const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
|
|
55
|
-
ids[prefix] = id;
|
|
56
|
-
return prefix + "-" + id;
|
|
57
|
-
}, [prefix, value]);
|
|
58
|
-
}
|
|
59
|
-
function createAdjustmentFn(modifier) {
|
|
60
|
-
return function(object) {
|
|
61
|
-
for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
62
|
-
adjustments[_key - 1] = arguments[_key];
|
|
63
|
-
}
|
|
64
|
-
return adjustments.reduce((accumulator, adjustment) => {
|
|
65
|
-
const entries = Object.entries(adjustment);
|
|
66
|
-
for (const [key, valueAdjustment] of entries) {
|
|
67
|
-
const value = accumulator[key];
|
|
68
|
-
if (value != null) {
|
|
69
|
-
accumulator[key] = value + modifier * valueAdjustment;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return accumulator;
|
|
73
|
-
}, {
|
|
74
|
-
...object
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
const subtract = /* @__PURE__ */ createAdjustmentFn(-1);
|
|
79
|
-
function isKeyboardEvent(event) {
|
|
80
|
-
if (!event) {
|
|
81
|
-
return false;
|
|
82
|
-
}
|
|
83
|
-
const {
|
|
84
|
-
KeyboardEvent
|
|
85
|
-
} = getWindow(event.target);
|
|
86
|
-
return KeyboardEvent && event instanceof KeyboardEvent;
|
|
87
|
-
}
|
|
88
|
-
const CSS = /* @__PURE__ */ Object.freeze({
|
|
89
|
-
Translate: {
|
|
90
|
-
toString(transform) {
|
|
91
|
-
if (!transform) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
const {
|
|
95
|
-
x,
|
|
96
|
-
y
|
|
97
|
-
} = transform;
|
|
98
|
-
return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
Scale: {
|
|
102
|
-
toString(transform) {
|
|
103
|
-
if (!transform) {
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
const {
|
|
107
|
-
scaleX,
|
|
108
|
-
scaleY
|
|
109
|
-
} = transform;
|
|
110
|
-
return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
Transform: {
|
|
114
|
-
toString(transform) {
|
|
115
|
-
if (!transform) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
Transition: {
|
|
122
|
-
toString(_ref) {
|
|
123
|
-
let {
|
|
124
|
-
property,
|
|
125
|
-
duration,
|
|
126
|
-
easing
|
|
127
|
-
} = _ref;
|
|
128
|
-
return property + " " + duration + "ms " + easing;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
function arrayMove(array, from, to) {
|
|
133
|
-
const newArray = array.slice();
|
|
134
|
-
newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
|
|
135
|
-
return newArray;
|
|
136
|
-
}
|
|
137
|
-
function getSortedRects(items, rects) {
|
|
138
|
-
return items.reduce((accumulator, id, index) => {
|
|
139
|
-
const rect = rects.get(id);
|
|
140
|
-
if (rect) {
|
|
141
|
-
accumulator[index] = rect;
|
|
142
|
-
}
|
|
143
|
-
return accumulator;
|
|
144
|
-
}, Array(items.length));
|
|
145
|
-
}
|
|
146
|
-
function isValidIndex(index) {
|
|
147
|
-
return index !== null && index >= 0;
|
|
148
|
-
}
|
|
149
|
-
function itemsEqual(a, b) {
|
|
150
|
-
if (a === b) {
|
|
151
|
-
return true;
|
|
152
|
-
}
|
|
153
|
-
if (a.length !== b.length) {
|
|
154
|
-
return false;
|
|
155
|
-
}
|
|
156
|
-
for (let i = 0; i < a.length; i++) {
|
|
157
|
-
if (a[i] !== b[i]) {
|
|
158
|
-
return false;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
return true;
|
|
162
|
-
}
|
|
163
|
-
function normalizeDisabled(disabled) {
|
|
164
|
-
if (typeof disabled === "boolean") {
|
|
165
|
-
return {
|
|
166
|
-
draggable: disabled,
|
|
167
|
-
droppable: disabled
|
|
168
|
-
};
|
|
169
|
-
}
|
|
170
|
-
return disabled;
|
|
171
|
-
}
|
|
172
|
-
const rectSortingStrategy = (_ref) => {
|
|
173
|
-
let {
|
|
174
|
-
rects,
|
|
175
|
-
activeIndex,
|
|
176
|
-
overIndex,
|
|
177
|
-
index
|
|
178
|
-
} = _ref;
|
|
179
|
-
const newRects = arrayMove(rects, overIndex, activeIndex);
|
|
180
|
-
const oldRect = rects[index];
|
|
181
|
-
const newRect = newRects[index];
|
|
182
|
-
if (!newRect || !oldRect) {
|
|
183
|
-
return null;
|
|
184
|
-
}
|
|
185
|
-
return {
|
|
186
|
-
x: newRect.left - oldRect.left,
|
|
187
|
-
y: newRect.top - oldRect.top,
|
|
188
|
-
scaleX: newRect.width / oldRect.width,
|
|
189
|
-
scaleY: newRect.height / oldRect.height
|
|
190
|
-
};
|
|
191
|
-
};
|
|
192
|
-
const ID_PREFIX = "Sortable";
|
|
193
|
-
const Context = /* @__PURE__ */ React__default.default.createContext({
|
|
194
|
-
activeIndex: -1,
|
|
195
|
-
containerId: ID_PREFIX,
|
|
196
|
-
disableTransforms: false,
|
|
197
|
-
items: [],
|
|
198
|
-
overIndex: -1,
|
|
199
|
-
useDragOverlay: false,
|
|
200
|
-
sortedRects: [],
|
|
201
|
-
strategy: rectSortingStrategy,
|
|
202
|
-
disabled: {
|
|
203
|
-
draggable: false,
|
|
204
|
-
droppable: false
|
|
205
|
-
}
|
|
206
|
-
});
|
|
207
|
-
function SortableContext(_ref) {
|
|
208
|
-
let {
|
|
209
|
-
children,
|
|
210
|
-
id,
|
|
211
|
-
items: userDefinedItems,
|
|
212
|
-
strategy = rectSortingStrategy,
|
|
213
|
-
disabled: disabledProp = false
|
|
214
|
-
} = _ref;
|
|
215
|
-
const {
|
|
216
|
-
active,
|
|
217
|
-
dragOverlay,
|
|
218
|
-
droppableRects,
|
|
219
|
-
over,
|
|
220
|
-
measureDroppableContainers
|
|
221
|
-
} = core.useDndContext();
|
|
222
|
-
const containerId = useUniqueId(ID_PREFIX, id);
|
|
223
|
-
const useDragOverlay = Boolean(dragOverlay.rect !== null);
|
|
224
|
-
const items = React.useMemo(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
|
|
225
|
-
const isDragging = active != null;
|
|
226
|
-
const activeIndex = active ? items.indexOf(active.id) : -1;
|
|
227
|
-
const overIndex = over ? items.indexOf(over.id) : -1;
|
|
228
|
-
const previousItemsRef = React.useRef(items);
|
|
229
|
-
const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
|
|
230
|
-
const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
|
|
231
|
-
const disabled = normalizeDisabled(disabledProp);
|
|
232
|
-
useIsomorphicLayoutEffect(() => {
|
|
233
|
-
if (itemsHaveChanged && isDragging) {
|
|
234
|
-
measureDroppableContainers(items);
|
|
235
|
-
}
|
|
236
|
-
}, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
|
|
237
|
-
React.useEffect(() => {
|
|
238
|
-
previousItemsRef.current = items;
|
|
239
|
-
}, [items]);
|
|
240
|
-
const contextValue = React.useMemo(
|
|
241
|
-
() => ({
|
|
242
|
-
activeIndex,
|
|
243
|
-
containerId,
|
|
244
|
-
disabled,
|
|
245
|
-
disableTransforms,
|
|
246
|
-
items,
|
|
247
|
-
overIndex,
|
|
248
|
-
useDragOverlay,
|
|
249
|
-
sortedRects: getSortedRects(items, droppableRects),
|
|
250
|
-
strategy
|
|
251
|
-
}),
|
|
252
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
253
|
-
[activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
|
|
254
|
-
);
|
|
255
|
-
return React__default.default.createElement(Context.Provider, {
|
|
256
|
-
value: contextValue
|
|
257
|
-
}, children);
|
|
258
|
-
}
|
|
259
|
-
const defaultNewIndexGetter = (_ref) => {
|
|
260
|
-
let {
|
|
261
|
-
id,
|
|
262
|
-
items,
|
|
263
|
-
activeIndex,
|
|
264
|
-
overIndex
|
|
265
|
-
} = _ref;
|
|
266
|
-
return arrayMove(items, activeIndex, overIndex).indexOf(id);
|
|
267
|
-
};
|
|
268
|
-
const defaultAnimateLayoutChanges = (_ref2) => {
|
|
269
|
-
let {
|
|
270
|
-
containerId,
|
|
271
|
-
isSorting,
|
|
272
|
-
wasDragging,
|
|
273
|
-
index,
|
|
274
|
-
items,
|
|
275
|
-
newIndex,
|
|
276
|
-
previousItems,
|
|
277
|
-
previousContainerId,
|
|
278
|
-
transition
|
|
279
|
-
} = _ref2;
|
|
280
|
-
if (!transition || !wasDragging) {
|
|
281
|
-
return false;
|
|
282
|
-
}
|
|
283
|
-
if (previousItems !== items && index === newIndex) {
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
if (isSorting) {
|
|
287
|
-
return true;
|
|
288
|
-
}
|
|
289
|
-
return newIndex !== index && containerId === previousContainerId;
|
|
290
|
-
};
|
|
291
|
-
const defaultTransition = {
|
|
292
|
-
duration: 200,
|
|
293
|
-
easing: "ease"
|
|
294
|
-
};
|
|
295
|
-
const transitionProperty = "transform";
|
|
296
|
-
const disabledTransition = /* @__PURE__ */ CSS.Transition.toString({
|
|
297
|
-
property: transitionProperty,
|
|
298
|
-
duration: 0,
|
|
299
|
-
easing: "linear"
|
|
300
|
-
});
|
|
301
|
-
const defaultAttributes = {
|
|
302
|
-
roleDescription: "sortable"
|
|
303
|
-
};
|
|
304
|
-
function useDerivedTransform(_ref) {
|
|
305
|
-
let {
|
|
306
|
-
disabled,
|
|
307
|
-
index,
|
|
308
|
-
node,
|
|
309
|
-
rect
|
|
310
|
-
} = _ref;
|
|
311
|
-
const [derivedTransform, setDerivedtransform] = React.useState(null);
|
|
312
|
-
const previousIndex = React.useRef(index);
|
|
313
|
-
useIsomorphicLayoutEffect(() => {
|
|
314
|
-
if (!disabled && index !== previousIndex.current && node.current) {
|
|
315
|
-
const initial = rect.current;
|
|
316
|
-
if (initial) {
|
|
317
|
-
const current = core.getClientRect(node.current, {
|
|
318
|
-
ignoreTransform: true
|
|
319
|
-
});
|
|
320
|
-
const delta = {
|
|
321
|
-
x: initial.left - current.left,
|
|
322
|
-
y: initial.top - current.top,
|
|
323
|
-
scaleX: initial.width / current.width,
|
|
324
|
-
scaleY: initial.height / current.height
|
|
325
|
-
};
|
|
326
|
-
if (delta.x || delta.y) {
|
|
327
|
-
setDerivedtransform(delta);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
if (index !== previousIndex.current) {
|
|
332
|
-
previousIndex.current = index;
|
|
333
|
-
}
|
|
334
|
-
}, [disabled, index, node, rect]);
|
|
335
|
-
React.useEffect(() => {
|
|
336
|
-
if (derivedTransform) {
|
|
337
|
-
setDerivedtransform(null);
|
|
338
|
-
}
|
|
339
|
-
}, [derivedTransform]);
|
|
340
|
-
return derivedTransform;
|
|
341
|
-
}
|
|
342
|
-
function useSortable(_ref) {
|
|
343
|
-
let {
|
|
344
|
-
animateLayoutChanges = defaultAnimateLayoutChanges,
|
|
345
|
-
attributes: userDefinedAttributes,
|
|
346
|
-
disabled: localDisabled,
|
|
347
|
-
data: customData,
|
|
348
|
-
getNewIndex = defaultNewIndexGetter,
|
|
349
|
-
id,
|
|
350
|
-
strategy: localStrategy,
|
|
351
|
-
resizeObserverConfig,
|
|
352
|
-
transition = defaultTransition
|
|
353
|
-
} = _ref;
|
|
354
|
-
const {
|
|
355
|
-
items,
|
|
356
|
-
containerId,
|
|
357
|
-
activeIndex,
|
|
358
|
-
disabled: globalDisabled,
|
|
359
|
-
disableTransforms,
|
|
360
|
-
sortedRects,
|
|
361
|
-
overIndex,
|
|
362
|
-
useDragOverlay,
|
|
363
|
-
strategy: globalStrategy
|
|
364
|
-
} = React.useContext(Context);
|
|
365
|
-
const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
|
|
366
|
-
const index = items.indexOf(id);
|
|
367
|
-
const data = React.useMemo(() => ({
|
|
368
|
-
sortable: {
|
|
369
|
-
containerId,
|
|
370
|
-
index,
|
|
371
|
-
items
|
|
372
|
-
},
|
|
373
|
-
...customData
|
|
374
|
-
}), [containerId, customData, index, items]);
|
|
375
|
-
const itemsAfterCurrentSortable = React.useMemo(() => items.slice(items.indexOf(id)), [items, id]);
|
|
376
|
-
const {
|
|
377
|
-
rect,
|
|
378
|
-
node,
|
|
379
|
-
isOver,
|
|
380
|
-
setNodeRef: setDroppableNodeRef
|
|
381
|
-
} = core.useDroppable({
|
|
382
|
-
id,
|
|
383
|
-
data,
|
|
384
|
-
disabled: disabled.droppable,
|
|
385
|
-
resizeObserverConfig: {
|
|
386
|
-
updateMeasurementsFor: itemsAfterCurrentSortable,
|
|
387
|
-
...resizeObserverConfig
|
|
388
|
-
}
|
|
389
|
-
});
|
|
390
|
-
const {
|
|
391
|
-
active,
|
|
392
|
-
activatorEvent,
|
|
393
|
-
activeNodeRect,
|
|
394
|
-
attributes,
|
|
395
|
-
setNodeRef: setDraggableNodeRef,
|
|
396
|
-
listeners,
|
|
397
|
-
isDragging,
|
|
398
|
-
over,
|
|
399
|
-
setActivatorNodeRef,
|
|
400
|
-
transform
|
|
401
|
-
} = core.useDraggable({
|
|
402
|
-
id,
|
|
403
|
-
data,
|
|
404
|
-
attributes: {
|
|
405
|
-
...defaultAttributes,
|
|
406
|
-
...userDefinedAttributes
|
|
407
|
-
},
|
|
408
|
-
disabled: disabled.draggable
|
|
409
|
-
});
|
|
410
|
-
const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
|
|
411
|
-
const isSorting = Boolean(active);
|
|
412
|
-
const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
|
|
413
|
-
const shouldDisplaceDragSource = !useDragOverlay && isDragging;
|
|
414
|
-
const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
|
|
415
|
-
const strategy = localStrategy != null ? localStrategy : globalStrategy;
|
|
416
|
-
const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
|
|
417
|
-
rects: sortedRects,
|
|
418
|
-
activeNodeRect,
|
|
419
|
-
activeIndex,
|
|
420
|
-
overIndex,
|
|
421
|
-
index
|
|
422
|
-
}) : null;
|
|
423
|
-
const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
|
|
424
|
-
id,
|
|
425
|
-
items,
|
|
426
|
-
activeIndex,
|
|
427
|
-
overIndex
|
|
428
|
-
}) : index;
|
|
429
|
-
const activeId = active == null ? void 0 : active.id;
|
|
430
|
-
const previous = React.useRef({
|
|
431
|
-
activeId,
|
|
432
|
-
items,
|
|
433
|
-
newIndex,
|
|
434
|
-
containerId
|
|
435
|
-
});
|
|
436
|
-
const itemsHaveChanged = items !== previous.current.items;
|
|
437
|
-
const shouldAnimateLayoutChanges = animateLayoutChanges({
|
|
438
|
-
active,
|
|
439
|
-
containerId,
|
|
440
|
-
isDragging,
|
|
441
|
-
isSorting,
|
|
442
|
-
id,
|
|
443
|
-
index,
|
|
444
|
-
items,
|
|
445
|
-
newIndex: previous.current.newIndex,
|
|
446
|
-
previousItems: previous.current.items,
|
|
447
|
-
previousContainerId: previous.current.containerId,
|
|
448
|
-
transition,
|
|
449
|
-
wasDragging: previous.current.activeId != null
|
|
450
|
-
});
|
|
451
|
-
const derivedTransform = useDerivedTransform({
|
|
452
|
-
disabled: !shouldAnimateLayoutChanges,
|
|
453
|
-
index,
|
|
454
|
-
node,
|
|
455
|
-
rect
|
|
456
|
-
});
|
|
457
|
-
React.useEffect(() => {
|
|
458
|
-
if (isSorting && previous.current.newIndex !== newIndex) {
|
|
459
|
-
previous.current.newIndex = newIndex;
|
|
460
|
-
}
|
|
461
|
-
if (containerId !== previous.current.containerId) {
|
|
462
|
-
previous.current.containerId = containerId;
|
|
463
|
-
}
|
|
464
|
-
if (items !== previous.current.items) {
|
|
465
|
-
previous.current.items = items;
|
|
466
|
-
}
|
|
467
|
-
}, [isSorting, newIndex, containerId, items]);
|
|
468
|
-
React.useEffect(() => {
|
|
469
|
-
if (activeId === previous.current.activeId) {
|
|
470
|
-
return;
|
|
471
|
-
}
|
|
472
|
-
if (activeId && !previous.current.activeId) {
|
|
473
|
-
previous.current.activeId = activeId;
|
|
474
|
-
return;
|
|
475
|
-
}
|
|
476
|
-
const timeoutId = setTimeout(() => {
|
|
477
|
-
previous.current.activeId = activeId;
|
|
478
|
-
}, 50);
|
|
479
|
-
return () => clearTimeout(timeoutId);
|
|
480
|
-
}, [activeId]);
|
|
481
|
-
return {
|
|
482
|
-
active,
|
|
483
|
-
activeIndex,
|
|
484
|
-
attributes,
|
|
485
|
-
data,
|
|
486
|
-
rect,
|
|
487
|
-
index,
|
|
488
|
-
newIndex,
|
|
489
|
-
items,
|
|
490
|
-
isOver,
|
|
491
|
-
isSorting,
|
|
492
|
-
isDragging,
|
|
493
|
-
listeners,
|
|
494
|
-
node,
|
|
495
|
-
overIndex,
|
|
496
|
-
over,
|
|
497
|
-
setNodeRef,
|
|
498
|
-
setActivatorNodeRef,
|
|
499
|
-
setDroppableNodeRef,
|
|
500
|
-
setDraggableNodeRef,
|
|
501
|
-
transform: derivedTransform != null ? derivedTransform : finalTransform,
|
|
502
|
-
transition: getTransition()
|
|
503
|
-
};
|
|
504
|
-
function getTransition() {
|
|
505
|
-
if (
|
|
506
|
-
// Temporarily disable transitions for a single frame to set up derived transforms
|
|
507
|
-
derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
|
|
508
|
-
itemsHaveChanged && previous.current.newIndex === index
|
|
509
|
-
) {
|
|
510
|
-
return disabledTransition;
|
|
511
|
-
}
|
|
512
|
-
if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
|
|
513
|
-
return void 0;
|
|
514
|
-
}
|
|
515
|
-
if (isSorting || shouldAnimateLayoutChanges) {
|
|
516
|
-
return CSS.Transition.toString({
|
|
517
|
-
...transition,
|
|
518
|
-
property: transitionProperty
|
|
519
|
-
});
|
|
520
|
-
}
|
|
521
|
-
return void 0;
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
function normalizeLocalDisabled(localDisabled, globalDisabled) {
|
|
525
|
-
var _localDisabled$dragga, _localDisabled$droppa;
|
|
526
|
-
if (typeof localDisabled === "boolean") {
|
|
527
|
-
return {
|
|
528
|
-
draggable: localDisabled,
|
|
529
|
-
// Backwards compatibility
|
|
530
|
-
droppable: false
|
|
531
|
-
};
|
|
532
|
-
}
|
|
533
|
-
return {
|
|
534
|
-
draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
|
|
535
|
-
droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
|
|
536
|
-
};
|
|
537
|
-
}
|
|
538
|
-
function hasSortableData(entry) {
|
|
539
|
-
if (!entry) {
|
|
540
|
-
return false;
|
|
541
|
-
}
|
|
542
|
-
const data = entry.data.current;
|
|
543
|
-
if (data && "sortable" in data && typeof data.sortable === "object" && "containerId" in data.sortable && "items" in data.sortable && "index" in data.sortable) {
|
|
544
|
-
return true;
|
|
545
|
-
}
|
|
546
|
-
return false;
|
|
547
|
-
}
|
|
548
|
-
const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
|
|
549
|
-
const sortableKeyboardCoordinates = (event, _ref) => {
|
|
550
|
-
let {
|
|
551
|
-
context: {
|
|
552
|
-
active,
|
|
553
|
-
collisionRect,
|
|
554
|
-
droppableRects,
|
|
555
|
-
droppableContainers,
|
|
556
|
-
over,
|
|
557
|
-
scrollableAncestors
|
|
558
|
-
}
|
|
559
|
-
} = _ref;
|
|
560
|
-
if (directions.includes(event.code)) {
|
|
561
|
-
event.preventDefault();
|
|
562
|
-
if (!active || !collisionRect) {
|
|
563
|
-
return;
|
|
564
|
-
}
|
|
565
|
-
const filteredContainers = [];
|
|
566
|
-
droppableContainers.getEnabled().forEach((entry) => {
|
|
567
|
-
if (!entry || entry != null && entry.disabled) {
|
|
568
|
-
return;
|
|
569
|
-
}
|
|
570
|
-
const rect = droppableRects.get(entry.id);
|
|
571
|
-
if (!rect) {
|
|
572
|
-
return;
|
|
573
|
-
}
|
|
574
|
-
switch (event.code) {
|
|
575
|
-
case core.KeyboardCode.Down:
|
|
576
|
-
if (collisionRect.top < rect.top) {
|
|
577
|
-
filteredContainers.push(entry);
|
|
578
|
-
}
|
|
579
|
-
break;
|
|
580
|
-
case core.KeyboardCode.Up:
|
|
581
|
-
if (collisionRect.top > rect.top) {
|
|
582
|
-
filteredContainers.push(entry);
|
|
583
|
-
}
|
|
584
|
-
break;
|
|
585
|
-
case core.KeyboardCode.Left:
|
|
586
|
-
if (collisionRect.left > rect.left) {
|
|
587
|
-
filteredContainers.push(entry);
|
|
588
|
-
}
|
|
589
|
-
break;
|
|
590
|
-
case core.KeyboardCode.Right:
|
|
591
|
-
if (collisionRect.left < rect.left) {
|
|
592
|
-
filteredContainers.push(entry);
|
|
593
|
-
}
|
|
594
|
-
break;
|
|
595
|
-
}
|
|
596
|
-
});
|
|
597
|
-
const collisions = core.closestCorners({
|
|
598
|
-
active,
|
|
599
|
-
collisionRect,
|
|
600
|
-
droppableRects,
|
|
601
|
-
droppableContainers: filteredContainers,
|
|
602
|
-
pointerCoordinates: null
|
|
603
|
-
});
|
|
604
|
-
let closestId = core.getFirstCollision(collisions, "id");
|
|
605
|
-
if (closestId === (over == null ? void 0 : over.id) && collisions.length > 1) {
|
|
606
|
-
closestId = collisions[1].id;
|
|
607
|
-
}
|
|
608
|
-
if (closestId != null) {
|
|
609
|
-
const activeDroppable = droppableContainers.get(active.id);
|
|
610
|
-
const newDroppable = droppableContainers.get(closestId);
|
|
611
|
-
const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
|
|
612
|
-
const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
|
|
613
|
-
if (newNode && newRect && activeDroppable && newDroppable) {
|
|
614
|
-
const newScrollAncestors = core.getScrollableAncestors(newNode);
|
|
615
|
-
const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
|
|
616
|
-
const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
|
|
617
|
-
const isAfterActive = isAfter(activeDroppable, newDroppable);
|
|
618
|
-
const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
|
|
619
|
-
x: 0,
|
|
620
|
-
y: 0
|
|
621
|
-
} : {
|
|
622
|
-
x: isAfterActive ? collisionRect.width - newRect.width : 0,
|
|
623
|
-
y: isAfterActive ? collisionRect.height - newRect.height : 0
|
|
624
|
-
};
|
|
625
|
-
const rectCoordinates = {
|
|
626
|
-
x: newRect.left,
|
|
627
|
-
y: newRect.top
|
|
628
|
-
};
|
|
629
|
-
const newCoordinates = offset.x && offset.y ? rectCoordinates : subtract(rectCoordinates, offset);
|
|
630
|
-
return newCoordinates;
|
|
631
|
-
}
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
return void 0;
|
|
635
|
-
};
|
|
636
|
-
function isSameContainer(a, b) {
|
|
637
|
-
if (!hasSortableData(a) || !hasSortableData(b)) {
|
|
638
|
-
return false;
|
|
639
|
-
}
|
|
640
|
-
return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
|
|
641
|
-
}
|
|
642
|
-
function isAfter(a, b) {
|
|
643
|
-
if (!hasSortableData(a) || !hasSortableData(b)) {
|
|
644
|
-
return false;
|
|
645
|
-
}
|
|
646
|
-
if (!isSameContainer(a, b)) {
|
|
647
|
-
return false;
|
|
648
|
-
}
|
|
649
|
-
return a.data.current.sortable.index < b.data.current.sortable.index;
|
|
650
|
-
}
|
|
651
13
|
const useBanners = () => {
|
|
652
14
|
const getUploadedFiles = async () => {
|
|
653
15
|
try {
|
|
@@ -740,9 +102,9 @@ const SortableItem = ({ banner }) => {
|
|
|
740
102
|
transform,
|
|
741
103
|
transition,
|
|
742
104
|
isDragging
|
|
743
|
-
} = useSortable({ id: banner.id });
|
|
105
|
+
} = sortable.useSortable({ id: banner.id });
|
|
744
106
|
const style = {
|
|
745
|
-
transform: CSS.Transform.toString(transform),
|
|
107
|
+
transform: utilities.CSS.Transform.toString(transform),
|
|
746
108
|
transition,
|
|
747
109
|
zIndex: isDragging ? 10 : 1,
|
|
748
110
|
opacity: isDragging ? 0.5 : 1
|
|
@@ -772,9 +134,9 @@ const UploadBannerDrawerContent = ({
|
|
|
772
134
|
maxFileSizeMb = 10,
|
|
773
135
|
onSuccess
|
|
774
136
|
}) => {
|
|
775
|
-
const [files, setFiles] =
|
|
776
|
-
const [isLoading, setIsLoading] =
|
|
777
|
-
const onDrop =
|
|
137
|
+
const [files, setFiles] = react.useState([]);
|
|
138
|
+
const [isLoading, setIsLoading] = react.useState(false);
|
|
139
|
+
const onDrop = react.useCallback((acceptedFiles) => {
|
|
778
140
|
const newFiles = acceptedFiles.map((file) => {
|
|
779
141
|
const id = crypto.randomUUID();
|
|
780
142
|
let preview;
|
|
@@ -954,13 +316,13 @@ const UploadBannerDrawerContent = ({
|
|
|
954
316
|
] });
|
|
955
317
|
};
|
|
956
318
|
const BannerPage = () => {
|
|
957
|
-
const [open, setOpen] =
|
|
958
|
-
const [selectedImage, setSelectedImage] =
|
|
959
|
-
const [selectedIds, setSelectedIds] =
|
|
960
|
-
const [reorderMode, setReorderMode] =
|
|
961
|
-
const [orderedBanners, setOrderedBanners] =
|
|
962
|
-
const [activeBanner, setActiveBanner] =
|
|
963
|
-
const [isLoading, setIsLoading] =
|
|
319
|
+
const [open, setOpen] = react.useState(false);
|
|
320
|
+
const [selectedImage, setSelectedImage] = react.useState(null);
|
|
321
|
+
const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
|
|
322
|
+
const [reorderMode, setReorderMode] = react.useState(false);
|
|
323
|
+
const [orderedBanners, setOrderedBanners] = react.useState([]);
|
|
324
|
+
const [activeBanner, setActiveBanner] = react.useState(null);
|
|
325
|
+
const [isLoading, setIsLoading] = react.useState(false);
|
|
964
326
|
const dialog = ui.usePrompt();
|
|
965
327
|
const { data: bannerData, refetch } = useBanners();
|
|
966
328
|
const { count = 0, banners = [] } = bannerData || {};
|
|
@@ -972,7 +334,7 @@ const BannerPage = () => {
|
|
|
972
334
|
}
|
|
973
335
|
}),
|
|
974
336
|
core.useSensor(core.KeyboardSensor, {
|
|
975
|
-
coordinateGetter: sortableKeyboardCoordinates
|
|
337
|
+
coordinateGetter: sortable.sortableKeyboardCoordinates
|
|
976
338
|
})
|
|
977
339
|
);
|
|
978
340
|
const toggleImageSelection = (e, id) => {
|
|
@@ -1033,7 +395,7 @@ const BannerPage = () => {
|
|
|
1033
395
|
setOrderedBanners((items) => {
|
|
1034
396
|
const oldIndex = items.findIndex((item) => item.id === active.id);
|
|
1035
397
|
const newIndex = items.findIndex((item) => item.id === over.id);
|
|
1036
|
-
return arrayMove(items, oldIndex, newIndex);
|
|
398
|
+
return sortable.arrayMove(items, oldIndex, newIndex);
|
|
1037
399
|
});
|
|
1038
400
|
}
|
|
1039
401
|
setActiveBanner(null);
|
|
@@ -1065,7 +427,7 @@ const BannerPage = () => {
|
|
|
1065
427
|
cancelText: "Cancel"
|
|
1066
428
|
});
|
|
1067
429
|
if (!isConfirmed) return;
|
|
1068
|
-
const
|
|
430
|
+
const ids = Array.from(selectedIds);
|
|
1069
431
|
setIsLoading(true);
|
|
1070
432
|
try {
|
|
1071
433
|
await fetch("/admin/banners", {
|
|
@@ -1075,7 +437,7 @@ const BannerPage = () => {
|
|
|
1075
437
|
"Content-Type": "application/json",
|
|
1076
438
|
Accept: "application/json"
|
|
1077
439
|
},
|
|
1078
|
-
body: JSON.stringify({ ids
|
|
440
|
+
body: JSON.stringify({ ids })
|
|
1079
441
|
});
|
|
1080
442
|
setSelectedIds(/* @__PURE__ */ new Set());
|
|
1081
443
|
refetch();
|
|
@@ -1199,10 +561,10 @@ const BannerPage = () => {
|
|
|
1199
561
|
onDragEnd: handleDragEnd,
|
|
1200
562
|
children: [
|
|
1201
563
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1202
|
-
SortableContext,
|
|
564
|
+
sortable.SortableContext,
|
|
1203
565
|
{
|
|
1204
566
|
items: orderedBanners.map((banner) => banner.id),
|
|
1205
|
-
strategy: rectSortingStrategy,
|
|
567
|
+
strategy: sortable.rectSortingStrategy,
|
|
1206
568
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 isolate", children: orderedBanners.map((banner) => /* @__PURE__ */ jsxRuntime.jsx(SortableItem, { banner }, banner.id)) })
|
|
1207
569
|
}
|
|
1208
570
|
),
|