@reltio/components 1.4.2083 → 1.4.2084
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/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) {
|