@reltio/components 1.4.1992 → 1.4.1993

package/esm/RCTree/styles.js

@@ -1,10 +1,10 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
+export var useStyles = makeStyles(function (theme) { return ({
     switcherButtonWrapper: {
-        paddingTop: '9px',
-        paddingLeft: '6px',
-        width: '16px',
-        height: '16px',
+        paddingTop: '11px',
+        paddingLeft: '4px',
+        width: '12px',
+        height: '12px',
         cursor: 'pointer'
     },
     switcherButton: {
@@ -24,6 +24,39 @@ export var useStyles = makeStyles(function () { return ({
     treeWrapper: {
         border: 'none'
     },
+    dropIndicator: {
+        '&:before': {
+            content: '""',
+            backgroundColor: '#e0eef9',
+            border: '1px dashed #2184D4',
+            position: 'absolute',
+            top: 0,
+            right: '23px',
+            bottom: 0,
+            left: '-22px',
+            zIndex: 1
+        },
+        '&>div': {
+            opacity: 0
+        }
+    },
+    dropNotAllowed: {
+        '&:before': {
+            backgroundColor: '#ffedee',
+            borderColor: '#FF6673'
+        }
+    },
+    draggedChildrenNode: {
+        opacity: 0.5
+    },
+    dragHandle: {
+        cursor: 'move',
+        color: theme.palette.text.secondary,
+        width: '16px'
+    },
+    dragHandleDragging: {
+        visibility: 'hidden'
+    },
     /* rc-tree/assets/index.css */
     '@global': {
         '.rc-tree': {
@@ -49,12 +82,6 @@ export var useStyles = makeStyles(function () { return ({
             boxShadow: 'inset 0 0 0 2px red',
             content: "''"
         },
-        '.rc-tree .rc-tree-treenode.drop-container ~ .rc-tree-treenode': {
-            borderLeft: '2px solid chocolate'
-        },
-        '.rc-tree .rc-tree-treenode.drop-target': {
-            backgroundColor: 'yellowgreen'
-        },
         '.rc-tree .rc-tree-treenode.drop-target ~ .rc-tree-treenode': {
             borderLeft: 'none'
         },
@@ -152,11 +179,6 @@ export var useStyles = makeStyles(function () { return ({
         '.rc-tree-treenode-active': {
             background: 'rgba(0, 0, 0, 0.1)'
         },
-        '.rc-tree-node-selected': {
-            backgroundColor: '#ffe6b0',
-            boxShadow: '0 0 0 1px #ffb951',
-            opacity: 0.8
-        },
         '.rc-tree-icon__open': {
             marginRight: '2px',
             verticalAlign: 'top',
@@ -185,11 +207,6 @@ export var useStyles = makeStyles(function () { return ({
             display: 'inline-block',
             width: '16px'
         },
-        '.rc-tree-draggable-icon': {
-            display: 'inline-flex',
-            justifyContent: 'center',
-            width: '16px'
-        },
         //Custom styles
         '.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper': {
             position: 'relative',
@@ -200,8 +217,8 @@ export var useStyles = makeStyles(function () { return ({
             verticalAlign: 'top',
             cursor: 'pointer',
             height: 'auto',
-            width: '100%',
-            paddingRight: '11px'
+            paddingRight: '11px',
+            flexGrow: 1
         },
         '.rc-tree .rc-tree-treenode': {
             margin: 0,
@@ -222,6 +239,18 @@ export var useStyles = makeStyles(function () { return ({
         '.rc-tree-title': {
             display: 'inline-block',
             width: '100%'
+        },
+        '.rc-tree-draggable-icon': {
+            display: 'inline-flex',
+            justifyContent: 'center',
+            width: '16px',
+            visibility: 'hidden'
+        },
+        '.rc-tree-treenode-draggable:hover .rc-tree-draggable-icon': {
+            visibility: 'visible'
+        },
+        '.rc-tree-switcher-noop': {
+            width: '16px'
         }
     }
 }); });

package/esm/RCTree/types.d.ts

@@ -7,7 +7,18 @@ export type RCTreeNode = {
 };
 export type InternalRCNode = {
     value: RCTreeNode;
+    pos?: string;
 } & FieldDataNode<{
     key: string;
     title?: string;
 }>;
+export type DropPositionInfo = {
+    pos: string;
+    dropPosition: number;
+    addToEnd?: boolean;
+};
+export declare enum AddNodePosition {
+    Bottom = 1,
+    Top = -1,
+    AsChild = 0
+}

package/esm/RCTree/types.js

@@ -1 +1,6 @@
-export {};
+export var AddNodePosition;
+(function (AddNodePosition) {
+    AddNodePosition[AddNodePosition["Bottom"] = 1] = "Bottom";
+    AddNodePosition[AddNodePosition["Top"] = -1] = "Top";
+    AddNodePosition[AddNodePosition["AsChild"] = 0] = "AsChild";
+})(AddNodePosition || (AddNodePosition = {}));

package/esm/RCTree/useDelayedDragEventCall.d.ts

@@ -0,0 +1,6 @@
+import { DragEvent } from 'react';
+import { InternalRCNode } from './types';
+export declare const useDelayedDragEventCall: (callback: (params: {
+    event: DragEvent<HTMLDivElement>;
+    node: InternalRCNode;
+}) => void, delay?: number) => ({ event, node }: any) => void;

package/esm/RCTree/useDelayedDragEventCall.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+import { equals } from 'ramda';
+var DELAY_TIMEOUT = 50;
+export var useDelayedDragEventCall = function (callback, delay) {
+    if (delay === void 0) { delay = DELAY_TIMEOUT; }
+    var prevMousePosition = useRef(null);
+    var lastTimeChanged = useRef(0);
+    return useCallback(function (_a) {
+        var event = _a.event, node = _a.node;
+        var now = Date.now();
+        var newMousePosition = { x: event.clientX, y: event.clientY };
+        if (!equals(prevMousePosition === null || prevMousePosition === void 0 ? void 0 : prevMousePosition.current, newMousePosition)) {
+            lastTimeChanged.current = now;
+        }
+        var waitedTime = now - (lastTimeChanged === null || lastTimeChanged === void 0 ? void 0 : lastTimeChanged.current);
+        if (waitedTime > delay) {
+            lastTimeChanged.current = now;
+            callback({ event: event, node: node });
+        }
+        prevMousePosition.current = newMousePosition;
+    }, [callback, delay]);
+};

package/esm/RCTree/useDnd.d.ts

@@ -0,0 +1,47 @@
+import { DragEvent } from 'react';
+import { InternalRCNode, RCTreeNode } from './types';
+type Props = {
+    treeData: RCTreeNode[];
+    containerRef: React.RefObject<HTMLDivElement>;
+    expandNode: (pos: string, expanded: boolean) => void;
+    onLoadChildren?: (treeNode: RCTreeNode) => Promise<void>;
+    onChange?: (node: RCTreeNode[]) => void;
+    onDrop?: (treeData: RCTreeNode[], dragNode: RCTreeNode, parentNode: RCTreeNode) => void;
+    canDrop?: (params: {
+        nextParent: RCTreeNode;
+        node: RCTreeNode;
+    }) => boolean;
+    canDrag?: (params: {
+        node: RCTreeNode;
+    }) => boolean;
+};
+export declare const useDnd: ({ treeData, containerRef, expandNode, onLoadChildren, onChange, onDrop: onDropProp, canDrop, canDrag }: Props) => {
+    treeProps: {
+        onDragStart: ({ node }: {
+            node: InternalRCNode;
+        }) => void;
+        onDragOver: ({ event, node }: {
+            event: DragEvent<HTMLDivElement>;
+            node: InternalRCNode;
+        }) => void;
+        onDragLeave: ({ event, node }: {
+            event: any;
+            node: any;
+        }) => void;
+        onDrop: () => void;
+        dropIndicatorRender: () => any;
+        allowDrop: ({ dragNode, dropNode }: {
+            dragNode: InternalRCNode;
+            dropNode: InternalRCNode;
+        }) => boolean;
+    };
+    nodeDraggable: (node: InternalRCNode) => boolean;
+    dropNode: InternalRCNode;
+    dragNode: InternalRCNode;
+    dropPositionInfo: {
+        pos: string;
+        dropPosition: number;
+        addToEnd?: boolean;
+    };
+};
+export {};

package/esm/RCTree/useDnd.js

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+import { equals } from 'ramda';
+import { AddNodePosition } from './types';
+import { useScrollOnDrag } from './useScrollOnDrag';
+import { useDelayedDragEventCall } from './useDelayedDragEventCall';
+import { getDropNodePosition, getExpandedKeys, getNodeAtPosition, getParentPos, isDropIndicatorNode, moveNode, slideNodePos } from './helper';
+export 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 = useState(null), dragNode = _b[0], setDragNode = _b[1];
+    var _c = useState(null), dropNode = _c[0], setDropNode = _c[1];
+    var _d = useState(null), dropPositionInfo = _d[0], setDropPositionInfo = _d[1];
+    var _e = 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 = useMemo(function () {
+        return getExpandedKeys(treeData);
+    }, [treeData]);
+    var expandDropNodeAtPosition = useCallback(function (pos, expanded) {
+        var node = getNodeAtPosition(treeData, pos);
+        if (node && !expandedKeys.includes(node.nodeId)) {
+            expandNode(pos, expanded);
+            if (node.pending && onLoadChildren) {
+                onLoadChildren(node);
+            }
+        }
+    }, [expandNode, expandedKeys, onLoadChildren, treeData]);
+    var expandDropNode = useCallback(function (newDropPositionInfo) {
+        if (onChange && newDropPositionInfo.dropPosition === AddNodePosition.AsChild) {
+            var currentParentNodePos = slideNodePos(newDropPositionInfo.pos, dragNode.pos);
+            if (currentParentNodePos.split('-').length > 1) {
+                expandDropNodeAtPosition(currentParentNodePos, true);
+            }
+        }
+    }, [dragNode, expandDropNodeAtPosition, onChange]);
+    var handleSetDropNode = useCallback(function (_a) {
+        var event = _a.event, node = _a.node;
+        var newDropPositionInfo = getDropNodePosition(event, node, dropPositionInfo) || dropPositionInfo;
+        if (!equals(newDropPositionInfo, dropPositionInfo) && (!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 = 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) ? 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 && isDropIndicatorNode(dropNode)) {
+            var parentNodePosition = dropPositionInfo.dropPosition === AddNodePosition.AsChild
+                ? dropPositionInfo.pos
+                : getParentPos(dropPositionInfo.pos);
+            var parentNode = getNodeAtPosition(treeData, parentNodePosition);
+            var newTreeData = moveNode(treeData, dragNode.value, dragNode.pos, dropPositionInfo);
+            onDropProp(newTreeData, dragNode.value, parentNode);
+        }
+        setDragNode(null);
+        setDropNode(null);
+        onEndDragging();
+    };
+    var allowDrop = useCallback(function (_a) {
+        var dragNode = _a.dragNode, dropNode = _a.dropNode;
+        return canDrop({ nextParent: dropNode.value, node: dragNode.value });
+    }, [canDrop]);
+    var nodeDraggable = 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
+    };
+};

package/esm/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/esm/RCTree/useScrollOnDrag.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { throttle } from '@reltio/mdm-sdk';
+var SCROLL_MARGIN = 50;
+var SPEED_MULTIPLIER = 25;
+var UPDATE_DATA_INTERVAL = 100;
+export var useScrollOnDrag = function (scrollContainer) {
+    var scrolling = useRef(false);
+    var running = useRef(false);
+    var scrollData = 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 = useCallback(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 = 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 = 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();
+    };
+    useEffect(function () {
+        return function () {
+            removeListeners();
+        };
+    }, [removeListeners]);
+    return { onStartDragging: onStartDragging, onEndDragging: onEndDragging, getIsScrolling: getIsScrolling };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1992",
+  "version": "1.4.1993",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1888",
+    "@reltio/mdm-sdk": "^1.4.1889",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",