@reltio/components 1.4.1764 → 1.4.1766

package/cjs/components/CommentsContainer/buttons/CommentButton.js

@@ -12,7 +12,7 @@ var CommentButton = react_1.default.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(Tooltip_1.default, { title: ui_i18n_1.default.text('Show comment') },
-        react_1.default.createElement("div", { ref: ref, className: styles.root, onClick: onClick },
+        react_1.default.createElement("div", { ref: ref, className: styles.root, onClick: onClick, "data-reltio-id": "reltio-comment-button" },
             react_1.default.createElement(CommentBubble_1.default, { className: styles.icon }),
             react_1.default.createElement("div", { className: styles.childrenWrapper }, children))));
 });

package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts

@@ -1,6 +1,9 @@
 export declare const useEntityDetails: (entityUri: string) => {
     isLoading: boolean;
     entityDetails: any;
-    showEntityDetails: () => void;
+    showEntityDetails: {
+        (): void;
+        cancel: () => void;
+    };
     hideEntityDetails: () => void;
 };

package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.js

@@ -7,25 +7,22 @@ var useSafePromise_1 = require("../../../hooks/useSafePromise");
 var useEntityDetails = function (entityUri) {
     var _a = (0, react_1.useState)(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
-    var timerId = (0, react_1.useRef)(null);
     var safePromise = (0, useSafePromise_1.useSafePromise)();
     var cancelRequest = (0, react_1.useCallback)(function () { return safePromise(Promise.resolve()); }, [safePromise]);
-    var showEntityDetails = (0, react_1.useCallback)(function () {
-        timerId.current = setTimeout(function () {
-            setIsLoading(true);
-            safePromise((0, mdm_sdk_1.getEntity)(entityUri))
-                .then(setEntityDetails)
-                .finally(function () { return setIsLoading(false); });
-        }, 1000);
-    }, [entityUri, safePromise]);
+    var showEntityDetails = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function () {
+        setIsLoading(true);
+        safePromise((0, mdm_sdk_1.getEntity)(entityUri))
+            .then(setEntityDetails)
+            .finally(function () { return setIsLoading(false); });
+    }, 1000), [entityUri, safePromise]);
     var hideEntityDetails = (0, react_1.useCallback)(function () {
         cancelRequest();
-        clearTimeout(timerId.current);
+        showEntityDetails.cancel();
         setIsLoading(false);
         setEntityDetails(null);
-    }, [cancelRequest]);
+    }, [showEntityDetails, cancelRequest]);
     (0, react_1.useEffect)(function () {
-        return function () { return clearTimeout(timerId.current); };
+        return function () { return showEntityDetails.cancel(); };
     }, []);
     return {
         isLoading: isLoading,

package/esm/components/CommentsContainer/buttons/CommentButton.js

@@ -7,7 +7,7 @@ var CommentButton = React.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick;
     var styles = useStyles();
     return (React.createElement(Tooltip, { title: i18n.text('Show comment') },
-        React.createElement("div", { ref: ref, className: styles.root, onClick: onClick },
+        React.createElement("div", { ref: ref, className: styles.root, onClick: onClick, "data-reltio-id": "reltio-comment-button" },
             React.createElement(CommentIcon, { className: styles.icon }),
             React.createElement("div", { className: styles.childrenWrapper }, children))));
 });

package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts

@@ -1,6 +1,9 @@
 export declare const useEntityDetails: (entityUri: string) => {
     isLoading: boolean;
     entityDetails: any;
-    showEntityDetails: () => void;
+    showEntityDetails: {
+        (): void;
+        cancel: () => void;
+    };
     hideEntityDetails: () => void;
 };

package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.js

@@ -1,28 +1,25 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { getEntity } from '@reltio/mdm-sdk';
+import { useState, useCallback, useEffect } from 'react';
+import { getEntity, debounce } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../../../hooks/useSafePromise';
 export var useEntityDetails = function (entityUri) {
     var _a = useState(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var timerId = useRef(null);
     var safePromise = useSafePromise();
     var cancelRequest = useCallback(function () { return safePromise(Promise.resolve()); }, [safePromise]);
-    var showEntityDetails = useCallback(function () {
-        timerId.current = setTimeout(function () {
-            setIsLoading(true);
-            safePromise(getEntity(entityUri))
-                .then(setEntityDetails)
-                .finally(function () { return setIsLoading(false); });
-        }, 1000);
-    }, [entityUri, safePromise]);
+    var showEntityDetails = useCallback(debounce(function () {
+        setIsLoading(true);
+        safePromise(getEntity(entityUri))
+            .then(setEntityDetails)
+            .finally(function () { return setIsLoading(false); });
+    }, 1000), [entityUri, safePromise]);
     var hideEntityDetails = useCallback(function () {
         cancelRequest();
-        clearTimeout(timerId.current);
+        showEntityDetails.cancel();
         setIsLoading(false);
         setEntityDetails(null);
-    }, [cancelRequest]);
+    }, [showEntityDetails, cancelRequest]);
     useEffect(function () {
-        return function () { return clearTimeout(timerId.current); };
+        return function () { return showEntityDetails.cancel(); };
     }, []);
     return {
         isLoading: isLoading,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1764",
+  "version": "1.4.1766",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1742",
+    "@reltio/mdm-sdk": "^1.4.1743",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",