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
|
@@ -3,21 +3,200 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
const react_2 = require("swiper/react");
|
|
6
|
-
const
|
|
6
|
+
const lodash_1 = require("lodash");
|
|
7
7
|
const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
|
|
8
8
|
const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
|
|
9
|
-
const Hashtag_1 = tslib_1.__importDefault(require("../SxpPageRender/Hashtag"));
|
|
10
9
|
const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
|
|
11
10
|
const useIconLink_1 = require("../SxpPageRender/useIconLink");
|
|
11
|
+
const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
|
|
12
12
|
const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
|
|
13
13
|
const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
|
|
14
14
|
const _materials_ = tslib_1.__importStar(require("../../../materials"));
|
|
15
|
+
require("../SxpPageRender/index.less");
|
|
15
16
|
const RESOLVER = {};
|
|
16
17
|
Object.values(_materials_).forEach((v) => {
|
|
17
18
|
RESOLVER[v.extend.type] = v;
|
|
18
19
|
});
|
|
19
20
|
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
20
21
|
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
22
|
+
const recData = {
|
|
23
|
+
position: 0,
|
|
24
|
+
isCollected: false,
|
|
25
|
+
product: null,
|
|
26
|
+
video: {
|
|
27
|
+
appId: null,
|
|
28
|
+
itemId: 'VIDEOSsRgI1695278974368',
|
|
29
|
+
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
|
30
|
+
enTitle: null,
|
|
31
|
+
icon: null,
|
|
32
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
|
33
|
+
link: null,
|
|
34
|
+
linkTitle: null,
|
|
35
|
+
linkType: null,
|
|
36
|
+
menuCategoryId: null,
|
|
37
|
+
remark: null,
|
|
38
|
+
tags: [
|
|
39
|
+
'Gift-Giving',
|
|
40
|
+
'Daily Wear',
|
|
41
|
+
'Business Formal',
|
|
42
|
+
'Sports/Casual',
|
|
43
|
+
'Anniversary Gifts',
|
|
44
|
+
'Wedding/Engagement',
|
|
45
|
+
'Formal Dinner/Party'
|
|
46
|
+
],
|
|
47
|
+
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
48
|
+
value: 385,
|
|
49
|
+
weight: null,
|
|
50
|
+
bindCta: null,
|
|
51
|
+
bindProduct: null,
|
|
52
|
+
bindProducts: [
|
|
53
|
+
{
|
|
54
|
+
appId: 'wx448578f8851f3dce',
|
|
55
|
+
itemId: 'test02178888',
|
|
56
|
+
title: 'christian dior小包包 新CDN',
|
|
57
|
+
enTitle: null,
|
|
58
|
+
icon: null,
|
|
59
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
60
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
61
|
+
linkTitle: '',
|
|
62
|
+
linkType: 'MP',
|
|
63
|
+
menuCategoryId: null,
|
|
64
|
+
remark: null,
|
|
65
|
+
tags: [],
|
|
66
|
+
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
67
|
+
value: null,
|
|
68
|
+
weight: null,
|
|
69
|
+
bindCta: {
|
|
70
|
+
appId: 'wx448578f8851f3dce',
|
|
71
|
+
itemId: 'CTA3KofE1716186622249',
|
|
72
|
+
title: 'SHOP NOW 立即购买',
|
|
73
|
+
enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
|
|
74
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
|
75
|
+
cover: null,
|
|
76
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
77
|
+
linkTitle: '',
|
|
78
|
+
linkType: 'MP',
|
|
79
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
80
|
+
remark: null,
|
|
81
|
+
tags: [
|
|
82
|
+
"Woman's Perfumes",
|
|
83
|
+
'Plates & Bowls',
|
|
84
|
+
'Glasses',
|
|
85
|
+
'Multicolor',
|
|
86
|
+
'Carafes',
|
|
87
|
+
'Tea & Coffee',
|
|
88
|
+
'Green',
|
|
89
|
+
'Grey',
|
|
90
|
+
'Cutlery'
|
|
91
|
+
],
|
|
92
|
+
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
93
|
+
value: null,
|
|
94
|
+
weight: null
|
|
95
|
+
},
|
|
96
|
+
collection: 'Ricco',
|
|
97
|
+
currency: 'INR-₹',
|
|
98
|
+
homePage: [
|
|
99
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
100
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
|
101
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
|
102
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
|
103
|
+
],
|
|
104
|
+
info: 'test',
|
|
105
|
+
price: 53200,
|
|
106
|
+
shippingInfo: null,
|
|
107
|
+
taxInfo: null
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
appId: null,
|
|
111
|
+
itemId: '113J631A0684_C520',
|
|
112
|
+
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
|
113
|
+
enTitle: null,
|
|
114
|
+
icon: null,
|
|
115
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
116
|
+
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
|
117
|
+
linkTitle: null,
|
|
118
|
+
linkType: 'WEB',
|
|
119
|
+
menuCategoryId: null,
|
|
120
|
+
remark: null,
|
|
121
|
+
tags: [],
|
|
122
|
+
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
123
|
+
value: null,
|
|
124
|
+
weight: null,
|
|
125
|
+
bindCta: {
|
|
126
|
+
appId: null,
|
|
127
|
+
itemId: 'CTAAfaKf1730796437032',
|
|
128
|
+
title: 'test',
|
|
129
|
+
enTitle: 'test',
|
|
130
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
|
131
|
+
cover: null,
|
|
132
|
+
link: null,
|
|
133
|
+
linkTitle: null,
|
|
134
|
+
linkType: null,
|
|
135
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
136
|
+
remark: '',
|
|
137
|
+
tags: [],
|
|
138
|
+
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
139
|
+
value: null,
|
|
140
|
+
weight: null
|
|
141
|
+
},
|
|
142
|
+
collection: 'Jacquard de coton éponge bleu',
|
|
143
|
+
currency: 'EUR-€',
|
|
144
|
+
homePage: [
|
|
145
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
146
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
|
147
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
|
148
|
+
],
|
|
149
|
+
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",
|
|
150
|
+
price: 1800,
|
|
151
|
+
shippingInfo: null,
|
|
152
|
+
taxInfo: null
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
appId: null,
|
|
156
|
+
itemId: 'S5573CRIW_M928',
|
|
157
|
+
title: 'Mini Dior Book Tote',
|
|
158
|
+
enTitle: null,
|
|
159
|
+
icon: null,
|
|
160
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
161
|
+
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
|
162
|
+
linkTitle: null,
|
|
163
|
+
linkType: 'WEB',
|
|
164
|
+
menuCategoryId: null,
|
|
165
|
+
remark: null,
|
|
166
|
+
tags: ['ダイヤモンド'],
|
|
167
|
+
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
168
|
+
value: null,
|
|
169
|
+
weight: null,
|
|
170
|
+
bindCta: null,
|
|
171
|
+
collection: null,
|
|
172
|
+
currency: 'GBP-￡',
|
|
173
|
+
homePage: [
|
|
174
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
175
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
|
176
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
|
177
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
|
178
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
|
179
|
+
],
|
|
180
|
+
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.",
|
|
181
|
+
price: 1950,
|
|
182
|
+
shippingInfo: null,
|
|
183
|
+
taxInfo: null
|
|
184
|
+
}
|
|
185
|
+
],
|
|
186
|
+
url: null,
|
|
187
|
+
blockCta: 1,
|
|
188
|
+
blockProduct: 1,
|
|
189
|
+
hashTags: [
|
|
190
|
+
'Sports/Casual',
|
|
191
|
+
'Formal Dinner/Party',
|
|
192
|
+
'Business Formal',
|
|
193
|
+
'Wedding/Engagement',
|
|
194
|
+
'Gift-Giving',
|
|
195
|
+
'Daily Wear',
|
|
196
|
+
'Anniversary Gifts'
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
};
|
|
21
200
|
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
|
|
22
201
|
const swiperRef = (0, react_1.useRef)(null);
|
|
23
202
|
const height = (0, react_1.useMemo)(() => {
|
|
@@ -58,22 +237,52 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
|
58
237
|
}, [globalConfig]);
|
|
59
238
|
const CTA = (rec, index) => {
|
|
60
239
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
|
240
|
+
console.log(globalConfig, rec, '111');
|
|
61
241
|
return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
|
|
62
242
|
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
|
|
63
243
|
}
|
|
64
244
|
return null;
|
|
65
245
|
};
|
|
66
246
|
const renderBottom = (rec, index) => {
|
|
67
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
247
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
68
248
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
249
|
+
let cta = null;
|
|
250
|
+
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) {
|
|
251
|
+
cta = '多商品CTA';
|
|
252
|
+
}
|
|
253
|
+
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
254
|
+
cta = '商品CTA';
|
|
255
|
+
}
|
|
256
|
+
else {
|
|
257
|
+
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;
|
|
258
|
+
}
|
|
259
|
+
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
69
260
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
70
|
-
((
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
261
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (react_1.default.createElement("div", { style: {
|
|
262
|
+
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
|
263
|
+
height: '130px',
|
|
264
|
+
position: 'absolute',
|
|
265
|
+
bottom: 0,
|
|
266
|
+
width: '100%',
|
|
267
|
+
willChange: 'transform',
|
|
268
|
+
zIndex: 2,
|
|
269
|
+
pointerEvents: 'none'
|
|
270
|
+
} })),
|
|
271
|
+
react_1.default.createElement("div", { style: {
|
|
272
|
+
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
|
273
|
+
zIndex: 999,
|
|
274
|
+
position: 'absolute',
|
|
275
|
+
bottom: 0,
|
|
276
|
+
left: 0,
|
|
277
|
+
right: 0,
|
|
278
|
+
paddingTop: '20px'
|
|
279
|
+
} },
|
|
280
|
+
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { style: {} },
|
|
281
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
|
|
74
282
|
react_1.default.createElement("div", null,
|
|
75
|
-
react_1.default.createElement(ExpandableText_1.default, {
|
|
76
|
-
|
|
283
|
+
react_1.default.createElement(ExpandableText_1.default, { 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' }) }),
|
|
284
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
|
285
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
77
286
|
}
|
|
78
287
|
return null;
|
|
79
288
|
};
|
|
@@ -88,17 +297,66 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
|
88
297
|
top += 40;
|
|
89
298
|
}
|
|
90
299
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
91
|
-
return (react_1.default.createElement(LikeButton_1.default, { 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,
|
|
300
|
+
return (react_1.default.createElement(LikeButton_1.default, { 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, style: {
|
|
92
301
|
top,
|
|
93
|
-
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
|
|
302
|
+
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
|
303
|
+
position: 'absolute',
|
|
304
|
+
zIndex: 999,
|
|
305
|
+
backgroundColor: 'transparent',
|
|
306
|
+
width: '50px',
|
|
307
|
+
height: '50px',
|
|
308
|
+
outline: 'none',
|
|
309
|
+
border: 'none',
|
|
310
|
+
boxSizing: 'content-box',
|
|
311
|
+
padding: 0,
|
|
312
|
+
transform: 'translate3d(0px, 0px, 0px)'
|
|
94
313
|
} }));
|
|
95
314
|
}
|
|
96
315
|
return null;
|
|
97
316
|
};
|
|
98
317
|
const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
|
99
318
|
const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
|
100
|
-
const
|
|
101
|
-
|
|
319
|
+
const renderToggleButton = (visible) => {
|
|
320
|
+
var _a, _b, _c, _d;
|
|
321
|
+
if (!visible)
|
|
322
|
+
return;
|
|
323
|
+
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
|
324
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
|
325
|
+
top += 45;
|
|
326
|
+
}
|
|
327
|
+
return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
|
|
328
|
+
position: 'absolute',
|
|
329
|
+
visibility: 'visible',
|
|
330
|
+
zIndex: 999,
|
|
331
|
+
transform: 'translate3d(0px,0px,0px)',
|
|
332
|
+
[(_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,
|
|
333
|
+
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
|
334
|
+
backgroundColor: 'transparent',
|
|
335
|
+
width: '50px',
|
|
336
|
+
height: '50px',
|
|
337
|
+
outline: 'none',
|
|
338
|
+
border: 'none',
|
|
339
|
+
boxSizing: 'content-box',
|
|
340
|
+
padding: 0
|
|
341
|
+
}, 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 })));
|
|
342
|
+
};
|
|
343
|
+
const renderView = (item, index) => {
|
|
344
|
+
var _a, _b, _c, _d;
|
|
345
|
+
const rec = (0, lodash_1.cloneDeep)(recData);
|
|
346
|
+
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
|
347
|
+
return (react_1.default.createElement("div", { style: { position: 'relative' } },
|
|
348
|
+
react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
|
349
|
+
renderBottom(rec, index),
|
|
350
|
+
renderLikeButton(rec, index),
|
|
351
|
+
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
|
352
|
+
react_1.default.createElement(ToggleButton_1.default, { style: {
|
|
353
|
+
position: 'absolute',
|
|
354
|
+
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
|
355
|
+
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',
|
|
356
|
+
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
|
357
|
+
zIndex: 999
|
|
358
|
+
}, 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 }),
|
|
359
|
+
renderContent(item, index))));
|
|
102
360
|
};
|
|
103
361
|
(0, react_1.useEffect)(() => {
|
|
104
362
|
var _a, _b;
|
|
@@ -112,10 +370,11 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
|
112
370
|
return;
|
|
113
371
|
(_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);
|
|
114
372
|
}, [loopPlay]);
|
|
115
|
-
return (react_1.default.createElement(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
373
|
+
return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
|
|
374
|
+
react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
|
|
375
|
+
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
|
376
|
+
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
|
377
|
+
return renderView(rec, index);
|
|
378
|
+
}))));
|
|
120
379
|
};
|
|
121
380
|
exports.default = (0, react_1.memo)(DiyStoryPreview);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
|
-
const tool_1 = require("../../../core/utils/tool");
|
|
5
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
const tool_1 = require("../../../core/utils/tool");
|
|
6
6
|
const limitTextLastWholeWord = (originalText = '', limit) => {
|
|
7
7
|
const chineseRegex = /[\u4e00-\u9fa5]+/;
|
|
8
8
|
if (chineseRegex.test(originalText)) {
|
|
@@ -53,7 +53,15 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
|
|
|
53
53
|
wordBreak: 'break-word'
|
|
54
54
|
}, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
55
55
|
react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
56
|
-
text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
56
|
+
text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
57
|
+
textDecoration: 'underline',
|
|
58
|
+
cursor: 'pointer',
|
|
59
|
+
outline: 'none',
|
|
60
|
+
border: 'none',
|
|
61
|
+
boxSizing: 'content-box',
|
|
62
|
+
padding: 0,
|
|
63
|
+
background: 'transparent'
|
|
64
|
+
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
|
57
65
|
__html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
|
58
66
|
} }))));
|
|
59
67
|
};
|
|
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
require("./index.less");
|
|
6
|
+
const lodash_1 = require("lodash");
|
|
6
7
|
const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
|
|
7
8
|
const hooks_1 = require("../../../core/hooks");
|
|
8
|
-
const lodash_1 = require("lodash");
|
|
9
9
|
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
|
10
10
|
const { schema } = (0, hooks_1.useEditor)();
|
|
11
11
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
|
@@ -29,10 +29,10 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive,
|
|
|
29
29
|
const Component = (0, withBindDataSource_1.default)(t);
|
|
30
30
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
|
31
31
|
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';
|
|
32
|
-
|
|
32
|
+
const style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
|
33
33
|
if (style.hasOwnProperty('backdropFilter')) {
|
|
34
|
-
|
|
35
|
-
style
|
|
34
|
+
const sbf = style.backdropFilter;
|
|
35
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
|
36
36
|
}
|
|
37
37
|
return (react_1.default.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 })));
|
|
38
38
|
}
|
|
@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const react_2 = require("swiper/react");
|
|
7
7
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
|
8
8
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
13
13
|
const MultiCommodity = (_a) => {
|
|
14
14
|
var _b, _c;
|
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
|
@@ -6,15 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const react_2 = require("swiper/react");
|
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
|
8
8
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
13
13
|
const MultiCommodityDiro = (_a) => {
|
|
14
14
|
var _b, _c;
|
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
|
16
16
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
|
17
17
|
const [products] = (0, react_1.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]);
|
|
18
|
+
console.log(recData, '222');
|
|
18
19
|
return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
19
20
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
20
21
|
return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -6,15 +6,16 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const react_2 = require("swiper/react");
|
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../components/Scroll"));
|
|
8
8
|
const Img_1 = tslib_1.__importDefault(require("../components/Img"));
|
|
9
|
+
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
9
10
|
const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
10
11
|
const hooks_1 = require("../../../../core/hooks");
|
|
11
12
|
const tool_1 = require("../../../../core/utils/tool");
|
|
12
|
-
const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
|
|
13
13
|
const MultiCommodityDiroNew = (_a) => {
|
|
14
14
|
var _b, _c;
|
|
15
15
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
|
16
16
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
|
17
17
|
const [products] = (0, react_1.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]);
|
|
18
|
+
console.log(recData, '333');
|
|
18
19
|
return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
19
20
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
20
21
|
return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, { key: itemIndex, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -15,7 +15,7 @@ const EventProvider = (_a) => {
|
|
|
15
15
|
const handleClick = (0, lodash_1.throttle)((e) => {
|
|
16
16
|
var _a, _b, _c, _d, _e, _f;
|
|
17
17
|
e.preventDefault();
|
|
18
|
-
const item = multItem
|
|
18
|
+
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);
|
|
19
19
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
|
20
20
|
eventSubject: 'clickCta',
|
|
21
21
|
eventDescription: 'User clicked the CTA'
|
|
@@ -42,6 +42,6 @@ const EventProvider = (_a) => {
|
|
|
42
42
|
setElement(null);
|
|
43
43
|
}
|
|
44
44
|
}, [element, popup]);
|
|
45
|
-
return (react_1.default.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
|
45
|
+
return (react_1.default.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));
|
|
46
46
|
};
|
|
47
47
|
exports.default = (0, react_1.memo)(EventProvider);
|