@crystaldesign/widget-image-carousel 25.10.0-beta.8 → 25.10.0-rc.1
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/build/esm/index.js +195 -62
- package/build/types/widget-image-carousel/src/components/ImageList/index.d.ts +2 -3
- package/build/types/widget-image-carousel/src/components/ImageList/index.d.ts.map +1 -1
- package/build/types/widget-image-carousel/src/components/OpenConfiguratorButton/index.d.ts +13 -0
- package/build/types/widget-image-carousel/src/components/OpenConfiguratorButton/index.d.ts.map +1 -0
- package/build/types/widget-image-carousel/src/components/Swiper/index.d.ts +3 -3
- package/build/types/widget-image-carousel/src/components/Swiper/index.d.ts.map +1 -1
- package/build/types/widget-image-carousel/src/stories/SimpleProductList/kirchner-prod.stories.d.ts +8 -0
- package/build/types/widget-image-carousel/src/stories/SimpleProductList/kirchner-prod.stories.d.ts.map +1 -0
- package/build/types/widget-image-carousel/src/types/index.d.ts +14 -2
- package/build/types/widget-image-carousel/src/types/index.d.ts.map +1 -1
- package/build/types/widget-image-carousel/src/useImageCarousel.d.ts +3 -8
- package/build/types/widget-image-carousel/src/useImageCarousel.d.ts.map +1 -1
- package/build/umd/report.html +1 -1
- package/build/umd/widget-image-carousel.umd.min.js +1 -1
- package/package.json +2 -2
package/build/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
2
|
import { useState, useCallback, useEffect } from 'react';
|
|
3
3
|
import { useCss, useProductData, MediaItem, useConfiguration } from '@crystaldesign/widget-library';
|
|
4
|
-
import { useDivaCore } from '@crystaldesign/diva-core';
|
|
4
|
+
import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
|
|
5
5
|
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
6
6
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
7
7
|
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
@@ -10,7 +10,7 @@ import { Navigation } from 'swiper/modules';
|
|
|
10
10
|
import classNames from 'classnames';
|
|
11
11
|
import 'swiper/css';
|
|
12
12
|
import 'swiper/css/navigation';
|
|
13
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
14
14
|
|
|
15
15
|
(function() {
|
|
16
16
|
const env = {"STAGE":"production"};
|
|
@@ -28,7 +28,9 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
|
|
|
28
28
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
29
29
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
30
30
|
function useImageCarousel(_ref) {
|
|
31
|
+
var _ref2;
|
|
31
32
|
var productId = _ref.productId,
|
|
33
|
+
productIds = _ref.productIds,
|
|
32
34
|
settings = _ref.settings;
|
|
33
35
|
var _useState = useState([]),
|
|
34
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -42,36 +44,54 @@ function useImageCarousel(_ref) {
|
|
|
42
44
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
43
45
|
error = _useState6[0],
|
|
44
46
|
setError = _useState6[1];
|
|
47
|
+
var _useDivaCore = useDivaCore(),
|
|
48
|
+
openComponent = _useDivaCore.actions.openComponent;
|
|
45
49
|
useCss(settings);
|
|
46
50
|
var _useProductData = useProductData({
|
|
47
|
-
productIds: productId,
|
|
51
|
+
productIds: (_ref2 = productId !== null && productId !== void 0 ? productId : productIds) !== null && _ref2 !== void 0 ? _ref2 : undefined,
|
|
48
52
|
widgetType: 'IMAGECAROUSEL'
|
|
49
53
|
}),
|
|
50
54
|
getProductsByDivaNrs = _useProductData.getProductsByDivaNrs,
|
|
51
55
|
getProductByDivaNrAndVariantId = _useProductData.getProductByDivaNrAndVariantId,
|
|
52
56
|
setSelectedProductId = _useProductData.setSelectedProductId,
|
|
53
57
|
selectedProduct = _useProductData.selectedProduct,
|
|
54
|
-
setProductCache = _useProductData.setProductCache
|
|
58
|
+
setProductCache = _useProductData.setProductCache,
|
|
59
|
+
getSimpleProductListByIds = _useProductData.getSimpleProductListByIds;
|
|
55
60
|
var onClickProduct = useCallback(function (productId) {
|
|
56
|
-
|
|
57
|
-
if (
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
var _settings$openConfigu;
|
|
62
|
+
if ((_settings$openConfigu = settings.openConfiguratorCta) !== null && _settings$openConfigu !== void 0 && _settings$openConfigu.enabled) {
|
|
63
|
+
openConfigurator(productId);
|
|
64
|
+
} else {
|
|
65
|
+
setSelectedProductId(productId);
|
|
66
|
+
if (!settings.disableScrollToTop) {
|
|
67
|
+
window.scrollTo({
|
|
68
|
+
top: 0,
|
|
69
|
+
behavior: 'smooth'
|
|
70
|
+
});
|
|
71
|
+
}
|
|
62
72
|
}
|
|
63
|
-
}, [setSelectedProductId]);
|
|
73
|
+
}, [setSelectedProductId, settings.openConfiguratorCta]);
|
|
74
|
+
var openConfigurator = function openConfigurator(productId) {
|
|
75
|
+
openComponent({
|
|
76
|
+
type: 'DIVA_WEBPLANNER',
|
|
77
|
+
parameters: {
|
|
78
|
+
productId: productId
|
|
79
|
+
},
|
|
80
|
+
openInFullscreen: true,
|
|
81
|
+
absoluteFullscreen: true
|
|
82
|
+
});
|
|
83
|
+
};
|
|
64
84
|
useEffect(function () {
|
|
65
85
|
var loadMockups = /*#__PURE__*/function () {
|
|
66
|
-
var
|
|
67
|
-
var _settings$mediaFuncti, mediaFunctionType, foundMedia, _foundMedia;
|
|
86
|
+
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
87
|
+
var _settings$mediaFuncti, mediaFunctionType, foundMedia, _foundMedia, _foundMedia2;
|
|
68
88
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
69
89
|
while (1) switch (_context.prev = _context.next) {
|
|
70
90
|
case 0:
|
|
71
91
|
_context.prev = 0;
|
|
72
92
|
setLoading(true);
|
|
73
93
|
if (!selectedProduct) {
|
|
74
|
-
_context.next =
|
|
94
|
+
_context.next = 26;
|
|
75
95
|
break;
|
|
76
96
|
}
|
|
77
97
|
mediaFunctionType = (_settings$mediaFuncti = settings.mediaFunctionType) !== null && _settings$mediaFuncti !== void 0 ? _settings$mediaFuncti : 'SHO';
|
|
@@ -86,7 +106,7 @@ function useImageCarousel(_ref) {
|
|
|
86
106
|
if (foundMedia) {
|
|
87
107
|
setMedia(foundMedia);
|
|
88
108
|
}
|
|
89
|
-
_context.next =
|
|
109
|
+
_context.next = 26;
|
|
90
110
|
break;
|
|
91
111
|
case 11:
|
|
92
112
|
if (!(settings.type === 'SIMILAR_PRODUCTS')) {
|
|
@@ -100,41 +120,55 @@ function useImageCarousel(_ref) {
|
|
|
100
120
|
if (_foundMedia) {
|
|
101
121
|
setMedia(_foundMedia);
|
|
102
122
|
}
|
|
103
|
-
_context.next =
|
|
123
|
+
_context.next = 26;
|
|
104
124
|
break;
|
|
105
125
|
case 18:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
126
|
+
if (!(settings.type === 'SIMPLE_PRODUCT_LIST' && productIds)) {
|
|
127
|
+
_context.next = 25;
|
|
128
|
+
break;
|
|
129
|
+
}
|
|
130
|
+
_context.next = 21;
|
|
131
|
+
return getSimpleProductList(productIds, mediaFunctionType, settings.description);
|
|
110
132
|
case 21:
|
|
111
|
-
|
|
133
|
+
_foundMedia2 = _context.sent;
|
|
134
|
+
if (_foundMedia2) {
|
|
135
|
+
setMedia(_foundMedia2);
|
|
136
|
+
}
|
|
137
|
+
_context.next = 26;
|
|
138
|
+
break;
|
|
139
|
+
case 25:
|
|
140
|
+
throw new Error('Invalid type or invalid data');
|
|
141
|
+
case 26:
|
|
142
|
+
_context.next = 32;
|
|
143
|
+
break;
|
|
144
|
+
case 28:
|
|
145
|
+
_context.prev = 28;
|
|
112
146
|
_context.t0 = _context["catch"](0);
|
|
113
147
|
console.error(_context.t0);
|
|
114
148
|
setError(_context.t0);
|
|
115
|
-
case
|
|
116
|
-
_context.prev =
|
|
149
|
+
case 32:
|
|
150
|
+
_context.prev = 32;
|
|
117
151
|
setLoading(false);
|
|
118
|
-
return _context.finish(
|
|
119
|
-
case
|
|
152
|
+
return _context.finish(32);
|
|
153
|
+
case 35:
|
|
120
154
|
case "end":
|
|
121
155
|
return _context.stop();
|
|
122
156
|
}
|
|
123
|
-
}, _callee, null, [[0,
|
|
157
|
+
}, _callee, null, [[0, 28, 32, 35]]);
|
|
124
158
|
}));
|
|
125
159
|
return function loadMockups() {
|
|
126
|
-
return
|
|
160
|
+
return _ref3.apply(this, arguments);
|
|
127
161
|
};
|
|
128
162
|
}();
|
|
129
|
-
if (selectedProduct && productId) {
|
|
163
|
+
if (selectedProduct && (productId || productIds !== null && productIds !== void 0 && productIds.length)) {
|
|
130
164
|
loadMockups();
|
|
131
165
|
}
|
|
132
|
-
}, [selectedProduct, productId]);
|
|
166
|
+
}, [selectedProduct, productId, productIds]);
|
|
133
167
|
return {
|
|
134
168
|
media: media,
|
|
135
169
|
error: error,
|
|
136
170
|
loading: loading,
|
|
137
|
-
|
|
171
|
+
onClickProduct: onClickProduct
|
|
138
172
|
};
|
|
139
173
|
function getWallMockups(_x, _x2) {
|
|
140
174
|
return _getWallMockups.apply(this, arguments);
|
|
@@ -350,7 +384,7 @@ function useImageCarousel(_ref) {
|
|
|
350
384
|
case 3:
|
|
351
385
|
_context7.next = 5;
|
|
352
386
|
return Promise.all(similarProductsDivaNr.map(/*#__PURE__*/function () {
|
|
353
|
-
var
|
|
387
|
+
var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(divaNr) {
|
|
354
388
|
var _divaNrParts$;
|
|
355
389
|
var divaNrParts;
|
|
356
390
|
return _regeneratorRuntime.wrap(function _callee3$(_context6) {
|
|
@@ -367,8 +401,8 @@ function useImageCarousel(_ref) {
|
|
|
367
401
|
}
|
|
368
402
|
}, _callee3);
|
|
369
403
|
}));
|
|
370
|
-
return function (
|
|
371
|
-
return
|
|
404
|
+
return function (_x9) {
|
|
405
|
+
return _ref4.apply(this, arguments);
|
|
372
406
|
};
|
|
373
407
|
}()));
|
|
374
408
|
case 5:
|
|
@@ -401,14 +435,74 @@ function useImageCarousel(_ref) {
|
|
|
401
435
|
}));
|
|
402
436
|
return _getSimilarProductMedia.apply(this, arguments);
|
|
403
437
|
}
|
|
438
|
+
function getSimpleProductList(_x6, _x7, _x8) {
|
|
439
|
+
return _getSimpleProductList.apply(this, arguments);
|
|
440
|
+
}
|
|
441
|
+
function _getSimpleProductList() {
|
|
442
|
+
_getSimpleProductList = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(productIds, mediaFunctionType, description) {
|
|
443
|
+
var products;
|
|
444
|
+
return _regeneratorRuntime.wrap(function _callee5$(_context8) {
|
|
445
|
+
while (1) switch (_context8.prev = _context8.next) {
|
|
446
|
+
case 0:
|
|
447
|
+
_context8.next = 2;
|
|
448
|
+
return getSimpleProductListByIds(productIds);
|
|
449
|
+
case 2:
|
|
450
|
+
products = _context8.sent;
|
|
451
|
+
return _context8.abrupt("return", products.data.map(function (p) {
|
|
452
|
+
var _p$media$find$url, _p$media, _p$description;
|
|
453
|
+
return {
|
|
454
|
+
url: (_p$media$find$url = p === null || p === void 0 || (_p$media = p.media) === null || _p$media === void 0 || (_p$media = _p$media.find(function (m) {
|
|
455
|
+
return m.functionType === mediaFunctionType;
|
|
456
|
+
})) === null || _p$media === void 0 ? void 0 : _p$media.url) !== null && _p$media$find$url !== void 0 ? _p$media$find$url : p.image,
|
|
457
|
+
productId: p._id,
|
|
458
|
+
description: description ? (_p$description = p[description]) !== null && _p$description !== void 0 ? _p$description : description : undefined
|
|
459
|
+
};
|
|
460
|
+
}));
|
|
461
|
+
case 4:
|
|
462
|
+
case "end":
|
|
463
|
+
return _context8.stop();
|
|
464
|
+
}
|
|
465
|
+
}, _callee5);
|
|
466
|
+
}));
|
|
467
|
+
return _getSimpleProductList.apply(this, arguments);
|
|
468
|
+
}
|
|
404
469
|
}
|
|
405
470
|
|
|
471
|
+
var OpenConfiguratorButton = function OpenConfiguratorButton(_ref) {
|
|
472
|
+
var _settings$ctaText;
|
|
473
|
+
var settings = _ref.settings,
|
|
474
|
+
onClick = _ref.onClick;
|
|
475
|
+
var _useTranslation = useTranslation(),
|
|
476
|
+
t = _useTranslation.t;
|
|
477
|
+
if (!settings.enabled) return /*#__PURE__*/jsx(Fragment, {});
|
|
478
|
+
return /*#__PURE__*/jsx("button", {
|
|
479
|
+
className: classNames('widget-image-carousel-open-configurator-button', settings.className),
|
|
480
|
+
onClick: onClick,
|
|
481
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
482
|
+
style: {
|
|
483
|
+
display: 'flex',
|
|
484
|
+
alignItems: 'center',
|
|
485
|
+
justifyContent: 'center'
|
|
486
|
+
},
|
|
487
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
488
|
+
className: "widget-image-carousel-open-configurator-text",
|
|
489
|
+
children: (_settings$ctaText = settings.ctaText) !== null && _settings$ctaText !== void 0 ? _settings$ctaText : t('configurator.CONFIGURE_NOW')
|
|
490
|
+
}), settings.ctaIcon && /*#__PURE__*/jsx("img", {
|
|
491
|
+
src: settings.ctaIcon,
|
|
492
|
+
alt: "Configurator Icon",
|
|
493
|
+
className: "widget-image-carousel-open-configurator-icon"
|
|
494
|
+
})]
|
|
495
|
+
})
|
|
496
|
+
});
|
|
497
|
+
};
|
|
498
|
+
|
|
406
499
|
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
407
500
|
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
408
501
|
var SwiperComponent = function SwiperComponent(_ref) {
|
|
409
502
|
var media = _ref.media,
|
|
410
503
|
settings = _ref.settings,
|
|
411
|
-
|
|
504
|
+
onClickProduct = _ref.onClickProduct,
|
|
505
|
+
isMobile = _ref.isMobile;
|
|
412
506
|
return /*#__PURE__*/jsx("div", {
|
|
413
507
|
className: classNames(['diva-widget-image-carousel-container']),
|
|
414
508
|
children: /*#__PURE__*/jsx(Swiper, _objectSpread$1(_objectSpread$1({
|
|
@@ -417,12 +511,13 @@ var SwiperComponent = function SwiperComponent(_ref) {
|
|
|
417
511
|
className: classNames(['diva-widget-image-carousel-swiper'])
|
|
418
512
|
}, settings.sliderProp), {}, {
|
|
419
513
|
children: media.map(function (m, i) {
|
|
514
|
+
var _settings$openConfigu, _settings$openConfigu2, _settings$openConfigu3, _settings$openConfigu4;
|
|
420
515
|
return /*#__PURE__*/jsx(SwiperSlide, {
|
|
421
516
|
className: classNames(['diva-widget-image-carousel-slide']),
|
|
422
517
|
children: settings.description ? /*#__PURE__*/jsxs("div", {
|
|
423
518
|
className: classNames(['diva-widget-image-carousel-slide-description-image']),
|
|
424
519
|
onClick: function onClick() {
|
|
425
|
-
return
|
|
520
|
+
return onClickProduct(m.productId);
|
|
426
521
|
},
|
|
427
522
|
children: [/*#__PURE__*/jsx(MediaItem, {
|
|
428
523
|
mediaUrl: m.url,
|
|
@@ -430,6 +525,17 @@ var SwiperComponent = function SwiperComponent(_ref) {
|
|
|
430
525
|
config: {
|
|
431
526
|
disableSirv: false,
|
|
432
527
|
sirvProps: settings.sirvProps
|
|
528
|
+
},
|
|
529
|
+
overlay: !isMobile && (_settings$openConfigu = settings.openConfiguratorCta) !== null && _settings$openConfigu !== void 0 && _settings$openConfigu.enabled ? /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
530
|
+
settings: settings.openConfiguratorCta,
|
|
531
|
+
onClick: function onClick() {
|
|
532
|
+
return onClickProduct(m.productId);
|
|
533
|
+
}
|
|
534
|
+
}) : undefined
|
|
535
|
+
}), ((_settings$openConfigu2 = settings.openConfiguratorCta) === null || _settings$openConfigu2 === void 0 ? void 0 : _settings$openConfigu2.enabled) && isMobile && /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
536
|
+
settings: settings.openConfiguratorCta,
|
|
537
|
+
onClick: function onClick() {
|
|
538
|
+
return onClickProduct(m.productId);
|
|
433
539
|
}
|
|
434
540
|
}), /*#__PURE__*/jsx("div", {
|
|
435
541
|
className: classNames(['diva-widget-image-carousel-slide-description']),
|
|
@@ -437,17 +543,30 @@ var SwiperComponent = function SwiperComponent(_ref) {
|
|
|
437
543
|
children: m.description
|
|
438
544
|
})
|
|
439
545
|
})]
|
|
440
|
-
}) : /*#__PURE__*/
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
546
|
+
}) : /*#__PURE__*/jsxs(Fragment, {
|
|
547
|
+
children: [/*#__PURE__*/jsx(MediaItem, {
|
|
548
|
+
mediaUrl: m.url,
|
|
549
|
+
isCurrentlyVisible: true,
|
|
550
|
+
config: {
|
|
551
|
+
disableSirv: false,
|
|
552
|
+
sirvProps: settings.sirvProps
|
|
553
|
+
},
|
|
554
|
+
className: classNames(['diva-widget-image-carousel-slide-image']),
|
|
555
|
+
onClick: function onClick() {
|
|
556
|
+
return onClickProduct(m.productId);
|
|
557
|
+
},
|
|
558
|
+
overlay: !isMobile && (_settings$openConfigu3 = settings.openConfiguratorCta) !== null && _settings$openConfigu3 !== void 0 && _settings$openConfigu3.enabled ? /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
559
|
+
settings: settings.openConfiguratorCta,
|
|
560
|
+
onClick: function onClick() {
|
|
561
|
+
return onClickProduct(m.productId);
|
|
562
|
+
}
|
|
563
|
+
}) : undefined
|
|
564
|
+
}), ((_settings$openConfigu4 = settings.openConfiguratorCta) === null || _settings$openConfigu4 === void 0 ? void 0 : _settings$openConfigu4.enabled) && isMobile && /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
565
|
+
settings: settings.openConfiguratorCta,
|
|
566
|
+
onClick: function onClick() {
|
|
567
|
+
return onClickProduct(m.productId);
|
|
568
|
+
}
|
|
569
|
+
})]
|
|
451
570
|
})
|
|
452
571
|
}, i);
|
|
453
572
|
})
|
|
@@ -458,16 +577,17 @@ var SwiperComponent = function SwiperComponent(_ref) {
|
|
|
458
577
|
var ImageList = function ImageList(_ref) {
|
|
459
578
|
var media = _ref.media,
|
|
460
579
|
settings = _ref.settings,
|
|
461
|
-
|
|
580
|
+
onClickProduct = _ref.onClickProduct;
|
|
462
581
|
return /*#__PURE__*/jsx("div", {
|
|
463
582
|
className: classNames(['diva-widget-image-list']),
|
|
464
583
|
children: media.map(function (m, i) {
|
|
584
|
+
var _settings$openConfigu, _settings$openConfigu2;
|
|
465
585
|
return /*#__PURE__*/jsx("div", {
|
|
466
586
|
className: classNames(['diva-widget-image-list-item']),
|
|
467
587
|
children: settings.description ? /*#__PURE__*/jsxs("div", {
|
|
468
588
|
className: classNames(['diva-widget-image-list-item-description-image']),
|
|
469
589
|
onClick: function onClick() {
|
|
470
|
-
return
|
|
590
|
+
return onClickProduct(m.productId);
|
|
471
591
|
},
|
|
472
592
|
children: [/*#__PURE__*/jsx(MediaItem, {
|
|
473
593
|
mediaUrl: m.url,
|
|
@@ -476,23 +596,35 @@ var ImageList = function ImageList(_ref) {
|
|
|
476
596
|
disableSirv: false,
|
|
477
597
|
sirvProps: settings.sirvProps
|
|
478
598
|
}
|
|
599
|
+
}), ((_settings$openConfigu = settings.openConfiguratorCta) === null || _settings$openConfigu === void 0 ? void 0 : _settings$openConfigu.enabled) && /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
600
|
+
settings: settings.openConfiguratorCta,
|
|
601
|
+
onClick: function onClick() {
|
|
602
|
+
return onClickProduct(m.productId);
|
|
603
|
+
}
|
|
479
604
|
}), /*#__PURE__*/jsx("div", {
|
|
480
605
|
className: classNames(['diva-widget-image-list-item-description']),
|
|
481
606
|
children: /*#__PURE__*/jsx("span", {
|
|
482
607
|
children: m.description
|
|
483
608
|
})
|
|
484
609
|
})]
|
|
485
|
-
}) : /*#__PURE__*/
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
610
|
+
}) : /*#__PURE__*/jsxs(Fragment, {
|
|
611
|
+
children: [/*#__PURE__*/jsx(MediaItem, {
|
|
612
|
+
mediaUrl: m.url,
|
|
613
|
+
isCurrentlyVisible: true,
|
|
614
|
+
config: {
|
|
615
|
+
disableSirv: false,
|
|
616
|
+
sirvProps: settings.sirvProps
|
|
617
|
+
},
|
|
618
|
+
className: classNames(['diva-widget-image-list-item-image']),
|
|
619
|
+
onClick: function onClick() {
|
|
620
|
+
return onClickProduct(m.productId);
|
|
621
|
+
}
|
|
622
|
+
}), ((_settings$openConfigu2 = settings.openConfiguratorCta) === null || _settings$openConfigu2 === void 0 ? void 0 : _settings$openConfigu2.enabled) && /*#__PURE__*/jsx(OpenConfiguratorButton, {
|
|
623
|
+
settings: settings.openConfiguratorCta,
|
|
624
|
+
onClick: function onClick() {
|
|
625
|
+
return onClickProduct(m.productId);
|
|
626
|
+
}
|
|
627
|
+
})]
|
|
496
628
|
})
|
|
497
629
|
}, i);
|
|
498
630
|
})
|
|
@@ -504,7 +636,7 @@ function MainComponent(props) {
|
|
|
504
636
|
media = _useImageCarousel.media,
|
|
505
637
|
error = _useImageCarousel.error;
|
|
506
638
|
_useImageCarousel.loading;
|
|
507
|
-
var
|
|
639
|
+
var onClickProduct = _useImageCarousel.onClickProduct;
|
|
508
640
|
var _useDivaCore = useDivaCore(),
|
|
509
641
|
isMobile = _useDivaCore.state.isMobile;
|
|
510
642
|
if (error) return /*#__PURE__*/jsx("div", {
|
|
@@ -514,13 +646,14 @@ function MainComponent(props) {
|
|
|
514
646
|
return /*#__PURE__*/jsx(ImageList, {
|
|
515
647
|
media: media,
|
|
516
648
|
settings: props.settings,
|
|
517
|
-
|
|
649
|
+
onClickProduct: onClickProduct
|
|
518
650
|
});
|
|
519
651
|
}
|
|
520
652
|
return /*#__PURE__*/jsx(SwiperComponent, {
|
|
521
653
|
media: media,
|
|
522
654
|
settings: props.settings,
|
|
523
|
-
|
|
655
|
+
onClickProduct: onClickProduct,
|
|
656
|
+
isMobile: isMobile
|
|
524
657
|
});
|
|
525
658
|
}
|
|
526
659
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Media } from '@crystaldesign/widget-image-carousel/
|
|
3
|
-
import { Configuration } from '@crystaldesign/widget-image-carousel/types';
|
|
2
|
+
import { Configuration, Media } from '@crystaldesign/widget-image-carousel/types';
|
|
4
3
|
interface ImageListProps {
|
|
5
4
|
media: Media[];
|
|
6
5
|
settings: Configuration;
|
|
7
|
-
|
|
6
|
+
onClickProduct: (id: string) => void;
|
|
8
7
|
}
|
|
9
8
|
export declare const ImageList: React.FC<ImageListProps>;
|
|
10
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ImageList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ImageList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,4CAA4C,CAAC;AAGlF,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiC9C,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface OpenConfiguratorButtonProps {
|
|
3
|
+
settings: {
|
|
4
|
+
enabled: boolean;
|
|
5
|
+
className: string;
|
|
6
|
+
ctaText?: string;
|
|
7
|
+
ctaIcon?: string;
|
|
8
|
+
};
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const OpenConfiguratorButton: React.FC<OpenConfiguratorButtonProps>;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
package/build/types/widget-image-carousel/src/components/OpenConfiguratorButton/index.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/OpenConfiguratorButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,2BAA2B;IACnC,QAAQ,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAWxE,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import 'swiper/css';
|
|
3
3
|
import 'swiper/css/navigation';
|
|
4
|
-
import { Media } from '@crystaldesign/widget-image-carousel/
|
|
5
|
-
import { Configuration } from '@crystaldesign/widget-image-carousel/types';
|
|
4
|
+
import { Configuration, Media } from '@crystaldesign/widget-image-carousel/types';
|
|
6
5
|
interface SwiperComponentProps {
|
|
7
6
|
media: Media[];
|
|
8
7
|
settings: Configuration;
|
|
9
|
-
|
|
8
|
+
onClickProduct: (id: string) => void;
|
|
9
|
+
isMobile: boolean;
|
|
10
10
|
}
|
|
11
11
|
export declare const SwiperComponent: React.FC<SwiperComponentProps>;
|
|
12
12
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Swiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Swiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,4CAA4C,CAAC;AAGlF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiD1D,CAAC"}
|
package/build/types/widget-image-carousel/src/stories/SimpleProductList/kirchner-prod.stories.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { WithDivaMock } from '@crystaldesign/diva-core';
|
|
3
|
+
import { ImageCarouselProps } from '../../types';
|
|
4
|
+
declare const meta: Meta<WithDivaMock<ImageCarouselProps>>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<WithDivaMock<ImageCarouselProps>>;
|
|
7
|
+
export declare const ImageCarousel: Story;
|
|
8
|
+
//# sourceMappingURL=kirchner-prod.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kirchner-prod.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/SimpleProductList/kirchner-prod.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAqB,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAmBhD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;AA8CxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
|
|
@@ -2,10 +2,11 @@ import { BaseConfiguration } from '@crystaldesign/widget-library';
|
|
|
2
2
|
import { SwiperProps } from 'swiper/react';
|
|
3
3
|
export interface ImageCarouselProps {
|
|
4
4
|
settings: Configuration;
|
|
5
|
-
productId
|
|
5
|
+
productId?: string;
|
|
6
|
+
productIds?: string[];
|
|
6
7
|
}
|
|
7
8
|
export interface Configuration extends BaseConfiguration {
|
|
8
|
-
type: 'WALL_MOCKUPS' | 'SIMILAR_PRODUCTS';
|
|
9
|
+
type: 'WALL_MOCKUPS' | 'SIMILAR_PRODUCTS' | 'SIMPLE_PRODUCT_LIST';
|
|
9
10
|
mediaFunctionType?: string;
|
|
10
11
|
description?: string;
|
|
11
12
|
sliderProp?: SwiperProps;
|
|
@@ -14,5 +15,16 @@ export interface Configuration extends BaseConfiguration {
|
|
|
14
15
|
[data: string]: string;
|
|
15
16
|
};
|
|
16
17
|
avoidUsingSwiperOnMobile?: boolean;
|
|
18
|
+
openConfiguratorCta?: {
|
|
19
|
+
enabled: boolean;
|
|
20
|
+
className: string;
|
|
21
|
+
ctaText?: string;
|
|
22
|
+
ctaIcon?: string;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export interface Media {
|
|
26
|
+
url: string;
|
|
27
|
+
description?: string;
|
|
28
|
+
productId: string;
|
|
17
29
|
}
|
|
18
30
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,mBAAmB,CAAC,EAAE;QACpB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
import { ImageCarouselProps } from './types';
|
|
2
|
-
export
|
|
3
|
-
url: string;
|
|
4
|
-
description?: string;
|
|
5
|
-
productId: string;
|
|
6
|
-
}
|
|
7
|
-
export declare function useImageCarousel({ productId, settings }: ImageCarouselProps): {
|
|
1
|
+
import { ImageCarouselProps, Media } from './types';
|
|
2
|
+
export declare function useImageCarousel({ productId, productIds, settings }: ImageCarouselProps): {
|
|
8
3
|
media: Media[];
|
|
9
4
|
error: Error | undefined;
|
|
10
5
|
loading: boolean;
|
|
11
|
-
|
|
6
|
+
onClickProduct: (productId: string) => void;
|
|
12
7
|
};
|
|
13
8
|
//# sourceMappingURL=useImageCarousel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKpD,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;gCAiBxE,MAAM;EA0LrB"}
|