@reltio/components 1.4.1563 → 1.4.1565-hf

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 (45) hide show
  1. package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js +3 -2
  2. package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js +1 -1
  3. package/cjs/components/AttributesFiltersBuilder/helpers.js +10 -7
  4. package/cjs/components/MultilineMenuItem/MultilineMenuItem.d.ts +11 -0
  5. package/cjs/components/MultilineMenuItem/MultilineMenuItem.js +49 -0
  6. package/cjs/components/MultilineMenuItem/styles.d.ts +1 -0
  7. package/cjs/components/MultilineMenuItem/styles.js +23 -0
  8. package/cjs/components/ProfileBandNavigation/ProfileBandNavigationWidget.js +2 -2
  9. package/cjs/components/QueryBuilderRow/QueryBuilderRow.js +1 -1
  10. package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts +1 -9
  11. package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +25 -48
  12. package/cjs/components/ReltioGridLayout/helpers.d.ts +1 -0
  13. package/cjs/components/ReltioGridLayout/helpers.js +10 -1
  14. package/cjs/components/ReltioGridLayout/styles.js +5 -0
  15. package/cjs/components/index.d.ts +1 -0
  16. package/cjs/components/index.js +3 -1
  17. package/cjs/hooks/index.d.ts +1 -0
  18. package/cjs/hooks/index.js +3 -1
  19. package/cjs/hooks/useLayoutResetter.d.ts +10 -0
  20. package/cjs/hooks/useLayoutResetter.js +23 -0
  21. package/cjs/hooks/useSnackbar.d.ts +4 -1
  22. package/cjs/hooks/useSnackbar.js +13 -6
  23. package/esm/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js +3 -2
  24. package/esm/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js +1 -1
  25. package/esm/components/AttributesFiltersBuilder/helpers.js +10 -7
  26. package/esm/components/MultilineMenuItem/MultilineMenuItem.d.ts +11 -0
  27. package/esm/components/MultilineMenuItem/MultilineMenuItem.js +21 -0
  28. package/esm/components/MultilineMenuItem/styles.d.ts +1 -0
  29. package/esm/components/MultilineMenuItem/styles.js +20 -0
  30. package/esm/components/ProfileBandNavigation/ProfileBandNavigationWidget.js +2 -2
  31. package/esm/components/QueryBuilderRow/QueryBuilderRow.js +1 -1
  32. package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts +1 -9
  33. package/esm/components/ReltioGridLayout/ReltioGridLayout.js +27 -50
  34. package/esm/components/ReltioGridLayout/helpers.d.ts +1 -0
  35. package/esm/components/ReltioGridLayout/helpers.js +9 -0
  36. package/esm/components/ReltioGridLayout/styles.js +5 -0
  37. package/esm/components/index.d.ts +1 -0
  38. package/esm/components/index.js +1 -0
  39. package/esm/hooks/index.d.ts +1 -0
  40. package/esm/hooks/index.js +1 -0
  41. package/esm/hooks/useLayoutResetter.d.ts +10 -0
  42. package/esm/hooks/useLayoutResetter.js +16 -0
  43. package/esm/hooks/useSnackbar.d.ts +4 -1
  44. package/esm/hooks/useSnackbar.js +13 -6
  45. package/package.json +3 -3
@@ -35,9 +35,10 @@ var SimpleDropDownSelector_1 = __importDefault(require("../../../SimpleDropDownS
35
35
  var helpers_1 = require("../../helpers");
36
36
  var styles_1 = __importDefault(require("./styles"));
37
37
  var FilterSelector = function (_a) {
38
+ var _b;
38
39
  var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
39
40
  var styles = (0, styles_1.default)();
40
- var _b = rowData || {}, _c = _b.attribute, _d = _c === void 0 ? {} : _c, _e = _d.attrType, attrType = _e === void 0 ? {} : _e, _f = _d.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id;
41
+ var _c = rowData || {}, _d = _c.attribute, _e = _d === void 0 ? {} : _d, _f = _e.attrType, attrType = _f === void 0 ? {} : _f, _g = _e.fieldName, fieldName = _g === void 0 ? null : _g, filter = _c.filter, id = _c.id;
41
42
  var changeFilter = rowContext.changeFilter;
42
43
  var options = optionsProp ||
43
44
  (attrType &&
@@ -56,6 +57,6 @@ var FilterSelector = function (_a) {
56
57
  onChangeFilter(options[0]);
57
58
  }
58
59
  }, [fieldName, filter, onChangeFilter, options]);
59
- return (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: "", height: 40, isDisabled: !options, placeholder: ui_i18n_1.default.text('Equals'), value: (0, helpers_1.findValue)(options, filter), options: options, onChange: onChangeFilter, className: styles.dropDownSelector, textFieldInputRef: textFieldInputRef }));
60
+ return (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: "", height: 40, isDisabled: !options, placeholder: ui_i18n_1.default.text('Equals'), value: (0, helpers_1.findValue)(options, filter), options: options, onChange: onChangeFilter, className: styles.dropDownSelector, textFieldInputRef: textFieldInputRef, TextFieldProps: { inputProps: (_b = {}, _b['data-reltio-id'] = 'filter-selector', _b) } }));
60
61
  };
61
62
  exports.default = (0, react_1.memo)(FilterSelector);
@@ -59,6 +59,6 @@ var ValuesEditor = function (_a) {
59
59
  };
60
60
  changeFilter(newFilter, id);
61
61
  }, [changeFilter, id, fieldName, filter]);
62
- return (react_1.default.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (react_1.default.createElement(FilterValueEditor_1.default, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
62
+ return (react_1.default.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (react_1.default.createElement(FilterValueEditor_1.default, { "data-reltio-id": "filter-value-editor", filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
63
63
  };
64
64
  exports.default = (0, react_1.memo)(ValuesEditor);
@@ -22,6 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
23
  exports.getEntityTypeFromAttrTypes = exports.getRowsDataFromFilters = exports.findValue = exports.getAttributeSelectorItems = void 0;
24
24
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
25
+ var ramda_1 = require("ramda");
25
26
  var createAttributeItem = function (metadata, attrType, entityTypeUri, parents) {
26
27
  var entityTypeLabel = (0, mdm_sdk_1.getEntityTypeLabel)(metadata, { type: entityTypeUri });
27
28
  var title = attrType.label || attrType.name;
@@ -31,28 +32,30 @@ var createAttributeItem = function (metadata, attrType, entityTypeUri, parents)
31
32
  }
32
33
  : {
33
34
  entityTypeUri: entityTypeUri,
34
- pathToTitle: Array.isArray(parents) ? __spreadArray(__spreadArray([entityTypeLabel], parents, true), [title], false) : [entityTypeLabel, title],
35
- fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attrType.uri)
35
+ pathToTitle: Array.isArray(parents)
36
+ ? __spreadArray(__spreadArray([entityTypeLabel], (0, ramda_1.chain)((0, ramda_1.prop)('label'), parents), true), [title], false) : [entityTypeLabel, title],
37
+ fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attrType.uri, parents)
36
38
  };
37
39
  return __assign({ attrType: attrType, title: title }, attributeProps);
38
40
  };
39
- var createAttributesConfig = function (metadata, attrNode, entityTypeUri, createAttributeConfig, parents) {
41
+ var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parents) {
40
42
  if (parents === void 0) { parents = []; }
41
- var resConfig = __assign(__assign({}, createAttributeConfig(metadata, attrNode, entityTypeUri, parents)), { uri: attrNode.uri });
43
+ var resConfig = __assign(__assign({}, createAttributeItem(metadata, attrNode, entityTypeUri, parents)), { uri: attrNode.uri });
42
44
  var children = attrNode.children
43
45
  ? attrNode.children.map(function (childNode) {
44
- return createAttributesConfig(metadata, childNode, entityTypeUri, createAttributeConfig, parents.concat(attrNode.label));
46
+ return createAttributesConfig(metadata, childNode, entityTypeUri, parents.concat(attrNode));
45
47
  })
46
48
  : [];
47
- if (children.length)
49
+ if (children.length) {
48
50
  resConfig.children = children;
51
+ }
49
52
  return resConfig;
50
53
  };
51
54
  var getAttributeSelectorItems = function (attributeTypes, entityType, metadata) {
52
55
  if (entityType === void 0) { entityType = {}; }
53
56
  return (0, mdm_sdk_1.getAttributesTreeFromAttributes)(attributeTypes, metadata).map(function (attrNode) {
54
57
  var entityTypeUri = (0, mdm_sdk_1.isSpecialAttribute)(attrNode) ? null : entityType.uri;
55
- return createAttributesConfig(metadata, attrNode, entityTypeUri, createAttributeItem);
58
+ return createAttributesConfig(metadata, attrNode, entityTypeUri);
56
59
  });
57
60
  };
58
61
  exports.getAttributeSelectorItems = getAttributeSelectorItems;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ type Props = {
3
+ item: {
4
+ primary: string;
5
+ secondary: string;
6
+ onClick: () => void;
7
+ };
8
+ onMenuClose?: () => void;
9
+ };
10
+ declare const MultilineMenuItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
11
+ export default MultilineMenuItem;
@@ -0,0 +1,49 @@
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
+ var react_1 = __importStar(require("react"));
30
+ var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
31
+ var ListItemText_1 = __importDefault(require("@material-ui/core/ListItemText"));
32
+ var core_1 = require("../../core");
33
+ var styles_1 = require("./styles");
34
+ var MultilineMenuItem = (0, react_1.forwardRef)(function (_a, ref) {
35
+ var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? core_1.noop : _b;
36
+ var styles = (0, styles_1.useStyles)();
37
+ var primary = item.primary, secondary = item.secondary, onClick = item.onClick;
38
+ var handleClick = function () {
39
+ onMenuClose();
40
+ onClick();
41
+ };
42
+ return (react_1.default.createElement(MenuItem_1.default, { className: styles.menuItem, ref: ref, onClick: handleClick },
43
+ react_1.default.createElement(ListItemText_1.default, { primary: primary, secondary: secondary, className: styles.itemText, classes: {
44
+ primary: styles.textPrimary,
45
+ secondary: styles.textSecondary
46
+ } })));
47
+ });
48
+ MultilineMenuItem.displayName = 'MultilineMenuItem';
49
+ exports.default = MultilineMenuItem;
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"menuItem" | "textPrimary" | "textSecondary" | "itemText">;
@@ -0,0 +1,23 @@
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 () { return ({
6
+ menuItem: {
7
+ whiteSpace: 'inherit',
8
+ width: 200,
9
+ padding: '9px 12px 7px'
10
+ },
11
+ itemText: {
12
+ margin: 0
13
+ },
14
+ textPrimary: {
15
+ fontSize: 14,
16
+ lineHeight: '16px',
17
+ fontWeight: 500
18
+ },
19
+ textSecondary: {
20
+ fontSize: 10,
21
+ lineHeight: '12px'
22
+ }
23
+ }); });
@@ -58,7 +58,7 @@ var ProfileBandNavigationWidget = function (_a) {
58
58
  (0, mdm_sdk_1.formatNumberAsMetric)(total, 1000000),
59
59
  " ",
60
60
  total === 1 ? SEARCH_RESULT : SEARCH_RESULTS),
61
- react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowLeft_1.default, tooltipTitle: PREVIOUS_PROFILE, onClick: onPrev, disabled: isPrevDisabled, showForDisabled: true }),
62
- react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowRight_1.default, tooltipTitle: NEXT_PROFILE, onClick: onNext, disabled: isNextDisabled, showForDisabled: true })));
61
+ react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowLeft_1.default, "data-reltio-id": "reltio-previous-profile-button", tooltipTitle: PREVIOUS_PROFILE, onClick: onPrev, disabled: isPrevDisabled, showForDisabled: true }),
62
+ react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowRight_1.default, "data-reltio-id": "reltio-next-profile-button", tooltipTitle: NEXT_PROFILE, onClick: onNext, disabled: isNextDisabled, showForDisabled: true })));
63
63
  };
64
64
  exports.ProfileBandNavigationWidget = ProfileBandNavigationWidget;
@@ -48,7 +48,7 @@ var QueryBuilderRow = function (_a) {
48
48
  var _b;
49
49
  var _c = _a.classes, classes = _c === void 0 ? {} : _c, rowData = _a.rowData, previousRowData = _a.previousRowData, _d = _a.LogicOperatorComponent, LogicOperatorComponent = _d === void 0 ? ReadOnlyLogicOperator_1.default : _d, AttributeSelectorComponent = _a.AttributeSelectorComponent, _e = _a.FilterSelectorComponent, FilterSelectorComponent = _e === void 0 ? ReadOnlyFilter_1.default : _e, ValuesEditorComponent = _a.ValuesEditorComponent, ActionsComponent = _a.ActionsComponent, filterSelectorRef = _a.filterSelectorRef, _f = _a.attributeSelectorProps, attributeSelectorProps = _f === void 0 ? {} : _f, rowContext = __rest(_a, ["classes", "rowData", "previousRowData", "LogicOperatorComponent", "AttributeSelectorComponent", "FilterSelectorComponent", "ValuesEditorComponent", "ActionsComponent", "filterSelectorRef", "attributeSelectorProps"]);
50
50
  var styles = (0, styles_1.default)();
51
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.row, classes.root) },
51
+ return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.row, classes.root), "data-reltio-id": "query-builder-row" },
52
52
  react_1.default.createElement(LogicOperatorComponent, { className: classes.logicOperatorContainer, rowContext: rowContext, rowData: previousRowData }),
53
53
  react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowItem, classes.attributeSelectorContainer) },
54
54
  react_1.default.createElement(AttributeSelectorComponent, { attributeSelectorProps: attributeSelectorProps, rowContext: rowContext, rowData: rowData })),
@@ -20,14 +20,6 @@ type Props<ViewConfig = Record<string, unknown>> = {
20
20
  };
21
21
  declare const _default: React.MemoExoticComponent<{
22
22
  ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes }: Props<Record<string, unknown>>): JSX.Element;
23
- defaultProps: {
24
- layoutOptions: {
25
- cols: number;
26
- rowHeight: number;
27
- margin: number[];
28
- };
29
- onLayoutChanged: any;
30
- classes: {};
31
- };
23
+ displayName: string;
32
24
  }>;
33
25
  export default _default;
@@ -43,19 +43,25 @@ var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
43
43
  var ramda_1 = require("ramda");
44
44
  var classnames_1 = __importDefault(require("classnames"));
45
45
  var helpers_1 = require("./helpers");
46
+ var core_1 = require("../../core");
46
47
  var styles_1 = require("./styles");
48
+ var DEFAULT_LAYOUT_OPTIONS = {
49
+ cols: 4,
50
+ rowHeight: 30,
51
+ margin: [15, 15]
52
+ };
47
53
  var ReltioGridLayout = function (_a) {
48
54
  var _b;
49
- var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes;
55
+ var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? core_1.noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes;
50
56
  var ref = (0, react_1.useRef)();
51
57
  var heightsMap = (0, react_1.useRef)({});
52
58
  var styles = (0, styles_1.useStyles)();
53
- var _c = (0, react_1.useState)(null), resizingItemId = _c[0], setResizingItemId = _c[1];
54
- var _d = (0, react_1.useState)(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
55
- var _e = (0, react_1.useState)(0), width = _e[0], setWidth = _e[1];
59
+ var _e = (0, react_1.useState)(null), resizingItemId = _e[0], setResizingItemId = _e[1];
60
+ var _f = (0, react_1.useState)(null), fullscreenItemId = _f[0], setFullscreenItemId = _f[1];
61
+ var _g = (0, react_1.useState)(0), width = _g[0], setWidth = _g[1];
56
62
  var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
57
63
  var processedLayout = (0, react_1.useMemo)(function () { return (0, helpers_1.reltioLayoutToReactGridLayout)(layout); }, [layout]);
58
- var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), onLayoutChanged);
64
+ var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), (0, ramda_1.ifElse)((0, ramda_1.always)(isStatic), (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current), (0, helpers_1.calcLayoutItemsHeight)(heightsMap.current)), onLayoutChanged);
59
65
  var handleDrop = function (layout, layoutItem, e) {
60
66
  if (onDrop) {
61
67
  onDrop((0, helpers_1.reactGridLayoutToReltioLayout)(layout), (0, helpers_1.reactGridLayoutItemToReltioLayoutItem)(layoutItem), e);
@@ -63,44 +69,18 @@ var ReltioGridLayout = function (_a) {
63
69
  };
64
70
  var onToggleFullscreen = (0, react_1.useCallback)(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
65
71
  var isFullscreenEnabled = fullscreenItemId !== null;
66
- var onItemHeightResizeInGroupingMode = (0, react_1.useCallback)(function (height, layoutId) {
67
- if (height) {
68
- heightsMap.current[layoutId] = (0, helpers_1.calcHeight)(height, layoutOptions);
69
- var alignedLayout = (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current, layout);
70
- if (!(0, ramda_1.equals)(alignedLayout, layout)) {
71
- onLayoutChanged(alignedLayout);
72
- }
73
- }
74
- }, [layout, layoutOptions, onLayoutChanged]);
75
- var onItemHeightResize = (0, react_1.useCallback)(function (height, layoutId) {
76
- var isLayoutChanged = false;
77
- var newLayout = layout.map(function (layoutItem) {
78
- if (layoutItem.id === layoutId && height) {
72
+ var getAutosizeComponent = function (layoutItemId) { return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (_, height) {
73
+ if (height) {
79
74
  var newHeight = (0, helpers_1.calcHeight)(height, layoutOptions);
80
- if (layoutItem.height !== newHeight) {
81
- isLayoutChanged = true;
82
- return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
75
+ if (newHeight !== heightsMap.current[layoutItemId]) {
76
+ heightsMap.current[layoutItemId] = newHeight;
77
+ onReltioLayoutChanged(processedLayout);
83
78
  }
84
79
  }
85
- return layoutItem;
86
- });
87
- if (isLayoutChanged) {
88
- onLayoutChanged(newLayout);
89
- }
90
- }, [layout, layoutOptions, onLayoutChanged]);
91
- var getAutosizeComponent = function (layoutItemId) {
92
- return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
93
- if (isStatic) {
94
- onItemHeightResizeInGroupingMode(height, layoutItemId);
95
- }
96
- else {
97
- onItemHeightResize(height, layoutItemId);
98
- }
99
- } }));
100
- };
80
+ } })); };
101
81
  return (react_1.default.createElement(react_1.default.Fragment, null,
102
82
  react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
103
- !!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: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {},
83
+ !!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: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},
104
84
  _b[styles.gridFullscreen] = isFullscreenEnabled,
105
85
  _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
106
86
  var _a;
@@ -110,16 +90,13 @@ var ReltioGridLayout = function (_a) {
110
90
  var autosizeComponent = isAutosize
111
91
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
112
92
  : {};
113
- return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item, { static: isStatic }), isFullscreen: isItemFullscreen }, autosizeComponent)));
93
+ return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.item, (_a = {
94
+ static: isStatic,
95
+ fullscreen: isItemFullscreen
96
+ },
97
+ _a[styles.isResizing] = isResizing,
98
+ _a)), isFullscreen: isItemFullscreen }, autosizeComponent)));
114
99
  })))));
115
100
  };
116
- ReltioGridLayout.defaultProps = {
117
- layoutOptions: {
118
- cols: 4,
119
- rowHeight: 30,
120
- margin: [15, 15]
121
- },
122
- onLayoutChanged: ramda_1.identity,
123
- classes: {}
124
- };
101
+ ReltioGridLayout.displayName = 'ReltioGridLayout';
125
102
  exports.default = (0, react_1.memo)(ReltioGridLayout);
@@ -8,3 +8,4 @@ export declare const getReltioLayoutItemById: any;
8
8
  export declare const copyPropsFromPreviousLayout: any;
9
9
  export declare const calcHeight: (height: number, options: ReltioGridLayoutOptions) => number;
10
10
  export declare const alignGroupedItemsHeights: any;
11
+ export declare const calcLayoutItemsHeight: any;
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  return t;
23
23
  };
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
- exports.alignGroupedItemsHeights = exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = void 0;
25
+ exports.calcLayoutItemsHeight = exports.alignGroupedItemsHeights = exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = void 0;
26
26
  var ramda_1 = require("ramda");
27
27
  var reltioLayoutItemToReactGridLayoutItem = function (_a) {
28
28
  var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
@@ -96,3 +96,12 @@ exports.alignGroupedItemsHeights = (0, ramda_1.curry)(function (heightsMap, layo
96
96
  return layoutItem;
97
97
  });
98
98
  });
99
+ exports.calcLayoutItemsHeight = (0, ramda_1.curry)(function (heightsMap, layout) {
100
+ return layout.map(function (layoutItem) {
101
+ var height = heightsMap[layoutItem.id];
102
+ if (height && layoutItem.autosizing) {
103
+ return __assign(__assign({}, layoutItem), { minHeight: height, maxHeight: height, height: height });
104
+ }
105
+ return layoutItem;
106
+ });
107
+ });
@@ -9,6 +9,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
9
9
  position: 'relative',
10
10
  width: '100%',
11
11
  '& .react-grid-item': {
12
+ overflow: 'hidden',
12
13
  '&.react-grid-placeholder': {
13
14
  background: 'rgba(0, 0, 0, 0.03)',
14
15
  border: '2px dashed rgba(0, 0, 0, 0.3)',
@@ -23,6 +24,10 @@ exports.useStyles = (0, styles_1.makeStyles)(function (_) { return ({
23
24
  '&.static .react-resizable-handle': {
24
25
  display: 'none'
25
26
  },
27
+ '&.customView .react-resizable-handle': {
28
+ width: '10px',
29
+ height: '10px'
30
+ },
26
31
  '&.cssTransforms': {
27
32
  transitionProperty: 'transform'
28
33
  },
@@ -149,3 +149,4 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
149
149
  export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
150
150
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
151
151
  export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
152
+ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
@@ -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.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = 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.RelevanceScoreBadge = 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.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = void 0;
22
+ exports.MultilineMenuItem = exports.RelevanceScoreBadge = 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.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = 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; } });
@@ -320,3 +320,5 @@ var RequiredMark_1 = require("./RequiredMark/RequiredMark");
320
320
  Object.defineProperty(exports, "RequiredMark", { enumerable: true, get: function () { return __importDefault(RequiredMark_1).default; } });
321
321
  var RelevanceScoreBadge_1 = require("./RelevanceScoreBadge/RelevanceScoreBadge");
322
322
  Object.defineProperty(exports, "RelevanceScoreBadge", { enumerable: true, get: function () { return RelevanceScoreBadge_1.RelevanceScoreBadge; } });
323
+ var MultilineMenuItem_1 = require("./MultilineMenuItem/MultilineMenuItem");
324
+ Object.defineProperty(exports, "MultilineMenuItem", { enumerable: true, get: function () { return __importDefault(MultilineMenuItem_1).default; } });
@@ -24,3 +24,4 @@ export { useReadableSearchState } from './useReadableSearchState';
24
24
  export { useSavedStateForEntityType } from './useSavedStateForEntityType';
25
25
  export { useSnackbar } from './useSnackbar';
26
26
  export { useIsMountedRef } from './useIsMountedRef';
27
+ export { useLayoutResetter } from './useLayoutResetter';
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
3
+ exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
4
4
  var useScrollToAttributeError_1 = require("./useScrollToAttributeError/useScrollToAttributeError");
5
5
  Object.defineProperty(exports, "useScrollToAttributeError", { enumerable: true, get: function () { return useScrollToAttributeError_1.useScrollToAttributeError; } });
6
6
  var useActions_1 = require("./useActions");
@@ -53,3 +53,5 @@ var useSnackbar_1 = require("./useSnackbar");
53
53
  Object.defineProperty(exports, "useSnackbar", { enumerable: true, get: function () { return useSnackbar_1.useSnackbar; } });
54
54
  var useIsMountedRef_1 = require("./useIsMountedRef");
55
55
  Object.defineProperty(exports, "useIsMountedRef", { enumerable: true, get: function () { return useIsMountedRef_1.useIsMountedRef; } });
56
+ var useLayoutResetter_1 = require("./useLayoutResetter");
57
+ Object.defineProperty(exports, "useLayoutResetter", { enumerable: true, get: function () { return useLayoutResetter_1.useLayoutResetter; } });
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ type Props = {
3
+ onLayoutReset: () => void;
4
+ onResetUndo: () => void;
5
+ };
6
+ export declare const useLayoutResetter: ({ onLayoutReset, onResetUndo }: Props) => {
7
+ SnackbarRenderer: () => JSX.Element;
8
+ resetLayout: () => void;
9
+ };
10
+ export {};
@@ -0,0 +1,23 @@
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.useLayoutResetter = void 0;
7
+ var ui_i18n_1 = __importDefault(require("ui-i18n"));
8
+ var useSnackbar_1 = require("./useSnackbar");
9
+ var useLayoutResetter = function (_a) {
10
+ var onLayoutReset = _a.onLayoutReset, onResetUndo = _a.onResetUndo;
11
+ var resetLayout = function () {
12
+ onLayoutReset();
13
+ showSnackbarMessage(ui_i18n_1.default.text("The default layout is now restored. It's still not too late to revert your changes. Click Undo to go back to your personalized settings."));
14
+ };
15
+ var _b = (0, useSnackbar_1.useSnackbar)({
16
+ onDismissClick: onResetUndo,
17
+ showDismiss: true,
18
+ autoHideDuration: 5000,
19
+ dismissTitle: ui_i18n_1.default.text('Undo')
20
+ }), SnackbarRenderer = _b.SnackbarRenderer, showSnackbarMessage = _b.showSnackbarMessage;
21
+ return { SnackbarRenderer: SnackbarRenderer, resetLayout: resetLayout };
22
+ };
23
+ exports.useLayoutResetter = useLayoutResetter;
@@ -3,8 +3,11 @@ import { SnackbarOrigin } from '@material-ui/core/Snackbar';
3
3
  type SnackbarOptions = {
4
4
  anchorOrigin?: SnackbarOrigin;
5
5
  showDismiss?: boolean;
6
+ dismissTitle?: string;
7
+ autoHideDuration?: number;
8
+ onDismissClick?: () => void;
6
9
  };
7
- export declare const useSnackbar: (options?: SnackbarOptions) => {
10
+ export declare const useSnackbar: ({ anchorOrigin, showDismiss, dismissTitle, autoHideDuration, onDismissClick }?: SnackbarOptions) => {
8
11
  SnackbarRenderer: () => JSX.Element;
9
12
  showSnackbarMessage: (message: any) => void;
10
13
  };
@@ -29,26 +29,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.useSnackbar = void 0;
30
30
  var react_1 = __importStar(require("react"));
31
31
  var ui_i18n_1 = __importDefault(require("ui-i18n"));
32
+ var ramda_1 = require("ramda");
32
33
  var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
33
34
  var Button_1 = __importDefault(require("@material-ui/core/Button"));
34
35
  var Snackbar_1 = __importDefault(require("@material-ui/core/Snackbar"));
36
+ var core_1 = require("../core");
35
37
  var FIVE_MINUTES = 5 * 60 * 1000;
36
- var useSnackbar = function (options) {
37
- if (options === void 0) { options = {}; }
38
- var anchorOrigin = options.anchorOrigin, showDismiss = options.showDismiss;
39
- var _a = (0, react_1.useState)(false), isOpenSnackbar = _a[0], setIsOpenSnackbar = _a[1];
40
- var _b = (0, react_1.useState)(''), snackbarMessage = _b[0], setSnackbarMessage = _b[1];
38
+ var useSnackbar = function (_a) {
39
+ var _b = _a === void 0 ? {} : _a, anchorOrigin = _b.anchorOrigin, showDismiss = _b.showDismiss, _c = _b.dismissTitle, dismissTitle = _c === void 0 ? ui_i18n_1.default.text('Dismiss') : _c, _d = _b.autoHideDuration, autoHideDuration = _d === void 0 ? FIVE_MINUTES : _d, _e = _b.onDismissClick, onDismissClick = _e === void 0 ? core_1.noop : _e;
40
+ var _f = (0, react_1.useState)(false), isOpenSnackbar = _f[0], setIsOpenSnackbar = _f[1];
41
+ var _g = (0, react_1.useState)(''), snackbarMessage = _g[0], setSnackbarMessage = _g[1];
41
42
  var closeSnackbar = (0, react_1.useCallback)(function () {
42
43
  setIsOpenSnackbar(false);
43
44
  setSnackbarMessage('');
44
45
  }, []);
46
+ var handleSnackbarClose = (0, react_1.useCallback)(function (_, reason) {
47
+ if (reason === 'clickaway') {
48
+ return;
49
+ }
50
+ closeSnackbar();
51
+ }, [closeSnackbar]);
45
52
  var showSnackbarMessage = (0, react_1.useCallback)(function (message) {
46
53
  setIsOpenSnackbar(true);
47
54
  setSnackbarMessage(message);
48
55
  }, []);
49
56
  var SnackbarRenderer = (0, react_1.useCallback)(function () {
50
57
  return (react_1.default.createElement(Portal_1.default, { container: document.body },
51
- react_1.default.createElement(Snackbar_1.default, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: FIVE_MINUTES, onClose: closeSnackbar, message: snackbarMessage, action: showDismiss ? (react_1.default.createElement(Button_1.default, { color: "primary", onClick: closeSnackbar }, ui_i18n_1.default.text('Dismiss'))) : undefined })));
58
+ react_1.default.createElement(Snackbar_1.default, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: autoHideDuration, onClose: handleSnackbarClose, message: snackbarMessage, style: { maxWidth: 500 }, action: showDismiss ? (react_1.default.createElement(Button_1.default, { color: "primary", onClick: (0, ramda_1.pipe)(closeSnackbar, onDismissClick) }, dismissTitle)) : undefined })));
52
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
53
60
  }, [isOpenSnackbar, closeSnackbar, snackbarMessage]);
54
61
  return { SnackbarRenderer: SnackbarRenderer, showSnackbarMessage: showSnackbarMessage };
@@ -7,9 +7,10 @@ import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDo
7
7
  import { findValue } from '../../helpers';
8
8
  import useStyles from './styles';
9
9
  var FilterSelector = function (_a) {
10
+ var _b;
10
11
  var rowData = _a.rowData, rowContext = _a.rowContext, textFieldInputRef = _a.textFieldInputRef, optionsProp = _a.options;
11
12
  var styles = useStyles();
12
- var _b = rowData || {}, _c = _b.attribute, _d = _c === void 0 ? {} : _c, _e = _d.attrType, attrType = _e === void 0 ? {} : _e, _f = _d.fieldName, fieldName = _f === void 0 ? null : _f, filter = _b.filter, id = _b.id;
13
+ var _c = rowData || {}, _d = _c.attribute, _e = _d === void 0 ? {} : _d, _f = _e.attrType, attrType = _f === void 0 ? {} : _f, _g = _e.fieldName, fieldName = _g === void 0 ? null : _g, filter = _c.filter, id = _c.id;
13
14
  var changeFilter = rowContext.changeFilter;
14
15
  var options = optionsProp ||
15
16
  (attrType &&
@@ -28,6 +29,6 @@ var FilterSelector = function (_a) {
28
29
  onChangeFilter(options[0]);
29
30
  }
30
31
  }, [fieldName, filter, onChangeFilter, options]);
31
- return (React.createElement(SimpleDropDownSelector, { label: "", height: 40, isDisabled: !options, placeholder: i18n.text('Equals'), value: findValue(options, filter), options: options, onChange: onChangeFilter, className: styles.dropDownSelector, textFieldInputRef: textFieldInputRef }));
32
+ return (React.createElement(SimpleDropDownSelector, { label: "", height: 40, isDisabled: !options, placeholder: i18n.text('Equals'), value: findValue(options, filter), options: options, onChange: onChangeFilter, className: styles.dropDownSelector, textFieldInputRef: textFieldInputRef, TextFieldProps: { inputProps: (_b = {}, _b['data-reltio-id'] = 'filter-selector', _b) } }));
32
33
  };
33
34
  export default memo(FilterSelector);
@@ -31,6 +31,6 @@ var ValuesEditor = function (_a) {
31
31
  };
32
32
  changeFilter(newFilter, id);
33
33
  }, [changeFilter, id, fieldName, filter]);
34
- return (React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (React.createElement(FilterValueEditor, { filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
34
+ return (React.createElement("div", { className: styles.valuesEditor }, (rowData === null || rowData === void 0 ? void 0 : rowData.attribute) && canFilterAcceptValues && (React.createElement(FilterValueEditor, { "data-reltio-id": "filter-value-editor", filter: editorFilter, onChange: changeValue, dataTypeDefinition: filterValueDataTypeDefinition, fullWidth: true, TextFieldProps: TextFieldProps, color: "primary", classes: editorClasses, orientation: "horizontal" }))));
35
35
  };
36
36
  export default memo(ValuesEditor);
@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
19
19
  return to.concat(ar || Array.prototype.slice.call(from));
20
20
  };
21
21
  import { getAttributesTreeFromAttributes, attributeUriToSearchUri, isSpecialAttribute, getBaseUri, getEntityTypeLabel } from '@reltio/mdm-sdk';
22
+ import { chain, prop } from 'ramda';
22
23
  var createAttributeItem = function (metadata, attrType, entityTypeUri, parents) {
23
24
  var entityTypeLabel = getEntityTypeLabel(metadata, { type: entityTypeUri });
24
25
  var title = attrType.label || attrType.name;
@@ -28,28 +29,30 @@ var createAttributeItem = function (metadata, attrType, entityTypeUri, parents)
28
29
  }
29
30
  : {
30
31
  entityTypeUri: entityTypeUri,
31
- pathToTitle: Array.isArray(parents) ? __spreadArray(__spreadArray([entityTypeLabel], parents, true), [title], false) : [entityTypeLabel, title],
32
- fieldName: attributeUriToSearchUri(attrType.uri)
32
+ pathToTitle: Array.isArray(parents)
33
+ ? __spreadArray(__spreadArray([entityTypeLabel], chain(prop('label'), parents), true), [title], false) : [entityTypeLabel, title],
34
+ fieldName: attributeUriToSearchUri(attrType.uri, parents)
33
35
  };
34
36
  return __assign({ attrType: attrType, title: title }, attributeProps);
35
37
  };
36
- var createAttributesConfig = function (metadata, attrNode, entityTypeUri, createAttributeConfig, parents) {
38
+ var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parents) {
37
39
  if (parents === void 0) { parents = []; }
38
- var resConfig = __assign(__assign({}, createAttributeConfig(metadata, attrNode, entityTypeUri, parents)), { uri: attrNode.uri });
40
+ var resConfig = __assign(__assign({}, createAttributeItem(metadata, attrNode, entityTypeUri, parents)), { uri: attrNode.uri });
39
41
  var children = attrNode.children
40
42
  ? attrNode.children.map(function (childNode) {
41
- return createAttributesConfig(metadata, childNode, entityTypeUri, createAttributeConfig, parents.concat(attrNode.label));
43
+ return createAttributesConfig(metadata, childNode, entityTypeUri, parents.concat(attrNode));
42
44
  })
43
45
  : [];
44
- if (children.length)
46
+ if (children.length) {
45
47
  resConfig.children = children;
48
+ }
46
49
  return resConfig;
47
50
  };
48
51
  export var getAttributeSelectorItems = function (attributeTypes, entityType, metadata) {
49
52
  if (entityType === void 0) { entityType = {}; }
50
53
  return getAttributesTreeFromAttributes(attributeTypes, metadata).map(function (attrNode) {
51
54
  var entityTypeUri = isSpecialAttribute(attrNode) ? null : entityType.uri;
52
- return createAttributesConfig(metadata, attrNode, entityTypeUri, createAttributeItem);
55
+ return createAttributesConfig(metadata, attrNode, entityTypeUri);
53
56
  });
54
57
  };
55
58
  var findAttributeSelectorItem = function (fieldName, attributesGroup) {
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ type Props = {
3
+ item: {
4
+ primary: string;
5
+ secondary: string;
6
+ onClick: () => void;
7
+ };
8
+ onMenuClose?: () => void;
9
+ };
10
+ declare const MultilineMenuItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
11
+ export default MultilineMenuItem;
@@ -0,0 +1,21 @@
1
+ import React, { forwardRef } from 'react';
2
+ import MenuItem from '@material-ui/core/MenuItem';
3
+ import ListItemText from '@material-ui/core/ListItemText';
4
+ import { noop } from '../../core';
5
+ import { useStyles } from './styles';
6
+ var MultilineMenuItem = forwardRef(function (_a, ref) {
7
+ var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? noop : _b;
8
+ var styles = useStyles();
9
+ var primary = item.primary, secondary = item.secondary, onClick = item.onClick;
10
+ var handleClick = function () {
11
+ onMenuClose();
12
+ onClick();
13
+ };
14
+ return (React.createElement(MenuItem, { className: styles.menuItem, ref: ref, onClick: handleClick },
15
+ React.createElement(ListItemText, { primary: primary, secondary: secondary, className: styles.itemText, classes: {
16
+ primary: styles.textPrimary,
17
+ secondary: styles.textSecondary
18
+ } })));
19
+ });
20
+ MultilineMenuItem.displayName = 'MultilineMenuItem';
21
+ export default MultilineMenuItem;
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"menuItem" | "textPrimary" | "textSecondary" | "itemText">;
@@ -0,0 +1,20 @@
1
+ import { makeStyles } from '@material-ui/core/styles';
2
+ export var useStyles = makeStyles(function () { return ({
3
+ menuItem: {
4
+ whiteSpace: 'inherit',
5
+ width: 200,
6
+ padding: '9px 12px 7px'
7
+ },
8
+ itemText: {
9
+ margin: 0
10
+ },
11
+ textPrimary: {
12
+ fontSize: 14,
13
+ lineHeight: '16px',
14
+ fontWeight: 500
15
+ },
16
+ textSecondary: {
17
+ fontSize: 10,
18
+ lineHeight: '12px'
19
+ }
20
+ }); });
@@ -28,7 +28,7 @@ var ProfileBandNavigationWidget = function (_a) {
28
28
  formatNumberAsMetric(total, 1000000),
29
29
  " ",
30
30
  total === 1 ? SEARCH_RESULT : SEARCH_RESULTS),
31
- React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowLeft, tooltipTitle: PREVIOUS_PROFILE, onClick: onPrev, disabled: isPrevDisabled, showForDisabled: true }),
32
- React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowRight, tooltipTitle: NEXT_PROFILE, onClick: onNext, disabled: isNextDisabled, showForDisabled: true })));
31
+ React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowLeft, "data-reltio-id": "reltio-previous-profile-button", tooltipTitle: PREVIOUS_PROFILE, onClick: onPrev, disabled: isPrevDisabled, showForDisabled: true }),
32
+ React.createElement(SmallIconButtonWithTooltip, { size: "L", icon: KeyboardArrowRight, "data-reltio-id": "reltio-next-profile-button", tooltipTitle: NEXT_PROFILE, onClick: onNext, disabled: isNextDisabled, showForDisabled: true })));
33
33
  };
34
34
  export { ProfileBandNavigationWidget, LinkWithTooltip };
@@ -20,7 +20,7 @@ var QueryBuilderRow = function (_a) {
20
20
  var _b;
21
21
  var _c = _a.classes, classes = _c === void 0 ? {} : _c, rowData = _a.rowData, previousRowData = _a.previousRowData, _d = _a.LogicOperatorComponent, LogicOperatorComponent = _d === void 0 ? ReadOnlyLogicOperator : _d, AttributeSelectorComponent = _a.AttributeSelectorComponent, _e = _a.FilterSelectorComponent, FilterSelectorComponent = _e === void 0 ? ReadOnlyFilter : _e, ValuesEditorComponent = _a.ValuesEditorComponent, ActionsComponent = _a.ActionsComponent, filterSelectorRef = _a.filterSelectorRef, _f = _a.attributeSelectorProps, attributeSelectorProps = _f === void 0 ? {} : _f, rowContext = __rest(_a, ["classes", "rowData", "previousRowData", "LogicOperatorComponent", "AttributeSelectorComponent", "FilterSelectorComponent", "ValuesEditorComponent", "ActionsComponent", "filterSelectorRef", "attributeSelectorProps"]);
22
22
  var styles = useStyles();
23
- return (React.createElement("div", { className: classnames(styles.row, classes.root) },
23
+ return (React.createElement("div", { className: classnames(styles.row, classes.root), "data-reltio-id": "query-builder-row" },
24
24
  React.createElement(LogicOperatorComponent, { className: classes.logicOperatorContainer, rowContext: rowContext, rowData: previousRowData }),
25
25
  React.createElement("div", { className: classnames(styles.rowItem, classes.attributeSelectorContainer) },
26
26
  React.createElement(AttributeSelectorComponent, { attributeSelectorProps: attributeSelectorProps, rowContext: rowContext, rowData: rowData })),
@@ -20,14 +20,6 @@ type Props<ViewConfig = Record<string, unknown>> = {
20
20
  };
21
21
  declare const _default: React.MemoExoticComponent<{
22
22
  ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes }: Props<Record<string, unknown>>): JSX.Element;
23
- defaultProps: {
24
- layoutOptions: {
25
- cols: number;
26
- rowHeight: number;
27
- margin: number[];
28
- };
29
- onLayoutChanged: any;
30
- classes: {};
31
- };
23
+ displayName: string;
32
24
  }>;
33
25
  export default _default;
@@ -12,22 +12,28 @@ var __assign = (this && this.__assign) || function () {
12
12
  import React, { useCallback, useMemo, useRef, useState, memo } from 'react';
13
13
  import GridLayout from 'react-grid-layout';
14
14
  import ReactResizeDetector from 'react-resize-detector';
15
- import { equals, identity, pipe } from 'ramda';
15
+ import { pipe, ifElse, always } from 'ramda';
16
16
  import classnames from 'classnames';
17
- import { alignGroupedItemsHeights, reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
17
+ import { alignGroupedItemsHeights, calcLayoutItemsHeight, reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
18
+ import { noop } from '../../core';
18
19
  import { useStyles } from './styles';
20
+ var DEFAULT_LAYOUT_OPTIONS = {
21
+ cols: 4,
22
+ rowHeight: 30,
23
+ margin: [15, 15]
24
+ };
19
25
  var ReltioGridLayout = function (_a) {
20
26
  var _b;
21
- var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes;
27
+ var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes;
22
28
  var ref = useRef();
23
29
  var heightsMap = useRef({});
24
30
  var styles = useStyles();
25
- var _c = useState(null), resizingItemId = _c[0], setResizingItemId = _c[1];
26
- var _d = useState(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
27
- var _e = useState(0), width = _e[0], setWidth = _e[1];
31
+ var _e = useState(null), resizingItemId = _e[0], setResizingItemId = _e[1];
32
+ var _f = useState(null), fullscreenItemId = _f[0], setFullscreenItemId = _f[1];
33
+ var _g = useState(0), width = _g[0], setWidth = _g[1];
28
34
  var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
29
35
  var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
30
- var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
36
+ var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), ifElse(always(isStatic), alignGroupedItemsHeights(heightsMap.current), calcLayoutItemsHeight(heightsMap.current)), onLayoutChanged);
31
37
  var handleDrop = function (layout, layoutItem, e) {
32
38
  if (onDrop) {
33
39
  onDrop(reactGridLayoutToReltioLayout(layout), reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
@@ -35,44 +41,18 @@ var ReltioGridLayout = function (_a) {
35
41
  };
36
42
  var onToggleFullscreen = useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
37
43
  var isFullscreenEnabled = fullscreenItemId !== null;
38
- var onItemHeightResizeInGroupingMode = useCallback(function (height, layoutId) {
39
- if (height) {
40
- heightsMap.current[layoutId] = calcHeight(height, layoutOptions);
41
- var alignedLayout = alignGroupedItemsHeights(heightsMap.current, layout);
42
- if (!equals(alignedLayout, layout)) {
43
- onLayoutChanged(alignedLayout);
44
- }
45
- }
46
- }, [layout, layoutOptions, onLayoutChanged]);
47
- var onItemHeightResize = useCallback(function (height, layoutId) {
48
- var isLayoutChanged = false;
49
- var newLayout = layout.map(function (layoutItem) {
50
- if (layoutItem.id === layoutId && height) {
44
+ var getAutosizeComponent = function (layoutItemId) { return (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: function (_, height) {
45
+ if (height) {
51
46
  var newHeight = calcHeight(height, layoutOptions);
52
- if (layoutItem.height !== newHeight) {
53
- isLayoutChanged = true;
54
- return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
47
+ if (newHeight !== heightsMap.current[layoutItemId]) {
48
+ heightsMap.current[layoutItemId] = newHeight;
49
+ onReltioLayoutChanged(processedLayout);
55
50
  }
56
51
  }
57
- return layoutItem;
58
- });
59
- if (isLayoutChanged) {
60
- onLayoutChanged(newLayout);
61
- }
62
- }, [layout, layoutOptions, onLayoutChanged]);
63
- var getAutosizeComponent = function (layoutItemId) {
64
- return (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: function (width, height) {
65
- if (isStatic) {
66
- onItemHeightResizeInGroupingMode(height, layoutItemId);
67
- }
68
- else {
69
- onItemHeightResize(height, layoutItemId);
70
- }
71
- } }));
72
- };
52
+ } })); };
73
53
  return (React.createElement(React.Fragment, null,
74
54
  React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
75
- !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {},
55
+ !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: classnames(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},
76
56
  _b[styles.gridFullscreen] = isFullscreenEnabled,
77
57
  _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
78
58
  var _a;
@@ -82,16 +62,13 @@ var ReltioGridLayout = function (_a) {
82
62
  var autosizeComponent = isAutosize
83
63
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
84
64
  : {};
85
- return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item, { static: isStatic }), isFullscreen: isItemFullscreen }, autosizeComponent)));
65
+ return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames(classes === null || classes === void 0 ? void 0 : classes.item, (_a = {
66
+ static: isStatic,
67
+ fullscreen: isItemFullscreen
68
+ },
69
+ _a[styles.isResizing] = isResizing,
70
+ _a)), isFullscreen: isItemFullscreen }, autosizeComponent)));
86
71
  })))));
87
72
  };
88
- ReltioGridLayout.defaultProps = {
89
- layoutOptions: {
90
- cols: 4,
91
- rowHeight: 30,
92
- margin: [15, 15]
93
- },
94
- onLayoutChanged: identity,
95
- classes: {}
96
- };
73
+ ReltioGridLayout.displayName = 'ReltioGridLayout';
97
74
  export default memo(ReltioGridLayout);
@@ -8,3 +8,4 @@ export declare const getReltioLayoutItemById: any;
8
8
  export declare const copyPropsFromPreviousLayout: any;
9
9
  export declare const calcHeight: (height: number, options: ReltioGridLayoutOptions) => number;
10
10
  export declare const alignGroupedItemsHeights: any;
11
+ export declare const calcLayoutItemsHeight: any;
@@ -88,3 +88,12 @@ export var alignGroupedItemsHeights = curry(function (heightsMap, layout) {
88
88
  return layoutItem;
89
89
  });
90
90
  });
91
+ export var calcLayoutItemsHeight = curry(function (heightsMap, layout) {
92
+ return layout.map(function (layoutItem) {
93
+ var height = heightsMap[layoutItem.id];
94
+ if (height && layoutItem.autosizing) {
95
+ return __assign(__assign({}, layoutItem), { minHeight: height, maxHeight: height, height: height });
96
+ }
97
+ return layoutItem;
98
+ });
99
+ });
@@ -6,6 +6,7 @@ export var useStyles = makeStyles(function (_) { return ({
6
6
  position: 'relative',
7
7
  width: '100%',
8
8
  '& .react-grid-item': {
9
+ overflow: 'hidden',
9
10
  '&.react-grid-placeholder': {
10
11
  background: 'rgba(0, 0, 0, 0.03)',
11
12
  border: '2px dashed rgba(0, 0, 0, 0.3)',
@@ -20,6 +21,10 @@ export var useStyles = makeStyles(function (_) { return ({
20
21
  '&.static .react-resizable-handle': {
21
22
  display: 'none'
22
23
  },
24
+ '&.customView .react-resizable-handle': {
25
+ width: '10px',
26
+ height: '10px'
27
+ },
23
28
  '&.cssTransforms': {
24
29
  transitionProperty: 'transform'
25
30
  },
@@ -149,3 +149,4 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
149
149
  export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
150
150
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
151
151
  export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
152
+ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
@@ -149,3 +149,4 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
149
149
  export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
150
150
  export { default as RequiredMark } from './RequiredMark/RequiredMark';
151
151
  export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
152
+ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
@@ -24,3 +24,4 @@ export { useReadableSearchState } from './useReadableSearchState';
24
24
  export { useSavedStateForEntityType } from './useSavedStateForEntityType';
25
25
  export { useSnackbar } from './useSnackbar';
26
26
  export { useIsMountedRef } from './useIsMountedRef';
27
+ export { useLayoutResetter } from './useLayoutResetter';
@@ -24,3 +24,4 @@ export { useReadableSearchState } from './useReadableSearchState';
24
24
  export { useSavedStateForEntityType } from './useSavedStateForEntityType';
25
25
  export { useSnackbar } from './useSnackbar';
26
26
  export { useIsMountedRef } from './useIsMountedRef';
27
+ export { useLayoutResetter } from './useLayoutResetter';
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ type Props = {
3
+ onLayoutReset: () => void;
4
+ onResetUndo: () => void;
5
+ };
6
+ export declare const useLayoutResetter: ({ onLayoutReset, onResetUndo }: Props) => {
7
+ SnackbarRenderer: () => JSX.Element;
8
+ resetLayout: () => void;
9
+ };
10
+ export {};
@@ -0,0 +1,16 @@
1
+ import i18n from 'ui-i18n';
2
+ import { useSnackbar } from './useSnackbar';
3
+ export var useLayoutResetter = function (_a) {
4
+ var onLayoutReset = _a.onLayoutReset, onResetUndo = _a.onResetUndo;
5
+ var resetLayout = function () {
6
+ onLayoutReset();
7
+ showSnackbarMessage(i18n.text("The default layout is now restored. It's still not too late to revert your changes. Click Undo to go back to your personalized settings."));
8
+ };
9
+ var _b = useSnackbar({
10
+ onDismissClick: onResetUndo,
11
+ showDismiss: true,
12
+ autoHideDuration: 5000,
13
+ dismissTitle: i18n.text('Undo')
14
+ }), SnackbarRenderer = _b.SnackbarRenderer, showSnackbarMessage = _b.showSnackbarMessage;
15
+ return { SnackbarRenderer: SnackbarRenderer, resetLayout: resetLayout };
16
+ };
@@ -3,8 +3,11 @@ import { SnackbarOrigin } from '@material-ui/core/Snackbar';
3
3
  type SnackbarOptions = {
4
4
  anchorOrigin?: SnackbarOrigin;
5
5
  showDismiss?: boolean;
6
+ dismissTitle?: string;
7
+ autoHideDuration?: number;
8
+ onDismissClick?: () => void;
6
9
  };
7
- export declare const useSnackbar: (options?: SnackbarOptions) => {
10
+ export declare const useSnackbar: ({ anchorOrigin, showDismiss, dismissTitle, autoHideDuration, onDismissClick }?: SnackbarOptions) => {
8
11
  SnackbarRenderer: () => JSX.Element;
9
12
  showSnackbarMessage: (message: any) => void;
10
13
  };
@@ -1,25 +1,32 @@
1
1
  import React, { useCallback, useState } from 'react';
2
2
  import i18n from 'ui-i18n';
3
+ import { pipe } from 'ramda';
3
4
  import Portal from '@material-ui/core/Portal';
4
5
  import Button from '@material-ui/core/Button';
5
6
  import Snackbar from '@material-ui/core/Snackbar';
7
+ import { noop } from '../core';
6
8
  var FIVE_MINUTES = 5 * 60 * 1000;
7
- export var useSnackbar = function (options) {
8
- if (options === void 0) { options = {}; }
9
- var anchorOrigin = options.anchorOrigin, showDismiss = options.showDismiss;
10
- var _a = useState(false), isOpenSnackbar = _a[0], setIsOpenSnackbar = _a[1];
11
- var _b = useState(''), snackbarMessage = _b[0], setSnackbarMessage = _b[1];
9
+ export var useSnackbar = function (_a) {
10
+ var _b = _a === void 0 ? {} : _a, anchorOrigin = _b.anchorOrigin, showDismiss = _b.showDismiss, _c = _b.dismissTitle, dismissTitle = _c === void 0 ? i18n.text('Dismiss') : _c, _d = _b.autoHideDuration, autoHideDuration = _d === void 0 ? FIVE_MINUTES : _d, _e = _b.onDismissClick, onDismissClick = _e === void 0 ? noop : _e;
11
+ var _f = useState(false), isOpenSnackbar = _f[0], setIsOpenSnackbar = _f[1];
12
+ var _g = useState(''), snackbarMessage = _g[0], setSnackbarMessage = _g[1];
12
13
  var closeSnackbar = useCallback(function () {
13
14
  setIsOpenSnackbar(false);
14
15
  setSnackbarMessage('');
15
16
  }, []);
17
+ var handleSnackbarClose = useCallback(function (_, reason) {
18
+ if (reason === 'clickaway') {
19
+ return;
20
+ }
21
+ closeSnackbar();
22
+ }, [closeSnackbar]);
16
23
  var showSnackbarMessage = useCallback(function (message) {
17
24
  setIsOpenSnackbar(true);
18
25
  setSnackbarMessage(message);
19
26
  }, []);
20
27
  var SnackbarRenderer = useCallback(function () {
21
28
  return (React.createElement(Portal, { container: document.body },
22
- React.createElement(Snackbar, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: FIVE_MINUTES, onClose: closeSnackbar, message: snackbarMessage, action: showDismiss ? (React.createElement(Button, { color: "primary", onClick: closeSnackbar }, i18n.text('Dismiss'))) : undefined })));
29
+ React.createElement(Snackbar, { open: isOpenSnackbar, anchorOrigin: anchorOrigin, autoHideDuration: autoHideDuration, onClose: handleSnackbarClose, message: snackbarMessage, style: { maxWidth: 500 }, action: showDismiss ? (React.createElement(Button, { color: "primary", onClick: pipe(closeSnackbar, onDismissClick) }, dismissTitle)) : undefined })));
23
30
  // eslint-disable-next-line react-hooks/exhaustive-deps
24
31
  }, [isOpenSnackbar, closeSnackbar, snackbarMessage]);
25
32
  return { SnackbarRenderer: SnackbarRenderer, showSnackbarMessage: showSnackbarMessage };
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1563",
3
+ "version": "1.4.1565-hf",
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.1563",
11
- "@reltio/mdm-sdk": "^1.4.1563",
10
+ "@reltio/mdm-module": "^1.4.1565-hf",
11
+ "@reltio/mdm-sdk": "^1.4.1565-hf",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",