@reltio/components 1.4.2083 → 1.4.2085
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/ImageAttributesLine/ImageAttributesLine.js +2 -2
- package/ImageAttributesLine/ImageAttributesLine.test.js +106 -71
- package/ReltioGridLayout/ReltioGridLayout.js +2 -2
- package/cjs/ImageAttributesLine/ImageAttributesLine.js +2 -2
- package/cjs/ImageAttributesLine/ImageAttributesLine.test.js +105 -70
- package/cjs/ReltioGridLayout/ReltioGridLayout.js +2 -2
- package/cjs/hooks/useCollapsibleTableRows/dataHelpers.test.js +41 -0
- package/cjs/hooks/useCollapsibleTableRows/nestedHelpers.js +52 -4
- package/hooks/useCollapsibleTableRows/dataHelpers.test.js +41 -0
- package/hooks/useCollapsibleTableRows/nestedHelpers.js +52 -4
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@ export var ImageAttributesLine = function (_a) {
|
|
|
37
37
|
}
|
|
38
38
|
}, [paging, requestNextPageOfAttributeValues, attributeType, parentUri, attributeValues.length, showNonOv]);
|
|
39
39
|
var lastWidth = useRef();
|
|
40
|
-
var _f = useState(
|
|
40
|
+
var _f = useState(attributeValues.length), maxItems = _f[0], setMaxItems = _f[1];
|
|
41
41
|
var _g = useState(0), hiddenItemsLength = _g[0], setHiddenItemsLength = _g[1];
|
|
42
42
|
var isBlockImageGalleryDialog = useContext(BlockImageGalleryDialogContext);
|
|
43
43
|
var _h = useState(false), isOpenDialog = _h[0], setIsOpenDialog = _h[1];
|
|
@@ -101,7 +101,7 @@ export var ImageAttributesLine = function (_a) {
|
|
|
101
101
|
onSetAsDefault: handleSetAsDefault
|
|
102
102
|
}));
|
|
103
103
|
return (React.createElement(React.Fragment, null,
|
|
104
|
-
React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleResize }),
|
|
104
|
+
React.createElement(ReactResizeDetector, { handleWidth: true, handleHeight: false, onResize: handleResize, refreshMode: "debounce", refreshRate: 50 }),
|
|
105
105
|
React.createElement(ImageAttributesGallery, { attributeValues: attributeValues, open: isOpenDialog, onClose: handleCloseImageGalleryDialog, setCurrentAttributeValueUri: setCurrentAttributeValueUri, currentAttributeValueUri: currentAttributeValueUri, attributeType: attributeType, onDownload: handleDownload, onShareLink: handleShareLink, onSetAsDefault: handleSetAsDefault, onUpload: onUpload, onDeleteAttribute: onDeleteAttribute }),
|
|
106
106
|
React.createElement("div", { className: styles.imageBox },
|
|
107
107
|
children,
|
|
@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
47
47
|
};
|
|
48
48
|
import React from 'react';
|
|
49
49
|
import { mockResizeObserver } from 'jsdom-testing-mocks';
|
|
50
|
-
import { act, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
|
|
50
|
+
import { act, render, screen, waitForElementToBeRemoved, waitFor } from '@testing-library/react';
|
|
51
51
|
import userEvent from '@testing-library/user-event';
|
|
52
52
|
import { insertDefaultImageByAttrUri, Mode } from '@reltio/mdm-sdk';
|
|
53
53
|
import { imageAttributeValues, attributeType } from './imageAttributeValues.test-data';
|
|
@@ -99,49 +99,71 @@ describe('ImageAttributesLine tests', function () {
|
|
|
99
99
|
downloadImagesByURLs.mockReturnValue(undefined);
|
|
100
100
|
insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
|
|
101
101
|
});
|
|
102
|
-
it('should resize component', function () {
|
|
103
|
-
var container
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
102
|
+
it('should resize component', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
103
|
+
var container;
|
|
104
|
+
return __generator(this, function (_a) {
|
|
105
|
+
switch (_a.label) {
|
|
106
|
+
case 0:
|
|
107
|
+
container = setUp({ props: { attributeValues: imageAttributeValues } }).container;
|
|
108
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
109
|
+
act(function () {
|
|
110
|
+
resizeObserver.resize();
|
|
111
|
+
});
|
|
112
|
+
expect(screen.getAllByTestId('image')).toHaveLength(3);
|
|
113
|
+
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
114
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
|
|
115
|
+
act(function () {
|
|
116
|
+
resizeObserver.resize(container);
|
|
117
|
+
});
|
|
118
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
119
|
+
case 1:
|
|
120
|
+
_a.sent();
|
|
121
|
+
expect(screen.getAllByTestId('image')).toHaveLength(2);
|
|
122
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
|
|
123
|
+
act(function () {
|
|
124
|
+
resizeObserver.resize(container);
|
|
125
|
+
});
|
|
126
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
127
|
+
case 2:
|
|
128
|
+
_a.sent();
|
|
129
|
+
expect(screen.getAllByTestId('image')).toHaveLength(2);
|
|
130
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
|
|
131
|
+
act(function () {
|
|
132
|
+
resizeObserver.resize(container);
|
|
133
|
+
});
|
|
134
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
135
|
+
case 3:
|
|
136
|
+
_a.sent();
|
|
137
|
+
expect(screen.getAllByTestId('image')).toHaveLength(2);
|
|
138
|
+
return [2 /*return*/];
|
|
139
|
+
}
|
|
125
140
|
});
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
141
|
+
}); });
|
|
142
|
+
it('should recalculate max items to screen width after attributeValues.length changing', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
143
|
+
var _a, container, rerender, newAttributeValues;
|
|
144
|
+
return __generator(this, function (_b) {
|
|
145
|
+
switch (_b.label) {
|
|
146
|
+
case 0:
|
|
147
|
+
_a = setUp({ props: { attributeValues: imageAttributeValues } }), container = _a.container, rerender = _a.rerender;
|
|
148
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
149
|
+
act(function () {
|
|
150
|
+
resizeObserver.resize();
|
|
151
|
+
});
|
|
152
|
+
expect(screen.getAllByTestId('image')).toHaveLength(3);
|
|
153
|
+
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
154
|
+
rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues[0]] })));
|
|
155
|
+
expect(screen.getAllByTestId('image')).toHaveLength(1);
|
|
156
|
+
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
157
|
+
newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues[0]), { uri: imageAttributeValues[0].uri + i })); });
|
|
158
|
+
rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
|
|
159
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
160
|
+
case 1:
|
|
161
|
+
_b.sent();
|
|
162
|
+
expect(screen.getAllByTestId('image')).toHaveLength(5);
|
|
163
|
+
return [2 /*return*/];
|
|
164
|
+
}
|
|
134
165
|
});
|
|
135
|
-
|
|
136
|
-
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
137
|
-
rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues[0]] })));
|
|
138
|
-
expect(screen.getAllByTestId('image')).toHaveLength(1);
|
|
139
|
-
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
140
|
-
var newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues[0]), { uri: imageAttributeValues[0].uri + i })); });
|
|
141
|
-
rerender(React.createElement(ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
|
|
142
|
-
expect(screen.getAllByTestId('image')).toHaveLength(5);
|
|
143
|
-
expect(screen.getByTestId('more-image-button')).toHaveTextContent('+1');
|
|
144
|
-
});
|
|
166
|
+
}); });
|
|
145
167
|
it('should open ImageAttributesGallery when click to image or button if BlockImageGalleryDialogContext context has falsy value', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
146
168
|
var _a, container, user;
|
|
147
169
|
return __generator(this, function (_b) {
|
|
@@ -286,34 +308,47 @@ describe('ImageAttributesLine tests', function () {
|
|
|
286
308
|
});
|
|
287
309
|
});
|
|
288
310
|
});
|
|
289
|
-
it('should calculate max items if countFixedItems more than 0', function () {
|
|
290
|
-
var container
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
311
|
+
it('should calculate max items if countFixedItems more than 0', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
312
|
+
var container;
|
|
313
|
+
return __generator(this, function (_a) {
|
|
314
|
+
switch (_a.label) {
|
|
315
|
+
case 0:
|
|
316
|
+
container = setUp({
|
|
317
|
+
props: { attributeValues: imageAttributeValues, countFixedItems: 1 },
|
|
318
|
+
mdmValues: { mode: Mode.Editing }
|
|
319
|
+
}).container;
|
|
320
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
321
|
+
act(function () {
|
|
322
|
+
resizeObserver.resize();
|
|
323
|
+
});
|
|
324
|
+
expect(screen.getAllByTestId('image')).toHaveLength(3);
|
|
325
|
+
expect(screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
326
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
|
|
327
|
+
act(function () {
|
|
328
|
+
resizeObserver.resize(container);
|
|
329
|
+
});
|
|
330
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
331
|
+
case 1:
|
|
332
|
+
_a.sent();
|
|
333
|
+
expect(screen.getAllByTestId('image')).toHaveLength(1);
|
|
334
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
|
|
335
|
+
act(function () {
|
|
336
|
+
resizeObserver.resize(container);
|
|
337
|
+
});
|
|
338
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+3'); })];
|
|
339
|
+
case 2:
|
|
340
|
+
_a.sent();
|
|
341
|
+
expect(screen.getAllByTestId('image')).toHaveLength(1);
|
|
342
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
|
|
343
|
+
act(function () {
|
|
344
|
+
resizeObserver.resize(container);
|
|
345
|
+
});
|
|
346
|
+
return [4 /*yield*/, waitFor(function () { return expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
347
|
+
case 3:
|
|
348
|
+
_a.sent();
|
|
349
|
+
expect(screen.getAllByTestId('image')).toHaveLength(1);
|
|
350
|
+
return [2 /*return*/];
|
|
351
|
+
}
|
|
315
352
|
});
|
|
316
|
-
|
|
317
|
-
expect(screen.getByTestId('more-image-button')).toHaveTextContent('+2');
|
|
318
|
-
});
|
|
353
|
+
}); });
|
|
319
354
|
});
|
|
@@ -38,7 +38,7 @@ var ReltioGridLayout = function (_a) {
|
|
|
38
38
|
};
|
|
39
39
|
var onToggleFullscreen = useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
|
|
40
40
|
var isFullscreenEnabled = fullscreenItemId !== null;
|
|
41
|
-
var getAutosizeComponent = function (layoutItemId) { return (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: function (_, height) {
|
|
41
|
+
var getAutosizeComponent = function (layoutItemId) { return (React.createElement(ReactResizeDetector, { handleHeight: true, handleWidth: false, refreshMode: "debounce", refreshRate: 50, onResize: function (_, height) {
|
|
42
42
|
if (height) {
|
|
43
43
|
var newHeight = calcHeight(height, layoutOptions);
|
|
44
44
|
if (newHeight !== heightsMap.current[layoutItemId]) {
|
|
@@ -64,7 +64,7 @@ var ReltioGridLayout = function (_a) {
|
|
|
64
64
|
}
|
|
65
65
|
}, [processedLayout, isStatic]);
|
|
66
66
|
return (React.createElement(React.Fragment, null,
|
|
67
|
-
React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return width > 0 && setWidth(width); } }),
|
|
67
|
+
React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, handleHeight: false, onResize: function (width) { return width > 0 && setWidth(width); } }),
|
|
68
68
|
!!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 = {},
|
|
69
69
|
_b[styles.gridFullscreen] = isFullscreenEnabled,
|
|
70
70
|
_b)), onDrop: handleDrop, onDropDragOver: onDropDragOver, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
|
|
@@ -66,7 +66,7 @@ var ImageAttributesLine = function (_a) {
|
|
|
66
66
|
}
|
|
67
67
|
}, [paging, requestNextPageOfAttributeValues, attributeType, parentUri, attributeValues.length, showNonOv]);
|
|
68
68
|
var lastWidth = (0, react_1.useRef)();
|
|
69
|
-
var _f = (0, react_1.useState)(
|
|
69
|
+
var _f = (0, react_1.useState)(attributeValues.length), maxItems = _f[0], setMaxItems = _f[1];
|
|
70
70
|
var _g = (0, react_1.useState)(0), hiddenItemsLength = _g[0], setHiddenItemsLength = _g[1];
|
|
71
71
|
var isBlockImageGalleryDialog = (0, react_1.useContext)(BlockImageGalleryDialogContext_1.BlockImageGalleryDialogContext);
|
|
72
72
|
var _h = (0, react_1.useState)(false), isOpenDialog = _h[0], setIsOpenDialog = _h[1];
|
|
@@ -130,7 +130,7 @@ var ImageAttributesLine = function (_a) {
|
|
|
130
130
|
onSetAsDefault: handleSetAsDefault
|
|
131
131
|
}));
|
|
132
132
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
133
|
-
react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: handleResize }),
|
|
133
|
+
react_1.default.createElement(react_resize_detector_1.default, { handleWidth: true, handleHeight: false, onResize: handleResize, refreshMode: "debounce", refreshRate: 50 }),
|
|
134
134
|
react_1.default.createElement(ImageAttributesGallery_1.ImageAttributesGallery, { attributeValues: attributeValues, open: isOpenDialog, onClose: handleCloseImageGalleryDialog, setCurrentAttributeValueUri: setCurrentAttributeValueUri, currentAttributeValueUri: currentAttributeValueUri, attributeType: attributeType, onDownload: handleDownload, onShareLink: handleShareLink, onSetAsDefault: handleSetAsDefault, onUpload: onUpload, onDeleteAttribute: onDeleteAttribute }),
|
|
135
135
|
react_1.default.createElement("div", { className: styles.imageBox },
|
|
136
136
|
children,
|
|
@@ -104,49 +104,71 @@ describe('ImageAttributesLine tests', function () {
|
|
|
104
104
|
helpers_1.downloadImagesByURLs.mockReturnValue(undefined);
|
|
105
105
|
mdm_sdk_1.insertDefaultImageByAttrUri.mockResolvedValue({ status: 'success' });
|
|
106
106
|
});
|
|
107
|
-
it('should resize component', function () {
|
|
108
|
-
var container
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
107
|
+
it('should resize component', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
108
|
+
var container;
|
|
109
|
+
return __generator(this, function (_a) {
|
|
110
|
+
switch (_a.label) {
|
|
111
|
+
case 0:
|
|
112
|
+
container = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues } }).container;
|
|
113
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
114
|
+
(0, react_2.act)(function () {
|
|
115
|
+
resizeObserver.resize();
|
|
116
|
+
});
|
|
117
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
|
|
118
|
+
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
119
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
|
|
120
|
+
(0, react_2.act)(function () {
|
|
121
|
+
resizeObserver.resize(container);
|
|
122
|
+
});
|
|
123
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
124
|
+
case 1:
|
|
125
|
+
_a.sent();
|
|
126
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
|
|
127
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
|
|
128
|
+
(0, react_2.act)(function () {
|
|
129
|
+
resizeObserver.resize(container);
|
|
130
|
+
});
|
|
131
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
132
|
+
case 2:
|
|
133
|
+
_a.sent();
|
|
134
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
|
|
135
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
|
|
136
|
+
(0, react_2.act)(function () {
|
|
137
|
+
resizeObserver.resize(container);
|
|
138
|
+
});
|
|
139
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
140
|
+
case 3:
|
|
141
|
+
_a.sent();
|
|
142
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(2);
|
|
143
|
+
return [2 /*return*/];
|
|
144
|
+
}
|
|
130
145
|
});
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
146
|
+
}); });
|
|
147
|
+
it('should recalculate max items to screen width after attributeValues.length changing', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
148
|
+
var _a, container, rerender, newAttributeValues;
|
|
149
|
+
return __generator(this, function (_b) {
|
|
150
|
+
switch (_b.label) {
|
|
151
|
+
case 0:
|
|
152
|
+
_a = setUp({ props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues } }), container = _a.container, rerender = _a.rerender;
|
|
153
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
154
|
+
(0, react_2.act)(function () {
|
|
155
|
+
resizeObserver.resize();
|
|
156
|
+
});
|
|
157
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
|
|
158
|
+
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
159
|
+
rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues_test_data_1.imageAttributeValues[0]] })));
|
|
160
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
|
|
161
|
+
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
162
|
+
newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues_test_data_1.imageAttributeValues[0]), { uri: imageAttributeValues_test_data_1.imageAttributeValues[0].uri + i })); });
|
|
163
|
+
rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
|
|
164
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1'); })];
|
|
165
|
+
case 1:
|
|
166
|
+
_b.sent();
|
|
167
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(5);
|
|
168
|
+
return [2 /*return*/];
|
|
169
|
+
}
|
|
139
170
|
});
|
|
140
|
-
|
|
141
|
-
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
142
|
-
rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: [imageAttributeValues_test_data_1.imageAttributeValues[0]] })));
|
|
143
|
-
expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
|
|
144
|
-
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
145
|
-
var newAttributeValues = Array.from({ length: 6 }, function (_, i) { return (__assign(__assign({}, imageAttributeValues_test_data_1.imageAttributeValues[0]), { uri: imageAttributeValues_test_data_1.imageAttributeValues[0].uri + i })); });
|
|
146
|
-
rerender(react_1.default.createElement(ImageAttributesLine_1.ImageAttributesLine, __assign({}, defaultProps, { attributeValues: newAttributeValues })));
|
|
147
|
-
expect(react_2.screen.getAllByTestId('image')).toHaveLength(5);
|
|
148
|
-
expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+1');
|
|
149
|
-
});
|
|
171
|
+
}); });
|
|
150
172
|
it('should open ImageAttributesGallery when click to image or button if BlockImageGalleryDialogContext context has falsy value', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
151
173
|
var _a, container, user;
|
|
152
174
|
return __generator(this, function (_b) {
|
|
@@ -291,34 +313,47 @@ describe('ImageAttributesLine tests', function () {
|
|
|
291
313
|
});
|
|
292
314
|
});
|
|
293
315
|
});
|
|
294
|
-
it('should calculate max items if countFixedItems more than 0', function () {
|
|
295
|
-
var container
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
316
|
+
it('should calculate max items if countFixedItems more than 0', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
317
|
+
var container;
|
|
318
|
+
return __generator(this, function (_a) {
|
|
319
|
+
switch (_a.label) {
|
|
320
|
+
case 0:
|
|
321
|
+
container = setUp({
|
|
322
|
+
props: { attributeValues: imageAttributeValues_test_data_1.imageAttributeValues, countFixedItems: 1 },
|
|
323
|
+
mdmValues: { mode: mdm_sdk_1.Mode.Editing }
|
|
324
|
+
}).container;
|
|
325
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 600 } });
|
|
326
|
+
(0, react_2.act)(function () {
|
|
327
|
+
resizeObserver.resize();
|
|
328
|
+
});
|
|
329
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(3);
|
|
330
|
+
expect(react_2.screen.queryByTestId('more-image-button')).not.toBeInTheDocument();
|
|
331
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 300 } });
|
|
332
|
+
(0, react_2.act)(function () {
|
|
333
|
+
resizeObserver.resize(container);
|
|
334
|
+
});
|
|
335
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
336
|
+
case 1:
|
|
337
|
+
_a.sent();
|
|
338
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
|
|
339
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 239 } });
|
|
340
|
+
(0, react_2.act)(function () {
|
|
341
|
+
resizeObserver.resize(container);
|
|
342
|
+
});
|
|
343
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+3'); })];
|
|
344
|
+
case 2:
|
|
345
|
+
_a.sent();
|
|
346
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
|
|
347
|
+
resizeObserver.mockElementSize(container, { contentBoxSize: { inlineSize: 240 } });
|
|
348
|
+
(0, react_2.act)(function () {
|
|
349
|
+
resizeObserver.resize(container);
|
|
350
|
+
});
|
|
351
|
+
return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2'); })];
|
|
352
|
+
case 3:
|
|
353
|
+
_a.sent();
|
|
354
|
+
expect(react_2.screen.getAllByTestId('image')).toHaveLength(1);
|
|
355
|
+
return [2 /*return*/];
|
|
356
|
+
}
|
|
320
357
|
});
|
|
321
|
-
|
|
322
|
-
expect(react_2.screen.getByTestId('more-image-button')).toHaveTextContent('+2');
|
|
323
|
-
});
|
|
358
|
+
}); });
|
|
324
359
|
});
|
|
@@ -66,7 +66,7 @@ var ReltioGridLayout = function (_a) {
|
|
|
66
66
|
};
|
|
67
67
|
var onToggleFullscreen = (0, react_1.useCallback)(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
|
|
68
68
|
var isFullscreenEnabled = fullscreenItemId !== null;
|
|
69
|
-
var getAutosizeComponent = function (layoutItemId) { return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (_, height) {
|
|
69
|
+
var getAutosizeComponent = function (layoutItemId) { return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, handleWidth: false, refreshMode: "debounce", refreshRate: 50, onResize: function (_, height) {
|
|
70
70
|
if (height) {
|
|
71
71
|
var newHeight = (0, helpers_1.calcHeight)(height, layoutOptions);
|
|
72
72
|
if (newHeight !== heightsMap.current[layoutItemId]) {
|
|
@@ -92,7 +92,7 @@ var ReltioGridLayout = function (_a) {
|
|
|
92
92
|
}
|
|
93
93
|
}, [processedLayout, isStatic]);
|
|
94
94
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
95
|
-
react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return width > 0 && setWidth(width); } }),
|
|
95
|
+
react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, handleHeight: false, onResize: function (width) { return width > 0 && setWidth(width); } }),
|
|
96
96
|
!!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 = {},
|
|
97
97
|
_b[styles.gridFullscreen] = isFullscreenEnabled,
|
|
98
98
|
_b)), onDrop: handleDrop, onDropDragOver: onDropDragOver, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
|
|
@@ -226,6 +226,47 @@ describe('dataHelpers', function () {
|
|
|
226
226
|
}
|
|
227
227
|
]);
|
|
228
228
|
});
|
|
229
|
+
it('should calculate correct rowspan if there are two or more columns having same nesting level', function () {
|
|
230
|
+
var rowValues = [
|
|
231
|
+
{
|
|
232
|
+
'n1.a.b': [[0], [1]],
|
|
233
|
+
'n1.x.y': [[2, 3], [4, 5], [6]],
|
|
234
|
+
'n1.x.y.z': [[[7], [8]], [[9], [10]], []]
|
|
235
|
+
}
|
|
236
|
+
];
|
|
237
|
+
var columnsData = [
|
|
238
|
+
{ id: 'n1.a.b', nestedPath: ['a'], label: 'columnA' },
|
|
239
|
+
{ id: 'n1.x.y', nestedPath: ['x'], label: 'columnB' },
|
|
240
|
+
{ id: 'n1.x.y.z', nestedPath: ['x', 'y'], label: 'columnC' }
|
|
241
|
+
];
|
|
242
|
+
var renderRowCell = function (_a) {
|
|
243
|
+
var cell = _a.cell;
|
|
244
|
+
return cell.values;
|
|
245
|
+
};
|
|
246
|
+
expect((0, dataHelpers_1.getTableRowsData)(rowValues, columnsData, renderRowCell)).toEqual([
|
|
247
|
+
{
|
|
248
|
+
data: {
|
|
249
|
+
'n1.a.b': [
|
|
250
|
+
{ values: [0], indexPath: [0], nestedKey: 'a.0', rowSpan: 2 },
|
|
251
|
+
{ values: [1], indexPath: [1], nestedKey: 'a.1', rowSpan: 3 }
|
|
252
|
+
],
|
|
253
|
+
'n1.x.y': [
|
|
254
|
+
{ values: [2, 3], indexPath: [0], nestedKey: 'x.0', rowSpan: 2 },
|
|
255
|
+
{ values: [4, 5], indexPath: [1], nestedKey: 'x.1', rowSpan: 2 },
|
|
256
|
+
{ values: [6], indexPath: [2], nestedKey: 'x.2', rowSpan: 1 }
|
|
257
|
+
],
|
|
258
|
+
'n1.x.y.z': [
|
|
259
|
+
{ values: [7], indexPath: [0, 0], nestedKey: 'x.0.y.0', rowSpan: 1 },
|
|
260
|
+
{ values: [8], indexPath: [0, 1], nestedKey: 'x.0.y.1', rowSpan: 1 },
|
|
261
|
+
{ values: [9], indexPath: [1, 0], nestedKey: 'x.1.y.0', rowSpan: 1 },
|
|
262
|
+
{ values: [10], indexPath: [1, 1], nestedKey: 'x.1.y.1', rowSpan: 1 },
|
|
263
|
+
{ values: [], indexPath: [2], nestedKey: 'x.2', rowSpan: 1 }
|
|
264
|
+
]
|
|
265
|
+
},
|
|
266
|
+
id: 0
|
|
267
|
+
}
|
|
268
|
+
]);
|
|
269
|
+
});
|
|
229
270
|
it('should apply max values count constraint if getRowMaxValuesCount is provided', function () {
|
|
230
271
|
var rowValues = [
|
|
231
272
|
{
|
|
@@ -30,6 +30,25 @@ exports.getSiblingSubRowsKeyBySubRowKey = getSiblingSubRowsKeyBySubRowKey;
|
|
|
30
30
|
var getParentRowKeyBySiblingsSubRowsKey = (0, ramda_1.pipe)((0, ramda_1.split)(NESTED_KEY_DELIMITER), (0, ramda_1.dropLast)(1), (0, ramda_1.join)(NESTED_KEY_DELIMITER), (0, ramda_1.unless)(ramda_1.length, (0, ramda_1.always)(TOTAL_ROW_SPAN_KEY)));
|
|
31
31
|
exports.getParentRowKeyBySiblingsSubRowsKey = getParentRowKeyBySiblingsSubRowsKey;
|
|
32
32
|
var getParentRowKeyBySubRowKey = (0, ramda_1.pipe)(getSiblingSubRowsKeyBySubRowKey, getParentRowKeyBySiblingsSubRowsKey);
|
|
33
|
+
var getSameNestingDepthNestedKeys = function (rowSpanData, keyToBeMatched) {
|
|
34
|
+
var parentKeyToBeMatched = getSiblingSubRowsKeyBySubRowKey(keyToBeMatched);
|
|
35
|
+
return Object.keys(rowSpanData).filter(function (currentKey) {
|
|
36
|
+
var currentParentKey = getParentRowKeyBySubRowKey(currentKey);
|
|
37
|
+
return (currentParentKey === parentKeyToBeMatched ||
|
|
38
|
+
(currentParentKey === TOTAL_ROW_SPAN_KEY && parentKeyToBeMatched === ''));
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var getRequiredRowSpan = function (rowSpanData, sameLevelNestedKeys, subRowKey, cellsWithExtraSpanAvailable) {
|
|
42
|
+
var subcellIndex = subRowKey.split(NESTED_KEY_DELIMITER).pop();
|
|
43
|
+
var minSpan = sameLevelNestedKeys
|
|
44
|
+
.filter(function (key) { return key.split(NESTED_KEY_DELIMITER).pop() === subcellIndex; })
|
|
45
|
+
.reduce(function (minSpan, key) {
|
|
46
|
+
return cellsWithExtraSpanAvailable.includes(getSiblingSubRowsKeyBySubRowKey(key))
|
|
47
|
+
? minSpan
|
|
48
|
+
: Math.min(minSpan, rowSpanData[key]);
|
|
49
|
+
}, Infinity);
|
|
50
|
+
return minSpan === Infinity ? rowSpanData[subRowKey] : Math.max(rowSpanData[subRowKey], minSpan);
|
|
51
|
+
};
|
|
33
52
|
var countParentSpanByAllSubRows = function (rowSpanData, siblingSubRowsKey) {
|
|
34
53
|
return (0, ramda_1.pipe)((0, ramda_1.pickBy)(function (_val, key) { return getSiblingSubRowsKeyBySubRowKey(key) === siblingSubRowsKey; }), ramda_1.values, ramda_1.sum)(rowSpanData);
|
|
35
54
|
};
|
|
@@ -49,23 +68,52 @@ var addNestedKey = function (rowSpanData, nestedKey) {
|
|
|
49
68
|
var _a;
|
|
50
69
|
return calcParentRowSpan(__assign(__assign({}, rowSpanData), (_a = {}, _a[nestedKey] = 1, _a)), nestedKey);
|
|
51
70
|
};
|
|
52
|
-
var
|
|
71
|
+
var validateRowSpans = function (rowSpanData) { return function (groups) {
|
|
72
|
+
var cellsWithExtraSpanAvailable = [];
|
|
73
|
+
for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
|
|
74
|
+
var group = groups_1[_i];
|
|
75
|
+
var siblingSubRowsKey = group[0];
|
|
76
|
+
var parentKey = getParentRowKeyBySiblingsSubRowsKey(siblingSubRowsKey);
|
|
77
|
+
var currentParentSpan = (0, ramda_1.propOr)(0, parentKey, rowSpanData);
|
|
78
|
+
var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, siblingSubRowsKey);
|
|
79
|
+
if (currentParentSpan > actualParentSpan) {
|
|
80
|
+
cellsWithExtraSpanAvailable.push(siblingSubRowsKey);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
return groups.reduce(function (rowSpanData, group) { return validateParentRowSpan(rowSpanData, group, cellsWithExtraSpanAvailable); }, rowSpanData);
|
|
84
|
+
}; };
|
|
85
|
+
var validateParentRowSpan = function (rowSpanData, _a, cellsWithExtraSpanAvailable) {
|
|
53
86
|
var siblingSubRowsKey = _a[0], subRowsKeys = _a[1];
|
|
54
87
|
var parentKey = getParentRowKeyBySiblingsSubRowsKey(siblingSubRowsKey);
|
|
55
88
|
var currentParentSpan = (0, ramda_1.propOr)(0, parentKey, rowSpanData);
|
|
56
89
|
var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, siblingSubRowsKey);
|
|
57
90
|
var spanDiff = currentParentSpan - actualParentSpan;
|
|
58
91
|
if (spanDiff > 0) {
|
|
92
|
+
var sameDepthNestedKeys_1 = getSameNestingDepthNestedKeys(rowSpanData, siblingSubRowsKey);
|
|
93
|
+
var sumOfRequiredRowSpans_1 = 0;
|
|
94
|
+
var correctedRowSpanData = subRowsKeys.reduce(function (acc, subRowKey) {
|
|
95
|
+
var requiredRowSpan = getRequiredRowSpan(rowSpanData, sameDepthNestedKeys_1, subRowKey, cellsWithExtraSpanAvailable);
|
|
96
|
+
acc[subRowKey] = requiredRowSpan;
|
|
97
|
+
sumOfRequiredRowSpans_1 += requiredRowSpan;
|
|
98
|
+
return acc;
|
|
99
|
+
}, {});
|
|
100
|
+
var newRowSpanData = __assign({}, rowSpanData);
|
|
101
|
+
if (currentParentSpan >= sumOfRequiredRowSpans_1) {
|
|
102
|
+
spanDiff = currentParentSpan - sumOfRequiredRowSpans_1;
|
|
103
|
+
newRowSpanData = __assign(__assign({}, rowSpanData), correctedRowSpanData);
|
|
104
|
+
if (spanDiff === 0)
|
|
105
|
+
return newRowSpanData;
|
|
106
|
+
}
|
|
59
107
|
var lowestSubRowKey = "".concat(siblingSubRowsKey).concat(NESTED_KEY_DELIMITER).concat(subRowsKeys.length - 1);
|
|
60
|
-
var lowestSubRowSpan =
|
|
61
|
-
return (0, ramda_1.assoc)(lowestSubRowKey, lowestSubRowSpan + spanDiff,
|
|
108
|
+
var lowestSubRowSpan = newRowSpanData[lowestSubRowKey];
|
|
109
|
+
return (0, ramda_1.assoc)(lowestSubRowKey, lowestSubRowSpan + spanDiff, newRowSpanData);
|
|
62
110
|
}
|
|
63
111
|
else {
|
|
64
112
|
return rowSpanData;
|
|
65
113
|
}
|
|
66
114
|
};
|
|
67
115
|
var validateRowSpanData = function (rowSpanData) {
|
|
68
|
-
return (0, ramda_1.pipe)((0, ramda_1.omit)([TOTAL_ROW_SPAN_KEY]), ramda_1.keys, (0, ramda_1.sortBy)(ramda_1.identity), (0, ramda_1.groupBy)(getSiblingSubRowsKeyBySubRowKey), ramda_1.toPairs, (
|
|
116
|
+
return (0, ramda_1.pipe)((0, ramda_1.omit)([TOTAL_ROW_SPAN_KEY]), ramda_1.keys, (0, ramda_1.sortBy)(ramda_1.identity), (0, ramda_1.groupBy)(getSiblingSubRowsKeyBySubRowKey), ramda_1.toPairs, validateRowSpans(rowSpanData))(rowSpanData);
|
|
69
117
|
};
|
|
70
118
|
exports.validateRowSpanData = validateRowSpanData;
|
|
71
119
|
var calcRowSpansForNestedKeys = (0, ramda_1.pipe)((0, ramda_1.sortBy)(ramda_1.identity), (0, ramda_1.reduce)(addNestedKey, {}), validateRowSpanData);
|
|
@@ -221,6 +221,47 @@ describe('dataHelpers', function () {
|
|
|
221
221
|
}
|
|
222
222
|
]);
|
|
223
223
|
});
|
|
224
|
+
it('should calculate correct rowspan if there are two or more columns having same nesting level', function () {
|
|
225
|
+
var rowValues = [
|
|
226
|
+
{
|
|
227
|
+
'n1.a.b': [[0], [1]],
|
|
228
|
+
'n1.x.y': [[2, 3], [4, 5], [6]],
|
|
229
|
+
'n1.x.y.z': [[[7], [8]], [[9], [10]], []]
|
|
230
|
+
}
|
|
231
|
+
];
|
|
232
|
+
var columnsData = [
|
|
233
|
+
{ id: 'n1.a.b', nestedPath: ['a'], label: 'columnA' },
|
|
234
|
+
{ id: 'n1.x.y', nestedPath: ['x'], label: 'columnB' },
|
|
235
|
+
{ id: 'n1.x.y.z', nestedPath: ['x', 'y'], label: 'columnC' }
|
|
236
|
+
];
|
|
237
|
+
var renderRowCell = function (_a) {
|
|
238
|
+
var cell = _a.cell;
|
|
239
|
+
return cell.values;
|
|
240
|
+
};
|
|
241
|
+
expect(getTableRowsData(rowValues, columnsData, renderRowCell)).toEqual([
|
|
242
|
+
{
|
|
243
|
+
data: {
|
|
244
|
+
'n1.a.b': [
|
|
245
|
+
{ values: [0], indexPath: [0], nestedKey: 'a.0', rowSpan: 2 },
|
|
246
|
+
{ values: [1], indexPath: [1], nestedKey: 'a.1', rowSpan: 3 }
|
|
247
|
+
],
|
|
248
|
+
'n1.x.y': [
|
|
249
|
+
{ values: [2, 3], indexPath: [0], nestedKey: 'x.0', rowSpan: 2 },
|
|
250
|
+
{ values: [4, 5], indexPath: [1], nestedKey: 'x.1', rowSpan: 2 },
|
|
251
|
+
{ values: [6], indexPath: [2], nestedKey: 'x.2', rowSpan: 1 }
|
|
252
|
+
],
|
|
253
|
+
'n1.x.y.z': [
|
|
254
|
+
{ values: [7], indexPath: [0, 0], nestedKey: 'x.0.y.0', rowSpan: 1 },
|
|
255
|
+
{ values: [8], indexPath: [0, 1], nestedKey: 'x.0.y.1', rowSpan: 1 },
|
|
256
|
+
{ values: [9], indexPath: [1, 0], nestedKey: 'x.1.y.0', rowSpan: 1 },
|
|
257
|
+
{ values: [10], indexPath: [1, 1], nestedKey: 'x.1.y.1', rowSpan: 1 },
|
|
258
|
+
{ values: [], indexPath: [2], nestedKey: 'x.2', rowSpan: 1 }
|
|
259
|
+
]
|
|
260
|
+
},
|
|
261
|
+
id: 0
|
|
262
|
+
}
|
|
263
|
+
]);
|
|
264
|
+
});
|
|
224
265
|
it('should apply max values count constraint if getRowMaxValuesCount is provided', function () {
|
|
225
266
|
var rowValues = [
|
|
226
267
|
{
|
|
@@ -24,6 +24,25 @@ var NESTED_KEY_DELIMITER = '.';
|
|
|
24
24
|
var getSiblingSubRowsKeyBySubRowKey = pipe(split(NESTED_KEY_DELIMITER), dropLast(1), join(NESTED_KEY_DELIMITER));
|
|
25
25
|
var getParentRowKeyBySiblingsSubRowsKey = pipe(split(NESTED_KEY_DELIMITER), dropLast(1), join(NESTED_KEY_DELIMITER), unless(length, always(TOTAL_ROW_SPAN_KEY)));
|
|
26
26
|
var getParentRowKeyBySubRowKey = pipe(getSiblingSubRowsKeyBySubRowKey, getParentRowKeyBySiblingsSubRowsKey);
|
|
27
|
+
var getSameNestingDepthNestedKeys = function (rowSpanData, keyToBeMatched) {
|
|
28
|
+
var parentKeyToBeMatched = getSiblingSubRowsKeyBySubRowKey(keyToBeMatched);
|
|
29
|
+
return Object.keys(rowSpanData).filter(function (currentKey) {
|
|
30
|
+
var currentParentKey = getParentRowKeyBySubRowKey(currentKey);
|
|
31
|
+
return (currentParentKey === parentKeyToBeMatched ||
|
|
32
|
+
(currentParentKey === TOTAL_ROW_SPAN_KEY && parentKeyToBeMatched === ''));
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
var getRequiredRowSpan = function (rowSpanData, sameLevelNestedKeys, subRowKey, cellsWithExtraSpanAvailable) {
|
|
36
|
+
var subcellIndex = subRowKey.split(NESTED_KEY_DELIMITER).pop();
|
|
37
|
+
var minSpan = sameLevelNestedKeys
|
|
38
|
+
.filter(function (key) { return key.split(NESTED_KEY_DELIMITER).pop() === subcellIndex; })
|
|
39
|
+
.reduce(function (minSpan, key) {
|
|
40
|
+
return cellsWithExtraSpanAvailable.includes(getSiblingSubRowsKeyBySubRowKey(key))
|
|
41
|
+
? minSpan
|
|
42
|
+
: Math.min(minSpan, rowSpanData[key]);
|
|
43
|
+
}, Infinity);
|
|
44
|
+
return minSpan === Infinity ? rowSpanData[subRowKey] : Math.max(rowSpanData[subRowKey], minSpan);
|
|
45
|
+
};
|
|
27
46
|
var countParentSpanByAllSubRows = function (rowSpanData, siblingSubRowsKey) {
|
|
28
47
|
return pipe(pickBy(function (_val, key) { return getSiblingSubRowsKeyBySubRowKey(key) === siblingSubRowsKey; }), values, sum)(rowSpanData);
|
|
29
48
|
};
|
|
@@ -43,23 +62,52 @@ var addNestedKey = function (rowSpanData, nestedKey) {
|
|
|
43
62
|
var _a;
|
|
44
63
|
return calcParentRowSpan(__assign(__assign({}, rowSpanData), (_a = {}, _a[nestedKey] = 1, _a)), nestedKey);
|
|
45
64
|
};
|
|
46
|
-
var
|
|
65
|
+
var validateRowSpans = function (rowSpanData) { return function (groups) {
|
|
66
|
+
var cellsWithExtraSpanAvailable = [];
|
|
67
|
+
for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
|
|
68
|
+
var group = groups_1[_i];
|
|
69
|
+
var siblingSubRowsKey = group[0];
|
|
70
|
+
var parentKey = getParentRowKeyBySiblingsSubRowsKey(siblingSubRowsKey);
|
|
71
|
+
var currentParentSpan = propOr(0, parentKey, rowSpanData);
|
|
72
|
+
var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, siblingSubRowsKey);
|
|
73
|
+
if (currentParentSpan > actualParentSpan) {
|
|
74
|
+
cellsWithExtraSpanAvailable.push(siblingSubRowsKey);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return groups.reduce(function (rowSpanData, group) { return validateParentRowSpan(rowSpanData, group, cellsWithExtraSpanAvailable); }, rowSpanData);
|
|
78
|
+
}; };
|
|
79
|
+
var validateParentRowSpan = function (rowSpanData, _a, cellsWithExtraSpanAvailable) {
|
|
47
80
|
var siblingSubRowsKey = _a[0], subRowsKeys = _a[1];
|
|
48
81
|
var parentKey = getParentRowKeyBySiblingsSubRowsKey(siblingSubRowsKey);
|
|
49
82
|
var currentParentSpan = propOr(0, parentKey, rowSpanData);
|
|
50
83
|
var actualParentSpan = countParentSpanByAllSubRows(rowSpanData, siblingSubRowsKey);
|
|
51
84
|
var spanDiff = currentParentSpan - actualParentSpan;
|
|
52
85
|
if (spanDiff > 0) {
|
|
86
|
+
var sameDepthNestedKeys_1 = getSameNestingDepthNestedKeys(rowSpanData, siblingSubRowsKey);
|
|
87
|
+
var sumOfRequiredRowSpans_1 = 0;
|
|
88
|
+
var correctedRowSpanData = subRowsKeys.reduce(function (acc, subRowKey) {
|
|
89
|
+
var requiredRowSpan = getRequiredRowSpan(rowSpanData, sameDepthNestedKeys_1, subRowKey, cellsWithExtraSpanAvailable);
|
|
90
|
+
acc[subRowKey] = requiredRowSpan;
|
|
91
|
+
sumOfRequiredRowSpans_1 += requiredRowSpan;
|
|
92
|
+
return acc;
|
|
93
|
+
}, {});
|
|
94
|
+
var newRowSpanData = __assign({}, rowSpanData);
|
|
95
|
+
if (currentParentSpan >= sumOfRequiredRowSpans_1) {
|
|
96
|
+
spanDiff = currentParentSpan - sumOfRequiredRowSpans_1;
|
|
97
|
+
newRowSpanData = __assign(__assign({}, rowSpanData), correctedRowSpanData);
|
|
98
|
+
if (spanDiff === 0)
|
|
99
|
+
return newRowSpanData;
|
|
100
|
+
}
|
|
53
101
|
var lowestSubRowKey = "".concat(siblingSubRowsKey).concat(NESTED_KEY_DELIMITER).concat(subRowsKeys.length - 1);
|
|
54
|
-
var lowestSubRowSpan =
|
|
55
|
-
return assoc(lowestSubRowKey, lowestSubRowSpan + spanDiff,
|
|
102
|
+
var lowestSubRowSpan = newRowSpanData[lowestSubRowKey];
|
|
103
|
+
return assoc(lowestSubRowKey, lowestSubRowSpan + spanDiff, newRowSpanData);
|
|
56
104
|
}
|
|
57
105
|
else {
|
|
58
106
|
return rowSpanData;
|
|
59
107
|
}
|
|
60
108
|
};
|
|
61
109
|
var validateRowSpanData = function (rowSpanData) {
|
|
62
|
-
return pipe(omit([TOTAL_ROW_SPAN_KEY]), keys, sortBy(identity), groupBy(getSiblingSubRowsKeyBySubRowKey), toPairs,
|
|
110
|
+
return pipe(omit([TOTAL_ROW_SPAN_KEY]), keys, sortBy(identity), groupBy(getSiblingSubRowsKeyBySubRowKey), toPairs, validateRowSpans(rowSpanData))(rowSpanData);
|
|
63
111
|
};
|
|
64
112
|
var calcRowSpansForNestedKeys = pipe(sortBy(identity), reduce(addNestedKey, {}), validateRowSpanData);
|
|
65
113
|
var chainWithIndex = addIndex(chain);
|