@blaze-cms/react-page-builder 0.141.0-core-styles.21 → 0.141.0-core-styles.22
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/CHANGELOG.md +11 -0
- package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js +8 -10
- package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js.map +1 -1
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +1 -5
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map +1 -1
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +10 -23
- package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map +1 -1
- package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js +13 -9
- package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js.map +1 -1
- package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js +8 -10
- package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js.map +1 -1
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +1 -5
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map +1 -1
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +10 -23
- package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map +1 -1
- package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js +13 -8
- package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js.map +1 -1
- package/package.json +2 -2
- package/src/variants/ThumbnailCarousel/ThumbnailCarousel.js +6 -10
- package/src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js +4 -18
- package/src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js +11 -25
- package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js +13 -8
- package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap +10 -15
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.141.0-core-styles.22](https://github.com/thebyte9/blaze/compare/v0.141.0-core-styles.21...v0.141.0-core-styles.22) (2024-05-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fixed thumbnail carousel scroll behaviour/thumbnail click/thumbnail size ([#4349](https://github.com/thebyte9/blaze/issues/4349)) ([327a3db](https://github.com/thebyte9/blaze/commit/327a3db2c67e363716232ef628c93ff3e5720638))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.141.0-core-styles.21](https://github.com/thebyte9/blaze/compare/v0.141.0-core-styles.20...v0.141.0-core-styles.21) (2024-05-02)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @blaze-cms/react-page-builder
|
|
@@ -17,8 +17,8 @@ var ThumbnailCarousel = function ThumbnailCarousel(props) {
|
|
|
17
17
|
imageIds = _useThumbnailCarousel.imageIds,
|
|
18
18
|
selectedImageId = _useThumbnailCarousel.selectedImageId,
|
|
19
19
|
priorityLimit = _useThumbnailCarousel.priorityLimit,
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
scrollToImage = _useThumbnailCarousel.scrollToImage,
|
|
21
|
+
mainImageButtonClick = _useThumbnailCarousel.mainImageButtonClick;
|
|
22
22
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
23
|
className: "thumbnail-carousel",
|
|
24
24
|
"data-testid": "thumbnail-carousel"
|
|
@@ -33,14 +33,10 @@ var ThumbnailCarousel = function ThumbnailCarousel(props) {
|
|
|
33
33
|
}
|
|
34
34
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
35
35
|
className: "arrow arrow--left"
|
|
36
|
-
})), /*#__PURE__*/_react["default"].createElement("
|
|
37
|
-
className: "thumbnail-carousel__main_image_container__main-image",
|
|
38
|
-
"data-testid": "thumbnail-main-image",
|
|
39
|
-
ref: thumbnailsListRef
|
|
40
|
-
}, /*#__PURE__*/_react["default"].createElement(_ThumbnailImage["default"], (0, _extends2["default"])({}, props, {
|
|
36
|
+
})), /*#__PURE__*/_react["default"].createElement(_ThumbnailImage["default"], (0, _extends2["default"])({}, props, {
|
|
41
37
|
priority: true,
|
|
42
38
|
imageId: selectedImageId
|
|
43
|
-
}))
|
|
39
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
44
40
|
id: "next-button",
|
|
45
41
|
className: "thumbnail-carousel__main_image_container__button next",
|
|
46
42
|
role: "button",
|
|
@@ -50,14 +46,16 @@ var ThumbnailCarousel = function ThumbnailCarousel(props) {
|
|
|
50
46
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
51
47
|
className: "arrow arrow--right"
|
|
52
48
|
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
53
|
-
className: "thumbnail-carousel__list"
|
|
49
|
+
className: "thumbnail-carousel__list",
|
|
50
|
+
ref: thumbnailsListRef
|
|
54
51
|
}, imageIds.map(function (imageId, index) {
|
|
55
52
|
return /*#__PURE__*/_react["default"].createElement(_ThumbnailImage["default"], (0, _extends2["default"])({}, props, {
|
|
56
53
|
key: imageId,
|
|
54
|
+
imageIndex: index,
|
|
57
55
|
priority: index < priorityLimit,
|
|
58
56
|
imageId: imageId,
|
|
59
57
|
selectedImageId: selectedImageId,
|
|
60
|
-
|
|
58
|
+
scrollToImage: scrollToImage
|
|
61
59
|
}));
|
|
62
60
|
})));
|
|
63
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThumbnailCarousel.js","names":["_react","_interopRequireDefault","require","_useThumbnailCarousel2","_ThumbnailImage","ThumbnailCarousel","props","_useThumbnailCarousel","useThumbnailCarousel","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","
|
|
1
|
+
{"version":3,"file":"ThumbnailCarousel.js","names":["_react","_interopRequireDefault","require","_useThumbnailCarousel2","_ThumbnailImage","ThumbnailCarousel","props","_useThumbnailCarousel","useThumbnailCarousel","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","scrollToImage","mainImageButtonClick","createElement","className","id","role","onClick","_extends2","priority","imageId","ref","map","index","key","imageIndex","_default","exports"],"sources":["../../../src/variants/ThumbnailCarousel/ThumbnailCarousel.js"],"sourcesContent":["import React from 'react';\nimport useThumbnailCarousel from './useThumbnailCarousel';\nimport ThumbnailImage from './ThumbnailImage';\n\nconst ThumbnailCarousel = props => {\n const {\n thumbnailsListRef,\n imageIds,\n selectedImageId,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n } = useThumbnailCarousel(props);\n\n return (\n <div className=\"thumbnail-carousel\" data-testid=\"thumbnail-carousel\">\n <div className=\"thumbnail-carousel__main_image_container\">\n <div\n id=\"previous-button\"\n className=\"thumbnail-carousel__main_image_container__button\"\n role=\"button\"\n onClick={() => mainImageButtonClick()}>\n <div className=\"arrow arrow--left\" />\n </div>\n <ThumbnailImage {...props} priority imageId={selectedImageId} />\n <div\n id=\"next-button\"\n className=\"thumbnail-carousel__main_image_container__button next\"\n role=\"button\"\n onClick={() => mainImageButtonClick(true)}>\n <div className=\"arrow arrow--right\" />\n </div>\n </div>\n <div className=\"thumbnail-carousel__list\" ref={thumbnailsListRef}>\n {imageIds.map((imageId, index) => (\n <ThumbnailImage\n {...props}\n key={imageId}\n imageIndex={index}\n priority={index < priorityLimit}\n imageId={imageId}\n selectedImageId={selectedImageId}\n scrollToImage={scrollToImage}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAGC,KAAK,EAAI;EACjC,IAAAC,qBAAA,GAOI,IAAAC,iCAAoB,EAACF,KAAK,CAAC;IAN7BG,iBAAiB,GAAAF,qBAAA,CAAjBE,iBAAiB;IACjBC,QAAQ,GAAAH,qBAAA,CAARG,QAAQ;IACRC,eAAe,GAAAJ,qBAAA,CAAfI,eAAe;IACfC,aAAa,GAAAL,qBAAA,CAAbK,aAAa;IACbC,aAAa,GAAAN,qBAAA,CAAbM,aAAa;IACbC,oBAAoB,GAAAP,qBAAA,CAApBO,oBAAoB;EAGtB,oBACEd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAoB,gBAClEhB,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAA0C,gBACvDhB,MAAA,YAAAe,aAAA;IACEE,EAAE,EAAC,iBAAiB;IACpBD,SAAS,EAAC,kDAAkD;IAC5DE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAML,oBAAoB,CAAC,CAAC;IAAA;EAAC,gBACtCd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNhB,MAAA,YAAAe,aAAA,CAACX,eAAA,WAAc,MAAAgB,SAAA,iBAAKd,KAAK;IAAEe,QAAQ;IAACC,OAAO,EAAEX;EAAgB,EAAE,CAAC,eAChEX,MAAA,YAAAe,aAAA;IACEE,EAAE,EAAC,aAAa;IAChBD,SAAS,EAAC,uDAAuD;IACjEE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAML,oBAAoB,CAAC,IAAI,CAAC;IAAA;EAAC,gBAC1Cd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,eACNhB,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC,0BAA0B;IAACO,GAAG,EAAEd;EAAkB,GAC9DC,QAAQ,CAACc,GAAG,CAAC,UAACF,OAAO,EAAEG,KAAK;IAAA,oBAC3BzB,MAAA,YAAAe,aAAA,CAACX,eAAA,WAAc,MAAAgB,SAAA,iBACTd,KAAK;MACToB,GAAG,EAAEJ,OAAQ;MACbK,UAAU,EAAEF,KAAM;MAClBJ,QAAQ,EAAEI,KAAK,GAAGb,aAAc;MAChCU,OAAO,EAAEA,OAAQ;MACjBX,eAAe,EAAEA,eAAgB;MACjCE,aAAa,EAAEA;IAAc,EAC9B,CAAC;EAAA,CACH,CACE,CACF,CAAC;AAEV,CAAC;AAAC,IAAAe,QAAA,GAAAC,OAAA,cAEaxB,iBAAiB"}
|
|
@@ -14,16 +14,13 @@ var ThumbnailImage = function ThumbnailImage(props) {
|
|
|
14
14
|
loading = _useThumbnailImage.loading,
|
|
15
15
|
error = _useThumbnailImage.error,
|
|
16
16
|
className = _useThumbnailImage.className,
|
|
17
|
-
imageRef = _useThumbnailImage.imageRef,
|
|
18
17
|
imageUrl = _useThumbnailImage.imageUrl,
|
|
19
18
|
altText = _useThumbnailImage.altText,
|
|
20
19
|
priority = _useThumbnailImage.priority,
|
|
21
|
-
handleClick = _useThumbnailImage.handleClick
|
|
22
|
-
handleEnableLightbox = _useThumbnailImage.handleEnableLightbox;
|
|
20
|
+
handleClick = _useThumbnailImage.handleClick;
|
|
23
21
|
if (error) return error.message;
|
|
24
22
|
if (loading) return null;
|
|
25
23
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
|
-
ref: imageRef,
|
|
27
24
|
className: className,
|
|
28
25
|
onClick: handleClick,
|
|
29
26
|
role: "button",
|
|
@@ -32,7 +29,6 @@ var ThumbnailImage = function ThumbnailImage(props) {
|
|
|
32
29
|
src: imageUrl,
|
|
33
30
|
alt: altText,
|
|
34
31
|
sizeKey: "carousel",
|
|
35
|
-
onClick: handleEnableLightbox,
|
|
36
32
|
role: "button",
|
|
37
33
|
priority: priority
|
|
38
34
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThumbnailImage.js","names":["_react","_interopRequireDefault","require","_LazyImage","_useThumbnailImage2","ThumbnailImage","props","_useThumbnailImage","useThumbnailImage","loading","error","className","
|
|
1
|
+
{"version":3,"file":"ThumbnailImage.js","names":["_react","_interopRequireDefault","require","_LazyImage","_useThumbnailImage2","ThumbnailImage","props","_useThumbnailImage","useThumbnailImage","loading","error","className","imageUrl","altText","priority","handleClick","message","createElement","onClick","role","src","alt","sizeKey","_default","exports"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js"],"sourcesContent":["import React from 'react';\nimport LazyImage from '../../../components/LazyImage';\nimport useThumbnailImage from './useThumbnailImage';\n\nconst ThumbnailImage = props => {\n const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(\n props\n );\n\n if (error) return error.message;\n if (loading) return null;\n\n return (\n <div className={className} onClick={handleClick} role=\"button\" data-testid=\"thumbnail-image\">\n <LazyImage\n src={imageUrl}\n alt={altText}\n sizeKey=\"carousel\"\n role=\"button\"\n priority={priority}\n />\n </div>\n );\n};\n\nexport default ThumbnailImage;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAGC,KAAK,EAAI;EAC9B,IAAAC,kBAAA,GAAgF,IAAAC,8BAAiB,EAC/FF,KACF,CAAC;IAFOG,OAAO,GAAAF,kBAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,kBAAA,CAALG,KAAK;IAAEC,SAAS,GAAAJ,kBAAA,CAATI,SAAS;IAAEC,QAAQ,GAAAL,kBAAA,CAARK,QAAQ;IAAEC,OAAO,GAAAN,kBAAA,CAAPM,OAAO;IAAEC,QAAQ,GAAAP,kBAAA,CAARO,QAAQ;IAAEC,WAAW,GAAAR,kBAAA,CAAXQ,WAAW;EAI3E,IAAIL,KAAK,EAAE,OAAOA,KAAK,CAACM,OAAO;EAC/B,IAAIP,OAAO,EAAE,OAAO,IAAI;EAExB,oBACET,MAAA,YAAAiB,aAAA;IAAKN,SAAS,EAAEA,SAAU;IAACO,OAAO,EAAEH,WAAY;IAACI,IAAI,EAAC,QAAQ;IAAC,eAAY;EAAiB,gBAC1FnB,MAAA,YAAAiB,aAAA,CAACd,UAAA,WAAS;IACRiB,GAAG,EAAER,QAAS;IACdS,GAAG,EAAER,OAAQ;IACbS,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAC,QAAQ;IACbL,QAAQ,EAAEA;EAAS,CACpB,CACE,CAAC;AAEV,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,cAEanB,cAAc"}
|
|
@@ -6,40 +6,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
|
-
var _react = require("react");
|
|
10
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
10
|
var _hooks = require("../../../hooks");
|
|
12
11
|
var _utils = require("../../../utils");
|
|
13
12
|
var useThumbnailImage = function useThumbnailImage(_ref) {
|
|
14
13
|
var imageId = _ref.imageId,
|
|
14
|
+
imageIndex = _ref.imageIndex,
|
|
15
15
|
enableLightbox = _ref.enableLightbox,
|
|
16
16
|
toggleModal = _ref.toggleModal,
|
|
17
17
|
handleSelectedImage = _ref.handleSelectedImage,
|
|
18
18
|
priority = _ref.priority,
|
|
19
19
|
selectedImageId = _ref.selectedImageId,
|
|
20
|
-
|
|
21
|
-
var imageRef = (0, _react.useRef)(null);
|
|
22
|
-
var isSelected = selectedImageId === imageId;
|
|
20
|
+
scrollToImage = _ref.scrollToImage;
|
|
23
21
|
var _useGetImages = (0, _hooks.useGetImages)(imageId),
|
|
24
22
|
_useGetImages$data = _useGetImages.data,
|
|
25
23
|
data = _useGetImages$data === void 0 ? {} : _useGetImages$data,
|
|
26
24
|
loading = _useGetImages.loading,
|
|
27
25
|
error = _useGetImages.error;
|
|
28
|
-
(0, _react.useEffect)(function () {
|
|
29
|
-
if (imageRef.current && isSelected) {
|
|
30
|
-
imageRef.current.scrollIntoView({
|
|
31
|
-
behavior: 'smooth',
|
|
32
|
-
block: 'start'
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
}, [isSelected]);
|
|
36
|
-
var handleEnableLightbox = function handleEnableLightbox() {
|
|
37
|
-
if (!enableLightbox) return;
|
|
38
|
-
toggleModal();
|
|
39
|
-
handleSelectedImage(imageId);
|
|
40
|
-
};
|
|
41
26
|
var handleClick = function handleClick() {
|
|
42
|
-
|
|
27
|
+
if (scrollToImage) scrollToImage(imageIndex);else if (enableLightbox) {
|
|
28
|
+
toggleModal();
|
|
29
|
+
handleSelectedImage(imageId);
|
|
30
|
+
}
|
|
43
31
|
};
|
|
44
32
|
var _ref2 = data.getFile || {
|
|
45
33
|
getFile: {
|
|
@@ -58,12 +46,11 @@ var useThumbnailImage = function useThumbnailImage(_ref) {
|
|
|
58
46
|
loading: loading,
|
|
59
47
|
error: error,
|
|
60
48
|
className: className,
|
|
61
|
-
|
|
49
|
+
imageId: imageId,
|
|
62
50
|
imageUrl: imageUrl,
|
|
63
51
|
altText: altText,
|
|
64
52
|
priority: priority,
|
|
65
|
-
handleClick: handleClick
|
|
66
|
-
handleEnableLightbox: handleEnableLightbox
|
|
53
|
+
handleClick: handleClick
|
|
67
54
|
};
|
|
68
55
|
};
|
|
69
56
|
useThumbnailImage.propTypes = {
|
|
@@ -73,10 +60,10 @@ useThumbnailImage.propTypes = {
|
|
|
73
60
|
toggleModal: _propTypes["default"].func.isRequired,
|
|
74
61
|
handleSelectedImage: _propTypes["default"].func.isRequired,
|
|
75
62
|
priority: _propTypes["default"].bool.isRequired,
|
|
76
|
-
|
|
63
|
+
scrollToImage: _propTypes["default"].func
|
|
77
64
|
};
|
|
78
65
|
useThumbnailImage.defaultProps = {
|
|
79
|
-
|
|
66
|
+
scrollToImage: null
|
|
80
67
|
};
|
|
81
68
|
var _default = exports["default"] = useThumbnailImage;
|
|
82
69
|
//# sourceMappingURL=useThumbnailImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThumbnailImage.js","names":["
|
|
1
|
+
{"version":3,"file":"useThumbnailImage.js","names":["_propTypes","_interopRequireDefault","require","_hooks","_utils","useThumbnailImage","_ref","imageId","imageIndex","enableLightbox","toggleModal","handleSelectedImage","priority","selectedImageId","scrollToImage","_useGetImages","useGetImages","_useGetImages$data","data","loading","error","handleClick","_ref2","getFile","url","_ref2$url","imageUrl","_ref2$data","imageData","_getImageData","getImageData","altText","className","propTypes","PropTypes","string","isRequired","bool","func","defaultProps","_default","exports"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useGetImages } from '../../../hooks';\nimport { getImageData } from '../../../utils';\n\nconst useThumbnailImage = ({\n imageId,\n imageIndex,\n enableLightbox,\n toggleModal,\n handleSelectedImage,\n priority,\n selectedImageId,\n scrollToImage\n}) => {\n const { data = {}, loading, error } = useGetImages(imageId);\n\n const handleClick = () => {\n if (scrollToImage) scrollToImage(imageIndex);\n else if (enableLightbox) {\n toggleModal();\n handleSelectedImage(imageId);\n }\n };\n\n const { url: imageUrl = '', data: imageData = {} } = data.getFile || {\n getFile: { url: '', data: {} }\n };\n const { altText } = getImageData({}, imageData);\n\n const className =\n selectedImageId === imageId\n ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'\n : 'thumbnail-carousel-image';\n\n return {\n loading,\n error,\n className,\n imageId,\n imageUrl,\n altText,\n priority,\n handleClick\n };\n};\n\nuseThumbnailImage.propTypes = {\n imageId: PropTypes.string.isRequired,\n selectedImageId: PropTypes.string.isRequired,\n enableLightbox: PropTypes.bool.isRequired,\n toggleModal: PropTypes.func.isRequired,\n handleSelectedImage: PropTypes.func.isRequired,\n priority: PropTypes.bool.isRequired,\n scrollToImage: PropTypes.func\n};\n\nuseThumbnailImage.defaultProps = {\n scrollToImage: null\n};\n\nexport default useThumbnailImage;\n"],"mappings":";;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EASjB;EAAA,IARJC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,mBAAmB,GAAAL,IAAA,CAAnBK,mBAAmB;IACnBC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,eAAe,GAAAP,IAAA,CAAfO,eAAe;IACfC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;EAEb,IAAAC,aAAA,GAAsC,IAAAC,mBAAY,EAACT,OAAO,CAAC;IAAAU,kBAAA,GAAAF,aAAA,CAAnDG,IAAI;IAAJA,IAAI,GAAAD,kBAAA,cAAG,CAAC,CAAC,GAAAA,kBAAA;IAAEE,OAAO,GAAAJ,aAAA,CAAPI,OAAO;IAAEC,KAAK,GAAAL,aAAA,CAALK,KAAK;EAEjC,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB,IAAIP,aAAa,EAAEA,aAAa,CAACN,UAAU,CAAC,CAAC,KACxC,IAAIC,cAAc,EAAE;MACvBC,WAAW,CAAC,CAAC;MACbC,mBAAmB,CAACJ,OAAO,CAAC;IAC9B;EACF,CAAC;EAED,IAAAe,KAAA,GAAqDJ,IAAI,CAACK,OAAO,IAAI;MACnEA,OAAO,EAAE;QAAEC,GAAG,EAAE,EAAE;QAAEN,IAAI,EAAE,CAAC;MAAE;IAC/B,CAAC;IAAAO,SAAA,GAAAH,KAAA,CAFOE,GAAG;IAAEE,QAAQ,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IAAAE,UAAA,GAAAL,KAAA,CAAEJ,IAAI;IAAEU,SAAS,GAAAD,UAAA,cAAG,CAAC,CAAC,GAAAA,UAAA;EAGhD,IAAAE,aAAA,GAAoB,IAAAC,mBAAY,EAAC,CAAC,CAAC,EAAEF,SAAS,CAAC;IAAvCG,OAAO,GAAAF,aAAA,CAAPE,OAAO;EAEf,IAAMC,SAAS,GACbnB,eAAe,KAAKN,OAAO,GACvB,6DAA6D,GAC7D,0BAA0B;EAEhC,OAAO;IACLY,OAAO,EAAPA,OAAO;IACPC,KAAK,EAALA,KAAK;IACLY,SAAS,EAATA,SAAS;IACTzB,OAAO,EAAPA,OAAO;IACPmB,QAAQ,EAARA,QAAQ;IACRK,OAAO,EAAPA,OAAO;IACPnB,QAAQ,EAARA,QAAQ;IACRS,WAAW,EAAXA;EACF,CAAC;AACH,CAAC;AAEDhB,iBAAiB,CAAC4B,SAAS,GAAG;EAC5B1B,OAAO,EAAE2B,qBAAS,CAACC,MAAM,CAACC,UAAU;EACpCvB,eAAe,EAAEqB,qBAAS,CAACC,MAAM,CAACC,UAAU;EAC5C3B,cAAc,EAAEyB,qBAAS,CAACG,IAAI,CAACD,UAAU;EACzC1B,WAAW,EAAEwB,qBAAS,CAACI,IAAI,CAACF,UAAU;EACtCzB,mBAAmB,EAAEuB,qBAAS,CAACI,IAAI,CAACF,UAAU;EAC9CxB,QAAQ,EAAEsB,qBAAS,CAACG,IAAI,CAACD,UAAU;EACnCtB,aAAa,EAAEoB,qBAAS,CAACI;AAC3B,CAAC;AAEDjC,iBAAiB,CAACkC,YAAY,GAAG;EAC/BzB,aAAa,EAAE;AACjB,CAAC;AAAC,IAAA0B,QAAA,GAAAC,OAAA,cAEapC,iBAAiB"}
|
|
@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
15
15
|
value: true
|
|
16
16
|
});
|
|
17
17
|
exports["default"] = void 0;
|
|
18
|
-
require("core-js/modules/es.array.index-of.js");
|
|
19
18
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
20
19
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
21
20
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
@@ -34,19 +33,24 @@ var useThumbnailCarousel = function useThumbnailCarousel(_ref) {
|
|
|
34
33
|
var thumbnailsListRef = (0, _react.useRef)(null);
|
|
35
34
|
var selectedImageId = imageIds[selectedImageIndex];
|
|
36
35
|
var mainImageButtonClick = function mainImageButtonClick(next) {
|
|
36
|
+
var newIndex;
|
|
37
37
|
if (next) {
|
|
38
38
|
var isLast = imageIds.length - 1 === selectedImageIndex;
|
|
39
|
-
|
|
40
|
-
setSelectedImageIndex(newIndex);
|
|
39
|
+
newIndex = isLast ? 0 : selectedImageIndex + 1;
|
|
41
40
|
} else {
|
|
42
41
|
var isFirst = selectedImageIndex === 0;
|
|
43
|
-
|
|
44
|
-
setSelectedImageIndex(_newIndex);
|
|
42
|
+
newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
|
|
45
43
|
}
|
|
44
|
+
scrollToImage(newIndex);
|
|
46
45
|
};
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
var scrollToImage = function scrollToImage(newIndex) {
|
|
47
|
+
if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
|
|
48
|
+
thumbnailsListRef.current.scrollTo({
|
|
49
|
+
left: 150 * newIndex,
|
|
50
|
+
behavior: 'smooth'
|
|
51
|
+
});
|
|
52
|
+
setSelectedImageIndex(newIndex);
|
|
53
|
+
}
|
|
50
54
|
};
|
|
51
55
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
52
56
|
imageIds: imageIds,
|
|
@@ -54,7 +58,7 @@ var useThumbnailCarousel = function useThumbnailCarousel(_ref) {
|
|
|
54
58
|
selectedImageIndex: selectedImageIndex,
|
|
55
59
|
thumbnailsListRef: thumbnailsListRef,
|
|
56
60
|
priorityLimit: priorityLimit,
|
|
57
|
-
|
|
61
|
+
scrollToImage: scrollToImage,
|
|
58
62
|
mainImageButtonClick: mainImageButtonClick
|
|
59
63
|
});
|
|
60
64
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThumbnailCarousel.js","names":["_react","require","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","useRef","selectedImageId","mainImageButtonClick","next","
|
|
1
|
+
{"version":3,"file":"useThumbnailCarousel.js","names":["_react","require","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","useRef","selectedImageId","mainImageButtonClick","next","newIndex","isLast","isFirst","scrollToImage","current","scrollTo","left","behavior","_default","exports"],"sources":["../../../src/variants/ThumbnailCarousel/useThumbnailCarousel.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nconst useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {\n const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n const thumbnailsListRef = useRef(null);\n const selectedImageId = imageIds[selectedImageIndex];\n\n const mainImageButtonClick = next => {\n let newIndex;\n if (next) {\n const isLast = imageIds.length - 1 === selectedImageIndex;\n newIndex = isLast ? 0 : selectedImageIndex + 1;\n } else {\n const isFirst = selectedImageIndex === 0;\n newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;\n }\n scrollToImage(newIndex);\n };\n\n const scrollToImage = newIndex => {\n if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {\n thumbnailsListRef.current.scrollTo({\n left: 150 * newIndex,\n behavior: 'smooth'\n });\n setSelectedImageIndex(newIndex);\n }\n };\n\n return {\n ...props,\n imageIds,\n selectedImageId,\n selectedImageIndex,\n thumbnailsListRef,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n };\n};\n\nexport default useThumbnailCarousel;\n"],"mappings":"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"}
|
|
@@ -8,8 +8,8 @@ const ThumbnailCarousel = props => {
|
|
|
8
8
|
imageIds,
|
|
9
9
|
selectedImageId,
|
|
10
10
|
priorityLimit,
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
scrollToImage,
|
|
12
|
+
mainImageButtonClick
|
|
13
13
|
} = useThumbnailCarousel(props);
|
|
14
14
|
return /*#__PURE__*/React.createElement("div", {
|
|
15
15
|
className: "thumbnail-carousel",
|
|
@@ -23,14 +23,10 @@ const ThumbnailCarousel = props => {
|
|
|
23
23
|
onClick: () => mainImageButtonClick()
|
|
24
24
|
}, /*#__PURE__*/React.createElement("div", {
|
|
25
25
|
className: "arrow arrow--left"
|
|
26
|
-
})), /*#__PURE__*/React.createElement(
|
|
27
|
-
className: "thumbnail-carousel__main_image_container__main-image",
|
|
28
|
-
"data-testid": "thumbnail-main-image",
|
|
29
|
-
ref: thumbnailsListRef
|
|
30
|
-
}, /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
|
|
26
|
+
})), /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
|
|
31
27
|
priority: true,
|
|
32
28
|
imageId: selectedImageId
|
|
33
|
-
}))
|
|
29
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
34
30
|
id: "next-button",
|
|
35
31
|
className: "thumbnail-carousel__main_image_container__button next",
|
|
36
32
|
role: "button",
|
|
@@ -38,13 +34,15 @@ const ThumbnailCarousel = props => {
|
|
|
38
34
|
}, /*#__PURE__*/React.createElement("div", {
|
|
39
35
|
className: "arrow arrow--right"
|
|
40
36
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
41
|
-
className: "thumbnail-carousel__list"
|
|
37
|
+
className: "thumbnail-carousel__list",
|
|
38
|
+
ref: thumbnailsListRef
|
|
42
39
|
}, imageIds.map((imageId, index) => /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
|
|
43
40
|
key: imageId,
|
|
41
|
+
imageIndex: index,
|
|
44
42
|
priority: index < priorityLimit,
|
|
45
43
|
imageId: imageId,
|
|
46
44
|
selectedImageId: selectedImageId,
|
|
47
|
-
|
|
45
|
+
scrollToImage: scrollToImage
|
|
48
46
|
})))));
|
|
49
47
|
};
|
|
50
48
|
export default ThumbnailCarousel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThumbnailCarousel.js","names":["React","useThumbnailCarousel","ThumbnailImage","ThumbnailCarousel","props","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","
|
|
1
|
+
{"version":3,"file":"ThumbnailCarousel.js","names":["React","useThumbnailCarousel","ThumbnailImage","ThumbnailCarousel","props","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","scrollToImage","mainImageButtonClick","createElement","className","id","role","onClick","_extends","priority","imageId","ref","map","index","key","imageIndex"],"sources":["../../../src/variants/ThumbnailCarousel/ThumbnailCarousel.js"],"sourcesContent":["import React from 'react';\nimport useThumbnailCarousel from './useThumbnailCarousel';\nimport ThumbnailImage from './ThumbnailImage';\n\nconst ThumbnailCarousel = props => {\n const {\n thumbnailsListRef,\n imageIds,\n selectedImageId,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n } = useThumbnailCarousel(props);\n\n return (\n <div className=\"thumbnail-carousel\" data-testid=\"thumbnail-carousel\">\n <div className=\"thumbnail-carousel__main_image_container\">\n <div\n id=\"previous-button\"\n className=\"thumbnail-carousel__main_image_container__button\"\n role=\"button\"\n onClick={() => mainImageButtonClick()}>\n <div className=\"arrow arrow--left\" />\n </div>\n <ThumbnailImage {...props} priority imageId={selectedImageId} />\n <div\n id=\"next-button\"\n className=\"thumbnail-carousel__main_image_container__button next\"\n role=\"button\"\n onClick={() => mainImageButtonClick(true)}>\n <div className=\"arrow arrow--right\" />\n </div>\n </div>\n <div className=\"thumbnail-carousel__list\" ref={thumbnailsListRef}>\n {imageIds.map((imageId, index) => (\n <ThumbnailImage\n {...props}\n key={imageId}\n imageIndex={index}\n priority={index < priorityLimit}\n imageId={imageId}\n selectedImageId={selectedImageId}\n scrollToImage={scrollToImage}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IACJC,iBAAiB;IACjBC,QAAQ;IACRC,eAAe;IACfC,aAAa;IACbC,aAAa;IACbC;EACF,CAAC,GAAGT,oBAAoB,CAACG,KAAK,CAAC;EAE/B,oBACEJ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAoB,gBAClEZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAA0C,gBACvDZ,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,iBAAiB;IACpBD,SAAS,EAAC,kDAAkD;IAC5DE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAML,oBAAoB,CAAC;EAAE,gBACtCV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNZ,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAc,QAAA,KAAKZ,KAAK;IAAEa,QAAQ;IAACC,OAAO,EAAEX;EAAgB,EAAE,CAAC,eAChEP,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,aAAa;IAChBD,SAAS,EAAC,uDAAuD;IACjEE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAML,oBAAoB,CAAC,IAAI;EAAE,gBAC1CV,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,eACNZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC,0BAA0B;IAACO,GAAG,EAAEd;EAAkB,GAC9DC,QAAQ,CAACc,GAAG,CAAC,CAACF,OAAO,EAAEG,KAAK,kBAC3BrB,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAc,QAAA,KACTZ,KAAK;IACTkB,GAAG,EAAEJ,OAAQ;IACbK,UAAU,EAAEF,KAAM;IAClBJ,QAAQ,EAAEI,KAAK,GAAGb,aAAc;IAChCU,OAAO,EAAEA,OAAQ;IACjBX,eAAe,EAAEA,eAAgB;IACjCE,aAAa,EAAEA;EAAc,EAC9B,CACF,CACE,CACF,CAAC;AAEV,CAAC;AAED,eAAeN,iBAAiB"}
|
|
@@ -6,17 +6,14 @@ const ThumbnailImage = props => {
|
|
|
6
6
|
loading,
|
|
7
7
|
error,
|
|
8
8
|
className,
|
|
9
|
-
imageRef,
|
|
10
9
|
imageUrl,
|
|
11
10
|
altText,
|
|
12
11
|
priority,
|
|
13
|
-
handleClick
|
|
14
|
-
handleEnableLightbox
|
|
12
|
+
handleClick
|
|
15
13
|
} = useThumbnailImage(props);
|
|
16
14
|
if (error) return error.message;
|
|
17
15
|
if (loading) return null;
|
|
18
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
19
|
-
ref: imageRef,
|
|
20
17
|
className: className,
|
|
21
18
|
onClick: handleClick,
|
|
22
19
|
role: "button",
|
|
@@ -25,7 +22,6 @@ const ThumbnailImage = props => {
|
|
|
25
22
|
src: imageUrl,
|
|
26
23
|
alt: altText,
|
|
27
24
|
sizeKey: "carousel",
|
|
28
|
-
onClick: handleEnableLightbox,
|
|
29
25
|
role: "button",
|
|
30
26
|
priority: priority
|
|
31
27
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThumbnailImage.js","names":["React","LazyImage","useThumbnailImage","ThumbnailImage","props","loading","error","className","
|
|
1
|
+
{"version":3,"file":"ThumbnailImage.js","names":["React","LazyImage","useThumbnailImage","ThumbnailImage","props","loading","error","className","imageUrl","altText","priority","handleClick","message","createElement","onClick","role","src","alt","sizeKey"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js"],"sourcesContent":["import React from 'react';\nimport LazyImage from '../../../components/LazyImage';\nimport useThumbnailImage from './useThumbnailImage';\n\nconst ThumbnailImage = props => {\n const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(\n props\n );\n\n if (error) return error.message;\n if (loading) return null;\n\n return (\n <div className={className} onClick={handleClick} role=\"button\" data-testid=\"thumbnail-image\">\n <LazyImage\n src={imageUrl}\n alt={altText}\n sizeKey=\"carousel\"\n role=\"button\"\n priority={priority}\n />\n </div>\n );\n};\n\nexport default ThumbnailImage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,+BAA+B;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,cAAc,GAAGC,KAAK,IAAI;EAC9B,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,iBAAiB,CAC/FE,KACF,CAAC;EAED,IAAIE,KAAK,EAAE,OAAOA,KAAK,CAACM,OAAO;EAC/B,IAAIP,OAAO,EAAE,OAAO,IAAI;EAExB,oBACEL,KAAA,CAAAa,aAAA;IAAKN,SAAS,EAAEA,SAAU;IAACO,OAAO,EAAEH,WAAY;IAACI,IAAI,EAAC,QAAQ;IAAC,eAAY;EAAiB,gBAC1Ff,KAAA,CAAAa,aAAA,CAACZ,SAAS;IACRe,GAAG,EAAER,QAAS;IACdS,GAAG,EAAER,OAAQ;IACbS,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAC,QAAQ;IACbL,QAAQ,EAAEA;EAAS,CACpB,CACE,CAAC;AAEV,CAAC;AAED,eAAeP,cAAc"}
|
|
@@ -1,38 +1,26 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
2
1
|
import PropTypes from 'prop-types';
|
|
3
2
|
import { useGetImages } from '../../../hooks';
|
|
4
3
|
import { getImageData } from '../../../utils';
|
|
5
4
|
const useThumbnailImage = ({
|
|
6
5
|
imageId,
|
|
6
|
+
imageIndex,
|
|
7
7
|
enableLightbox,
|
|
8
8
|
toggleModal,
|
|
9
9
|
handleSelectedImage,
|
|
10
10
|
priority,
|
|
11
11
|
selectedImageId,
|
|
12
|
-
|
|
12
|
+
scrollToImage
|
|
13
13
|
}) => {
|
|
14
|
-
const imageRef = useRef(null);
|
|
15
|
-
const isSelected = selectedImageId === imageId;
|
|
16
14
|
const {
|
|
17
15
|
data = {},
|
|
18
16
|
loading,
|
|
19
17
|
error
|
|
20
18
|
} = useGetImages(imageId);
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
if (imageRef.current && isSelected) {
|
|
23
|
-
imageRef.current.scrollIntoView({
|
|
24
|
-
behavior: 'smooth',
|
|
25
|
-
block: 'start'
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
}, [isSelected]);
|
|
29
|
-
const handleEnableLightbox = () => {
|
|
30
|
-
if (!enableLightbox) return;
|
|
31
|
-
toggleModal();
|
|
32
|
-
handleSelectedImage(imageId);
|
|
33
|
-
};
|
|
34
19
|
const handleClick = () => {
|
|
35
|
-
|
|
20
|
+
if (scrollToImage) scrollToImage(imageIndex);else if (enableLightbox) {
|
|
21
|
+
toggleModal();
|
|
22
|
+
handleSelectedImage(imageId);
|
|
23
|
+
}
|
|
36
24
|
};
|
|
37
25
|
const {
|
|
38
26
|
url: imageUrl = '',
|
|
@@ -51,12 +39,11 @@ const useThumbnailImage = ({
|
|
|
51
39
|
loading,
|
|
52
40
|
error,
|
|
53
41
|
className,
|
|
54
|
-
|
|
42
|
+
imageId,
|
|
55
43
|
imageUrl,
|
|
56
44
|
altText,
|
|
57
45
|
priority,
|
|
58
|
-
handleClick
|
|
59
|
-
handleEnableLightbox
|
|
46
|
+
handleClick
|
|
60
47
|
};
|
|
61
48
|
};
|
|
62
49
|
useThumbnailImage.propTypes = {
|
|
@@ -66,10 +53,10 @@ useThumbnailImage.propTypes = {
|
|
|
66
53
|
toggleModal: PropTypes.func.isRequired,
|
|
67
54
|
handleSelectedImage: PropTypes.func.isRequired,
|
|
68
55
|
priority: PropTypes.bool.isRequired,
|
|
69
|
-
|
|
56
|
+
scrollToImage: PropTypes.func
|
|
70
57
|
};
|
|
71
58
|
useThumbnailImage.defaultProps = {
|
|
72
|
-
|
|
59
|
+
scrollToImage: null
|
|
73
60
|
};
|
|
74
61
|
export default useThumbnailImage;
|
|
75
62
|
//# sourceMappingURL=useThumbnailImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThumbnailImage.js","names":["
|
|
1
|
+
{"version":3,"file":"useThumbnailImage.js","names":["PropTypes","useGetImages","getImageData","useThumbnailImage","imageId","imageIndex","enableLightbox","toggleModal","handleSelectedImage","priority","selectedImageId","scrollToImage","data","loading","error","handleClick","url","imageUrl","imageData","getFile","altText","className","propTypes","string","isRequired","bool","func","defaultProps"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useGetImages } from '../../../hooks';\nimport { getImageData } from '../../../utils';\n\nconst useThumbnailImage = ({\n imageId,\n imageIndex,\n enableLightbox,\n toggleModal,\n handleSelectedImage,\n priority,\n selectedImageId,\n scrollToImage\n}) => {\n const { data = {}, loading, error } = useGetImages(imageId);\n\n const handleClick = () => {\n if (scrollToImage) scrollToImage(imageIndex);\n else if (enableLightbox) {\n toggleModal();\n handleSelectedImage(imageId);\n }\n };\n\n const { url: imageUrl = '', data: imageData = {} } = data.getFile || {\n getFile: { url: '', data: {} }\n };\n const { altText } = getImageData({}, imageData);\n\n const className =\n selectedImageId === imageId\n ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'\n : 'thumbnail-carousel-image';\n\n return {\n loading,\n error,\n className,\n imageId,\n imageUrl,\n altText,\n priority,\n handleClick\n };\n};\n\nuseThumbnailImage.propTypes = {\n imageId: PropTypes.string.isRequired,\n selectedImageId: PropTypes.string.isRequired,\n enableLightbox: PropTypes.bool.isRequired,\n toggleModal: PropTypes.func.isRequired,\n handleSelectedImage: PropTypes.func.isRequired,\n priority: PropTypes.bool.isRequired,\n scrollToImage: PropTypes.func\n};\n\nuseThumbnailImage.defaultProps = {\n scrollToImage: null\n};\n\nexport default useThumbnailImage;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,OAAO;EACPC,UAAU;EACVC,cAAc;EACdC,WAAW;EACXC,mBAAmB;EACnBC,QAAQ;EACRC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,IAAI,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGb,YAAY,CAACG,OAAO,CAAC;EAE3D,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIJ,aAAa,EAAEA,aAAa,CAACN,UAAU,CAAC,CAAC,KACxC,IAAIC,cAAc,EAAE;MACvBC,WAAW,CAAC,CAAC;MACbC,mBAAmB,CAACJ,OAAO,CAAC;IAC9B;EACF,CAAC;EAED,MAAM;IAAEY,GAAG,EAAEC,QAAQ,GAAG,EAAE;IAAEL,IAAI,EAAEM,SAAS,GAAG,CAAC;EAAE,CAAC,GAAGN,IAAI,CAACO,OAAO,IAAI;IACnEA,OAAO,EAAE;MAAEH,GAAG,EAAE,EAAE;MAAEJ,IAAI,EAAE,CAAC;IAAE;EAC/B,CAAC;EACD,MAAM;IAAEQ;EAAQ,CAAC,GAAGlB,YAAY,CAAC,CAAC,CAAC,EAAEgB,SAAS,CAAC;EAE/C,MAAMG,SAAS,GACbX,eAAe,KAAKN,OAAO,GACvB,6DAA6D,GAC7D,0BAA0B;EAEhC,OAAO;IACLS,OAAO;IACPC,KAAK;IACLO,SAAS;IACTjB,OAAO;IACPa,QAAQ;IACRG,OAAO;IACPX,QAAQ;IACRM;EACF,CAAC;AACH,CAAC;AAEDZ,iBAAiB,CAACmB,SAAS,GAAG;EAC5BlB,OAAO,EAAEJ,SAAS,CAACuB,MAAM,CAACC,UAAU;EACpCd,eAAe,EAAEV,SAAS,CAACuB,MAAM,CAACC,UAAU;EAC5ClB,cAAc,EAAEN,SAAS,CAACyB,IAAI,CAACD,UAAU;EACzCjB,WAAW,EAAEP,SAAS,CAAC0B,IAAI,CAACF,UAAU;EACtChB,mBAAmB,EAAER,SAAS,CAAC0B,IAAI,CAACF,UAAU;EAC9Cf,QAAQ,EAAET,SAAS,CAACyB,IAAI,CAACD,UAAU;EACnCb,aAAa,EAAEX,SAAS,CAAC0B;AAC3B,CAAC;AAEDvB,iBAAiB,CAACwB,YAAY,GAAG;EAC/BhB,aAAa,EAAE;AACjB,CAAC;AAED,eAAeR,iBAAiB"}
|
|
@@ -14,19 +14,24 @@ const useThumbnailCarousel = _ref => {
|
|
|
14
14
|
const thumbnailsListRef = useRef(null);
|
|
15
15
|
const selectedImageId = imageIds[selectedImageIndex];
|
|
16
16
|
const mainImageButtonClick = next => {
|
|
17
|
+
let newIndex;
|
|
17
18
|
if (next) {
|
|
18
19
|
const isLast = imageIds.length - 1 === selectedImageIndex;
|
|
19
|
-
|
|
20
|
-
setSelectedImageIndex(newIndex);
|
|
20
|
+
newIndex = isLast ? 0 : selectedImageIndex + 1;
|
|
21
21
|
} else {
|
|
22
22
|
const isFirst = selectedImageIndex === 0;
|
|
23
|
-
|
|
24
|
-
setSelectedImageIndex(newIndex);
|
|
23
|
+
newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
|
|
25
24
|
}
|
|
25
|
+
scrollToImage(newIndex);
|
|
26
26
|
};
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
const scrollToImage = newIndex => {
|
|
28
|
+
if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
|
|
29
|
+
thumbnailsListRef.current.scrollTo({
|
|
30
|
+
left: 150 * newIndex,
|
|
31
|
+
behavior: 'smooth'
|
|
32
|
+
});
|
|
33
|
+
setSelectedImageIndex(newIndex);
|
|
34
|
+
}
|
|
30
35
|
};
|
|
31
36
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
32
37
|
imageIds,
|
|
@@ -34,7 +39,7 @@ const useThumbnailCarousel = _ref => {
|
|
|
34
39
|
selectedImageIndex,
|
|
35
40
|
thumbnailsListRef,
|
|
36
41
|
priorityLimit,
|
|
37
|
-
|
|
42
|
+
scrollToImage,
|
|
38
43
|
mainImageButtonClick
|
|
39
44
|
});
|
|
40
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThumbnailCarousel.js","names":["useState","useRef","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties","_excluded","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","selectedImageId","mainImageButtonClick","next","isLast","length","
|
|
1
|
+
{"version":3,"file":"useThumbnailCarousel.js","names":["useState","useRef","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties","_excluded","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","selectedImageId","mainImageButtonClick","next","newIndex","isLast","length","isFirst","scrollToImage","current","scrollTo","left","behavior","_objectSpread"],"sources":["../../../src/variants/ThumbnailCarousel/useThumbnailCarousel.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nconst useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {\n const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n const thumbnailsListRef = useRef(null);\n const selectedImageId = imageIds[selectedImageIndex];\n\n const mainImageButtonClick = next => {\n let newIndex;\n if (next) {\n const isLast = imageIds.length - 1 === selectedImageIndex;\n newIndex = isLast ? 0 : selectedImageIndex + 1;\n } else {\n const isFirst = selectedImageIndex === 0;\n newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;\n }\n scrollToImage(newIndex);\n };\n\n const scrollToImage = newIndex => {\n if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {\n thumbnailsListRef.current.scrollTo({\n left: 150 * newIndex,\n behavior: 'smooth'\n });\n setSelectedImageIndex(newIndex);\n }\n };\n\n return {\n ...props,\n imageIds,\n selectedImageId,\n selectedImageIndex,\n thumbnailsListRef,\n priorityLimit,\n scrollToImage,\n mainImageButtonClick\n };\n};\n\nexport default useThumbnailCarousel;\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAExC,MAAMC,oBAAoB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAAF,IAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC/D,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGV,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMW,iBAAiB,GAAGV,MAAM,CAAC,IAAI,CAAC;EACtC,MAAMW,eAAe,GAAGR,QAAQ,CAACK,kBAAkB,CAAC;EAEpD,MAAMI,oBAAoB,GAAGC,IAAI,IAAI;IACnC,IAAIC,QAAQ;IACZ,IAAID,IAAI,EAAE;MACR,MAAME,MAAM,GAAGZ,QAAQ,CAACa,MAAM,GAAG,CAAC,KAAKR,kBAAkB;MACzDM,QAAQ,GAAGC,MAAM,GAAG,CAAC,GAAGP,kBAAkB,GAAG,CAAC;IAChD,CAAC,MAAM;MACL,MAAMS,OAAO,GAAGT,kBAAkB,KAAK,CAAC;MACxCM,QAAQ,GAAGG,OAAO,GAAGd,QAAQ,CAACa,MAAM,GAAG,CAAC,GAAGR,kBAAkB,GAAG,CAAC;IACnE;IACAU,aAAa,CAACJ,QAAQ,CAAC;EACzB,CAAC;EAED,MAAMI,aAAa,GAAGJ,QAAQ,IAAI;IAChC,IAAIJ,iBAAiB,CAACS,OAAO,IAAIX,kBAAkB,KAAKM,QAAQ,EAAE;MAChEJ,iBAAiB,CAACS,OAAO,CAACC,QAAQ,CAAC;QACjCC,IAAI,EAAE,GAAG,GAAGP,QAAQ;QACpBQ,QAAQ,EAAE;MACZ,CAAC,CAAC;MACFb,qBAAqB,CAACK,QAAQ,CAAC;IACjC;EACF,CAAC;EAED,OAAAS,aAAA,CAAAA,aAAA,KACKlB,KAAK;IACRF,QAAQ;IACRQ,eAAe;IACfH,kBAAkB;IAClBE,iBAAiB;IACjBN,aAAa;IACbc,aAAa;IACbN;EAAoB;AAExB,CAAC;AAED,eAAeX,oBAAoB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.141.0-core-styles.
|
|
3
|
+
"version": "0.141.0-core-styles.22",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"lib/*",
|
|
90
90
|
"lib-es/*"
|
|
91
91
|
],
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "5c47857c58e770d9533e569522053fa587f41a38"
|
|
93
93
|
}
|
|
@@ -8,8 +8,8 @@ const ThumbnailCarousel = props => {
|
|
|
8
8
|
imageIds,
|
|
9
9
|
selectedImageId,
|
|
10
10
|
priorityLimit,
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
scrollToImage,
|
|
12
|
+
mainImageButtonClick
|
|
13
13
|
} = useThumbnailCarousel(props);
|
|
14
14
|
|
|
15
15
|
return (
|
|
@@ -22,12 +22,7 @@ const ThumbnailCarousel = props => {
|
|
|
22
22
|
onClick={() => mainImageButtonClick()}>
|
|
23
23
|
<div className="arrow arrow--left" />
|
|
24
24
|
</div>
|
|
25
|
-
<
|
|
26
|
-
className="thumbnail-carousel__main_image_container__main-image"
|
|
27
|
-
data-testid="thumbnail-main-image"
|
|
28
|
-
ref={thumbnailsListRef}>
|
|
29
|
-
<ThumbnailImage {...props} priority imageId={selectedImageId} />
|
|
30
|
-
</div>
|
|
25
|
+
<ThumbnailImage {...props} priority imageId={selectedImageId} />
|
|
31
26
|
<div
|
|
32
27
|
id="next-button"
|
|
33
28
|
className="thumbnail-carousel__main_image_container__button next"
|
|
@@ -36,15 +31,16 @@ const ThumbnailCarousel = props => {
|
|
|
36
31
|
<div className="arrow arrow--right" />
|
|
37
32
|
</div>
|
|
38
33
|
</div>
|
|
39
|
-
<div className="thumbnail-carousel__list">
|
|
34
|
+
<div className="thumbnail-carousel__list" ref={thumbnailsListRef}>
|
|
40
35
|
{imageIds.map((imageId, index) => (
|
|
41
36
|
<ThumbnailImage
|
|
42
37
|
{...props}
|
|
43
38
|
key={imageId}
|
|
39
|
+
imageIndex={index}
|
|
44
40
|
priority={index < priorityLimit}
|
|
45
41
|
imageId={imageId}
|
|
46
42
|
selectedImageId={selectedImageId}
|
|
47
|
-
|
|
43
|
+
scrollToImage={scrollToImage}
|
|
48
44
|
/>
|
|
49
45
|
))}
|
|
50
46
|
</div>
|
|
@@ -3,33 +3,19 @@ import LazyImage from '../../../components/LazyImage';
|
|
|
3
3
|
import useThumbnailImage from './useThumbnailImage';
|
|
4
4
|
|
|
5
5
|
const ThumbnailImage = props => {
|
|
6
|
-
const {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
className,
|
|
10
|
-
imageRef,
|
|
11
|
-
imageUrl,
|
|
12
|
-
altText,
|
|
13
|
-
priority,
|
|
14
|
-
handleClick,
|
|
15
|
-
handleEnableLightbox
|
|
16
|
-
} = useThumbnailImage(props);
|
|
6
|
+
const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(
|
|
7
|
+
props
|
|
8
|
+
);
|
|
17
9
|
|
|
18
10
|
if (error) return error.message;
|
|
19
11
|
if (loading) return null;
|
|
20
12
|
|
|
21
13
|
return (
|
|
22
|
-
<div
|
|
23
|
-
ref={imageRef}
|
|
24
|
-
className={className}
|
|
25
|
-
onClick={handleClick}
|
|
26
|
-
role="button"
|
|
27
|
-
data-testid="thumbnail-image">
|
|
14
|
+
<div className={className} onClick={handleClick} role="button" data-testid="thumbnail-image">
|
|
28
15
|
<LazyImage
|
|
29
16
|
src={imageUrl}
|
|
30
17
|
alt={altText}
|
|
31
18
|
sizeKey="carousel"
|
|
32
|
-
onClick={handleEnableLightbox}
|
|
33
19
|
role="button"
|
|
34
20
|
priority={priority}
|
|
35
21
|
/>
|
|
@@ -1,38 +1,25 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
2
1
|
import PropTypes from 'prop-types';
|
|
3
2
|
import { useGetImages } from '../../../hooks';
|
|
4
3
|
import { getImageData } from '../../../utils';
|
|
5
4
|
|
|
6
5
|
const useThumbnailImage = ({
|
|
7
6
|
imageId,
|
|
7
|
+
imageIndex,
|
|
8
8
|
enableLightbox,
|
|
9
9
|
toggleModal,
|
|
10
10
|
handleSelectedImage,
|
|
11
11
|
priority,
|
|
12
12
|
selectedImageId,
|
|
13
|
-
|
|
13
|
+
scrollToImage
|
|
14
14
|
}) => {
|
|
15
|
-
const imageRef = useRef(null);
|
|
16
|
-
const isSelected = selectedImageId === imageId;
|
|
17
15
|
const { data = {}, loading, error } = useGetImages(imageId);
|
|
18
16
|
|
|
19
|
-
useEffect(
|
|
20
|
-
() => {
|
|
21
|
-
if (imageRef.current && isSelected) {
|
|
22
|
-
imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
[isSelected]
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
const handleEnableLightbox = () => {
|
|
29
|
-
if (!enableLightbox) return;
|
|
30
|
-
toggleModal();
|
|
31
|
-
handleSelectedImage(imageId);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
17
|
const handleClick = () => {
|
|
35
|
-
|
|
18
|
+
if (scrollToImage) scrollToImage(imageIndex);
|
|
19
|
+
else if (enableLightbox) {
|
|
20
|
+
toggleModal();
|
|
21
|
+
handleSelectedImage(imageId);
|
|
22
|
+
}
|
|
36
23
|
};
|
|
37
24
|
|
|
38
25
|
const { url: imageUrl = '', data: imageData = {} } = data.getFile || {
|
|
@@ -49,12 +36,11 @@ const useThumbnailImage = ({
|
|
|
49
36
|
loading,
|
|
50
37
|
error,
|
|
51
38
|
className,
|
|
52
|
-
|
|
39
|
+
imageId,
|
|
53
40
|
imageUrl,
|
|
54
41
|
altText,
|
|
55
42
|
priority,
|
|
56
|
-
handleClick
|
|
57
|
-
handleEnableLightbox
|
|
43
|
+
handleClick
|
|
58
44
|
};
|
|
59
45
|
};
|
|
60
46
|
|
|
@@ -65,11 +51,11 @@ useThumbnailImage.propTypes = {
|
|
|
65
51
|
toggleModal: PropTypes.func.isRequired,
|
|
66
52
|
handleSelectedImage: PropTypes.func.isRequired,
|
|
67
53
|
priority: PropTypes.bool.isRequired,
|
|
68
|
-
|
|
54
|
+
scrollToImage: PropTypes.func
|
|
69
55
|
};
|
|
70
56
|
|
|
71
57
|
useThumbnailImage.defaultProps = {
|
|
72
|
-
|
|
58
|
+
scrollToImage: null
|
|
73
59
|
};
|
|
74
60
|
|
|
75
61
|
export default useThumbnailImage;
|
|
@@ -6,20 +6,25 @@ const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
|
|
|
6
6
|
const selectedImageId = imageIds[selectedImageIndex];
|
|
7
7
|
|
|
8
8
|
const mainImageButtonClick = next => {
|
|
9
|
+
let newIndex;
|
|
9
10
|
if (next) {
|
|
10
11
|
const isLast = imageIds.length - 1 === selectedImageIndex;
|
|
11
|
-
|
|
12
|
-
setSelectedImageIndex(newIndex);
|
|
12
|
+
newIndex = isLast ? 0 : selectedImageIndex + 1;
|
|
13
13
|
} else {
|
|
14
14
|
const isFirst = selectedImageIndex === 0;
|
|
15
|
-
|
|
16
|
-
setSelectedImageIndex(newIndex);
|
|
15
|
+
newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
|
|
17
16
|
}
|
|
17
|
+
scrollToImage(newIndex);
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
const scrollToImage = newIndex => {
|
|
21
|
+
if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
|
|
22
|
+
thumbnailsListRef.current.scrollTo({
|
|
23
|
+
left: 150 * newIndex,
|
|
24
|
+
behavior: 'smooth'
|
|
25
|
+
});
|
|
26
|
+
setSelectedImageIndex(newIndex);
|
|
27
|
+
}
|
|
23
28
|
};
|
|
24
29
|
|
|
25
30
|
return {
|
|
@@ -29,7 +34,7 @@ const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
|
|
|
29
34
|
selectedImageIndex,
|
|
30
35
|
thumbnailsListRef,
|
|
31
36
|
priorityLimit,
|
|
32
|
-
|
|
37
|
+
scrollToImage,
|
|
33
38
|
mainImageButtonClick
|
|
34
39
|
};
|
|
35
40
|
};
|
package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap
CHANGED
|
@@ -19,22 +19,17 @@ exports[`ThumbnailCarousel component renders ThumbnailCarousel without error 1`]
|
|
|
19
19
|
/>
|
|
20
20
|
</div>
|
|
21
21
|
<div
|
|
22
|
-
class="thumbnail-
|
|
23
|
-
data-testid="thumbnail-
|
|
22
|
+
class="thumbnail-carousel-image"
|
|
23
|
+
data-testid="thumbnail-image"
|
|
24
|
+
role="button"
|
|
24
25
|
>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
alt=""
|
|
33
|
-
role="button"
|
|
34
|
-
src="image1.jpg"
|
|
35
|
-
/>
|
|
36
|
-
</span>
|
|
37
|
-
</div>
|
|
26
|
+
<span>
|
|
27
|
+
<img
|
|
28
|
+
alt=""
|
|
29
|
+
role="button"
|
|
30
|
+
src="image1.jpg"
|
|
31
|
+
/>
|
|
32
|
+
</span>
|
|
38
33
|
</div>
|
|
39
34
|
<div
|
|
40
35
|
class="thumbnail-carousel__main_image_container__button next"
|