Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
784 lines
20 KiB
Plaintext
784 lines
20 KiB
Plaintext
import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
|
|
import { useDndContext, getClientRect, useDroppable, useDraggable, closestCorners, getFirstCollision, getScrollableAncestors, KeyboardCode } from '@dnd-kit/core';
|
|
import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs, isKeyboardEvent, subtract } from '@dnd-kit/utilities';
|
|
|
|
/**
|
|
* Move an array item to a different position. Returns a new array with the item moved to the new position.
|
|
*/
|
|
function arrayMove(array, from, to) {
|
|
const newArray = array.slice();
|
|
newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
|
|
return newArray;
|
|
}
|
|
|
|
/**
|
|
* Swap an array item to a different position. Returns a new array with the item swapped to the new position.
|
|
*/
|
|
function arraySwap(array, from, to) {
|
|
const newArray = array.slice();
|
|
newArray[from] = array[to];
|
|
newArray[to] = array[from];
|
|
return newArray;
|
|
}
|
|
|
|
function getSortedRects(items, rects) {
|
|
return items.reduce((accumulator, id, index) => {
|
|
const rect = rects.get(id);
|
|
|
|
if (rect) {
|
|
accumulator[index] = rect;
|
|
}
|
|
|
|
return accumulator;
|
|
}, Array(items.length));
|
|
}
|
|
|
|
function isValidIndex(index) {
|
|
return index !== null && index >= 0;
|
|
}
|
|
|
|
function itemsEqual(a, b) {
|
|
if (a === b) {
|
|
return true;
|
|
}
|
|
|
|
if (a.length !== b.length) {
|
|
return false;
|
|
}
|
|
|
|
for (let i = 0; i < a.length; i++) {
|
|
if (a[i] !== b[i]) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function normalizeDisabled(disabled) {
|
|
if (typeof disabled === 'boolean') {
|
|
return {
|
|
draggable: disabled,
|
|
droppable: disabled
|
|
};
|
|
}
|
|
|
|
return disabled;
|
|
}
|
|
|
|
// To-do: We should be calculating scale transformation
|
|
const defaultScale = {
|
|
scaleX: 1,
|
|
scaleY: 1
|
|
};
|
|
const horizontalListSortingStrategy = _ref => {
|
|
var _rects$activeIndex;
|
|
|
|
let {
|
|
rects,
|
|
activeNodeRect: fallbackActiveRect,
|
|
activeIndex,
|
|
overIndex,
|
|
index
|
|
} = _ref;
|
|
const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
|
|
|
|
if (!activeNodeRect) {
|
|
return null;
|
|
}
|
|
|
|
const itemGap = getItemGap(rects, index, activeIndex);
|
|
|
|
if (index === activeIndex) {
|
|
const newIndexRect = rects[overIndex];
|
|
|
|
if (!newIndexRect) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
x: activeIndex < overIndex ? newIndexRect.left + newIndexRect.width - (activeNodeRect.left + activeNodeRect.width) : newIndexRect.left - activeNodeRect.left,
|
|
y: 0,
|
|
...defaultScale
|
|
};
|
|
}
|
|
|
|
if (index > activeIndex && index <= overIndex) {
|
|
return {
|
|
x: -activeNodeRect.width - itemGap,
|
|
y: 0,
|
|
...defaultScale
|
|
};
|
|
}
|
|
|
|
if (index < activeIndex && index >= overIndex) {
|
|
return {
|
|
x: activeNodeRect.width + itemGap,
|
|
y: 0,
|
|
...defaultScale
|
|
};
|
|
}
|
|
|
|
return {
|
|
x: 0,
|
|
y: 0,
|
|
...defaultScale
|
|
};
|
|
};
|
|
|
|
function getItemGap(rects, index, activeIndex) {
|
|
const currentRect = rects[index];
|
|
const previousRect = rects[index - 1];
|
|
const nextRect = rects[index + 1];
|
|
|
|
if (!currentRect || !previousRect && !nextRect) {
|
|
return 0;
|
|
}
|
|
|
|
if (activeIndex < index) {
|
|
return previousRect ? currentRect.left - (previousRect.left + previousRect.width) : nextRect.left - (currentRect.left + currentRect.width);
|
|
}
|
|
|
|
return nextRect ? nextRect.left - (currentRect.left + currentRect.width) : currentRect.left - (previousRect.left + previousRect.width);
|
|
}
|
|
|
|
const rectSortingStrategy = _ref => {
|
|
let {
|
|
rects,
|
|
activeIndex,
|
|
overIndex,
|
|
index
|
|
} = _ref;
|
|
const newRects = arrayMove(rects, overIndex, activeIndex);
|
|
const oldRect = rects[index];
|
|
const newRect = newRects[index];
|
|
|
|
if (!newRect || !oldRect) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
x: newRect.left - oldRect.left,
|
|
y: newRect.top - oldRect.top,
|
|
scaleX: newRect.width / oldRect.width,
|
|
scaleY: newRect.height / oldRect.height
|
|
};
|
|
};
|
|
|
|
const rectSwappingStrategy = _ref => {
|
|
let {
|
|
activeIndex,
|
|
index,
|
|
rects,
|
|
overIndex
|
|
} = _ref;
|
|
let oldRect;
|
|
let newRect;
|
|
|
|
if (index === activeIndex) {
|
|
oldRect = rects[index];
|
|
newRect = rects[overIndex];
|
|
}
|
|
|
|
if (index === overIndex) {
|
|
oldRect = rects[index];
|
|
newRect = rects[activeIndex];
|
|
}
|
|
|
|
if (!newRect || !oldRect) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
x: newRect.left - oldRect.left,
|
|
y: newRect.top - oldRect.top,
|
|
scaleX: newRect.width / oldRect.width,
|
|
scaleY: newRect.height / oldRect.height
|
|
};
|
|
};
|
|
|
|
// To-do: We should be calculating scale transformation
|
|
const defaultScale$1 = {
|
|
scaleX: 1,
|
|
scaleY: 1
|
|
};
|
|
const verticalListSortingStrategy = _ref => {
|
|
var _rects$activeIndex;
|
|
|
|
let {
|
|
activeIndex,
|
|
activeNodeRect: fallbackActiveRect,
|
|
index,
|
|
rects,
|
|
overIndex
|
|
} = _ref;
|
|
const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
|
|
|
|
if (!activeNodeRect) {
|
|
return null;
|
|
}
|
|
|
|
if (index === activeIndex) {
|
|
const overIndexRect = rects[overIndex];
|
|
|
|
if (!overIndexRect) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
x: 0,
|
|
y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top,
|
|
...defaultScale$1
|
|
};
|
|
}
|
|
|
|
const itemGap = getItemGap$1(rects, index, activeIndex);
|
|
|
|
if (index > activeIndex && index <= overIndex) {
|
|
return {
|
|
x: 0,
|
|
y: -activeNodeRect.height - itemGap,
|
|
...defaultScale$1
|
|
};
|
|
}
|
|
|
|
if (index < activeIndex && index >= overIndex) {
|
|
return {
|
|
x: 0,
|
|
y: activeNodeRect.height + itemGap,
|
|
...defaultScale$1
|
|
};
|
|
}
|
|
|
|
return {
|
|
x: 0,
|
|
y: 0,
|
|
...defaultScale$1
|
|
};
|
|
};
|
|
|
|
function getItemGap$1(clientRects, index, activeIndex) {
|
|
const currentRect = clientRects[index];
|
|
const previousRect = clientRects[index - 1];
|
|
const nextRect = clientRects[index + 1];
|
|
|
|
if (!currentRect) {
|
|
return 0;
|
|
}
|
|
|
|
if (activeIndex < index) {
|
|
return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
|
|
}
|
|
|
|
return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
|
|
}
|
|
|
|
const ID_PREFIX = 'Sortable';
|
|
const Context = /*#__PURE__*/React.createContext({
|
|
activeIndex: -1,
|
|
containerId: ID_PREFIX,
|
|
disableTransforms: false,
|
|
items: [],
|
|
overIndex: -1,
|
|
useDragOverlay: false,
|
|
sortedRects: [],
|
|
strategy: rectSortingStrategy,
|
|
disabled: {
|
|
draggable: false,
|
|
droppable: false
|
|
}
|
|
});
|
|
function SortableContext(_ref) {
|
|
let {
|
|
children,
|
|
id,
|
|
items: userDefinedItems,
|
|
strategy = rectSortingStrategy,
|
|
disabled: disabledProp = false
|
|
} = _ref;
|
|
const {
|
|
active,
|
|
dragOverlay,
|
|
droppableRects,
|
|
over,
|
|
measureDroppableContainers
|
|
} = useDndContext();
|
|
const containerId = useUniqueId(ID_PREFIX, id);
|
|
const useDragOverlay = Boolean(dragOverlay.rect !== null);
|
|
const items = useMemo(() => userDefinedItems.map(item => typeof item === 'object' && 'id' in item ? item.id : item), [userDefinedItems]);
|
|
const isDragging = active != null;
|
|
const activeIndex = active ? items.indexOf(active.id) : -1;
|
|
const overIndex = over ? items.indexOf(over.id) : -1;
|
|
const previousItemsRef = useRef(items);
|
|
const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
|
|
const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
|
|
const disabled = normalizeDisabled(disabledProp);
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (itemsHaveChanged && isDragging) {
|
|
measureDroppableContainers(items);
|
|
}
|
|
}, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
|
|
useEffect(() => {
|
|
previousItemsRef.current = items;
|
|
}, [items]);
|
|
const contextValue = useMemo(() => ({
|
|
activeIndex,
|
|
containerId,
|
|
disabled,
|
|
disableTransforms,
|
|
items,
|
|
overIndex,
|
|
useDragOverlay,
|
|
sortedRects: getSortedRects(items, droppableRects),
|
|
strategy
|
|
}), // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
|
|
return React.createElement(Context.Provider, {
|
|
value: contextValue
|
|
}, children);
|
|
}
|
|
|
|
const defaultNewIndexGetter = _ref => {
|
|
let {
|
|
id,
|
|
items,
|
|
activeIndex,
|
|
overIndex
|
|
} = _ref;
|
|
return arrayMove(items, activeIndex, overIndex).indexOf(id);
|
|
};
|
|
const defaultAnimateLayoutChanges = _ref2 => {
|
|
let {
|
|
containerId,
|
|
isSorting,
|
|
wasDragging,
|
|
index,
|
|
items,
|
|
newIndex,
|
|
previousItems,
|
|
previousContainerId,
|
|
transition
|
|
} = _ref2;
|
|
|
|
if (!transition || !wasDragging) {
|
|
return false;
|
|
}
|
|
|
|
if (previousItems !== items && index === newIndex) {
|
|
return false;
|
|
}
|
|
|
|
if (isSorting) {
|
|
return true;
|
|
}
|
|
|
|
return newIndex !== index && containerId === previousContainerId;
|
|
};
|
|
const defaultTransition = {
|
|
duration: 200,
|
|
easing: 'ease'
|
|
};
|
|
const transitionProperty = 'transform';
|
|
const disabledTransition = /*#__PURE__*/CSS.Transition.toString({
|
|
property: transitionProperty,
|
|
duration: 0,
|
|
easing: 'linear'
|
|
});
|
|
const defaultAttributes = {
|
|
roleDescription: 'sortable'
|
|
};
|
|
|
|
/*
|
|
* When the index of an item changes while sorting,
|
|
* we need to temporarily disable the transforms
|
|
*/
|
|
|
|
function useDerivedTransform(_ref) {
|
|
let {
|
|
disabled,
|
|
index,
|
|
node,
|
|
rect
|
|
} = _ref;
|
|
const [derivedTransform, setDerivedtransform] = useState(null);
|
|
const previousIndex = useRef(index);
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (!disabled && index !== previousIndex.current && node.current) {
|
|
const initial = rect.current;
|
|
|
|
if (initial) {
|
|
const current = getClientRect(node.current, {
|
|
ignoreTransform: true
|
|
});
|
|
const delta = {
|
|
x: initial.left - current.left,
|
|
y: initial.top - current.top,
|
|
scaleX: initial.width / current.width,
|
|
scaleY: initial.height / current.height
|
|
};
|
|
|
|
if (delta.x || delta.y) {
|
|
setDerivedtransform(delta);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (index !== previousIndex.current) {
|
|
previousIndex.current = index;
|
|
}
|
|
}, [disabled, index, node, rect]);
|
|
useEffect(() => {
|
|
if (derivedTransform) {
|
|
setDerivedtransform(null);
|
|
}
|
|
}, [derivedTransform]);
|
|
return derivedTransform;
|
|
}
|
|
|
|
function useSortable(_ref) {
|
|
let {
|
|
animateLayoutChanges = defaultAnimateLayoutChanges,
|
|
attributes: userDefinedAttributes,
|
|
disabled: localDisabled,
|
|
data: customData,
|
|
getNewIndex = defaultNewIndexGetter,
|
|
id,
|
|
strategy: localStrategy,
|
|
resizeObserverConfig,
|
|
transition = defaultTransition
|
|
} = _ref;
|
|
const {
|
|
items,
|
|
containerId,
|
|
activeIndex,
|
|
disabled: globalDisabled,
|
|
disableTransforms,
|
|
sortedRects,
|
|
overIndex,
|
|
useDragOverlay,
|
|
strategy: globalStrategy
|
|
} = useContext(Context);
|
|
const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
|
|
const index = items.indexOf(id);
|
|
const data = useMemo(() => ({
|
|
sortable: {
|
|
containerId,
|
|
index,
|
|
items
|
|
},
|
|
...customData
|
|
}), [containerId, customData, index, items]);
|
|
const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
|
|
const {
|
|
rect,
|
|
node,
|
|
isOver,
|
|
setNodeRef: setDroppableNodeRef
|
|
} = useDroppable({
|
|
id,
|
|
data,
|
|
disabled: disabled.droppable,
|
|
resizeObserverConfig: {
|
|
updateMeasurementsFor: itemsAfterCurrentSortable,
|
|
...resizeObserverConfig
|
|
}
|
|
});
|
|
const {
|
|
active,
|
|
activatorEvent,
|
|
activeNodeRect,
|
|
attributes,
|
|
setNodeRef: setDraggableNodeRef,
|
|
listeners,
|
|
isDragging,
|
|
over,
|
|
setActivatorNodeRef,
|
|
transform
|
|
} = useDraggable({
|
|
id,
|
|
data,
|
|
attributes: { ...defaultAttributes,
|
|
...userDefinedAttributes
|
|
},
|
|
disabled: disabled.draggable
|
|
});
|
|
const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
|
|
const isSorting = Boolean(active);
|
|
const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
|
|
const shouldDisplaceDragSource = !useDragOverlay && isDragging;
|
|
const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
|
|
const strategy = localStrategy != null ? localStrategy : globalStrategy;
|
|
const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
|
|
rects: sortedRects,
|
|
activeNodeRect,
|
|
activeIndex,
|
|
overIndex,
|
|
index
|
|
}) : null;
|
|
const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
|
|
id,
|
|
items,
|
|
activeIndex,
|
|
overIndex
|
|
}) : index;
|
|
const activeId = active == null ? void 0 : active.id;
|
|
const previous = useRef({
|
|
activeId,
|
|
items,
|
|
newIndex,
|
|
containerId
|
|
});
|
|
const itemsHaveChanged = items !== previous.current.items;
|
|
const shouldAnimateLayoutChanges = animateLayoutChanges({
|
|
active,
|
|
containerId,
|
|
isDragging,
|
|
isSorting,
|
|
id,
|
|
index,
|
|
items,
|
|
newIndex: previous.current.newIndex,
|
|
previousItems: previous.current.items,
|
|
previousContainerId: previous.current.containerId,
|
|
transition,
|
|
wasDragging: previous.current.activeId != null
|
|
});
|
|
const derivedTransform = useDerivedTransform({
|
|
disabled: !shouldAnimateLayoutChanges,
|
|
index,
|
|
node,
|
|
rect
|
|
});
|
|
useEffect(() => {
|
|
if (isSorting && previous.current.newIndex !== newIndex) {
|
|
previous.current.newIndex = newIndex;
|
|
}
|
|
|
|
if (containerId !== previous.current.containerId) {
|
|
previous.current.containerId = containerId;
|
|
}
|
|
|
|
if (items !== previous.current.items) {
|
|
previous.current.items = items;
|
|
}
|
|
}, [isSorting, newIndex, containerId, items]);
|
|
useEffect(() => {
|
|
if (activeId === previous.current.activeId) {
|
|
return;
|
|
}
|
|
|
|
if (activeId != null && previous.current.activeId == null) {
|
|
previous.current.activeId = activeId;
|
|
return;
|
|
}
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
previous.current.activeId = activeId;
|
|
}, 50);
|
|
return () => clearTimeout(timeoutId);
|
|
}, [activeId]);
|
|
return {
|
|
active,
|
|
activeIndex,
|
|
attributes,
|
|
data,
|
|
rect,
|
|
index,
|
|
newIndex,
|
|
items,
|
|
isOver,
|
|
isSorting,
|
|
isDragging,
|
|
listeners,
|
|
node,
|
|
overIndex,
|
|
over,
|
|
setNodeRef,
|
|
setActivatorNodeRef,
|
|
setDroppableNodeRef,
|
|
setDraggableNodeRef,
|
|
transform: derivedTransform != null ? derivedTransform : finalTransform,
|
|
transition: getTransition()
|
|
};
|
|
|
|
function getTransition() {
|
|
if ( // Temporarily disable transitions for a single frame to set up derived transforms
|
|
derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
|
|
itemsHaveChanged && previous.current.newIndex === index) {
|
|
return disabledTransition;
|
|
}
|
|
|
|
if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
|
|
return undefined;
|
|
}
|
|
|
|
if (isSorting || shouldAnimateLayoutChanges) {
|
|
return CSS.Transition.toString({ ...transition,
|
|
property: transitionProperty
|
|
});
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
function normalizeLocalDisabled(localDisabled, globalDisabled) {
|
|
var _localDisabled$dragga, _localDisabled$droppa;
|
|
|
|
if (typeof localDisabled === 'boolean') {
|
|
return {
|
|
draggable: localDisabled,
|
|
// Backwards compatibility
|
|
droppable: false
|
|
};
|
|
}
|
|
|
|
return {
|
|
draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
|
|
droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
|
|
};
|
|
}
|
|
|
|
function hasSortableData(entry) {
|
|
if (!entry) {
|
|
return false;
|
|
}
|
|
|
|
const data = entry.data.current;
|
|
|
|
if (data && 'sortable' in data && typeof data.sortable === 'object' && 'containerId' in data.sortable && 'items' in data.sortable && 'index' in data.sortable) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
|
|
const sortableKeyboardCoordinates = (event, _ref) => {
|
|
let {
|
|
context: {
|
|
active,
|
|
collisionRect,
|
|
droppableRects,
|
|
droppableContainers,
|
|
over,
|
|
scrollableAncestors
|
|
}
|
|
} = _ref;
|
|
|
|
if (directions.includes(event.code)) {
|
|
event.preventDefault();
|
|
|
|
if (!active || !collisionRect) {
|
|
return;
|
|
}
|
|
|
|
const filteredContainers = [];
|
|
droppableContainers.getEnabled().forEach(entry => {
|
|
if (!entry || entry != null && entry.disabled) {
|
|
return;
|
|
}
|
|
|
|
const rect = droppableRects.get(entry.id);
|
|
|
|
if (!rect) {
|
|
return;
|
|
}
|
|
|
|
switch (event.code) {
|
|
case KeyboardCode.Down:
|
|
if (collisionRect.top < rect.top) {
|
|
filteredContainers.push(entry);
|
|
}
|
|
|
|
break;
|
|
|
|
case KeyboardCode.Up:
|
|
if (collisionRect.top > rect.top) {
|
|
filteredContainers.push(entry);
|
|
}
|
|
|
|
break;
|
|
|
|
case KeyboardCode.Left:
|
|
if (collisionRect.left > rect.left) {
|
|
filteredContainers.push(entry);
|
|
}
|
|
|
|
break;
|
|
|
|
case KeyboardCode.Right:
|
|
if (collisionRect.left < rect.left) {
|
|
filteredContainers.push(entry);
|
|
}
|
|
|
|
break;
|
|
}
|
|
});
|
|
const collisions = closestCorners({
|
|
active,
|
|
collisionRect: collisionRect,
|
|
droppableRects,
|
|
droppableContainers: filteredContainers,
|
|
pointerCoordinates: null
|
|
});
|
|
let closestId = getFirstCollision(collisions, 'id');
|
|
|
|
if (closestId === (over == null ? void 0 : over.id) && collisions.length > 1) {
|
|
closestId = collisions[1].id;
|
|
}
|
|
|
|
if (closestId != null) {
|
|
const activeDroppable = droppableContainers.get(active.id);
|
|
const newDroppable = droppableContainers.get(closestId);
|
|
const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
|
|
const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
|
|
|
|
if (newNode && newRect && activeDroppable && newDroppable) {
|
|
const newScrollAncestors = getScrollableAncestors(newNode);
|
|
const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
|
|
const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
|
|
const isAfterActive = isAfter(activeDroppable, newDroppable);
|
|
const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
|
|
x: 0,
|
|
y: 0
|
|
} : {
|
|
x: isAfterActive ? collisionRect.width - newRect.width : 0,
|
|
y: isAfterActive ? collisionRect.height - newRect.height : 0
|
|
};
|
|
const rectCoordinates = {
|
|
x: newRect.left,
|
|
y: newRect.top
|
|
};
|
|
const newCoordinates = offset.x && offset.y ? rectCoordinates : subtract(rectCoordinates, offset);
|
|
return newCoordinates;
|
|
}
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
};
|
|
|
|
function isSameContainer(a, b) {
|
|
if (!hasSortableData(a) || !hasSortableData(b)) {
|
|
return false;
|
|
}
|
|
|
|
return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
|
|
}
|
|
|
|
function isAfter(a, b) {
|
|
if (!hasSortableData(a) || !hasSortableData(b)) {
|
|
return false;
|
|
}
|
|
|
|
if (!isSameContainer(a, b)) {
|
|
return false;
|
|
}
|
|
|
|
return a.data.current.sortable.index < b.data.current.sortable.index;
|
|
}
|
|
|
|
export { SortableContext, arrayMove, arraySwap, defaultAnimateLayoutChanges, defaultNewIndexGetter, hasSortableData, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
|
|
//# sourceMappingURL=sortable.esm.js.map
|