dnd-kit-sortable-tree
Version:
[](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [ • 40.3 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var clsx = _interopDefault(require('clsx'));
var React = require('react');
var React__default = _interopDefault(React);
var reactDom = require('react-dom');
var core = require('@dnd-kit/core');
var utilities = require('@dnd-kit/utilities');
var sortable = require('@dnd-kit/sortable');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".dnd-sortable-tree_simple_wrapper{box-sizing:border-box;list-style:none;margin-bottom:-1px}.dnd-sortable-tree_simple_tree-item{align-items:center;border:1px solid #dedede;box-sizing:border-box;color:#222;display:flex;padding:10px;position:relative}.dnd-sortable-tree_simple_clone{display:inline-block;padding:5px;pointer-events:none}.dnd-sortable-tree_simple_clone>.dnd-sortable-tree_simple_tree-item{border-radius:4px;box-shadow:0 15px 15px 0 rgba(34,33,81,.1);padding-bottom:5px;padding-right:24px;padding-top:5px}.dnd-sortable-tree_simple_ghost{opacity:.5}.dnd-sortable-tree_simple_disable-selection{-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnd-sortable-tree_simple_disable-interaction{pointer-events:none}.dnd-sortable-tree_folder_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button-collapsed{transform:rotate(-90deg)}.dnd-sortable-tree_simple_handle{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='12'><path d='M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z'></path></svg>\") no-repeat 50%;cursor:pointer;width:20px}.dnd-sortable-tree_simple_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_simple-item-collapse_button-collapsed{transform:rotate(-90deg)}";
styleInject(css_248z);
var _excluded = ["clone", "depth", "disableSelection", "disableInteraction", "disableSorting", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "item", "wrapperRef", "style", "hideCollapseButton", "childCount", "manualDrag", "showDragHandle", "disableCollapseOnItemClick", "isLast", "parent", "className", "contentClassName", "isOver", "isOverParent"];
var SimpleTreeItemWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
var clone = props.clone,
depth = props.depth,
disableSelection = props.disableSelection,
disableInteraction = props.disableInteraction,
disableSorting = props.disableSorting,
ghost = props.ghost,
handleProps = props.handleProps,
indentationWidth = props.indentationWidth,
collapsed = props.collapsed,
onCollapse = props.onCollapse,
wrapperRef = props.wrapperRef,
style = props.style,
hideCollapseButton = props.hideCollapseButton,
childCount = props.childCount,
manualDrag = props.manualDrag,
showDragHandle = props.showDragHandle,
disableCollapseOnItemClick = props.disableCollapseOnItemClick,
className = props.className,
contentClassName = props.contentClassName,
rest = _objectWithoutPropertiesLoose(props, _excluded);
return React__default.createElement("li", Object.assign({
ref: wrapperRef
}, rest, {
className: clsx('dnd-sortable-tree_simple_wrapper', clone && 'dnd-sortable-tree_simple_clone', ghost && 'dnd-sortable-tree_simple_ghost', disableSelection && 'dnd-sortable-tree_simple_disable-selection', disableInteraction && 'dnd-sortable-tree_simple_disable-interaction', className),
style: _extends({}, style, {
paddingLeft: clone ? indentationWidth : indentationWidth * depth
})
}), React__default.createElement("div", Object.assign({
className: clsx('dnd-sortable-tree_simple_tree-item', contentClassName),
ref: ref
}, manualDrag ? undefined : handleProps, {
onClick: disableCollapseOnItemClick ? undefined : onCollapse
}), !disableSorting && showDragHandle !== false && React__default.createElement("div", Object.assign({
className: 'dnd-sortable-tree_simple_handle'
}, handleProps)), !manualDrag && !hideCollapseButton && !!onCollapse && !!childCount && React__default.createElement("button", {
onClick: function onClick(e) {
if (!disableCollapseOnItemClick) {
return;
}
e.preventDefault();
onCollapse == null ? void 0 : onCollapse();
},
className: clsx('dnd-sortable-tree_simple_tree-item-collapse_button', collapsed && 'dnd-sortable-tree_folder_simple-item-collapse_button-collapsed')
}), props.children));
});
var css_248z$1 = ".dnd-sortable-tree_folder_wrapper{box-sizing:border-box;display:flex;flex-direction:row;list-style:none;margin-bottom:-1px}.dnd-sortable-tree_folder_tree-item{align-items:center;box-sizing:border-box;display:flex;padding:7px 0;position:relative}.dnd-sortable-tree_folder_clone{display:inline-block;padding:5px;pointer-events:none}.dnd-sortable-tree_folder_clone>.dnd-sortable-tree_folder_tree-item{border-radius:4px;padding-bottom:5px;padding-right:24px;padding-top:5px}.dnd-sortable-tree_folder_ghost{opacity:.5}.dnd-sortable-tree_folder_disable-selection{-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnd-sortable-tree_folder_disable-interaction{pointer-events:none}.dnd-sortable-tree_folder_line{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='100%'/></svg>\");width:20px}.dnd-sortable-tree_folder_line-last{align-self:stretch;width:20px}.dnd-sortable-tree_folder_line-to_self{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='100%'/><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='50%' x2='100%' y2='50%'/></svg>\");width:20px}.dnd-sortable-tree_folder_line-to_self-last{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='0' x2='50%' y2='50%'/><line stroke='black' style='stroke-width: 1px;' x1='50%' y1='50%' x2='100%' y2='50%'/></svg>\");width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41'><path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' /></svg>\") no-repeat 50%;border:0;transition:transform .25s ease;width:20px}.dnd-sortable-tree_folder_tree-item-collapse_button-collapsed{transform:rotate(-90deg)}.dnd-sortable-tree_folder_handle{align-self:stretch;background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='12'><path d='M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z'></path></svg>\") no-repeat 50%;cursor:pointer;width:20px}";
styleInject(css_248z$1);
var _excluded$1 = ["clone", "depth", "disableSelection", "disableInteraction", "disableSorting", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "item", "wrapperRef", "style", "isLast", "parent", "hideCollapseButton", "childCount", "manualDrag", "showDragHandle", "disableCollapseOnItemClick", "className", "contentClassName", "isOver", "isOverParent"];
function flattenParents(parent) {
if (!parent) return [];
return [].concat(flattenParents(parent.parent), [parent]);
}
var FolderTreeItemWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
var clone = props.clone,
disableSelection = props.disableSelection,
disableInteraction = props.disableInteraction,
disableSorting = props.disableSorting,
ghost = props.ghost,
handleProps = props.handleProps,
collapsed = props.collapsed,
onCollapse = props.onCollapse,
wrapperRef = props.wrapperRef,
style = props.style,
isLast = props.isLast,
parent = props.parent,
hideCollapseButton = props.hideCollapseButton,
childCount = props.childCount,
manualDrag = props.manualDrag,
showDragHandle = props.showDragHandle,
disableCollapseOnItemClick = props.disableCollapseOnItemClick,
className = props.className,
contentClassName = props.contentClassName,
rest = _objectWithoutPropertiesLoose(props, _excluded$1);
var flattenedParents = flattenParents(parent);
return React__default.createElement("li", Object.assign({}, rest, {
className: clsx('dnd-sortable-tree_folder_wrapper', clone && 'dnd-sortable-tree_folder_clone', ghost && 'dnd-sortable-tree_folder_ghost', disableSelection && 'dnd-sortable-tree_folder_disable-selection', disableInteraction && 'dnd-sortable-tree_folder_disable-interaction', className),
ref: wrapperRef,
style: style
}), flattenedParents.map(function (item) {
return React__default.createElement("div", {
key: item.id,
className: item.isLast ? 'dnd-sortable-tree_folder_line-last' : 'dnd-sortable-tree_folder_line'
});
}), React__default.createElement("div", {
className: isLast ? 'dnd-sortable-tree_folder_line-to_self-last' : 'dnd-sortable-tree_folder_line-to_self'
}), manualDrag && showDragHandle && !disableSorting && React__default.createElement("div", Object.assign({
className: 'dnd-sortable-tree_folder_handle'
}, handleProps)), !manualDrag && !hideCollapseButton && !!onCollapse && !!childCount && React__default.createElement("button", {
onClick: function onClick(e) {
e.preventDefault();
onCollapse == null ? void 0 : onCollapse();
},
className: clsx('dnd-sortable-tree_folder_tree-item-collapse_button', collapsed && 'dnd-sortable-tree_folder_tree-item-collapse_button-collapsed')
}), React__default.createElement("div", Object.assign({
className: clsx('dnd-sortable-tree_folder_tree-item', contentClassName),
ref: ref
}, manualDrag ? undefined : handleProps, {
onClick: disableCollapseOnItemClick ? undefined : onCollapse
}), props.children));
});
var iOS = typeof window !== 'undefined' ? /*#__PURE__*/ /iPad|iPhone|iPod/.test(navigator.platform) : false;
function getDragDepth(offset, indentationWidth) {
return Math.round(offset / indentationWidth);
}
var _revertLastChanges = function _revertLastChanges() {};
function getProjection(items, activeId, overId, dragOffset, indentationWidth, keepGhostInPlace, canRootHaveChildren) {
var _parent$depth2, _nextItem$depth, _nextItem$depth2;
_revertLastChanges();
_revertLastChanges = function _revertLastChanges() {};
if (!activeId || !overId) return null;
var overItemIndex = items.findIndex(function (_ref) {
var id = _ref.id;
return id === overId;
});
var activeItemIndex = items.findIndex(function (_ref2) {
var id = _ref2.id;
return id === activeId;
});
var activeItem = items[activeItemIndex];
if (keepGhostInPlace) {
var _parent$depth, _parent2, _parent$id, _parent3, _parent4;
var _parent = items[overItemIndex];
_parent = findParentWhichCanHaveChildren(_parent, activeItem, canRootHaveChildren);
if (_parent === undefined) return null;
return {
depth: (_parent$depth = (_parent2 = _parent) == null ? void 0 : _parent2.depth) != null ? _parent$depth : 0 + 1,
parentId: (_parent$id = (_parent3 = _parent) == null ? void 0 : _parent3.id) != null ? _parent$id : null,
parent: _parent,
isLast: !!((_parent4 = _parent) != null && _parent4.isLast)
};
}
var newItems = sortable.arrayMove(items, activeItemIndex, overItemIndex);
var previousItem = newItems[overItemIndex - 1];
var nextItem = newItems[overItemIndex + 1];
var dragDepth = getDragDepth(dragOffset, indentationWidth);
var projectedDepth = activeItem.depth + dragDepth;
var depth = projectedDepth;
var directParent = findParentWithDepth(depth - 1, previousItem);
var parent = findParentWhichCanHaveChildren(directParent, activeItem, canRootHaveChildren);
if (parent === undefined) return null;
var maxDepth = ((_parent$depth2 = parent == null ? void 0 : parent.depth) != null ? _parent$depth2 : -1) + 1;
var minDepth = (_nextItem$depth = nextItem == null ? void 0 : nextItem.depth) != null ? _nextItem$depth : 0;
if (minDepth > maxDepth) return null;
if (depth >= maxDepth) {
depth = maxDepth;
} else if (depth < minDepth) {
depth = minDepth;
}
var isLast = ((_nextItem$depth2 = nextItem == null ? void 0 : nextItem.depth) != null ? _nextItem$depth2 : -1) < depth;
if (parent && parent.isLast) {
_revertLastChanges = function _revertLastChanges() {
parent.isLast = true;
};
parent.isLast = false;
}
return {
depth: depth,
parentId: getParentId(),
parent: parent,
isLast: isLast
};
function findParentWithDepth(depth, previousItem) {
if (!previousItem) return null;
while (depth < previousItem.depth) {
if (previousItem.parent === null) return null;
previousItem = previousItem.parent;
}
return previousItem;
}
function findParentWhichCanHaveChildren(parent, dragItem, canRootHaveChildren) {
if (!parent) {
var rootCanHaveChildren = typeof canRootHaveChildren === 'function' ? canRootHaveChildren(dragItem) : canRootHaveChildren;
if (rootCanHaveChildren === false) return undefined;
return parent;
}
var canHaveChildren = typeof parent.canHaveChildren === 'function' ? parent.canHaveChildren(dragItem) : parent.canHaveChildren;
if (canHaveChildren === false) return findParentWhichCanHaveChildren(parent.parent, activeItem, canRootHaveChildren);
return parent;
}
function getParentId() {
var _newItems$slice$rever;
if (depth === 0 || !previousItem) {
return null;
}
if (depth === previousItem.depth) {
return previousItem.parentId;
}
if (depth > previousItem.depth) {
return previousItem.id;
}
var newParent = (_newItems$slice$rever = newItems.slice(0, overItemIndex).reverse().find(function (item) {
return item.depth === depth;
})) == null ? void 0 : _newItems$slice$rever.parentId;
return newParent != null ? newParent : null;
}
}
function flatten(items, parentId, depth, parent) {
if (parentId === void 0) {
parentId = null;
}
if (depth === void 0) {
depth = 0;
}
if (parent === void 0) {
parent = null;
}
return items.reduce(function (acc, item, index) {
var _item$children;
var flattenedItem = _extends({}, item, {
parentId: parentId,
depth: depth,
index: index,
isLast: items.length === index + 1,
parent: parent
});
return [].concat(acc, [flattenedItem], flatten((_item$children = item.children) != null ? _item$children : [], item.id, depth + 1, flattenedItem));
}, []);
}
function flattenTree(items) {
return flatten(items);
}
function buildTree(flattenedItems) {
var _nodes, _root$children;
var root = {
id: 'root',
children: []
};
var nodes = (_nodes = {}, _nodes[root.id] = root, _nodes);
var items = flattenedItems.map(function (item) {
return _extends({}, item, {
children: []
});
});
for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
var _item$parentId, _nodes$parentId, _parent$children;
var item = _step.value;
var id = item.id;
var parentId = (_item$parentId = item.parentId) != null ? _item$parentId : root.id;
var parent = (_nodes$parentId = nodes[parentId]) != null ? _nodes$parentId : findItem(items, parentId);
item.parent = null;
nodes[id] = item;
parent == null ? void 0 : (_parent$children = parent.children) == null ? void 0 : _parent$children.push(item);
}
return (_root$children = root.children) != null ? _root$children : [];
}
function findItem(items, itemId) {
return items.find(function (_ref3) {
var id = _ref3.id;
return id === itemId;
});
}
function findItemDeep(items, itemId) {
for (var _iterator2 = _createForOfIteratorHelperLoose(items), _step2; !(_step2 = _iterator2()).done;) {
var item = _step2.value;
var id = item.id,
children = item.children;
if (id === itemId) {
return item;
}
if (children != null && children.length) {
var child = findItemDeep(children, itemId);
if (child) {
return child;
}
}
}
return undefined;
}
function removeItem(items, id) {
var newItems = [];
for (var _iterator3 = _createForOfIteratorHelperLoose(items), _step3; !(_step3 = _iterator3()).done;) {
var _item$children2;
var item = _step3.value;
if (item.id === id) {
continue;
}
if ((_item$children2 = item.children) != null && _item$children2.length) {
item.children = removeItem(item.children, id);
}
newItems.push(item);
}
return newItems;
}
function setProperty(items, id, property, setter) {
for (var _iterator4 = _createForOfIteratorHelperLoose(items), _step4; !(_step4 = _iterator4()).done;) {
var _item$children3;
var item = _step4.value;
if (item.id === id) {
item[property] = setter(item[property]);
continue;
}
if ((_item$children3 = item.children) != null && _item$children3.length) {
item.children = setProperty(item.children, id, property, setter);
}
}
return [].concat(items);
}
function countChildren(items, count) {
if (count === void 0) {
count = 0;
}
return items.reduce(function (acc, _ref4) {
var children = _ref4.children;
if (children != null && children.length) {
return countChildren(children, acc + 1);
}
return acc + 1;
}, count);
}
function getChildCount(items, id) {
var _item$children4;
if (!id) {
return 0;
}
var item = findItemDeep(items, id);
return item ? countChildren((_item$children4 = item.children) != null ? _item$children4 : []) : 0;
}
function removeChildrenOf(items, ids) {
var excludeParentIds = [].concat(ids);
return items.filter(function (item) {
if (item.parentId && excludeParentIds.includes(item.parentId)) {
var _item$children5;
if ((_item$children5 = item.children) != null && _item$children5.length) {
excludeParentIds.push(item.id);
}
return false;
}
return true;
});
}
function getIsOverParent(parent, overId) {
if (!parent || !overId) return false;
if (parent.id === overId) return true;
return getIsOverParent(parent.parent, overId);
}
var _excluded$2 = ["id", "depth", "isLast", "TreeItemComponent", "parent", "disableSorting", "sortableProps", "keepGhostInPlace"];
var animateLayoutChanges = function animateLayoutChanges(_ref) {
var isSorting = _ref.isSorting,
isDragging = _ref.isDragging;
return isSorting || isDragging ? false : true;
};
var SortableTreeItemNotMemoized = function SortableTreeItem(_ref2) {
var id = _ref2.id,
depth = _ref2.depth,
isLast = _ref2.isLast,
TreeItemComponent = _ref2.TreeItemComponent,
parent = _ref2.parent,
disableSorting = _ref2.disableSorting,
sortableProps = _ref2.sortableProps,
keepGhostInPlace = _ref2.keepGhostInPlace,
props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
var _useSortable = sortable.useSortable(_extends({
id: id,
animateLayoutChanges: animateLayoutChanges,
disabled: disableSorting
}, sortableProps)),
attributes = _useSortable.attributes,
isDragging = _useSortable.isDragging,
isSorting = _useSortable.isSorting,
listeners = _useSortable.listeners,
setDraggableNodeRef = _useSortable.setDraggableNodeRef,
setDroppableNodeRef = _useSortable.setDroppableNodeRef,
transform = _useSortable.transform,
transition = _useSortable.transition,
isOver = _useSortable.isOver,
over = _useSortable.over;
var isOverParent = React.useMemo(function () {
return !!(over != null && over.id) && getIsOverParent(parent, over.id);
}, [over == null ? void 0 : over.id]);
var style = {
transform: utilities.CSS.Translate.toString(transform),
transition: transition != null ? transition : undefined
};
var localCollapse = React.useMemo(function () {
if (!props.onCollapse) return undefined;
return function () {
return props.onCollapse == null ? void 0 : props.onCollapse(props.item.id);
};
}, [props.item.id, props.onCollapse]);
var localRemove = React.useMemo(function () {
if (!props.onRemove) return undefined;
return function () {
return props.onRemove == null ? void 0 : props.onRemove(props.item.id);
};
}, [props.item.id, props.onRemove]);
return React__default.createElement(TreeItemComponent, Object.assign({}, props, {
ref: setDraggableNodeRef,
wrapperRef: setDroppableNodeRef,
style: keepGhostInPlace ? undefined : style,
depth: depth,
ghost: isDragging,
disableSelection: iOS,
disableInteraction: isSorting,
isLast: isLast,
parent: parent,
handleProps: _extends({}, attributes, listeners),
onCollapse: localCollapse,
onRemove: localRemove,
disableSorting: disableSorting,
isOver: isOver,
isOverParent: isOverParent
}));
};
var SortableTreeItem = /*#__PURE__*/React__default.memo(SortableTreeItemNotMemoized);
var customListSortingStrategy = function customListSortingStrategy(isValid) {
var sortingStrategy = function sortingStrategy(_ref) {
var activeIndex = _ref.activeIndex,
activeNodeRect = _ref.activeNodeRect,
index = _ref.index,
rects = _ref.rects,
overIndex = _ref.overIndex;
if (isValid(activeIndex, overIndex)) {
return sortable.verticalListSortingStrategy({
activeIndex: activeIndex,
activeNodeRect: activeNodeRect,
index: index,
rects: rects,
overIndex: overIndex
});
}
return null;
};
return sortingStrategy;
};
var _excluded$3 = ["items", "indicator", "indentationWidth", "onItemsChanged", "TreeItemComponent", "pointerSensorOptions", "disableSorting", "dropAnimation", "dndContextProps", "sortableProps", "keepGhostInPlace", "canRootHaveChildren"];
var defaultPointerSensorOptions = {
activationConstraint: {
distance: 3
}
};
var dropAnimationDefaultConfig = {
keyframes: function keyframes(_ref) {
var transform = _ref.transform;
return [{
opacity: 1,
transform: utilities.CSS.Transform.toString(transform.initial)
}, {
opacity: 0,
transform: utilities.CSS.Transform.toString(_extends({}, transform["final"], {
x: transform["final"].x + 5,
y: transform["final"].y + 5
}))
}];
},
easing: 'ease-out',
sideEffects: function sideEffects(_ref2) {
var active = _ref2.active;
active.node.animate([{
opacity: 0
}, {
opacity: 1
}], {
duration: core.defaultDropAnimation.duration,
easing: core.defaultDropAnimation.easing
});
}
};
function SortableTree(_ref3) {
var items = _ref3.items,
indicator = _ref3.indicator,
_ref3$indentationWidt = _ref3.indentationWidth,
indentationWidth = _ref3$indentationWidt === void 0 ? 20 : _ref3$indentationWidt,
onItemsChanged = _ref3.onItemsChanged,
TreeItemComponent = _ref3.TreeItemComponent,
pointerSensorOptions = _ref3.pointerSensorOptions,
disableSorting = _ref3.disableSorting,
dropAnimation = _ref3.dropAnimation,
dndContextProps = _ref3.dndContextProps,
sortableProps = _ref3.sortableProps,
keepGhostInPlace = _ref3.keepGhostInPlace,
canRootHaveChildren = _ref3.canRootHaveChildren,
rest = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
var _useState = React.useState(null),
activeId = _useState[0],
setActiveId = _useState[1];
var _useState2 = React.useState(null),
overId = _useState2[0],
setOverId = _useState2[1];
var _useState3 = React.useState(0),
offsetLeft = _useState3[0],
setOffsetLeft = _useState3[1];
var _useState4 = React.useState(null),
currentPosition = _useState4[0],
setCurrentPosition = _useState4[1];
var flattenedItems = React.useMemo(function () {
var flattenedTree = flattenTree(items);
var collapsedItems = flattenedTree.reduce(function (acc, _ref4) {
var children = _ref4.children,
collapsed = _ref4.collapsed,
id = _ref4.id;
return collapsed && children != null && children.length ? [].concat(acc, [id]) : acc;
}, []);
var result = removeChildrenOf(flattenedTree, activeId ? [activeId].concat(collapsedItems) : collapsedItems);
return result;
}, [activeId, items]);
var projected = getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth, keepGhostInPlace != null ? keepGhostInPlace : false, canRootHaveChildren);
var sensorContext = React.useRef({
items: flattenedItems,
offset: offsetLeft
}); // const [coordinateGetter] = useState(() =>
// sortableTreeKeyboardCoordinates(sensorContext, indentationWidth)
// );
var sensors = core.useSensors(core.useSensor(core.PointerSensor, pointerSensorOptions != null ? pointerSensorOptions : defaultPointerSensorOptions) // useSensor(KeyboardSensor, {
// coordinateGetter,
// })
);
var sortedIds = React.useMemo(function () {
return flattenedItems.map(function (_ref5) {
var id = _ref5.id;
return id;
});
}, [flattenedItems]);
var activeItem = activeId ? flattenedItems.find(function (_ref6) {
var id = _ref6.id;
return id === activeId;
}) : null;
React.useEffect(function () {
sensorContext.current = {
items: flattenedItems,
offset: offsetLeft
};
}, [flattenedItems, offsetLeft]);
var itemsRef = React.useRef(items);
itemsRef.current = items;
var handleRemove = React.useCallback(function (id) {
var item = findItemDeep(itemsRef.current, id);
onItemsChanged(removeItem(itemsRef.current, id), {
type: 'removed',
item: item
});
}, [onItemsChanged]);
var handleCollapse = React.useCallback(function handleCollapse(id) {
var item = findItemDeep(itemsRef.current, id);
onItemsChanged(setProperty(itemsRef.current, id, 'collapsed', function (value) {
return !value;
}), {
type: item.collapsed ? 'collapsed' : 'expanded',
item: item
});
}, [onItemsChanged]);
var announcements = React.useMemo(function () {
return {
onDragStart: function onDragStart(_ref7) {
var active = _ref7.active;
return "Picked up " + active.id + ".";
},
onDragMove: function onDragMove(_ref8) {
var active = _ref8.active,
over = _ref8.over;
return getMovementAnnouncement('onDragMove', active.id, over == null ? void 0 : over.id);
},
onDragOver: function onDragOver(_ref9) {
var active = _ref9.active,
over = _ref9.over;
return getMovementAnnouncement('onDragOver', active.id, over == null ? void 0 : over.id);
},
onDragEnd: function onDragEnd(_ref10) {
var active = _ref10.active,
over = _ref10.over;
return getMovementAnnouncement('onDragEnd', active.id, over == null ? void 0 : over.id);
},
onDragCancel: function onDragCancel(_ref11) {
var active = _ref11.active;
return "Moving was cancelled. " + active.id + " was dropped in its original position.";
}
};
}, []);
var strategyCallback = React.useCallback(function () {
return !!projected;
}, [projected]);
return React__default.createElement(core.DndContext, Object.assign({
accessibility: {
announcements: announcements
},
sensors: disableSorting ? undefined : sensors,
modifiers: indicator ? modifiersArray : undefined,
collisionDetection: core.closestCenter,
// measuring={measuring}
onDragStart: disableSorting ? undefined : handleDragStart,
onDragMove: disableSorting ? undefined : handleDragMove,
onDragOver: disableSorting ? undefined : handleDragOver,
onDragEnd: disableSorting ? undefined : handleDragEnd,
onDragCancel: disableSorting ? undefined : handleDragCancel
}, dndContextProps), React__default.createElement(sortable.SortableContext, {
items: sortedIds,
strategy: disableSorting ? undefined : customListSortingStrategy(strategyCallback)
}, flattenedItems.map(function (item) {
var _item$children, _item$children2, _item$children3;
return React__default.createElement(SortableTreeItem, Object.assign({}, rest, {
key: item.id,
id: item.id,
item: item,
childCount: (_item$children = item.children) == null ? void 0 : _item$children.length,
depth: item.id === activeId && projected && !keepGhostInPlace ? projected.depth : item.depth,
indentationWidth: indentationWidth,
indicator: indicator,
collapsed: Boolean(item.collapsed && ((_item$children2 = item.children) == null ? void 0 : _item$children2.length)),
onCollapse: (_item$children3 = item.children) != null && _item$children3.length ? handleCollapse : undefined,
onRemove: handleRemove,
isLast: item.id === activeId && projected ? projected.isLast : item.isLast,
parent: item.id === activeId && projected ? projected.parent : item.parent,
TreeItemComponent: TreeItemComponent,
disableSorting: disableSorting,
sortableProps: sortableProps,
keepGhostInPlace: keepGhostInPlace
}));
}), reactDom.createPortal(React__default.createElement(core.DragOverlay, {
dropAnimation: dropAnimation === undefined ? dropAnimationDefaultConfig : dropAnimation
}, activeId && activeItem ? React__default.createElement(TreeItemComponent, Object.assign({}, rest, {
item: activeItem,
children: [],
depth: activeItem.depth,
clone: true,
childCount: getChildCount(items, activeId) + 1,
indentationWidth: indentationWidth,
isLast: false,
parent: activeItem.parent,
isOver: false,
isOverParent: false
})) : null), document.body)));
function handleDragStart(_ref12) {
var activeId = _ref12.active.id;
setActiveId(activeId);
setOverId(activeId);
var activeItem = flattenedItems.find(function (_ref13) {
var id = _ref13.id;
return id === activeId;
});
if (activeItem) {
setCurrentPosition({
parentId: activeItem.parentId,
overId: activeId
});
}
document.body.style.setProperty('cursor', 'grabbing');
}
function handleDragMove(_ref14) {
var delta = _ref14.delta;
setOffsetLeft(delta.x);
}
function handleDragOver(_ref15) {
var _over$id;
var over = _ref15.over;
setOverId((_over$id = over == null ? void 0 : over.id) != null ? _over$id : null);
}
function handleDragEnd(_ref16) {
var active = _ref16.active,
over = _ref16.over;
resetState();
if (projected && over) {
var depth = projected.depth,
parentId = projected.parentId;
if (keepGhostInPlace && over.id === active.id) return;
var clonedItems = flattenTree(items);
var overIndex = clonedItems.findIndex(function (_ref17) {
var id = _ref17.id;
return id === over.id;
});
var activeIndex = clonedItems.findIndex(function (_ref18) {
var id = _ref18.id;
return id === active.id;
});
var activeTreeItem = clonedItems[activeIndex];
clonedItems[activeIndex] = _extends({}, activeTreeItem, {
depth: depth,
parentId: parentId
});
var draggedFromParent = activeTreeItem.parent;
var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
var newItems = buildTree(sortedItems);
var newActiveItem = sortedItems.find(function (x) {
return x.id === active.id;
});
var currentParent = newActiveItem.parentId ? sortedItems.find(function (x) {
return x.id === newActiveItem.parentId;
}) : null; // removing setTimeout leads to an unwanted scrolling
// Use case:
// There are a lot of items in a tree (so that the scroll exists).
// You take the node from the bottom and move it to the top
// Without `setTimeout` when you drop the node the list gets scrolled to the bottom.
setTimeout(function () {
return onItemsChanged(newItems, {
type: 'dropped',
draggedItem: newActiveItem,
draggedFromParent: draggedFromParent,
droppedToParent: currentParent
});
});
}
}
function handleDragCancel() {
resetState();
}
function resetState() {
setOverId(null);
setActiveId(null);
setOffsetLeft(0);
setCurrentPosition(null);
document.body.style.setProperty('cursor', '');
}
function getMovementAnnouncement(eventName, activeId, overId) {
if (overId && projected) {
if (eventName !== 'onDragEnd') {
if (currentPosition && projected.parentId === currentPosition.parentId && overId === currentPosition.overId) {
return;
} else {
setCurrentPosition({
parentId: projected.parentId,
overId: overId
});
}
}
var clonedItems = flattenTree(items);
var overIndex = clonedItems.findIndex(function (_ref19) {
var id = _ref19.id;
return id === overId;
});
var activeIndex = clonedItems.findIndex(function (_ref20) {
var id = _ref20.id;
return id === activeId;
});
var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
var previousItem = sortedItems[overIndex - 1];
var announcement;
var movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
var nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
if (!previousItem) {
var nextItem = sortedItems[overIndex + 1];
announcement = activeId + " was " + movedVerb + " before " + nextItem.id + ".";
} else {
if (projected.depth > previousItem.depth) {
announcement = activeId + " was " + nestedVerb + " under " + previousItem.id + ".";
} else {
var previousSibling = previousItem;
var _loop = function _loop() {
var parentId = previousSibling.parentId;
previousSibling = sortedItems.find(function (_ref21) {
var id = _ref21.id;
return id === parentId;
});
};
while (previousSibling && projected.depth < previousSibling.depth) {
_loop();
}
if (previousSibling) {
announcement = activeId + " was " + movedVerb + " after " + previousSibling.id + ".";
}
}
}
return announcement;
}
return;
}
}
var adjustTranslate = function adjustTranslate(_ref22) {
var transform = _ref22.transform;
return _extends({}, transform, {
y: transform.y - 25
});
};
var modifiersArray = [adjustTranslate];
exports.FolderTreeItemWrapper = FolderTreeItemWrapper;
exports.SimpleTreeItemWrapper = SimpleTreeItemWrapper;
exports.SortableTree = SortableTree;
exports.flattenTree = flattenTree;
//# sourceMappingURL=dnd-kit-sortable-tree.cjs.development.js.map