pb-sxp-ui 1.15.13-alpha.1 → 1.15.13-alpha.2
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/dist/index.cjs +333 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +333 -24
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +333 -24
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyStoryPreview/VideoWidget.js +5 -2
- package/es/core/components/DiyStoryPreview/index.d.ts +2 -0
- package/es/core/components/DiyStoryPreview/index.js +277 -18
- package/es/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/es/core/components/SxpPageRender/RenderCard.js +4 -4
- package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/es/materials/sxp/template/components/EventProvider.js +2 -2
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +5 -2
- package/lib/core/components/DiyStoryPreview/index.d.ts +2 -0
- package/lib/core/components/DiyStoryPreview/index.js +277 -18
- package/lib/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
- package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/lib/materials/sxp/template/components/EventProvider.js +2 -2
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
|
@@ -10099,7 +10099,15 @@
|
|
|
10099
10099
|
wordBreak: 'break-word'
|
|
10100
10100
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
10101
10101
|
React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
10102
|
-
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
10102
|
+
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
10103
|
+
textDecoration: 'underline',
|
|
10104
|
+
cursor: 'pointer',
|
|
10105
|
+
outline: 'none',
|
|
10106
|
+
border: 'none',
|
|
10107
|
+
boxSizing: 'content-box',
|
|
10108
|
+
padding: 0,
|
|
10109
|
+
background: 'transparent'
|
|
10110
|
+
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
|
10103
10111
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
|
10104
10112
|
} }))));
|
|
10105
10113
|
};
|
|
@@ -12457,7 +12465,7 @@ Made in Italy` })));
|
|
|
12457
12465
|
const handleClick = lodash.throttle((e) => {
|
|
12458
12466
|
var _a, _b, _c, _d, _e, _f;
|
|
12459
12467
|
e.preventDefault();
|
|
12460
|
-
const item = multItem
|
|
12468
|
+
const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
|
|
12461
12469
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
|
12462
12470
|
eventSubject: 'clickCta',
|
|
12463
12471
|
eventDescription: 'User clicked the CTA'
|
|
@@ -12484,7 +12492,7 @@ Made in Italy` })));
|
|
|
12484
12492
|
setElement(null);
|
|
12485
12493
|
}
|
|
12486
12494
|
}, [element, popup]);
|
|
12487
|
-
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
|
12495
|
+
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
|
12488
12496
|
};
|
|
12489
12497
|
var EventProvider$1 = React.memo(EventProvider);
|
|
12490
12498
|
|
|
@@ -13080,6 +13088,7 @@ Made in Italy` })));
|
|
|
13080
13088
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
|
13081
13089
|
const { sxpParameter } = useSxpDataSource();
|
|
13082
13090
|
const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
|
|
13091
|
+
console.log(recData, '222');
|
|
13083
13092
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
13084
13093
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
13085
13094
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -13286,6 +13295,7 @@ Made in Italy` })));
|
|
|
13286
13295
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
|
13287
13296
|
const { sxpParameter } = useSxpDataSource();
|
|
13288
13297
|
const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
|
|
13298
|
+
console.log(recData, '333');
|
|
13289
13299
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
13290
13300
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
13291
13301
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -18304,7 +18314,7 @@ Made in Italy` })));
|
|
|
18304
18314
|
* @Author: binruan@chatlabs.com
|
|
18305
18315
|
* @Date: 2023-12-26 16:11:34
|
|
18306
18316
|
* @LastEditors: binruan@chatlabs.com
|
|
18307
|
-
* @LastEditTime:
|
|
18317
|
+
* @LastEditTime: 2025-03-26 19:32:00
|
|
18308
18318
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
|
18309
18319
|
*
|
|
18310
18320
|
*/
|
|
@@ -18314,10 +18324,10 @@ Made in Italy` })));
|
|
|
18314
18324
|
return null;
|
|
18315
18325
|
const renderComp = React.useMemo(() => {
|
|
18316
18326
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
|
|
18317
|
-
|
|
18327
|
+
// 如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
|
|
18318
18328
|
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
|
|
18319
18329
|
return;
|
|
18320
|
-
|
|
18330
|
+
// 默认不渲染category为cta类型的组件，该类型的组件只用于某一处
|
|
18321
18331
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
|
18322
18332
|
return;
|
|
18323
18333
|
if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
|
|
@@ -18334,10 +18344,10 @@ Made in Italy` })));
|
|
|
18334
18344
|
const Component = withBindDataSource(t);
|
|
18335
18345
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
|
18336
18346
|
const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
|
|
18337
|
-
|
|
18347
|
+
const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
|
18338
18348
|
if (style.hasOwnProperty('backdropFilter')) {
|
|
18339
|
-
|
|
18340
|
-
style
|
|
18349
|
+
const sbf = style.backdropFilter;
|
|
18350
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
|
18341
18351
|
}
|
|
18342
18352
|
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
|
|
18343
18353
|
}
|
|
@@ -19501,6 +19511,7 @@ Made in Italy` })));
|
|
|
19501
19511
|
}, [bffEventReport, data, index, isFirstPlay]);
|
|
19502
19512
|
const handleLoadedMetadata = React.useCallback(() => {
|
|
19503
19513
|
var _a;
|
|
19514
|
+
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
|
19504
19515
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
19505
19516
|
setIsLoadFinish(true);
|
|
19506
19517
|
}, []);
|
|
@@ -19574,6 +19585,8 @@ Made in Italy` })));
|
|
|
19574
19585
|
}, []);
|
|
19575
19586
|
const handlePause = () => {
|
|
19576
19587
|
var _a, _b, _c, _d, _e, _f;
|
|
19588
|
+
if (!videoRef.current || !isActive)
|
|
19589
|
+
return;
|
|
19577
19590
|
if (!loopPlay)
|
|
19578
19591
|
return;
|
|
19579
19592
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
@@ -19585,6 +19598,7 @@ Made in Italy` })));
|
|
|
19585
19598
|
}
|
|
19586
19599
|
};
|
|
19587
19600
|
// useEffect(() => {
|
|
19601
|
+
// if (!videoRef.current) return;
|
|
19588
19602
|
// if (!isActive) return;
|
|
19589
19603
|
// if (!loopPlay) {
|
|
19590
19604
|
// videoRef?.current?.pause();
|
|
@@ -19604,7 +19618,6 @@ Made in Italy` })));
|
|
|
19604
19618
|
if (!videoPlayerWrapperNode)
|
|
19605
19619
|
return;
|
|
19606
19620
|
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
|
19607
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
|
19608
19621
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
19609
19622
|
return;
|
|
19610
19623
|
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
|
@@ -19615,6 +19628,7 @@ Made in Italy` })));
|
|
|
19615
19628
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
19616
19629
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
19617
19630
|
var _a;
|
|
19631
|
+
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
|
19618
19632
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
19619
19633
|
});
|
|
19620
19634
|
}
|
|
@@ -19637,7 +19651,7 @@ Made in Italy` })));
|
|
|
19637
19651
|
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
|
19638
19652
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
|
19639
19653
|
};
|
|
19640
|
-
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive]);
|
|
19654
|
+
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
|
19641
19655
|
React.useMemo(() => {
|
|
19642
19656
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
|
19643
19657
|
return null;
|
|
@@ -19670,7 +19684,7 @@ Made in Italy` })));
|
|
|
19670
19684
|
* @Author: binruan@chatlabs.com
|
|
19671
19685
|
* @Date: 2025-03-25 13:54:27
|
|
19672
19686
|
* @LastEditors: binruan@chatlabs.com
|
|
19673
|
-
* @LastEditTime: 2025-03-26
|
|
19687
|
+
* @LastEditTime: 2025-03-26 22:40:52
|
|
19674
19688
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
|
19675
19689
|
*
|
|
19676
19690
|
*/
|
|
@@ -19680,6 +19694,184 @@ Made in Italy` })));
|
|
|
19680
19694
|
});
|
|
19681
19695
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
19682
19696
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
19697
|
+
const recData = {
|
|
19698
|
+
position: 0,
|
|
19699
|
+
isCollected: false,
|
|
19700
|
+
product: null,
|
|
19701
|
+
video: {
|
|
19702
|
+
appId: null,
|
|
19703
|
+
itemId: 'VIDEOSsRgI1695278974368',
|
|
19704
|
+
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
|
19705
|
+
enTitle: null,
|
|
19706
|
+
icon: null,
|
|
19707
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
|
19708
|
+
link: null,
|
|
19709
|
+
linkTitle: null,
|
|
19710
|
+
linkType: null,
|
|
19711
|
+
menuCategoryId: null,
|
|
19712
|
+
remark: null,
|
|
19713
|
+
tags: [
|
|
19714
|
+
'Gift-Giving',
|
|
19715
|
+
'Daily Wear',
|
|
19716
|
+
'Business Formal',
|
|
19717
|
+
'Sports/Casual',
|
|
19718
|
+
'Anniversary Gifts',
|
|
19719
|
+
'Wedding/Engagement',
|
|
19720
|
+
'Formal Dinner/Party'
|
|
19721
|
+
],
|
|
19722
|
+
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19723
|
+
value: 385,
|
|
19724
|
+
weight: null,
|
|
19725
|
+
bindCta: null,
|
|
19726
|
+
bindProduct: null,
|
|
19727
|
+
bindProducts: [
|
|
19728
|
+
{
|
|
19729
|
+
appId: 'wx448578f8851f3dce',
|
|
19730
|
+
itemId: 'test02178888',
|
|
19731
|
+
title: 'christian dior小包包 新CDN',
|
|
19732
|
+
enTitle: null,
|
|
19733
|
+
icon: null,
|
|
19734
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
19735
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
19736
|
+
linkTitle: '',
|
|
19737
|
+
linkType: 'MP',
|
|
19738
|
+
menuCategoryId: null,
|
|
19739
|
+
remark: null,
|
|
19740
|
+
tags: [],
|
|
19741
|
+
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19742
|
+
value: null,
|
|
19743
|
+
weight: null,
|
|
19744
|
+
bindCta: {
|
|
19745
|
+
appId: 'wx448578f8851f3dce',
|
|
19746
|
+
itemId: 'CTA3KofE1716186622249',
|
|
19747
|
+
title: 'SHOP NOW 立即购买',
|
|
19748
|
+
enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
|
|
19749
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
|
19750
|
+
cover: null,
|
|
19751
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
19752
|
+
linkTitle: '',
|
|
19753
|
+
linkType: 'MP',
|
|
19754
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
19755
|
+
remark: null,
|
|
19756
|
+
tags: [
|
|
19757
|
+
"Woman's Perfumes",
|
|
19758
|
+
'Plates & Bowls',
|
|
19759
|
+
'Glasses',
|
|
19760
|
+
'Multicolor',
|
|
19761
|
+
'Carafes',
|
|
19762
|
+
'Tea & Coffee',
|
|
19763
|
+
'Green',
|
|
19764
|
+
'Grey',
|
|
19765
|
+
'Cutlery'
|
|
19766
|
+
],
|
|
19767
|
+
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19768
|
+
value: null,
|
|
19769
|
+
weight: null
|
|
19770
|
+
},
|
|
19771
|
+
collection: 'Ricco',
|
|
19772
|
+
currency: 'INR-₹',
|
|
19773
|
+
homePage: [
|
|
19774
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
19775
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
|
19776
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
|
19777
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
|
19778
|
+
],
|
|
19779
|
+
info: 'test',
|
|
19780
|
+
price: 53200,
|
|
19781
|
+
shippingInfo: null,
|
|
19782
|
+
taxInfo: null
|
|
19783
|
+
},
|
|
19784
|
+
{
|
|
19785
|
+
appId: null,
|
|
19786
|
+
itemId: '113J631A0684_C520',
|
|
19787
|
+
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
|
19788
|
+
enTitle: null,
|
|
19789
|
+
icon: null,
|
|
19790
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
19791
|
+
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
|
19792
|
+
linkTitle: null,
|
|
19793
|
+
linkType: 'WEB',
|
|
19794
|
+
menuCategoryId: null,
|
|
19795
|
+
remark: null,
|
|
19796
|
+
tags: [],
|
|
19797
|
+
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19798
|
+
value: null,
|
|
19799
|
+
weight: null,
|
|
19800
|
+
bindCta: {
|
|
19801
|
+
appId: null,
|
|
19802
|
+
itemId: 'CTAAfaKf1730796437032',
|
|
19803
|
+
title: 'test',
|
|
19804
|
+
enTitle: 'test',
|
|
19805
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
|
19806
|
+
cover: null,
|
|
19807
|
+
link: null,
|
|
19808
|
+
linkTitle: null,
|
|
19809
|
+
linkType: null,
|
|
19810
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
19811
|
+
remark: '',
|
|
19812
|
+
tags: [],
|
|
19813
|
+
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19814
|
+
value: null,
|
|
19815
|
+
weight: null
|
|
19816
|
+
},
|
|
19817
|
+
collection: 'Jacquard de coton éponge bleu',
|
|
19818
|
+
currency: 'EUR-€',
|
|
19819
|
+
homePage: [
|
|
19820
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
19821
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
|
19822
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
|
19823
|
+
],
|
|
19824
|
+
info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
|
|
19825
|
+
price: 1800,
|
|
19826
|
+
shippingInfo: null,
|
|
19827
|
+
taxInfo: null
|
|
19828
|
+
},
|
|
19829
|
+
{
|
|
19830
|
+
appId: null,
|
|
19831
|
+
itemId: 'S5573CRIW_M928',
|
|
19832
|
+
title: 'Mini Dior Book Tote',
|
|
19833
|
+
enTitle: null,
|
|
19834
|
+
icon: null,
|
|
19835
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
19836
|
+
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
|
19837
|
+
linkTitle: null,
|
|
19838
|
+
linkType: 'WEB',
|
|
19839
|
+
menuCategoryId: null,
|
|
19840
|
+
remark: null,
|
|
19841
|
+
tags: ['ダイヤモンド'],
|
|
19842
|
+
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19843
|
+
value: null,
|
|
19844
|
+
weight: null,
|
|
19845
|
+
bindCta: null,
|
|
19846
|
+
collection: null,
|
|
19847
|
+
currency: 'GBP-￡',
|
|
19848
|
+
homePage: [
|
|
19849
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
19850
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
|
19851
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
|
19852
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
|
19853
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
|
19854
|
+
],
|
|
19855
|
+
info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
|
|
19856
|
+
price: 1950,
|
|
19857
|
+
shippingInfo: null,
|
|
19858
|
+
taxInfo: null
|
|
19859
|
+
}
|
|
19860
|
+
],
|
|
19861
|
+
url: null,
|
|
19862
|
+
blockCta: 1,
|
|
19863
|
+
blockProduct: 1,
|
|
19864
|
+
hashTags: [
|
|
19865
|
+
'Sports/Casual',
|
|
19866
|
+
'Formal Dinner/Party',
|
|
19867
|
+
'Business Formal',
|
|
19868
|
+
'Wedding/Engagement',
|
|
19869
|
+
'Gift-Giving',
|
|
19870
|
+
'Daily Wear',
|
|
19871
|
+
'Anniversary Gifts'
|
|
19872
|
+
]
|
|
19873
|
+
}
|
|
19874
|
+
};
|
|
19683
19875
|
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
|
|
19684
19876
|
const swiperRef = React.useRef(null);
|
|
19685
19877
|
React.useMemo(() => {
|
|
@@ -19719,12 +19911,126 @@ Made in Italy` })));
|
|
|
19719
19911
|
}
|
|
19720
19912
|
return null;
|
|
19721
19913
|
}, [globalConfig]);
|
|
19722
|
-
|
|
19723
|
-
|
|
19724
|
-
|
|
19725
|
-
|
|
19726
|
-
|
|
19727
|
-
|
|
19914
|
+
const renderBottom = (rec, index) => {
|
|
19915
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19916
|
+
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19917
|
+
let cta = null;
|
|
19918
|
+
if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
|
|
19919
|
+
cta = '多商品CTA';
|
|
19920
|
+
}
|
|
19921
|
+
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19922
|
+
cta = '商品CTA';
|
|
19923
|
+
}
|
|
19924
|
+
else {
|
|
19925
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
|
19926
|
+
}
|
|
19927
|
+
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19928
|
+
return (React.createElement(React.Fragment, null,
|
|
19929
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
|
19930
|
+
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
|
19931
|
+
height: '130px',
|
|
19932
|
+
position: 'absolute',
|
|
19933
|
+
bottom: 0,
|
|
19934
|
+
width: '100%',
|
|
19935
|
+
willChange: 'transform',
|
|
19936
|
+
zIndex: 2,
|
|
19937
|
+
pointerEvents: 'none'
|
|
19938
|
+
} })),
|
|
19939
|
+
React.createElement("div", { style: {
|
|
19940
|
+
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
|
19941
|
+
zIndex: 999,
|
|
19942
|
+
position: 'absolute',
|
|
19943
|
+
bottom: 0,
|
|
19944
|
+
left: 0,
|
|
19945
|
+
right: 0,
|
|
19946
|
+
paddingTop: '20px'
|
|
19947
|
+
} },
|
|
19948
|
+
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
|
19949
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
|
19950
|
+
React.createElement("div", null,
|
|
19951
|
+
React.createElement(ExpandableText$1
|
|
19952
|
+
// className='clc-sxp-bottom-text'
|
|
19953
|
+
, {
|
|
19954
|
+
// className='clc-sxp-bottom-text'
|
|
19955
|
+
isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
|
|
19956
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
|
19957
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19958
|
+
}
|
|
19959
|
+
return null;
|
|
19960
|
+
};
|
|
19961
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
|
19962
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
|
19963
|
+
const renderLikeButton = (rec, index) => {
|
|
19964
|
+
var _a, _b, _c, _d;
|
|
19965
|
+
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
|
19966
|
+
return;
|
|
19967
|
+
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
|
19968
|
+
if (top < 40) {
|
|
19969
|
+
top += 40;
|
|
19970
|
+
}
|
|
19971
|
+
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19972
|
+
return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec,
|
|
19973
|
+
// className={style['clc-sxp-like-button']}
|
|
19974
|
+
style: {
|
|
19975
|
+
top,
|
|
19976
|
+
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
|
19977
|
+
position: 'absolute',
|
|
19978
|
+
zIndex: 999,
|
|
19979
|
+
backgroundColor: 'transparent',
|
|
19980
|
+
width: '50px',
|
|
19981
|
+
height: '50px',
|
|
19982
|
+
outline: 'none',
|
|
19983
|
+
border: 'none',
|
|
19984
|
+
boxSizing: 'content-box',
|
|
19985
|
+
padding: 0,
|
|
19986
|
+
transform: 'translate3d(0px, 0px, 0px)'
|
|
19987
|
+
} }));
|
|
19988
|
+
}
|
|
19989
|
+
return null;
|
|
19990
|
+
};
|
|
19991
|
+
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
|
19992
|
+
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
|
19993
|
+
const renderToggleButton = (visible) => {
|
|
19994
|
+
var _a, _b, _c, _d;
|
|
19995
|
+
if (!visible)
|
|
19996
|
+
return;
|
|
19997
|
+
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
|
19998
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
|
19999
|
+
top += 45;
|
|
20000
|
+
}
|
|
20001
|
+
return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
|
|
20002
|
+
position: 'absolute',
|
|
20003
|
+
visibility: 'visible',
|
|
20004
|
+
zIndex: 999,
|
|
20005
|
+
transform: 'translate3d(0px,0px,0px)',
|
|
20006
|
+
[(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
|
|
20007
|
+
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
|
20008
|
+
backgroundColor: 'transparent',
|
|
20009
|
+
width: '50px',
|
|
20010
|
+
height: '50px',
|
|
20011
|
+
outline: 'none',
|
|
20012
|
+
border: 'none',
|
|
20013
|
+
boxSizing: 'content-box',
|
|
20014
|
+
padding: 0
|
|
20015
|
+
}, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })));
|
|
20016
|
+
};
|
|
20017
|
+
const renderView = (item, index) => {
|
|
20018
|
+
var _a, _b, _c, _d;
|
|
20019
|
+
const rec = lodash.cloneDeep(recData);
|
|
20020
|
+
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
|
20021
|
+
return (React.createElement("div", { style: { position: 'relative' } },
|
|
20022
|
+
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
|
20023
|
+
renderBottom(rec, index),
|
|
20024
|
+
renderLikeButton(rec, index),
|
|
20025
|
+
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
|
20026
|
+
React.createElement(ToggleButton$1, { style: {
|
|
20027
|
+
position: 'absolute',
|
|
20028
|
+
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
|
20029
|
+
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
|
20030
|
+
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
|
20031
|
+
zIndex: 999
|
|
20032
|
+
}, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
|
|
20033
|
+
renderContent(item, index))));
|
|
19728
20034
|
};
|
|
19729
20035
|
React.useEffect(() => {
|
|
19730
20036
|
var _a, _b;
|
|
@@ -19738,12 +20044,15 @@ Made in Italy` })));
|
|
|
19738
20044
|
return;
|
|
19739
20045
|
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
|
|
19740
20046
|
}, [loopPlay]);
|
|
19741
|
-
return (React.createElement(
|
|
19742
|
-
|
|
19743
|
-
|
|
19744
|
-
|
|
19745
|
-
|
|
19746
|
-
|
|
20047
|
+
return (React.createElement("div", { id: 'sxp-render',
|
|
20048
|
+
// className={style['clc-sxp-container']}
|
|
20049
|
+
style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
|
|
20050
|
+
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
|
|
20051
|
+
// setActiveIndex(swiper.activeIndex);
|
|
20052
|
+
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
|
20053
|
+
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
|
20054
|
+
return renderView(rec, index);
|
|
20055
|
+
}))));
|
|
19747
20056
|
};
|
|
19748
20057
|
var index$1 = React.memo(DiyStoryPreview);
|
|
19749
20058
|
|