@reltio/components 1.4.1485 → 1.4.1487

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type NodeTitleProps = {
+    title: string;
+    entityUri: string;
+    viewId: string;
+    isSelected?: boolean;
+    anchorEl?: HTMLElement;
+    withEntityDetails?: boolean;
+};
+export declare const HierarchyNodeTitle: ({ title, isSelected, entityUri, viewId, anchorEl, withEntityDetails }: NodeTitleProps) => JSX.Element;
+export {};

package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HierarchyNodeTitle = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var Link_1 = __importDefault(require("../Link/Link"));
+var Popper_1 = __importDefault(require("../Popper/Popper"));
+var ProfileCard_1 = __importDefault(require("../ProfileCard/ProfileCard"));
+var contexts_1 = require("../../contexts");
+var useEntityDetails_1 = require("./hooks/useEntityDetails");
+var styles_1 = require("./styles");
+var HierarchyNodeTitle = function (_a) {
+    var _b;
+    var title = _a.title, isSelected = _a.isSelected, entityUri = _a.entityUri, viewId = _a.viewId, anchorEl = _a.anchorEl, _c = _a.withEntityDetails, withEntityDetails = _c === void 0 ? true : _c;
+    var styles = (0, styles_1.useStyles)();
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var uiPath = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getUIPath);
+    var generateEntityUrl = (0, react_1.useContext)(contexts_1.UrlGeneratorsContext).generateEntityUrl;
+    var _d = (0, useEntityDetails_1.useEntityDetails)(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
+    var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
+    var showPopper = Boolean(entityDetails) || isLoading;
+    var handleClick = (0, react_1.useCallback)(function () {
+        dispatch(mdm_module_1.ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
+    }, [dispatch, entityUri, viewId]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
+            react_1.default.createElement(Link_1.default, { to: link, onClick: handleClick }, title)),
+        react_1.default.createElement(Popper_1.default, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
+            react_1.default.createElement(ProfileCard_1.default, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
+};
+exports.HierarchyNodeTitle = HierarchyNodeTitle;

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEntityDetails = void 0;
+var react_1 = require("react");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+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 hideEntityDetails = (0, react_1.useCallback)(function () {
+        cancelRequest();
+        clearTimeout(timerId.current);
+        setIsLoading(false);
+        setEntityDetails(null);
+    }, [cancelRequest]);
+    (0, react_1.useEffect)(function () {
+        return function () { return clearTimeout(timerId.current); };
+    }, []);
+    return {
+        isLoading: isLoading,
+        entityDetails: entityDetails,
+        showEntityDetails: showEntityDetails,
+        hideEntityDetails: hideEntityDetails
+    };
+};
+exports.useEntityDetails = useEntityDetails;

package/cjs/components/HierarchyNodeTitle/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "selected" | "popper">;

package/cjs/components/HierarchyNodeTitle/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
+    link: {
+        cursor: 'pointer',
+        color: theme.palette.primary.main,
+        lineHeight: '15px',
+        wordBreak: 'break-word'
+    },
+    selected: {
+        fontWeight: 'bold'
+    },
+    popper: {
+        maxWidth: '345px',
+        minWidth: '200px',
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        backgroundColor: 'white',
+        borderRadius: '2px'
+    }
+}); });

package/cjs/components/index.d.ts

@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
 export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
 export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
 export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
+export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';

package/cjs/components/index.js

@@ -19,7 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBlock = exports.MatchRuleVariant = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
-exports.RequiredMark = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = void 0;
+exports.RequiredMark = exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -310,5 +310,7 @@ var SettingsMenu_1 = require("./SettingsMenu/SettingsMenu");
 Object.defineProperty(exports, "SettingsMenu", { enumerable: true, get: function () { return __importDefault(SettingsMenu_1).default; } });
 var DataTenantBadge_1 = require("./DataTenantBadge/DataTenantBadge");
 Object.defineProperty(exports, "DataTenantBadge", { enumerable: true, get: function () { return DataTenantBadge_1.DataTenantBadge; } });
+var HierarchyNodeTitle_1 = require("./HierarchyNodeTitle/HierarchyNodeTitle");
+Object.defineProperty(exports, "HierarchyNodeTitle", { enumerable: true, get: function () { return HierarchyNodeTitle_1.HierarchyNodeTitle; } });
 var RequiredMark_1 = require("./RequiredMark/RequiredMark");
 Object.defineProperty(exports, "RequiredMark", { enumerable: true, get: function () { return __importDefault(RequiredMark_1).default; } });

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type NodeTitleProps = {
+    title: string;
+    entityUri: string;
+    viewId: string;
+    isSelected?: boolean;
+    anchorEl?: HTMLElement;
+    withEntityDetails?: boolean;
+};
+export declare const HierarchyNodeTitle: ({ title, isSelected, entityUri, viewId, anchorEl, withEntityDetails }: NodeTitleProps) => JSX.Element;
+export {};

package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js

@@ -0,0 +1,29 @@
+import React, { useCallback, useContext } from 'react';
+import classnames from 'classnames';
+import { useSelector, useDispatch } from 'react-redux';
+import mdm, { ui } from '@reltio/mdm-module';
+import Link from '../Link/Link';
+import Popper from '../Popper/Popper';
+import ProfileCard from '../ProfileCard/ProfileCard';
+import { UrlGeneratorsContext } from '../../contexts';
+import { useEntityDetails } from './hooks/useEntityDetails';
+import { useStyles } from './styles';
+export var HierarchyNodeTitle = function (_a) {
+    var _b;
+    var title = _a.title, isSelected = _a.isSelected, entityUri = _a.entityUri, viewId = _a.viewId, anchorEl = _a.anchorEl, _c = _a.withEntityDetails, withEntityDetails = _c === void 0 ? true : _c;
+    var styles = useStyles();
+    var dispatch = useDispatch();
+    var uiPath = useSelector(mdm.selectors.getUIPath);
+    var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
+    var _d = useEntityDetails(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
+    var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
+    var showPopper = Boolean(entityDetails) || isLoading;
+    var handleClick = useCallback(function () {
+        dispatch(ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
+    }, [dispatch, entityUri, viewId]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: classnames(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
+            React.createElement(Link, { to: link, onClick: handleClick }, title)),
+        React.createElement(Popper, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
+            React.createElement(ProfileCard, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
+};

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

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

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

@@ -0,0 +1,33 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { getEntity } 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 hideEntityDetails = useCallback(function () {
+        cancelRequest();
+        clearTimeout(timerId.current);
+        setIsLoading(false);
+        setEntityDetails(null);
+    }, [cancelRequest]);
+    useEffect(function () {
+        return function () { return clearTimeout(timerId.current); };
+    }, []);
+    return {
+        isLoading: isLoading,
+        entityDetails: entityDetails,
+        showEntityDetails: showEntityDetails,
+        hideEntityDetails: hideEntityDetails
+    };
+};

package/esm/components/HierarchyNodeTitle/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "selected" | "popper">;

package/esm/components/HierarchyNodeTitle/styles.js

@@ -0,0 +1,19 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    link: {
+        cursor: 'pointer',
+        color: theme.palette.primary.main,
+        lineHeight: '15px',
+        wordBreak: 'break-word'
+    },
+    selected: {
+        fontWeight: 'bold'
+    },
+    popper: {
+        maxWidth: '345px',
+        minWidth: '200px',
+        boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
+        backgroundColor: 'white',
+        borderRadius: '2px'
+    }
+}); });

package/esm/components/index.d.ts

@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
 export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
 export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
 export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
+export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';

package/esm/components/index.js

@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
 export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
 export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
 export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
+export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1485",
+  "version": "1.4.1487",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1485",
-    "@reltio/mdm-sdk": "^1.4.1485",
+    "@reltio/mdm-module": "^1.4.1487",
+    "@reltio/mdm-sdk": "^1.4.1487",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",