pb-sxp-ui 1.0.70 → 1.0.71
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 +57 -50
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +57 -50
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +57 -50
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/Nudge/index.js +2 -2
- package/es/core/components/SxpPageRender/WaterFall/List.js +5 -9
- package/es/core/components/SxpPageRender/index.js +7 -4
- package/es/core/components/SxpPageRender/typing.d.ts +1 -0
- package/es/core/context/SxpDataSourceProvider.js +9 -1
- package/es/materials/sxp/HashTag/settingRender.d.ts +2 -7
- package/es/materials/sxp/HashTag/settingRender.js +0 -5
- package/es/materials/sxp/defaultSetting.js +1 -1
- package/es/materials/sxp/template/Commodity/index.js +4 -4
- package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
- package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
- package/es/materials/sxp/template/MultiCommodity/index.js +4 -4
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +4 -4
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +4 -4
- package/lib/core/components/SxpPageRender/Nudge/index.js +2 -2
- package/lib/core/components/SxpPageRender/WaterFall/List.js +5 -9
- package/lib/core/components/SxpPageRender/index.js +7 -4
- package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
- package/lib/core/context/SxpDataSourceProvider.js +9 -1
- package/lib/materials/sxp/HashTag/settingRender.d.ts +2 -7
- package/lib/materials/sxp/HashTag/settingRender.js +0 -5
- package/lib/materials/sxp/defaultSetting.js +1 -1
- package/lib/materials/sxp/template/Commodity/index.js +4 -4
- package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
- package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
- package/lib/materials/sxp/template/MultiCommodity/index.js +4 -4
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +4 -4
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +4 -4
- package/package.json +1 -1
@@ -8,7 +8,7 @@ const Nudge = ({ nudge }) => {
|
|
8
8
|
backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
|
9
9
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
10
10
|
} },
|
11
|
-
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
|
12
|
-
React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
|
11
|
+
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
|
12
|
+
React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
|
13
13
|
};
|
14
14
|
export default Nudge;
|
@@ -14,19 +14,15 @@ const WaterfallFlowItem = (props) => {
|
|
14
14
|
const canvasRef = useRef(null);
|
15
15
|
const [firstFrameSrc, setFirstFrameSrc] = useState('');
|
16
16
|
const src = useMemo(() => {
|
17
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18
18
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
|
19
19
|
return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
|
20
20
|
}
|
21
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.
|
22
|
-
|
23
|
-
return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
|
21
|
+
else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
|
22
|
+
return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
|
24
23
|
}
|
25
|
-
else if ((
|
26
|
-
return (
|
27
|
-
}
|
28
|
-
else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
|
29
|
-
return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
|
24
|
+
else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
|
25
|
+
return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
|
30
26
|
}
|
31
27
|
else {
|
32
28
|
return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
|
@@ -295,7 +295,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
295
295
|
}
|
296
296
|
};
|
297
297
|
const handleScrollEvent = (swiper) => {
|
298
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
298
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
299
299
|
viewTime.current = new Date();
|
300
300
|
const item = data[swiper.previousIndex];
|
301
301
|
if (!item)
|
@@ -325,14 +325,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
325
325
|
handleReportViewImageEnd(item);
|
326
326
|
}
|
327
327
|
handleReportProductView(item);
|
328
|
+
const curItem = data[swiper.activeIndex];
|
329
|
+
if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
|
330
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
331
|
+
eventName: 'ProductView'
|
332
|
+
});
|
333
|
+
}
|
328
334
|
};
|
329
335
|
const handleReportProductView = (item) => {
|
330
336
|
var _a, _b, _c;
|
331
337
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
|
332
338
|
productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
|
333
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
334
|
-
eventName: 'ProductView'
|
335
|
-
});
|
336
339
|
}
|
337
340
|
};
|
338
341
|
useEffect(() => {
|
@@ -136,9 +136,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
136
136
|
if (!enableReportEvent || !enabledMetaConversionApi) {
|
137
137
|
return;
|
138
138
|
}
|
139
|
+
const fakeUserId = storeAndLoadFeUserId();
|
139
140
|
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
140
141
|
method: 'POST',
|
141
|
-
body: {
|
142
|
+
body: {
|
143
|
+
eventName,
|
144
|
+
actionSource,
|
145
|
+
eventSourceUrl,
|
146
|
+
userData: {
|
147
|
+
externalId: fakeUserId
|
148
|
+
}
|
149
|
+
},
|
142
150
|
type: 'beacon'
|
143
151
|
});
|
144
152
|
}, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
|
@@ -1,16 +1,11 @@
|
|
1
1
|
declare const _default: ({
|
2
2
|
title: string;
|
3
|
-
child:
|
4
|
-
type: string;
|
5
|
-
label: string;
|
6
|
-
name: string[];
|
7
|
-
addonAfter?: undefined;
|
8
|
-
} | {
|
3
|
+
child: {
|
9
4
|
type: string;
|
10
5
|
label: string;
|
11
6
|
name: string[];
|
12
7
|
addonAfter: string;
|
13
|
-
}
|
8
|
+
}[];
|
14
9
|
} | {
|
15
10
|
title: string;
|
16
11
|
child: {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export const fontOptions = [{ label: '
|
1
|
+
export const fontOptions = [{ label: 'defalut', value: 'appFont' }];
|
2
2
|
const sxpFonts = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.localStorage.getItem('sxp_font_links'));
|
3
3
|
const data = sxpFonts && sxpFonts !== '' ? JSON.parse(sxpFonts) : [];
|
4
4
|
export default {
|
@@ -6,11 +6,11 @@ import styles from './index.module.less';
|
|
6
6
|
import { useSxpDataSource } from '../../../../core/hooks';
|
7
7
|
import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
|
8
8
|
const Commodity = (_a) => {
|
9
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
9
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
10
10
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
11
11
|
const { sxpParameter } = useSxpDataSource();
|
12
12
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
13
|
-
const src = (
|
13
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
14
14
|
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
15
15
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
16
16
|
React.createElement(FormatImage, { className: css({
|
@@ -28,7 +28,7 @@ const Commodity = (_a) => {
|
|
28
28
|
width: '100%',
|
29
29
|
overflow: 'hidden'
|
30
30
|
}) },
|
31
|
-
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
32
|
-
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
31
|
+
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
32
|
+
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
|
33
33
|
};
|
34
34
|
export default memo(Commodity);
|
@@ -6,11 +6,11 @@ import styles from './index.module.less';
|
|
6
6
|
import { useSxpDataSource } from '../../../../core/hooks';
|
7
7
|
import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
|
8
8
|
const CommodityDiro = (_a) => {
|
9
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
9
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
10
10
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
11
11
|
const { sxpParameter } = useSxpDataSource();
|
12
12
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
13
|
-
const src = (
|
13
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
14
14
|
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
15
15
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
16
16
|
React.createElement(FormatImage, { className: css({
|
@@ -28,7 +28,7 @@ const CommodityDiro = (_a) => {
|
|
28
28
|
width: '100%',
|
29
29
|
overflow: 'hidden'
|
30
30
|
}) },
|
31
|
-
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
32
|
-
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
31
|
+
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
32
|
+
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
|
33
33
|
};
|
34
34
|
export default memo(CommodityDiro);
|
@@ -6,11 +6,11 @@ import styles from './index.module.less';
|
|
6
6
|
import { useSxpDataSource } from '../../../../core/hooks';
|
7
7
|
import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
|
8
8
|
const CommodityDiroNew = (_a) => {
|
9
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
9
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
10
10
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
11
11
|
const { sxpParameter } = useSxpDataSource();
|
12
12
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
13
|
-
const src = (
|
13
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
14
14
|
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
15
15
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
16
16
|
React.createElement(FormatImage, { className: css({
|
@@ -28,7 +28,7 @@ const CommodityDiroNew = (_a) => {
|
|
28
28
|
width: '100%',
|
29
29
|
overflow: 'hidden'
|
30
30
|
}) },
|
31
|
-
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
32
|
-
React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
31
|
+
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
32
|
+
React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
|
33
33
|
};
|
34
34
|
export default memo(CommodityDiroNew);
|
@@ -33,10 +33,10 @@ const MultiCommodity = (_a) => {
|
|
33
33
|
}
|
34
34
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
35
35
|
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
|
36
|
-
var _a, _b, _c, _d, _e, _f;
|
36
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
37
37
|
return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
|
38
38
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
39
|
-
React.createElement(Img, { src: (
|
39
|
+
React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
|
40
40
|
transform: `translateY(${translateY}%)`
|
41
41
|
} })),
|
42
42
|
React.createElement("div", { className: css({
|
@@ -47,8 +47,8 @@ const MultiCommodity = (_a) => {
|
|
47
47
|
width: '100%',
|
48
48
|
overflow: 'hidden'
|
49
49
|
}) },
|
50
|
-
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
51
|
-
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
50
|
+
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
|
51
|
+
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
|
52
52
|
})));
|
53
53
|
};
|
54
54
|
export default memo(MultiCommodity);
|
@@ -32,10 +32,10 @@ const MultiCommodityDiro = (_a) => {
|
|
32
32
|
}
|
33
33
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
34
34
|
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
|
35
|
-
var _a, _b, _c, _d, _e, _f;
|
35
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
36
36
|
return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
|
37
37
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
38
|
-
React.createElement(Img, { src: (
|
38
|
+
React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
|
39
39
|
transform: `translateY(${translateY}%)`
|
40
40
|
} })),
|
41
41
|
React.createElement("div", { className: css({
|
@@ -46,8 +46,8 @@ const MultiCommodityDiro = (_a) => {
|
|
46
46
|
width: '100%',
|
47
47
|
overflow: 'hidden'
|
48
48
|
}) },
|
49
|
-
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
50
|
-
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
49
|
+
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
|
50
|
+
React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
|
51
51
|
})));
|
52
52
|
};
|
53
53
|
export default memo(MultiCommodityDiro);
|
@@ -32,10 +32,10 @@ const MultiCommodityDiroNew = (_a) => {
|
|
32
32
|
}
|
33
33
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
34
34
|
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
|
35
|
-
var _a, _b, _c, _d, _e, _f;
|
35
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
36
36
|
return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
|
37
37
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
38
|
-
React.createElement(Img, { src: (
|
38
|
+
React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
|
39
39
|
transform: `translateY(${translateY}%)`
|
40
40
|
} })),
|
41
41
|
React.createElement("div", { className: css({
|
@@ -47,8 +47,8 @@ const MultiCommodityDiroNew = (_a) => {
|
|
47
47
|
overflow: 'hidden',
|
48
48
|
lineHeight: '20px'
|
49
49
|
}) },
|
50
|
-
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
51
|
-
React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
50
|
+
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
|
51
|
+
React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
|
52
52
|
})));
|
53
53
|
};
|
54
54
|
export default memo(MultiCommodityDiroNew);
|
@@ -11,7 +11,7 @@ const Nudge = ({ nudge }) => {
|
|
11
11
|
backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
|
12
12
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
13
13
|
} },
|
14
|
-
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
|
15
|
-
react_1.default.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
|
14
|
+
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
|
15
|
+
react_1.default.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
|
16
16
|
};
|
17
17
|
exports.default = Nudge;
|
@@ -16,19 +16,15 @@ const WaterfallFlowItem = (props) => {
|
|
16
16
|
const canvasRef = (0, react_1.useRef)(null);
|
17
17
|
const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
|
18
18
|
const src = (0, react_1.useMemo)(() => {
|
19
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
19
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
20
20
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
|
21
21
|
return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
|
22
22
|
}
|
23
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.
|
24
|
-
|
25
|
-
return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
|
23
|
+
else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
|
24
|
+
return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
|
26
25
|
}
|
27
|
-
else if ((
|
28
|
-
return (
|
29
|
-
}
|
30
|
-
else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
|
31
|
-
return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
|
26
|
+
else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
|
27
|
+
return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
|
32
28
|
}
|
33
29
|
else {
|
34
30
|
return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
|
@@ -298,7 +298,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
298
298
|
}
|
299
299
|
};
|
300
300
|
const handleScrollEvent = (swiper) => {
|
301
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
301
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
302
302
|
viewTime.current = new Date();
|
303
303
|
const item = data[swiper.previousIndex];
|
304
304
|
if (!item)
|
@@ -328,14 +328,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
328
328
|
handleReportViewImageEnd(item);
|
329
329
|
}
|
330
330
|
handleReportProductView(item);
|
331
|
+
const curItem = data[swiper.activeIndex];
|
332
|
+
if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
|
333
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
334
|
+
eventName: 'ProductView'
|
335
|
+
});
|
336
|
+
}
|
331
337
|
};
|
332
338
|
const handleReportProductView = (item) => {
|
333
339
|
var _a, _b, _c;
|
334
340
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
|
335
341
|
productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
|
336
|
-
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
337
|
-
eventName: 'ProductView'
|
338
|
-
});
|
339
342
|
}
|
340
343
|
};
|
341
344
|
(0, react_1.useEffect)(() => {
|
@@ -139,9 +139,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
139
139
|
if (!enableReportEvent || !enabledMetaConversionApi) {
|
140
140
|
return;
|
141
141
|
}
|
142
|
+
const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
|
142
143
|
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
|
143
144
|
method: 'POST',
|
144
|
-
body: {
|
145
|
+
body: {
|
146
|
+
eventName,
|
147
|
+
actionSource,
|
148
|
+
eventSourceUrl,
|
149
|
+
userData: {
|
150
|
+
externalId: fakeUserId
|
151
|
+
}
|
152
|
+
},
|
145
153
|
type: 'beacon'
|
146
154
|
});
|
147
155
|
}, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
|
@@ -1,16 +1,11 @@
|
|
1
1
|
declare const _default: ({
|
2
2
|
title: string;
|
3
|
-
child:
|
4
|
-
type: string;
|
5
|
-
label: string;
|
6
|
-
name: string[];
|
7
|
-
addonAfter?: undefined;
|
8
|
-
} | {
|
3
|
+
child: {
|
9
4
|
type: string;
|
10
5
|
label: string;
|
11
6
|
name: string[];
|
12
7
|
addonAfter: string;
|
13
|
-
}
|
8
|
+
}[];
|
14
9
|
} | {
|
15
10
|
title: string;
|
16
11
|
child: {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.fontOptions = void 0;
|
4
|
-
exports.fontOptions = [{ label: '
|
4
|
+
exports.fontOptions = [{ label: 'defalut', value: 'appFont' }];
|
5
5
|
const sxpFonts = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.localStorage.getItem('sxp_font_links'));
|
6
6
|
const data = sxpFonts && sxpFonts !== '' ? JSON.parse(sxpFonts) : [];
|
7
7
|
exports.default = {
|
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
9
9
|
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
10
10
|
const Commodity = (_a) => {
|
11
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
11
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
12
12
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
13
13
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
14
14
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
15
|
-
const src = (
|
15
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
16
16
|
return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
17
17
|
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
18
18
|
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
|
@@ -30,7 +30,7 @@ const Commodity = (_a) => {
|
|
30
30
|
width: '100%',
|
31
31
|
overflow: 'hidden'
|
32
32
|
}) },
|
33
|
-
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
34
|
-
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
33
|
+
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
34
|
+
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
|
35
35
|
};
|
36
36
|
exports.default = (0, react_1.memo)(Commodity);
|
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
9
9
|
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
10
10
|
const CommodityDiro = (_a) => {
|
11
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
11
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
12
12
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
13
13
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
14
14
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
15
|
-
const src = (
|
15
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
16
16
|
return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
17
17
|
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
18
18
|
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
|
@@ -30,7 +30,7 @@ const CommodityDiro = (_a) => {
|
|
30
30
|
width: '100%',
|
31
31
|
overflow: 'hidden'
|
32
32
|
}) },
|
33
|
-
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
34
|
-
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
33
|
+
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
34
|
+
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
|
35
35
|
};
|
36
36
|
exports.default = (0, react_1.memo)(CommodityDiro);
|
@@ -8,11 +8,11 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
9
9
|
const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
|
10
10
|
const CommodityDiroNew = (_a) => {
|
11
|
-
var _b, _c, _d, _e, _f, _g, _h;
|
11
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
12
12
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
|
13
13
|
const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
|
14
14
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
15
|
-
const src = (
|
15
|
+
const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
|
16
16
|
return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' } }, props),
|
17
17
|
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
18
18
|
react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({
|
@@ -30,7 +30,7 @@ const CommodityDiroNew = (_a) => {
|
|
30
30
|
width: '100%',
|
31
31
|
overflow: 'hidden'
|
32
32
|
}) },
|
33
|
-
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
34
|
-
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
33
|
+
react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
|
34
|
+
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
|
35
35
|
};
|
36
36
|
exports.default = (0, react_1.memo)(CommodityDiroNew);
|
@@ -35,10 +35,10 @@ const MultiCommodity = (_a) => {
|
|
35
35
|
}
|
36
36
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
37
37
|
return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
|
38
|
-
var _a, _b, _c, _d, _e, _f;
|
38
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
39
39
|
return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
|
40
40
|
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
41
|
-
react_1.default.createElement(Img_1.default, { src: (
|
41
|
+
react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
|
42
42
|
transform: `translateY(${translateY}%)`
|
43
43
|
} })),
|
44
44
|
react_1.default.createElement("div", { className: (0, css_1.css)({
|
@@ -49,8 +49,8 @@ const MultiCommodity = (_a) => {
|
|
49
49
|
width: '100%',
|
50
50
|
overflow: 'hidden'
|
51
51
|
}) },
|
52
|
-
react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (
|
53
|
-
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (
|
52
|
+
react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
|
53
|
+
react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
|
54
54
|
})));
|
55
55
|
};
|
56
56
|
exports.default = (0, react_1.memo)(MultiCommodity);
|