@reltio/components 1.4.1486 → 1.4.1488

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.d.ts +11 -0
  2. package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js +59 -0
  3. package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts +6 -0
  4. package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.js +37 -0
  5. package/cjs/components/HierarchyNodeTitle/styles.d.ts +1 -0
  6. package/cjs/components/HierarchyNodeTitle/styles.js +22 -0
  7. package/cjs/components/ModeSwitcher/styles.js +3 -1
  8. package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +7 -3
  9. package/cjs/components/index.d.ts +1 -0
  10. package/cjs/components/index.js +3 -1
  11. package/cjs/contexts/EntityLoadingIndicationContext/index.d.ts +2 -0
  12. package/cjs/contexts/EntityLoadingIndicationContext/index.js +10 -0
  13. package/cjs/contexts/index.d.ts +1 -0
  14. package/cjs/contexts/index.js +3 -1
  15. package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.d.ts +11 -0
  16. package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js +29 -0
  17. package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts +6 -0
  18. package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.js +33 -0
  19. package/esm/components/HierarchyNodeTitle/styles.d.ts +1 -0
  20. package/esm/components/HierarchyNodeTitle/styles.js +19 -0
  21. package/esm/components/ModeSwitcher/styles.js +3 -1
  22. package/esm/components/ReltioGridLayout/ReltioGridLayout.js +7 -3
  23. package/esm/components/index.d.ts +1 -0
  24. package/esm/components/index.js +1 -0
  25. package/esm/contexts/EntityLoadingIndicationContext/index.d.ts +2 -0
  26. package/esm/contexts/EntityLoadingIndicationContext/index.js +4 -0
  27. package/esm/contexts/index.d.ts +1 -0
  28. package/esm/contexts/index.js +1 -0
  29. package/package.json +3 -3
package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ declare type NodeTitleProps = {
3
+ title: string;
4
+ entityUri: string;
5
+ viewId: string;
6
+ isSelected?: boolean;
7
+ anchorEl?: HTMLElement;
8
+ withEntityDetails?: boolean;
9
+ };
10
+ export declare const HierarchyNodeTitle: ({ title, isSelected, entityUri, viewId, anchorEl, withEntityDetails }: NodeTitleProps) => JSX.Element;
11
+ export {};
package/cjs/components/HierarchyNodeTitle/HierarchyNodeTitle.js ADDED
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.HierarchyNodeTitle = void 0;
30
+ var react_1 = __importStar(require("react"));
31
+ var classnames_1 = __importDefault(require("classnames"));
32
+ var react_redux_1 = require("react-redux");
33
+ var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
34
+ var Link_1 = __importDefault(require("../Link/Link"));
35
+ var Popper_1 = __importDefault(require("../Popper/Popper"));
36
+ var ProfileCard_1 = __importDefault(require("../ProfileCard/ProfileCard"));
37
+ var contexts_1 = require("../../contexts");
38
+ var useEntityDetails_1 = require("./hooks/useEntityDetails");
39
+ var styles_1 = require("./styles");
40
+ var HierarchyNodeTitle = function (_a) {
41
+ var _b;
42
+ 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;
43
+ var styles = (0, styles_1.useStyles)();
44
+ var dispatch = (0, react_redux_1.useDispatch)();
45
+ var uiPath = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getUIPath);
46
+ var generateEntityUrl = (0, react_1.useContext)(contexts_1.UrlGeneratorsContext).generateEntityUrl;
47
+ var _d = (0, useEntityDetails_1.useEntityDetails)(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
48
+ var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
49
+ var showPopper = Boolean(entityDetails) || isLoading;
50
+ var handleClick = (0, react_1.useCallback)(function () {
51
+ dispatch(mdm_module_1.ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
52
+ }, [dispatch, entityUri, viewId]);
53
+ return (react_1.default.createElement(react_1.default.Fragment, null,
54
+ 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 },
55
+ react_1.default.createElement(Link_1.default, { to: link, onClick: handleClick }, title)),
56
+ react_1.default.createElement(Popper_1.default, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
57
+ react_1.default.createElement(ProfileCard_1.default, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
58
+ };
59
+ exports.HierarchyNodeTitle = HierarchyNodeTitle;
package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const useEntityDetails: (entityUri: string) => {
2
+ isLoading: boolean;
3
+ entityDetails: any;
4
+ showEntityDetails: () => void;
5
+ hideEntityDetails: () => void;
6
+ };
package/cjs/components/HierarchyNodeTitle/hooks/useEntityDetails.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useEntityDetails = void 0;
4
+ var react_1 = require("react");
5
+ var mdm_sdk_1 = require("@reltio/mdm-sdk");
6
+ var useSafePromise_1 = require("../../../hooks/useSafePromise");
7
+ var useEntityDetails = function (entityUri) {
8
+ var _a = (0, react_1.useState)(null), entityDetails = _a[0], setEntityDetails = _a[1];
9
+ var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
10
+ var timerId = (0, react_1.useRef)(null);
11
+ var safePromise = (0, useSafePromise_1.useSafePromise)();
12
+ var cancelRequest = (0, react_1.useCallback)(function () { return safePromise(Promise.resolve()); }, [safePromise]);
13
+ var showEntityDetails = (0, react_1.useCallback)(function () {
14
+ timerId.current = setTimeout(function () {
15
+ setIsLoading(true);
16
+ safePromise((0, mdm_sdk_1.getEntity)(entityUri))
17
+ .then(setEntityDetails)
18
+ .finally(function () { return setIsLoading(false); });
19
+ }, 1000);
20
+ }, [entityUri, safePromise]);
21
+ var hideEntityDetails = (0, react_1.useCallback)(function () {
22
+ cancelRequest();
23
+ clearTimeout(timerId.current);
24
+ setIsLoading(false);
25
+ setEntityDetails(null);
26
+ }, [cancelRequest]);
27
+ (0, react_1.useEffect)(function () {
28
+ return function () { return clearTimeout(timerId.current); };
29
+ }, []);
30
+ return {
31
+ isLoading: isLoading,
32
+ entityDetails: entityDetails,
33
+ showEntityDetails: showEntityDetails,
34
+ hideEntityDetails: hideEntityDetails
35
+ };
36
+ };
37
+ exports.useEntityDetails = useEntityDetails;
package/cjs/components/HierarchyNodeTitle/styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "selected" | "popper">;
package/cjs/components/HierarchyNodeTitle/styles.js ADDED
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useStyles = void 0;
4
+ var styles_1 = require("@material-ui/core/styles");
5
+ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
6
+ link: {
7
+ cursor: 'pointer',
8
+ color: theme.palette.primary.main,
9
+ lineHeight: '15px',
10
+ wordBreak: 'break-word'
11
+ },
12
+ selected: {
13
+ fontWeight: 'bold'
14
+ },
15
+ popper: {
16
+ maxWidth: '345px',
17
+ minWidth: '200px',
18
+ 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)',
19
+ backgroundColor: 'white',
20
+ borderRadius: '2px'
21
+ }
22
+ }); });
package/cjs/components/ModeSwitcher/styles.js CHANGED
@@ -14,7 +14,9 @@ var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
14
14
  color: 'rgba(0,0,0,0.54)',
15
15
  width: '20px',
16
16
  height: '20px',
17
- marginRight: '8px'
17
+ '& + $title': {
18
+ marginLeft: '8px'
19
+ }
18
20
  },
19
21
  title: {
20
22
  fontSize: '13px',
package/cjs/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -85,12 +85,16 @@ var ReltioGridLayout = function (_a) {
85
85
  };
86
86
  return (react_1.default.createElement(react_1.default.Fragment, null,
87
87
  react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
88
- react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
88
+ !!width && (react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {},
89
+ _b[styles.gridFullscreen] = isFullscreenEnabled,
90
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
89
91
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
90
92
  var isAutosize = ((0, helpers_1.getReltioLayoutItemById)(layout, layoutItem.i) || {}).autosizing;
91
- var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
93
+ var autosizeComponent = isAutosize
94
+ ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
95
+ : {};
92
96
  return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
93
- }))));
97
+ })))));
94
98
  };
95
99
  ReltioGridLayout.defaultProps = {
96
100
  layoutOptions: {
package/cjs/components/index.d.ts CHANGED
@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
144
144
  export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
145
145
  export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
146
146
  export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
147
+ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
147
148
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
package/cjs/components/index.js CHANGED
@@ -19,7 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
20
  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;
21
21
  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;
22
- 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;
22
+ 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;
23
23
  __exportStar(require("./activityLog"), exports);
24
24
  var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
25
25
  Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -310,5 +310,7 @@ var SettingsMenu_1 = require("./SettingsMenu/SettingsMenu");
310
310
  Object.defineProperty(exports, "SettingsMenu", { enumerable: true, get: function () { return __importDefault(SettingsMenu_1).default; } });
311
311
  var DataTenantBadge_1 = require("./DataTenantBadge/DataTenantBadge");
312
312
  Object.defineProperty(exports, "DataTenantBadge", { enumerable: true, get: function () { return DataTenantBadge_1.DataTenantBadge; } });
313
+ var HierarchyNodeTitle_1 = require("./HierarchyNodeTitle/HierarchyNodeTitle");
314
+ Object.defineProperty(exports, "HierarchyNodeTitle", { enumerable: true, get: function () { return HierarchyNodeTitle_1.HierarchyNodeTitle; } });
313
315
  var RequiredMark_1 = require("./RequiredMark/RequiredMark");
314
316
  Object.defineProperty(exports, "RequiredMark", { enumerable: true, get: function () { return __importDefault(RequiredMark_1).default; } });
package/cjs/contexts/EntityLoadingIndicationContext/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const EntityLoadingIndicationContext: React.Context<(value: boolean) => void>;
package/cjs/contexts/EntityLoadingIndicationContext/index.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.EntityLoadingIndicationContext = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var utils_1 = require("../../core/utils");
9
+ exports.EntityLoadingIndicationContext = react_1.default.createContext(utils_1.noop);
10
+ exports.EntityLoadingIndicationContext.displayName = 'EntityLoadingIndicationContext';
package/cjs/contexts/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export { EntitiesMapContext } from './EntitiesMapContext';
12
12
  export { CrosswalksDisplayProvider, useCrosswalkColor, useCrosswalkFocus, useCrosswalkHighlight, useHighlightedCrosswalks } from './CrosswalksDisplayContext';
13
13
  export { ExpandedAttributesProvider, useAttributeExpanded } from './ExpandedAttributesContext';
14
14
  export { EntityMarkerContext } from './EntityMarkerContext';
15
+ export { EntityLoadingIndicationContext } from './EntityLoadingIndicationContext';
15
16
  export { WorkflowTasksContext } from './WorkflowTasksContext';
16
17
  export { RelatedObjectUrisContext } from './RelatedObjectUrisContext';
17
18
  export { EntityContext } from './EntityContext';
package/cjs/contexts/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.ScrollToErrorProvider = exports.ScrollToErrorContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
3
+ exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.ScrollToErrorProvider = exports.ScrollToErrorContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.EntityLoadingIndicationContext = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
4
4
  var AsyncMountContext_1 = require("./AsyncMountContext");
5
5
  Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
6
6
  var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -35,6 +35,8 @@ Object.defineProperty(exports, "ExpandedAttributesProvider", { enumerable: true,
35
35
  Object.defineProperty(exports, "useAttributeExpanded", { enumerable: true, get: function () { return ExpandedAttributesContext_1.useAttributeExpanded; } });
36
36
  var EntityMarkerContext_1 = require("./EntityMarkerContext");
37
37
  Object.defineProperty(exports, "EntityMarkerContext", { enumerable: true, get: function () { return EntityMarkerContext_1.EntityMarkerContext; } });
38
+ var EntityLoadingIndicationContext_1 = require("./EntityLoadingIndicationContext");
39
+ Object.defineProperty(exports, "EntityLoadingIndicationContext", { enumerable: true, get: function () { return EntityLoadingIndicationContext_1.EntityLoadingIndicationContext; } });
38
40
  var WorkflowTasksContext_1 = require("./WorkflowTasksContext");
39
41
  Object.defineProperty(exports, "WorkflowTasksContext", { enumerable: true, get: function () { return WorkflowTasksContext_1.WorkflowTasksContext; } });
40
42
  var RelatedObjectUrisContext_1 = require("./RelatedObjectUrisContext");
package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ declare type NodeTitleProps = {
3
+ title: string;
4
+ entityUri: string;
5
+ viewId: string;
6
+ isSelected?: boolean;
7
+ anchorEl?: HTMLElement;
8
+ withEntityDetails?: boolean;
9
+ };
10
+ export declare const HierarchyNodeTitle: ({ title, isSelected, entityUri, viewId, anchorEl, withEntityDetails }: NodeTitleProps) => JSX.Element;
11
+ export {};
package/esm/components/HierarchyNodeTitle/HierarchyNodeTitle.js ADDED
@@ -0,0 +1,29 @@
1
+ import React, { useCallback, useContext } from 'react';
2
+ import classnames from 'classnames';
3
+ import { useSelector, useDispatch } from 'react-redux';
4
+ import mdm, { ui } from '@reltio/mdm-module';
5
+ import Link from '../Link/Link';
6
+ import Popper from '../Popper/Popper';
7
+ import ProfileCard from '../ProfileCard/ProfileCard';
8
+ import { UrlGeneratorsContext } from '../../contexts';
9
+ import { useEntityDetails } from './hooks/useEntityDetails';
10
+ import { useStyles } from './styles';
11
+ export var HierarchyNodeTitle = function (_a) {
12
+ var _b;
13
+ 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;
14
+ var styles = useStyles();
15
+ var dispatch = useDispatch();
16
+ var uiPath = useSelector(mdm.selectors.getUIPath);
17
+ var generateEntityUrl = useContext(UrlGeneratorsContext).generateEntityUrl;
18
+ var _d = useEntityDetails(entityUri), isLoading = _d.isLoading, entityDetails = _d.entityDetails, showEntityDetails = _d.showEntityDetails, hideEntityDetails = _d.hideEntityDetails;
19
+ var link = generateEntityUrl({ uiPath: uiPath, uri: entityUri });
20
+ var showPopper = Boolean(entityDetails) || isLoading;
21
+ var handleClick = useCallback(function () {
22
+ dispatch(ui.actions.openEntity({ uri: entityUri, viewId: viewId }));
23
+ }, [dispatch, entityUri, viewId]);
24
+ return (React.createElement(React.Fragment, null,
25
+ React.createElement("span", { className: classnames(styles.link, (_b = {}, _b[styles.selected] = isSelected, _b)), onMouseEnter: withEntityDetails ? showEntityDetails : undefined, onMouseLeave: withEntityDetails ? hideEntityDetails : undefined },
26
+ React.createElement(Link, { to: link, onClick: handleClick }, title)),
27
+ React.createElement(Popper, { anchorEl: anchorEl, className: styles.popper, open: showPopper, modal: false, placement: "top-start" },
28
+ React.createElement(ProfileCard, { entity: entityDetails, variant: isLoading ? 'loading' : 'normal' }))));
29
+ };
package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const useEntityDetails: (entityUri: string) => {
2
+ isLoading: boolean;
3
+ entityDetails: any;
4
+ showEntityDetails: () => void;
5
+ hideEntityDetails: () => void;
6
+ };
package/esm/components/HierarchyNodeTitle/hooks/useEntityDetails.js ADDED
@@ -0,0 +1,33 @@
1
+ import { useState, useCallback, useRef, useEffect } from 'react';
2
+ import { getEntity } from '@reltio/mdm-sdk';
3
+ import { useSafePromise } from '../../../hooks/useSafePromise';
4
+ export var useEntityDetails = function (entityUri) {
5
+ var _a = useState(null), entityDetails = _a[0], setEntityDetails = _a[1];
6
+ var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
7
+ var timerId = useRef(null);
8
+ var safePromise = useSafePromise();
9
+ var cancelRequest = useCallback(function () { return safePromise(Promise.resolve()); }, [safePromise]);
10
+ var showEntityDetails = useCallback(function () {
11
+ timerId.current = setTimeout(function () {
12
+ setIsLoading(true);
13
+ safePromise(getEntity(entityUri))
14
+ .then(setEntityDetails)
15
+ .finally(function () { return setIsLoading(false); });
16
+ }, 1000);
17
+ }, [entityUri, safePromise]);
18
+ var hideEntityDetails = useCallback(function () {
19
+ cancelRequest();
20
+ clearTimeout(timerId.current);
21
+ setIsLoading(false);
22
+ setEntityDetails(null);
23
+ }, [cancelRequest]);
24
+ useEffect(function () {
25
+ return function () { return clearTimeout(timerId.current); };
26
+ }, []);
27
+ return {
28
+ isLoading: isLoading,
29
+ entityDetails: entityDetails,
30
+ showEntityDetails: showEntityDetails,
31
+ hideEntityDetails: hideEntityDetails
32
+ };
33
+ };
package/esm/components/HierarchyNodeTitle/styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "selected" | "popper">;
package/esm/components/HierarchyNodeTitle/styles.js ADDED
@@ -0,0 +1,19 @@
1
+ import { makeStyles } from '@material-ui/core/styles';
2
+ export var useStyles = makeStyles(function (theme) { return ({
3
+ link: {
4
+ cursor: 'pointer',
5
+ color: theme.palette.primary.main,
6
+ lineHeight: '15px',
7
+ wordBreak: 'break-word'
8
+ },
9
+ selected: {
10
+ fontWeight: 'bold'
11
+ },
12
+ popper: {
13
+ maxWidth: '345px',
14
+ minWidth: '200px',
15
+ 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)',
16
+ backgroundColor: 'white',
17
+ borderRadius: '2px'
18
+ }
19
+ }); });
package/esm/components/ModeSwitcher/styles.js CHANGED
@@ -12,7 +12,9 @@ var useStyles = makeStyles(function (theme) { return ({
12
12
  color: 'rgba(0,0,0,0.54)',
13
13
  width: '20px',
14
14
  height: '20px',
15
- marginRight: '8px'
15
+ '& + $title': {
16
+ marginLeft: '8px'
17
+ }
16
18
  },
17
19
  title: {
18
20
  fontSize: '13px',
package/esm/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -57,12 +57,16 @@ var ReltioGridLayout = function (_a) {
57
57
  };
58
58
  return (React.createElement(React.Fragment, null,
59
59
  React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
60
- React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
60
+ !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {},
61
+ _b[styles.gridFullscreen] = isFullscreenEnabled,
62
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
61
63
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
62
64
  var isAutosize = (getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
63
- var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
65
+ var autosizeComponent = isAutosize
66
+ ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
67
+ : {};
64
68
  return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
65
- }))));
69
+ })))));
66
70
  };
67
71
  ReltioGridLayout.defaultProps = {
68
72
  layoutOptions: {
package/esm/components/index.d.ts CHANGED
@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
144
144
  export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
145
145
  export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
146
146
  export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
147
+ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
147
148
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
package/esm/components/index.js CHANGED
@@ -144,4 +144,5 @@ export { TenantIcon } from './TenantIcon/TenantIcon';
144
144
  export { TenantsDropDownSelector } from './TenantsDropDownSelector/TenantsDropDownSelector';
145
145
  export { default as SettingsMenu } from './SettingsMenu/SettingsMenu';
146
146
  export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
147
+ export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
147
148
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
package/esm/contexts/EntityLoadingIndicationContext/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const EntityLoadingIndicationContext: React.Context<(value: boolean) => void>;
package/esm/contexts/EntityLoadingIndicationContext/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { noop } from '../../core/utils';
3
+ export var EntityLoadingIndicationContext = React.createContext(noop);
4
+ EntityLoadingIndicationContext.displayName = 'EntityLoadingIndicationContext';
package/esm/contexts/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export { EntitiesMapContext } from './EntitiesMapContext';
12
12
  export { CrosswalksDisplayProvider, useCrosswalkColor, useCrosswalkFocus, useCrosswalkHighlight, useHighlightedCrosswalks } from './CrosswalksDisplayContext';
13
13
  export { ExpandedAttributesProvider, useAttributeExpanded } from './ExpandedAttributesContext';
14
14
  export { EntityMarkerContext } from './EntityMarkerContext';
15
+ export { EntityLoadingIndicationContext } from './EntityLoadingIndicationContext';
15
16
  export { WorkflowTasksContext } from './WorkflowTasksContext';
16
17
  export { RelatedObjectUrisContext } from './RelatedObjectUrisContext';
17
18
  export { EntityContext } from './EntityContext';
package/esm/contexts/index.js CHANGED
@@ -12,6 +12,7 @@ export { EntitiesMapContext } from './EntitiesMapContext';
12
12
  export { CrosswalksDisplayProvider, useCrosswalkColor, useCrosswalkFocus, useCrosswalkHighlight, useHighlightedCrosswalks } from './CrosswalksDisplayContext';
13
13
  export { ExpandedAttributesProvider, useAttributeExpanded } from './ExpandedAttributesContext';
14
14
  export { EntityMarkerContext } from './EntityMarkerContext';
15
+ export { EntityLoadingIndicationContext } from './EntityLoadingIndicationContext';
15
16
  export { WorkflowTasksContext } from './WorkflowTasksContext';
16
17
  export { RelatedObjectUrisContext } from './RelatedObjectUrisContext';
17
18
  export { EntityContext } from './EntityContext';
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1486",
3
+ "version": "1.4.1488",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1486",
11
- "@reltio/mdm-sdk": "^1.4.1486",
10
+ "@reltio/mdm-module": "^1.4.1488",
11
+ "@reltio/mdm-sdk": "^1.4.1488",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",