@reltio/components 1.4.1958 → 1.4.1959

package/cjs/RCTree/RCTree.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { TreeNodeProps } from 'rc-tree';
+import React from 'react';
 import { RCTreeNode } from './types';
 type Props = {
     treeData: RCTreeNode[];
@@ -14,7 +14,8 @@ type Props = {
     className?: string;
     minItemHeight?: number;
     isLeaf?: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    scrollToNode?: RCTreeNode;
     onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, onChange, }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
 export {};

package/cjs/RCTree/RCTree.js

@@ -27,18 +27,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RCTree = void 0;
-var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var rc_tree_1 = __importDefault(require("rc-tree"));
-var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importStar(require("react"));
 var DefaultSwitchRenderer_1 = require("./DefaultSwitchRenderer");
 var helper_1 = require("./helper");
 var styles_1 = require("./styles");
 var MIN_ROW_HEIGHT = 28;
 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_1.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 ? helper_1.defaultIsLeaf : _h, _j = _a.onChange, onChange = _j === void 0 ? ramda_1.identity : _j;
+    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_1.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 ? helper_1.defaultIsLeaf : _h, scrollToNode = _a.scrollToNode, _j = _a.onChange, onChange = _j === void 0 ? ramda_1.identity : _j;
     var styles = (0, styles_1.useStyles)();
     var internalTreeData = (0, react_1.useMemo)(function () { return (0, helper_1.convertTreeData)({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
+    var treeRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (treeRef.current && scrollToNode) {
+            treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
+        }
+    }, [scrollToNode]);
     // eslint-disable-next-line no-unused-vars
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var handleDrop = function (_a) {
@@ -69,6 +75,6 @@ var RCTree = function (_a) {
         return (0, helper_1.getExpandedKeys)(treeData);
     }, [treeData]);
     var renderSwitcherIcon = (0, react_1.useCallback)(function (node) { return react_1.default.createElement(SwitchRenderer, { node: node }); }, []);
-    return internalTreeData ? (react_1.default.createElement(rc_tree_1.default, { 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: (0, classnames_1.default)(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" })) : null;
+    return internalTreeData ? (react_1.default.createElement(rc_tree_1.default, { 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: (0, classnames_1.default)(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;
 };
 exports.RCTree = RCTree;

package/cjs/RCTree/helper.js

@@ -49,9 +49,7 @@ exports.changeNodeAtPosition = changeNodeAtPosition;
 var getExpandedKeys = function (nodes) {
     if (nodes === void 0) { nodes = []; }
     return nodes.reduce(function (expandedKeys, node) {
-        return expandedKeys
-            .concat(node.expanded ? [String(node.nodeId)] : [])
-            .concat((0, exports.getExpandedKeys)(node.children));
+        return expandedKeys.concat(node.expanded ? [String(node.nodeId)] : []).concat((0, exports.getExpandedKeys)(node.children));
     }, []);
 };
 exports.getExpandedKeys = getExpandedKeys;

package/cjs/RCTree/styles.js

@@ -214,7 +214,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
             outline: 0,
             '&:hover': {
                 backgroundColor: 'rgba(0,0,0,0.06)'
-            },
+            }
         },
         '.rc-tree-treenode': {
             display: 'flex'
@@ -225,6 +225,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         '.rc-tree-title': {
             display: 'inline-block',
             width: '100%'
-        },
+        }
     }
 }); });

package/esm/RCTree/RCTree.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { TreeNodeProps } from 'rc-tree';
+import React from 'react';
 import { RCTreeNode } from './types';
 type Props = {
     treeData: RCTreeNode[];
@@ -14,7 +14,8 @@ type Props = {
     className?: string;
     minItemHeight?: number;
     isLeaf?: (node: TreeNodeProps & Record<string, unknown>) => boolean;
+    scrollToNode?: RCTreeNode;
     onChange?: (node: RCTreeNode[]) => void;
 };
-export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, onChange, }: Props) => React.JSX.Element;
+export declare const RCTree: ({ treeData, isVirtualized, canDrag, canDrop, onLoadChildren, height, defaultExpandAll, SwitchRenderer, className, renderNode, minItemHeight, isLeaf, scrollToNode, onChange }: Props) => React.JSX.Element;
 export {};

package/esm/RCTree/RCTree.js

@@ -1,15 +1,21 @@
-import React, { useCallback, useMemo } from 'react';
+import classnames from 'classnames';
 import { assoc, identity } from 'ramda';
 import Tree from 'rc-tree';
-import classnames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { DefaultSwitchRenderer } from './DefaultSwitchRenderer';
 import { changeNodeAtPosition, convertTreeData, defaultIsLeaf, getExpandedKeys } from './helper';
 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, _j = _a.onChange, onChange = _j === void 0 ? identity : _j;
+    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 styles = useStyles();
     var internalTreeData = useMemo(function () { return convertTreeData({ data: treeData, isLeaf: isLeaf }); }, [isLeaf, treeData]);
+    var treeRef = useRef(null);
+    useEffect(function () {
+        if (treeRef.current && scrollToNode) {
+            treeRef.current.scrollTo({ key: String(scrollToNode.nodeId) });
+        }
+    }, [scrollToNode]);
     // eslint-disable-next-line no-unused-vars
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var handleDrop = function (_a) {
@@ -40,5 +46,5 @@ export var RCTree = function (_a) {
         return getExpandedKeys(treeData);
     }, [treeData]);
     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" })) : null;
+    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;
 };

package/esm/RCTree/helper.js

@@ -43,8 +43,6 @@ export var changeNodeAtPosition = function (treeData, pos, changeNode) {
 export var getExpandedKeys = function (nodes) {
     if (nodes === void 0) { nodes = []; }
     return nodes.reduce(function (expandedKeys, node) {
-        return expandedKeys
-            .concat(node.expanded ? [String(node.nodeId)] : [])
-            .concat(getExpandedKeys(node.children));
+        return expandedKeys.concat(node.expanded ? [String(node.nodeId)] : []).concat(getExpandedKeys(node.children));
     }, []);
 };

package/esm/RCTree/styles.js

@@ -211,7 +211,7 @@ export var useStyles = makeStyles(function () { return ({
             outline: 0,
             '&:hover': {
                 backgroundColor: 'rgba(0,0,0,0.06)'
-            },
+            }
         },
         '.rc-tree-treenode': {
             display: 'flex'
@@ -222,6 +222,6 @@ export var useStyles = makeStyles(function () { return ({
         '.rc-tree-title': {
             display: 'inline-block',
             width: '100%'
-        },
+        }
     }
 }); });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1958",
+  "version": "1.4.1959",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",