@reltio/components 1.4.1992 → 1.4.1993

package/cjs/RCTree/useDnd.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDnd = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var types_1 = require("./types");
+var useScrollOnDrag_1 = require("./useScrollOnDrag");
+var useDelayedDragEventCall_1 = require("./useDelayedDragEventCall");
+var helper_1 = require("./helper");
+var useDnd = function (_a) {
+    var treeData = _a.treeData, containerRef = _a.containerRef, expandNode = _a.expandNode, onLoadChildren = _a.onLoadChildren, onChange = _a.onChange, onDropProp = _a.onDrop, canDrop = _a.canDrop, canDrag = _a.canDrag;
+    var _b = (0, react_1.useState)(null), dragNode = _b[0], setDragNode = _b[1];
+    var _c = (0, react_1.useState)(null), dropNode = _c[0], setDropNode = _c[1];
+    var _d = (0, react_1.useState)(null), dropPositionInfo = _d[0], setDropPositionInfo = _d[1];
+    var _e = (0, useScrollOnDrag_1.useScrollOnDrag)(containerRef), onStartDragging = _e.onStartDragging, onEndDragging = _e.onEndDragging, getIsScrolling = _e.getIsScrolling;
+    var handleDropOutsideTree = function () {
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+        window.removeEventListener('mousemove', handleDropOutsideTree);
+    };
+    var onDragStart = function (_a) {
+        var node = _a.node;
+        setDragNode(node);
+        onStartDragging();
+        window.addEventListener('mousemove', handleDropOutsideTree);
+    };
+    var expandedKeys = (0, react_1.useMemo)(function () {
+        return (0, helper_1.getExpandedKeys)(treeData);
+    }, [treeData]);
+    var expandDropNodeAtPosition = (0, react_1.useCallback)(function (pos, expanded) {
+        var node = (0, helper_1.getNodeAtPosition)(treeData, pos);
+        if (node && !expandedKeys.includes(node.nodeId)) {
+            expandNode(pos, expanded);
+            if (node.pending && onLoadChildren) {
+                onLoadChildren(node);
+            }
+        }
+    }, [expandNode, expandedKeys, onLoadChildren, treeData]);
+    var expandDropNode = (0, react_1.useCallback)(function (newDropPositionInfo) {
+        if (onChange && newDropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild) {
+            var currentParentNodePos = (0, helper_1.slideNodePos)(newDropPositionInfo.pos, dragNode.pos);
+            if (currentParentNodePos.split('-').length > 1) {
+                expandDropNodeAtPosition(currentParentNodePos, true);
+            }
+        }
+    }, [dragNode, expandDropNodeAtPosition, onChange]);
+    var handleSetDropNode = (0, react_1.useCallback)(function (_a) {
+        var event = _a.event, node = _a.node;
+        var newDropPositionInfo = (0, helper_1.getDropNodePosition)(event, node, dropPositionInfo) || dropPositionInfo;
+        if (!(0, ramda_1.equals)(newDropPositionInfo, dropPositionInfo) && (!(0, helper_1.isDropIndicatorNode)(node) || !dropNode)) {
+            setDropPositionInfo(newDropPositionInfo);
+            expandDropNode(newDropPositionInfo);
+        }
+        if (node.key !== (dropNode === null || dropNode === void 0 ? void 0 : dropNode.key)) {
+            setDropNode(node);
+        }
+    }, [dropNode, dropPositionInfo, expandDropNode]);
+    var delayedHandleDragOver = (0, useDelayedDragEventCall_1.useDelayedDragEventCall)(handleSetDropNode);
+    var onDragOver = function (_a) {
+        var event = _a.event, node = _a.node;
+        var isScrolling = getIsScrolling();
+        if (!isScrolling)
+            delayedHandleDragOver({ event: event, node: node });
+    };
+    var dropIndicatorRender = function () {
+        return null;
+    };
+    var onDragLeave = function (_a) {
+        var _b, _c;
+        var event = _a.event, node = _a.node;
+        var draggedChildrenNodes = ((_b = dragNode === null || dragNode === void 0 ? void 0 : dragNode.value) === null || _b === void 0 ? void 0 : _b.expanded) ? (0, helper_1.getExpandedKeys)((_c = dragNode.value) === null || _c === void 0 ? void 0 : _c.children) : [];
+        if (draggedChildrenNodes.includes(node.key)) {
+            handleSetDropNode({ event: event, node: node });
+        }
+    };
+    var onDrop = function () {
+        if (dragNode && (0, helper_1.isDropIndicatorNode)(dropNode)) {
+            var parentNodePosition = dropPositionInfo.dropPosition === types_1.AddNodePosition.AsChild
+                ? dropPositionInfo.pos
+                : (0, helper_1.getParentPos)(dropPositionInfo.pos);
+            var parentNode = (0, helper_1.getNodeAtPosition)(treeData, parentNodePosition);
+            var newTreeData = (0, helper_1.moveNode)(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
+            onDropProp(newTreeData, dragNode.value, parentNode);
+        }
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+    };
+    var allowDrop = (0, react_1.useCallback)(function (_a) {
+        var dragNode = _a.dragNode, dropNode = _a.dropNode;
+        return canDrop({ nextParent: dropNode.value, node: dragNode.value });
+    }, [canDrop]);
+    var nodeDraggable = (0, react_1.useCallback)(function (node) {
+        return canDrag({ node: node.value });
+    }, [canDrag]);
+    return {
+        treeProps: {
+            onDragStart: onDragStart,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: onDrop,
+            dropIndicatorRender: dropIndicatorRender,
+            allowDrop: allowDrop
+        },
+        nodeDraggable: nodeDraggable,
+        dropNode: dropNode,
+        dragNode: dragNode,
+        dropPositionInfo: dropPositionInfo
+    };
+};
+exports.useDnd = useDnd;

package/cjs/RCTree/useScrollOnDrag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const useScrollOnDrag: (scrollContainer: React.MutableRefObject<HTMLDivElement>) => {
+    onStartDragging: () => void;
+    onEndDragging: () => void;
+    getIsScrolling: () => boolean;
+};

package/cjs/RCTree/useScrollOnDrag.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollOnDrag = void 0;
+var react_1 = require("react");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var SCROLL_MARGIN = 50;
+var SPEED_MULTIPLIER = 25;
+var UPDATE_DATA_INTERVAL = 100;
+var useScrollOnDrag = function (scrollContainer) {
+    var scrolling = (0, react_1.useRef)(false);
+    var running = (0, react_1.useRef)(false);
+    var scrollData = (0, react_1.useRef)(null);
+    var getIsScrolling = function () {
+        return scrolling === null || scrolling === void 0 ? void 0 : scrolling.current;
+    };
+    var onStartDragging = function () {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (container && typeof container.addEventListener === 'function') {
+            container.addEventListener('dragover', updateScrollData);
+            window.addEventListener('dragover', updateScrollData);
+            running.current = true;
+        }
+    };
+    var updateScrollData = (0, react_1.useCallback)((0, mdm_sdk_1.throttle)(function (event) {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (!container || !running.current)
+            return;
+        var holder = container.getElementsByClassName('rc-tree-list-holder')[0];
+        var calcSpeed = function () {
+            var clientY = event.clientY, clientX = event.clientX;
+            var _a = container.getBoundingClientRect(), top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right;
+            var maxScroll = holder.scrollHeight - holder.clientHeight;
+            var insideContainer = clientY > top && clientY < bottom && clientX >= left && clientX <= right;
+            if (insideContainer) {
+                if (clientY - top < SCROLL_MARGIN && holder.scrollTop > 0) {
+                    return (clientY - top - SCROLL_MARGIN) / SCROLL_MARGIN;
+                }
+                else if (bottom - clientY < SCROLL_MARGIN && holder.scrollTop < maxScroll) {
+                    return -(bottom - clientY - SCROLL_MARGIN) / SCROLL_MARGIN;
+                }
+            }
+            return 0;
+        };
+        if (holder) {
+            scrollData.current = calcSpeed();
+            if (scrollData.current) {
+                runScrolling(holder);
+            }
+        }
+    }, UPDATE_DATA_INTERVAL), []);
+    var removeListeners = (0, react_1.useCallback)(function () {
+        var container = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.current;
+        if (container && typeof container.removeEventListener === 'function') {
+            container.removeEventListener('dragover', updateScrollData);
+        }
+        window.removeEventListener('dragover', updateScrollData);
+    }, [scrollContainer, updateScrollData]);
+    var onEndDragging = (0, react_1.useCallback)(function () {
+        scrolling.current = false;
+        scrollData.current = null;
+        running.current = false;
+        removeListeners();
+    }, [removeListeners]);
+    var runScrolling = function (holder) {
+        if (scrolling === null || scrolling === void 0 ? void 0 : scrolling.current) {
+            return;
+        }
+        scrolling.current = true;
+        var scroll = function () {
+            if (scrolling.current && scrollData.current) {
+                holder.scrollTop += scrollData.current * SPEED_MULTIPLIER;
+                requestAnimationFrame(scroll);
+            }
+            else {
+                scrolling.current = false;
+            }
+        };
+        scroll();
+    };
+    (0, react_1.useEffect)(function () {
+        return function () {
+            removeListeners();
+        };
+    }, [removeListeners]);
+    return { onStartDragging: onStartDragging, onEndDragging: onEndDragging, getIsScrolling: getIsScrolling };
+};
+exports.useScrollOnDrag = useScrollOnDrag;

package/esm/HOCs/withDragHandle/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragHandleContainer" | "dragHandleVisibilityArea" | "dragHandle" | "dragIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragHandle" | "dragHandleContainer" | "dragHandleVisibilityArea" | "dragIcon">;

package/esm/RCTree/RCTree.d.ts

@@ -4,10 +4,16 @@ import { RCTreeNode } from './types';
 type Props = {
     treeData: RCTreeNode[];
     renderNode?: (node: RCTreeNode & Record<string, unknown>) => React.ReactElement;
-    canDrag?: boolean;
     isVirtualized?: boolean;
-    canDrop?: (params: unknown) => boolean;
-    onLoadChildren?: (treeNode: unknown) => Promise<void>;
+    canDrag?: (params: {
+        node: RCTreeNode;
+    }) => boolean;
+    canDrop?: (params: {
+        nextParent: RCTreeNode;
+        node: RCTreeNode;
+    }) => boolean;
+    onDrop?: (treeData: RCTreeNode[], dragNode: RCTreeNode, parentNode: RCTreeNode) => void;
+    onLoadChildren?: (treeNode: RCTreeNode) => Promise<void>;
     height?: number;
     defaultExpandAll?: boolean;
     SwitchRenderer?: (props: any) => React.ReactElement;
@@ -17,5 +23,5 @@ type Props = {
     scrollToNode?: RCTreeNode;
     onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
 export {};

package/esm/RCTree/RCTree.js

@@ -1,47 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import classnames from 'classnames';
 import { assoc, identity } from 'ramda';
 import Tree from 'rc-tree';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import DragIndicator from '@mui/icons-material/DragIndicator';
 import { DefaultSwitchRenderer } from './DefaultSwitchRenderer';
-import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, getExpandedKeys } from './helper';
+import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, gatherNodeKeys, getExpandedKeys, isDropIndicatorNode, moveNode, preventNodeDragging } from './helper';
+import { useDnd } from './useDnd';
 import { useStyles } from './styles';
 var MIN_ROW_HEIGHT = 28;
 export var RCTree = function (_a) {
-    var treeData = _a.treeData, _b = _a.isVirtualized, isVirtualized = _b === void 0 ? true : _b, _c = _a.canDrag, canDrag = _c === void 0 ? false : _c, _d = _a.canDrop, canDrop = _d === void 0 ? function () { return false; } : _d, onLoadChildren = _a.onLoadChildren, height = _a.height, _e = _a.defaultExpandAll, defaultExpandAll = _e === void 0 ? false : _e, _f = _a.SwitchRenderer, SwitchRenderer = _f === void 0 ? DefaultSwitchRenderer : _f, className = _a.className, renderNode = _a.renderNode, _g = _a.minItemHeight, minItemHeight = _g === void 0 ? MIN_ROW_HEIGHT : _g, _h = _a.isLeaf, isLeaf = _h === void 0 ? defaultIsLeaf : _h, scrollToNode = _a.scrollToNode, _j = _a.onChange, onChange = _j === void 0 ? identity : _j;
+    var _b;
+    var treeData = _a.treeData, _c = _a.isVirtualized, isVirtualized = _c === void 0 ? true : _c, _d = _a.canDrag, canDrag = _d === void 0 ? function () { return false; } : _d, _e = _a.canDrop, canDrop = _e === void 0 ? function () { return false; } : _e, _f = _a.onDrop, onDrop = _f === void 0 ? function () { } : _f, onLoadChildren = _a.onLoadChildren, height = _a.height, _g = _a.defaultExpandAll, defaultExpandAll = _g === void 0 ? false : _g, _h = _a.SwitchRenderer, SwitchRenderer = _h === void 0 ? DefaultSwitchRenderer : _h, className = _a.className, renderNode = _a.renderNode, _j = _a.minItemHeight, minItemHeight = _j === void 0 ? MIN_ROW_HEIGHT : _j, _k = _a.isLeaf, isLeaf = _k === void 0 ? defaultIsLeaf : _k, scrollToNode = _a.scrollToNode, _l = _a.onChange, onChange = _l === void 0 ? identity : _l;
     var styles = useStyles();
-    var internalTreeData = useMemo(function () { return convertTreeData({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
     var treeRef = useRef(null);
+    var containerRef = useRef(null);
+    var expandNode = useCallback(function (pos, expanded) {
+        var changeNode = assoc('expanded', expanded);
+        var newTreeData = changeNodeAtPosition(treeData, pos, changeNode);
+        if (newTreeData)
+            onChange(newTreeData);
+    }, [onChange, treeData]);
+    var _m = useDnd({
+        containerRef: containerRef,
+        treeData: treeData,
+        expandNode: expandNode,
+        onLoadChildren: onLoadChildren,
+        onChange: onChange,
+        onDrop: onDrop,
+        canDrop: canDrop,
+        canDrag: canDrag
+    }), treeProps = _m.treeProps, nodeDraggable = _m.nodeDraggable, dropNode = _m.dropNode, dragNode = _m.dragNode, dropPositionInfo = _m.dropPositionInfo;
     useEffect(function () {
         if (treeRef.current && scrollToNode) {
             treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
         }
     }, [scrollToNode]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var handleDrop = function (_a) {
-        var node = _a.node, dragNode = _a.dragNode, dragNodesKeys = _a.dragNodesKeys;
-        // TODO: implement
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var handleDragEnter = function (_a) {
-        var event = _a.event, node = _a.node, expandedKeys = _a.expandedKeys;
-        // TODO: implement
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var dropIndicatorRender = function (_a) {
-        var dropPosition = _a.dropPosition, dropLevelOffset = _a.dropLevelOffset, indent = _a.indent, prefixCls = _a.prefixCls, direction = _a.direction;
-        // TODO: implement
-    };
-    var handleExpand = useCallback(function (_expandedKeys, data) {
-        if (onChange) {
-            var changeNode = assoc('expanded', data.expanded);
-            var newTreeData = changeNodeAtPosition(treeData, data.node.pos, changeNode);
-            if (newTreeData)
-                onChange(newTreeData);
+    var diplayedTreeData = useMemo(function () {
+        if (dropNode && dragNode) {
+            if (dropNode.pos === dragNode.pos && dropNode.key === dragNode.key)
+                return treeData;
+            var dragNodeValue = __assign(__assign({}, dragNode.value), { nodeId: -1 });
+            return moveNode(treeData, dragNodeValue, dragNode.pos, dropPositionInfo);
         }
-    }, [treeData, onChange]);
+        return treeData;
+    }, [treeData, dragNode, dropNode, dropPositionInfo]);
     var expandedKeys = useMemo(function () {
-        return getExpandedKeys(treeData);
-    }, [treeData]);
+        return getExpandedKeys(diplayedTreeData);
+    }, [diplayedTreeData]);
+    var internalTreeData = useMemo(function () { return convertTreeData({ data: diplayedTreeData, isLeaf: isLeaf }); }, [isLeaf, diplayedTreeData]);
+    var handleExpand = useCallback(function (_expandedKeys, data) {
+        if (onChange && !dragNode) {
+            expandNode(data.node.pos, data.expanded);
+        }
+    }, [onChange, expandNode, dragNode]);
     var renderSwitcherIcon = useCallback(function (node) { return React.createElement(SwitchRenderer, { node: node }); }, []);
-    return internalTreeData ? (React.createElement(Tree, { allowDrop: canDrop, draggable: canDrag, onDragStart: function () { }, onDragEnter: handleDragEnter, onDrop: handleDrop, virtual: isVirtualized, itemHeight: minItemHeight, height: height, onExpand: handleExpand, showIcon: false, showLine: true, expandedKeys: expandedKeys, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: classnames(className, styles.treeWrapper), titleRender: renderNode ? function (node) { return renderNode(node.value); } : undefined, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree", ref: treeRef })) : null;
+    var titleRender = function (node) {
+        var _a;
+        var draggedNodes = gatherNodeKeys(dragNode);
+        return (React.createElement("div", { className: classnames((_a = {},
+                _a[styles.dropIndicator] = isDropIndicatorNode(node),
+                _a[styles.dropNotAllowed] = dropNode && !isDropIndicatorNode(dropNode),
+                _a[styles.draggedChildrenNode] = draggedNodes.includes(node.key),
+                _a)), onMouseDown: preventNodeDragging }, renderNode ? renderNode(node.value) : node.title));
+    };
+    var dragHandle = (React.createElement("span", { className: classnames(styles.dragHandle, (_b = {},
+            _b[styles.dragHandleDragging] = !!dragNode,
+            _b)) },
+        React.createElement(DragIndicator, null)));
+    return diplayedTreeData ? (React.createElement("div", { ref: containerRef },
+        React.createElement(Tree, __assign({ draggable: {
+                icon: dragHandle,
+                nodeDraggable: nodeDraggable
+            }, virtual: isVirtualized, itemHeight: minItemHeight, height: height, onExpand: handleExpand, showIcon: false, showLine: true, expandedKeys: expandedKeys, switcherIcon: renderSwitcherIcon, defaultExpandAll: defaultExpandAll, className: classnames(className, styles.treeWrapper), titleRender: titleRender, treeData: internalTreeData, selectable: false, loadData: onLoadChildren ? function (node) { return onLoadChildren(node.value); } : undefined, "data-reltio-id": "rc-tree", ref: treeRef }, treeProps)))) : null;
 };

package/esm/RCTree/helper.d.ts

@@ -1,4 +1,5 @@
-import { InternalRCNode, RCTreeNode } from './types';
+import React, { MouseEvent } from 'react';
+import { AddNodePosition, DropPositionInfo, InternalRCNode, RCTreeNode } from './types';
 export declare const defaultIsLeaf: ({ children }: {
     children?: unknown[];
 }) => boolean;
@@ -7,7 +8,25 @@ type ConvertTreeDataProps<T> = {
     parentPath?: number[];
     isLeaf: (node: T) => boolean;
 };
-export declare const convertTreeData: ({ data, parentPath, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const convertTreeData: ({ data, isLeaf }: ConvertTreeDataProps<RCTreeNode>) => InternalRCNode[];
+export declare const getNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
+export declare const getParentPos: (pos: string) => string;
 export declare const changeNodeAtPosition: (treeData: RCTreeNode[], pos: string, changeNode: (node: RCTreeNode) => RCTreeNode) => any;
+export declare const removeNodeAtPosition: (treeData: RCTreeNode[], pos: string) => any;
+export declare const insertNodeAtPosition: (treeData: RCTreeNode[], pos: string, dropPosition: number, node: RCTreeNode) => any;
+export declare const moveNode: (treeData: RCTreeNode[], dragNode: RCTreeNode, dragNodePos: string, dropPositionInfo: DropPositionInfo) => any;
 export declare const getExpandedKeys: (nodes?: RCTreeNode[]) => any;
+export declare const slideNodePos: (dropNodePos: string, nodePos: string, backward?: boolean) => string;
+export declare const getDropNodePosition: (event: React.DragEvent<HTMLDivElement>, dropNode: InternalRCNode, prevDropPositionInfo: any) => {
+    pos: string;
+    dropPosition: AddNodePosition;
+    addToEnd?: undefined;
+} | {
+    pos: string;
+    dropPosition: AddNodePosition;
+    addToEnd: boolean;
+};
+export declare const isDropIndicatorNode: (node: InternalRCNode) => boolean;
+export declare const gatherNodeKeys: (node: InternalRCNode) => string[];
+export declare const preventNodeDragging: (event: MouseEvent<HTMLDivElement>) => void;
 export {};

package/esm/RCTree/helper.js

@@ -18,27 +18,73 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { assocPath, intersperse, map, pipe, path, remove, split } from 'ramda';
+import { always, assoc, assocPath, ifElse, intersperse, insert, last, map, pipe, path, remove, split } from 'ramda';
+import { AddNodePosition } from './types';
+var DEPTH_LEVEL_INDENT = 16;
+var DROP_INDICATOR_NODE_KEY = '-1';
 export var defaultIsLeaf = function (_a) {
     var _b = _a.children, children = _b === void 0 ? [] : _b;
     return !children.length;
 };
 export var convertTreeData = function (_a) {
-    var data = _a.data, _b = _a.parentPath, parentPath = _b === void 0 ? [] : _b, isLeaf = _a.isLeaf;
+    var data = _a.data, isLeaf = _a.isLeaf;
     return data.map(function (item) {
         var _a;
-        var path = __spreadArray(__spreadArray([], parentPath, true), [item.nodeId], false);
-        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign(__assign({}, item), { path: path }), isLeaf: isLeaf(item) }, (item.children &&
+        return __assign({ key: String(item.nodeId), title: (_a = item.title) !== null && _a !== void 0 ? _a : '', value: __assign({}, item), isLeaf: isLeaf(item) }, (item.children &&
             item.children.length && {
-            children: convertTreeData({ data: item.children, parentPath: path, isLeaf: isLeaf })
+            children: convertTreeData({ data: item.children, isLeaf: isLeaf })
         }));
     });
 };
 var getPathFromPosition = pipe(split('-'), remove(0, 1), map(Number), intersperse('children'));
+export var getNodeAtPosition = function (treeData, pos) {
+    var nodePath = getPathFromPosition(pos);
+    return nodePath.length > 0 ? path(nodePath, treeData) : null;
+};
+export var getParentPos = function (pos) {
+    return pos.split('-').slice(0, -1).join('-');
+};
 export var changeNodeAtPosition = function (treeData, pos, changeNode) {
     var nodePath = getPathFromPosition(pos);
     var node = path(nodePath, treeData);
-    return node ? assocPath(nodePath, changeNode(node), treeData) : null;
+    return node ? assocPath(nodePath, changeNode(node), treeData) : treeData;
+};
+export var removeNodeAtPosition = function (treeData, pos) {
+    var nodePath = getPathFromPosition(pos);
+    var childrenPath = nodePath.slice(0, -1);
+    var nodeIndex = Number(nodePath[nodePath.length - 1]);
+    if (childrenPath.length > 0) {
+        var children = path(childrenPath)(treeData);
+        var newChildren = remove(nodeIndex, 1, children);
+        return assocPath(childrenPath, newChildren, treeData);
+    }
+    return remove(nodeIndex, 1, treeData);
+};
+export var insertNodeAtPosition = function (treeData, pos, dropPosition, node) {
+    var nodePath = getPathFromPosition(pos);
+    var childrenPath = nodePath.slice(0, -1);
+    var nodeIndex = Number(nodePath[nodePath.length - 1]);
+    var newNodeIndex = dropPosition === AddNodePosition.Top ? nodeIndex : nodeIndex + 1;
+    if (childrenPath.length > 0) {
+        var children = path(childrenPath, treeData);
+        if (!children)
+            return treeData;
+        var newChildren = insert(newNodeIndex, node, children);
+        return assocPath(childrenPath, newChildren, treeData);
+    }
+    return insert(newNodeIndex, node, treeData);
+};
+export var moveNode = function (treeData, dragNode, dragNodePos, dropPositionInfo) {
+    var pos = dropPositionInfo.pos, dropPosition = dropPositionInfo.dropPosition, _a = dropPositionInfo.addToEnd, addToEnd = _a === void 0 ? false : _a;
+    var removeNode = function (treeData) { return removeNodeAtPosition(treeData, dragNodePos); };
+    var addNode = function (treeData) {
+        return dropPosition === AddNodePosition.AsChild
+            ? changeNodeAtPosition(treeData, pos, function (node) {
+                return pipe(ifElse(always(addToEnd), assoc('children', __spreadArray(__spreadArray([], (node.children || []), true), [dragNode], false)), assoc('children', __spreadArray([dragNode], (node.children || []), true))), assoc('expanded', true))(node);
+            })
+            : insertNodeAtPosition(treeData, pos, dropPosition, dragNode);
+    };
+    return pipe(removeNode, addNode)(treeData);
 };
 export var getExpandedKeys = function (nodes) {
     if (nodes === void 0) { nodes = []; }
@@ -46,3 +92,102 @@ export var getExpandedKeys = function (nodes) {
         return expandedKeys.concat(node.expanded ? [String(node.nodeId)] : []).concat(getExpandedKeys(node.children));
     }, []);
 };
+export var slideNodePos = function (dropNodePos, nodePos, backward) {
+    if (backward === void 0) { backward = false; }
+    var nodePosition = nodePos.split('-');
+    var nodeDepth = nodePosition.length - 1;
+    var nodeParentPosition = nodePosition.slice(0, -1);
+    var nodeParentPos = nodeParentPosition.join('-');
+    var dropNodePosition = dropNodePos.split('-');
+    if (dropNodePos.startsWith(nodeParentPos)) {
+        var nodeLastIndex = Number(last(nodePosition));
+        var dropNodeIndexToChange = Number(dropNodePosition[nodeDepth]);
+        if (backward) {
+            if (nodeLastIndex < dropNodeIndexToChange) {
+                return dropNodePos.replace([nodeParentPos, dropNodeIndexToChange].join('-'), [nodeParentPos, dropNodeIndexToChange - 1].join('-'));
+            }
+        }
+        else {
+            if (nodeLastIndex <= dropNodeIndexToChange) {
+                return dropNodePos.replace([nodeParentPos, dropNodeIndexToChange].join('-'), [nodeParentPos, dropNodeIndexToChange + 1].join('-'));
+            }
+        }
+    }
+    return dropNodePos;
+};
+var getNodeTopElement = function (target) {
+    return target.closest('.rc-tree-treenode');
+};
+var calcAddNodePosition = function (event) {
+    var nodeElement = getNodeTopElement(event.target);
+    if (!nodeElement)
+        return null;
+    var offsetY = event.clientY - nodeElement.getBoundingClientRect().top;
+    var treeNodeHeight = nodeElement.offsetHeight;
+    return offsetY < treeNodeHeight / 2 ? AddNodePosition.Top : AddNodePosition.Bottom;
+};
+var findDepthPosition = function (event, dropNode) {
+    var nodeElement = getNodeTopElement(event.target);
+    if (!nodeElement)
+        return null;
+    var dropNodeLevel = dropNode.pos.split('-').length - 1;
+    var leftPadding = parseFloat(window.getComputedStyle(nodeElement).paddingLeft) || 0;
+    var offsetX = event.clientX - nodeElement.getBoundingClientRect().left - leftPadding;
+    return Math.min(dropNodeLevel + 1, Math.max(Math.round(offsetX / DEPTH_LEVEL_INDENT), dropNodeLevel));
+};
+var changePosLastIndex = function (pos, change) {
+    var position = pos.split('-');
+    var lastIndex = Number(last(position));
+    return position
+        .slice(0, -1)
+        .concat(String(change(lastIndex)))
+        .join('-');
+};
+var getCurrentDropNodePos = function (dropPositionInfo) {
+    switch (dropPositionInfo.dropPosition) {
+        case AddNodePosition.Top:
+            return dropPositionInfo.pos;
+        case AddNodePosition.Bottom:
+            return changePosLastIndex(dropPositionInfo.pos, function (index) { return index + 1; });
+        case AddNodePosition.AsChild:
+            return "".concat(dropPositionInfo.pos, "-0");
+    }
+};
+export var getDropNodePosition = function (event, dropNode, prevDropPositionInfo) {
+    var addNodePosition = calcAddNodePosition(event);
+    var depthPosition = findDepthPosition(event, dropNode);
+    if (addNodePosition === null || depthPosition === null)
+        return null;
+    var pos = !prevDropPositionInfo || prevDropPositionInfo.addToEnd
+        ? dropNode.pos
+        : slideNodePos(dropNode.pos, getCurrentDropNodePos(prevDropPositionInfo), true);
+    var dropNodeDepth = pos.split('-').length - 1;
+    var position = pos.split('-');
+    var lastIndex = Number(last(position));
+    if (depthPosition === dropNodeDepth) {
+        return { pos: pos, dropPosition: addNodePosition };
+    }
+    if (addNodePosition === AddNodePosition.Top) {
+        if (lastIndex > 0) {
+            return {
+                pos: position
+                    .slice(0, -1)
+                    .concat(String(lastIndex - 1))
+                    .join('-'),
+                dropPosition: AddNodePosition.AsChild,
+                addToEnd: true
+            };
+        }
+        if (position.length > 2)
+            return { pos: position.slice(0, -1).join('-'), dropPosition: AddNodePosition.AsChild, addToEnd: false };
+        return { pos: pos, dropPosition: AddNodePosition.Top };
+    }
+    return { pos: pos, dropPosition: AddNodePosition.AsChild };
+};
+export var isDropIndicatorNode = function (node) { return (node === null || node === void 0 ? void 0 : node.key) === DROP_INDICATOR_NODE_KEY; };
+export var gatherNodeKeys = function (node) {
+    return node ? __spreadArray([node.key], (node.children ? node.children.flatMap(gatherNodeKeys) : []), true) : [];
+};
+export var preventNodeDragging = function (event) {
+    event.preventDefault();
+};

package/esm/RCTree/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "collapseButton" | "switcherButtonWrapper" | "switcherButton" | "treeWrapper" | "@global">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expandButton" | "collapseButton" | "dropIndicator" | "switcherButtonWrapper" | "switcherButton" | "treeWrapper" | "dropNotAllowed" | "draggedChildrenNode" | "dragHandle" | "dragHandleDragging" | "@global">;