@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.
- package/cjs/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js +3 -2
- package/cjs/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js +1 -1
- package/cjs/components/AttributesFiltersBuilder/helpers.js +10 -7
- package/cjs/components/MultilineMenuItem/MultilineMenuItem.d.ts +11 -0
- package/cjs/components/MultilineMenuItem/MultilineMenuItem.js +49 -0
- package/cjs/components/MultilineMenuItem/styles.d.ts +1 -0
- package/cjs/components/MultilineMenuItem/styles.js +23 -0
- package/cjs/components/ProfileBandNavigation/ProfileBandNavigationWidget.js +2 -2
- package/cjs/components/QueryBuilderRow/QueryBuilderRow.js +1 -1
- package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts +1 -9
- package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +25 -48
- package/cjs/components/ReltioGridLayout/helpers.d.ts +1 -0
- package/cjs/components/ReltioGridLayout/helpers.js +10 -1
- package/cjs/components/ReltioGridLayout/styles.js +5 -0
- package/cjs/components/index.d.ts +1 -0
- package/cjs/components/index.js +3 -1
- package/cjs/hooks/index.d.ts +1 -0
- package/cjs/hooks/index.js +3 -1
- package/cjs/hooks/useLayoutResetter.d.ts +10 -0
- package/cjs/hooks/useLayoutResetter.js +23 -0
- package/cjs/hooks/useSnackbar.d.ts +4 -1
- package/cjs/hooks/useSnackbar.js +13 -6
- package/esm/components/AttributesFiltersBuilder/components/FilterSelector/FilterSelector.js +3 -2
- package/esm/components/AttributesFiltersBuilder/components/ValuesEditor/ValuesEditor.js +1 -1
- package/esm/components/AttributesFiltersBuilder/helpers.js +10 -7
- package/esm/components/MultilineMenuItem/MultilineMenuItem.d.ts +11 -0
- package/esm/components/MultilineMenuItem/MultilineMenuItem.js +21 -0
- package/esm/components/MultilineMenuItem/styles.d.ts +1 -0
- package/esm/components/MultilineMenuItem/styles.js +20 -0
- package/esm/components/ProfileBandNavigation/ProfileBandNavigationWidget.js +2 -2
- package/esm/components/QueryBuilderRow/QueryBuilderRow.js +1 -1
- package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts +1 -9
- package/esm/components/ReltioGridLayout/ReltioGridLayout.js +27 -50
- package/esm/components/ReltioGridLayout/helpers.d.ts +1 -0
- package/esm/components/ReltioGridLayout/helpers.js +9 -0
- package/esm/components/ReltioGridLayout/styles.js +5 -0
- package/esm/components/index.d.ts +1 -0
- package/esm/components/index.js +1 -0
- package/esm/hooks/index.d.ts +1 -0
- package/esm/hooks/index.js +1 -0
- package/esm/hooks/useLayoutResetter.d.ts +10 -0
- package/esm/hooks/useLayoutResetter.js +16 -0
- package/esm/hooks/useSnackbar.d.ts +4 -1
- package/esm/hooks/useSnackbar.js +13 -6
- 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
|
|
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)
|
|
35
|
-
|
|
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,
|
|
41
|
+
var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parents) {
|
|
40
42
|
if (parents === void 0) { parents = []; }
|
|
41
|
-
var resConfig = __assign(__assign({},
|
|
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,
|
|
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
|
|
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
|
-
|
|
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,
|
|
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
|
|
54
|
-
var
|
|
55
|
-
var
|
|
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
|
|
67
|
-
|
|
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 (
|
|
81
|
-
|
|
82
|
-
|
|
75
|
+
if (newHeight !== heightsMap.current[layoutItemId]) {
|
|
76
|
+
heightsMap.current[layoutItemId] = newHeight;
|
|
77
|
+
onReltioLayoutChanged(processedLayout);
|
|
83
78
|
}
|
|
84
79
|
}
|
|
85
|
-
|
|
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)(
|
|
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.
|
|
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';
|
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.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; } });
|
package/cjs/hooks/index.d.ts
CHANGED
|
@@ -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';
|
package/cjs/hooks/index.js
CHANGED
|
@@ -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: (
|
|
10
|
+
export declare const useSnackbar: ({ anchorOrigin, showDismiss, dismissTitle, autoHideDuration, onDismissClick }?: SnackbarOptions) => {
|
|
8
11
|
SnackbarRenderer: () => JSX.Element;
|
|
9
12
|
showSnackbarMessage: (message: any) => void;
|
|
10
13
|
};
|
package/cjs/hooks/useSnackbar.js
CHANGED
|
@@ -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 (
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
var
|
|
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:
|
|
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
|
|
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)
|
|
32
|
-
|
|
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,
|
|
38
|
+
var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parents) {
|
|
37
39
|
if (parents === void 0) { parents = []; }
|
|
38
|
-
var resConfig = __assign(__assign({},
|
|
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,
|
|
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
|
|
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
|
-
|
|
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 {
|
|
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,
|
|
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
|
|
26
|
-
var
|
|
27
|
-
var
|
|
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
|
|
39
|
-
|
|
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 (
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
if (newHeight !== heightsMap.current[layoutItemId]) {
|
|
48
|
+
heightsMap.current[layoutItemId] = newHeight;
|
|
49
|
+
onReltioLayoutChanged(processedLayout);
|
|
55
50
|
}
|
|
56
51
|
}
|
|
57
|
-
|
|
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(
|
|
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.
|
|
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';
|
package/esm/components/index.js
CHANGED
|
@@ -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';
|
package/esm/hooks/index.d.ts
CHANGED
|
@@ -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';
|
package/esm/hooks/index.js
CHANGED
|
@@ -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: (
|
|
10
|
+
export declare const useSnackbar: ({ anchorOrigin, showDismiss, dismissTitle, autoHideDuration, onDismissClick }?: SnackbarOptions) => {
|
|
8
11
|
SnackbarRenderer: () => JSX.Element;
|
|
9
12
|
showSnackbarMessage: (message: any) => void;
|
|
10
13
|
};
|
package/esm/hooks/useSnackbar.js
CHANGED
|
@@ -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 (
|
|
8
|
-
|
|
9
|
-
var
|
|
10
|
-
var
|
|
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:
|
|
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.
|
|
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.
|
|
11
|
-
"@reltio/mdm-sdk": "^1.4.
|
|
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",
|