pb-sxp-ui 1.9.0 → 1.9.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 +1005 -241
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +72 -4
- package/dist/index.js +1005 -241
- 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 +1005 -241
- 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/ExpandableText.js +1 -1
- package/es/core/components/SxpPageRender/Hashtag/index.js +2 -2
- package/es/core/components/SxpPageRender/Modal/index.js +45 -7
- package/es/core/components/SxpPageRender/PictureGroup/index.js +51 -25
- package/es/core/components/SxpPageRender/index.js +3 -3
- package/es/core/hooks/useFocusTrap.d.ts +2 -0
- package/es/core/hooks/useFocusTrap.js +37 -0
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +12 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/materials/sxp/cta/AniLinkPopup/index.js +5 -5
- package/es/materials/sxp/popup/CommodityDetail/index.js +38 -14
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +37 -13
- package/es/materials/sxp/popup/CommodityList/index.js +32 -28
- package/es/materials/sxp/template/Appoint/index.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/Link/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodity/index.js +23 -42
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +24 -42
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +25 -44
- package/es/materials/sxp/template/components/EventProvider.d.ts +2 -0
- package/es/materials/sxp/template/components/EventProvider.js +22 -11
- package/es/materials/sxp/template/components/Scroll.js +1 -1
- package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
- package/lib/core/components/SxpPageRender/Hashtag/index.js +2 -2
- package/lib/core/components/SxpPageRender/Modal/index.js +45 -7
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +49 -23
- package/lib/core/components/SxpPageRender/index.js +3 -3
- package/lib/core/hooks/useFocusTrap.d.ts +2 -0
- package/lib/core/hooks/useFocusTrap.js +39 -0
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +13 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +5 -5
- package/lib/materials/sxp/popup/CommodityDetail/index.js +36 -12
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +35 -11
- package/lib/materials/sxp/popup/CommodityList/index.js +32 -28
- package/lib/materials/sxp/template/Appoint/index.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/Link/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodity/index.js +22 -41
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +23 -41
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +24 -43
- package/lib/materials/sxp/template/components/EventProvider.d.ts +2 -0
- package/lib/materials/sxp/template/components/EventProvider.js +21 -10
- package/lib/materials/sxp/template/components/Scroll.js +1 -1
- package/package.json +1 -1
@@ -47,39 +47,43 @@ const CommodityList = (_a) => {
|
|
47
47
|
eventName: 'PageView'
|
48
48
|
});
|
49
49
|
}, []);
|
50
|
-
return (React.createElement("
|
50
|
+
return (React.createElement("ul", { role: 'list', className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
|
51
51
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
52
|
-
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("
|
53
|
-
|
54
|
-
}), onClick: () => handleClick(item, index) }),
|
55
|
-
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, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
|
56
|
-
React.createElement("div", { style: {
|
57
|
-
width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
|
52
|
+
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("li", { role: 'listitem', key: index, onClick: () => handleClick(item, index) },
|
53
|
+
React.createElement("button", Object.assign({ role: 'button', "aria-label": item === null || item === void 0 ? void 0 : item.title, tabIndex: 0, className: css({
|
58
54
|
display: 'flex',
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
} })
|
66
|
-
React.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
|
67
|
-
__html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
|
68
|
-
} })),
|
69
|
-
React.createElement("div", { className: css({
|
55
|
+
alignItems: 'normal',
|
56
|
+
width: '100%',
|
57
|
+
textAlign: 'left'
|
58
|
+
}) }, props),
|
59
|
+
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, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
|
60
|
+
React.createElement("div", { style: {
|
61
|
+
width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
|
70
62
|
display: 'flex',
|
71
|
-
|
72
|
-
justifyContent: 'space-between'
|
73
|
-
|
74
|
-
overflow: 'hidden'
|
75
|
-
}) },
|
63
|
+
flexDirection: 'column',
|
64
|
+
justifyContent: 'space-between'
|
65
|
+
} },
|
76
66
|
React.createElement("div", null,
|
77
|
-
React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.
|
78
|
-
__html: (
|
67
|
+
React.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
|
68
|
+
__html: setFontForText((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
|
69
|
+
} }),
|
70
|
+
React.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
|
71
|
+
__html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
|
79
72
|
} })),
|
80
|
-
React.createElement("div", { className:
|
81
|
-
|
82
|
-
|
73
|
+
React.createElement("div", { className: css({
|
74
|
+
display: 'flex',
|
75
|
+
alignItems: 'flex-end',
|
76
|
+
justifyContent: 'space-between',
|
77
|
+
width: '100%',
|
78
|
+
overflow: 'hidden'
|
79
|
+
}) },
|
80
|
+
React.createElement("div", null,
|
81
|
+
React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
|
82
|
+
__html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
|
83
|
+
} })),
|
84
|
+
React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
|
85
|
+
__html: setFontForText((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
|
86
|
+
} }))))))));
|
83
87
|
})));
|
84
88
|
};
|
85
89
|
export default memo(CommodityList);
|
@@ -11,7 +11,7 @@ const Appoint = (_a) => {
|
|
11
11
|
const { sxpParameter } = useSxpDataSource();
|
12
12
|
const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
|
13
13
|
const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
|
14
|
-
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData,
|
14
|
+
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: Object.assign({ alignItems: 'center' }, style), index: index }, props),
|
15
15
|
React.createElement(Img, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
16
16
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
17
17
|
__html: setFontForText((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
@@ -7,12 +7,12 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
7
7
|
import Img from '../components/Img';
|
8
8
|
import { setFontForText } from '../../../../core/utils/tool';
|
9
9
|
const Commodity = (_a) => {
|
10
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
10
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
11
11
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
|
12
12
|
const { sxpParameter } = useSxpDataSource();
|
13
13
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
14
14
|
const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
|
15
|
-
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData,
|
15
|
+
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
|
16
16
|
React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
17
17
|
React.createElement("div", { className: css({
|
18
18
|
color: '#fff',
|
@@ -25,8 +25,8 @@ const Commodity = (_a) => {
|
|
25
25
|
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
26
26
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
27
27
|
} }),
|
28
|
-
React.createElement("
|
29
|
-
__html: setFontForText((
|
28
|
+
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
29
|
+
__html: setFontForText((_p = (_o = product === null || product === void 0 ? void 0 : product.bindCta) === null || _o === void 0 ? void 0 : _o.enTitle) !== null && _p !== void 0 ? _p : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
30
30
|
} }))));
|
31
31
|
};
|
32
32
|
export default memo(Commodity);
|
@@ -7,12 +7,12 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
7
7
|
import Img from '../components/Img';
|
8
8
|
import { setFontForText } from '../../../../core/utils/tool';
|
9
9
|
const CommodityDiro = (_a) => {
|
10
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
10
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
11
11
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
|
12
12
|
const { sxpParameter } = useSxpDataSource();
|
13
13
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
14
14
|
const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
|
15
|
-
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData,
|
15
|
+
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
|
16
16
|
React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
17
17
|
React.createElement("div", { className: css({
|
18
18
|
color: '#fff',
|
@@ -25,8 +25,8 @@ const CommodityDiro = (_a) => {
|
|
25
25
|
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
26
26
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
27
27
|
} }),
|
28
|
-
React.createElement("
|
29
|
-
__html: setFontForText((
|
28
|
+
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
29
|
+
__html: setFontForText((_p = (_o = product === null || product === void 0 ? void 0 : product.bindCta) === null || _o === void 0 ? void 0 : _o.enTitle) !== null && _p !== void 0 ? _p : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
30
30
|
} }))));
|
31
31
|
};
|
32
32
|
export default memo(CommodityDiro);
|
@@ -7,12 +7,12 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
7
7
|
import Img from '../components/Img';
|
8
8
|
import { setFontForText } from '../../../../core/utils/tool';
|
9
9
|
const CommodityDiroNew = (_a) => {
|
10
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
10
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
11
11
|
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
|
12
12
|
const { sxpParameter } = useSxpDataSource();
|
13
13
|
const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
|
14
14
|
const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
|
15
|
-
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData,
|
15
|
+
return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
|
16
16
|
React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
17
17
|
React.createElement("div", { className: css({
|
18
18
|
color: '#fff',
|
@@ -25,8 +25,8 @@ const CommodityDiroNew = (_a) => {
|
|
25
25
|
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
26
26
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
27
27
|
} }),
|
28
|
-
React.createElement("
|
29
|
-
__html: setFontForText((
|
28
|
+
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
29
|
+
__html: setFontForText((_o = (_m = product === null || product === void 0 ? void 0 : product.bindCta) === null || _m === void 0 ? void 0 : _m.enTitle) !== null && _o !== void 0 ? _o : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
30
30
|
} }))));
|
31
31
|
};
|
32
32
|
export default memo(CommodityDiroNew);
|
@@ -15,7 +15,7 @@ const Link = (_a) => {
|
|
15
15
|
const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
|
16
16
|
const product = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
|
17
17
|
const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
|
18
|
-
return (React.createElement(EventProvider, Object.assign({ index: index, rec: recData,
|
18
|
+
return (React.createElement(EventProvider, Object.assign({ index: index, rec: recData, style: Object.assign({ alignItems: 'center' }, style) }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
|
19
19
|
React.createElement(Img, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
20
20
|
React.createElement("div", { className: css({
|
21
21
|
display: 'flex',
|
@@ -2,55 +2,36 @@ import { __rest } from "tslib";
|
|
2
2
|
import { css } from '@emotion/css';
|
3
3
|
import React, { memo, useState } from 'react';
|
4
4
|
import { SwiperSlide } from 'swiper/react';
|
5
|
-
import { throttle } from 'lodash';
|
6
5
|
import Img from '../components/Img';
|
7
6
|
import Scroll from '../components/Scroll';
|
8
7
|
import styles from './index.module.less';
|
9
|
-
import {
|
10
|
-
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
8
|
+
import { useSxpDataSource } from '../../../../core/hooks';
|
11
9
|
import { setFontForText } from '../../../../core/utils/tool';
|
10
|
+
import EventProvider from '../components/EventProvider';
|
12
11
|
const MultiCommodity = (_a) => {
|
13
12
|
var _b, _c;
|
14
|
-
var { content, style, bgImg, recData,
|
13
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
|
15
14
|
const { sxpParameter } = useSxpDataSource();
|
16
|
-
const
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
|
37
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
38
|
-
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
|
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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
40
|
-
React.createElement("div", { className: css({
|
41
|
-
color: '#fff',
|
42
|
-
display: 'flex',
|
43
|
-
flexDirection: 'column',
|
44
|
-
justifyContent: 'space-between',
|
45
|
-
width: '100%',
|
46
|
-
overflow: 'hidden'
|
47
|
-
}) },
|
48
|
-
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
49
|
-
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
50
|
-
} }),
|
51
|
-
React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
52
|
-
__html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
53
|
-
} }))))));
|
15
|
+
const [products] = 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]);
|
16
|
+
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18
|
+
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
19
|
+
React.createElement(EventProvider, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
|
20
|
+
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: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
21
|
+
React.createElement("div", { className: css({
|
22
|
+
color: '#fff',
|
23
|
+
display: 'flex',
|
24
|
+
flexDirection: 'column',
|
25
|
+
justifyContent: 'space-between',
|
26
|
+
width: '100%',
|
27
|
+
overflow: 'hidden'
|
28
|
+
}) },
|
29
|
+
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
30
|
+
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
31
|
+
} }),
|
32
|
+
React.createElement("button", { "aria-label": (_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', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
33
|
+
__html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
34
|
+
} })))))));
|
54
35
|
})));
|
55
36
|
};
|
56
37
|
export default memo(MultiCommodity);
|
@@ -2,54 +2,36 @@ import { __rest } from "tslib";
|
|
2
2
|
import { css } from '@emotion/css';
|
3
3
|
import React, { memo, useState } from 'react';
|
4
4
|
import { SwiperSlide } from 'swiper/react';
|
5
|
-
import { throttle } from 'lodash';
|
6
5
|
import Scroll from '../components/Scroll';
|
7
6
|
import Img from '../components/Img';
|
8
7
|
import styles from './index.module.less';
|
9
|
-
import {
|
10
|
-
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
8
|
+
import { useSxpDataSource } from '../../../../core/hooks';
|
11
9
|
import { setFontForText } from '../../../../core/utils/tool';
|
10
|
+
import EventProvider from '../components/EventProvider';
|
12
11
|
const MultiCommodityDiro = (_a) => {
|
13
12
|
var _b, _c;
|
14
|
-
var { content, style, bgImg, recData,
|
15
|
-
const {
|
16
|
-
const
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
37
|
-
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
|
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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
39
|
-
React.createElement("div", { className: css({
|
40
|
-
color: '#000',
|
41
|
-
display: 'flex',
|
42
|
-
flexDirection: 'column',
|
43
|
-
justifyContent: 'space-between',
|
44
|
-
width: '100%',
|
45
|
-
overflow: 'hidden'
|
46
|
-
}) },
|
47
|
-
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
48
|
-
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
49
|
-
} }),
|
50
|
-
React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
51
|
-
__html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
52
|
-
} }))))));
|
13
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
|
14
|
+
const { sxpParameter } = useSxpDataSource();
|
15
|
+
const [products] = 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]);
|
16
|
+
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18
|
+
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
19
|
+
React.createElement(EventProvider, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
|
20
|
+
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: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
21
|
+
React.createElement("div", { className: css({
|
22
|
+
color: '#000',
|
23
|
+
display: 'flex',
|
24
|
+
flexDirection: 'column',
|
25
|
+
justifyContent: 'space-between',
|
26
|
+
width: '100%',
|
27
|
+
overflow: 'hidden'
|
28
|
+
}) },
|
29
|
+
React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
30
|
+
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
31
|
+
} }),
|
32
|
+
React.createElement("button", { "aria-label": (_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', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
33
|
+
__html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
34
|
+
} })))))));
|
53
35
|
})));
|
54
36
|
};
|
55
37
|
export default memo(MultiCommodityDiro);
|
@@ -2,56 +2,37 @@ import { __rest } from "tslib";
|
|
2
2
|
import { css } from '@emotion/css';
|
3
3
|
import React, { memo, useState } from 'react';
|
4
4
|
import { SwiperSlide } from 'swiper/react';
|
5
|
-
import { throttle } from 'lodash';
|
6
5
|
import Scroll from '../components/Scroll';
|
7
6
|
import Img from '../components/Img';
|
8
7
|
import styles from './index.module.less';
|
9
|
-
import {
|
10
|
-
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
8
|
+
import { useSxpDataSource } from '../../../../core/hooks';
|
11
9
|
import { setFontForText } from '../../../../core/utils/tool';
|
10
|
+
import EventProvider from '../components/EventProvider';
|
12
11
|
const MultiCommodityDiroNew = (_a) => {
|
13
12
|
var _b, _c;
|
14
|
-
var { content, style, bgImg, recData,
|
15
|
-
const {
|
16
|
-
const
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
38
|
-
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
|
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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
40
|
-
React.createElement("div", { className: css({
|
41
|
-
color: '#fff',
|
42
|
-
display: 'flex',
|
43
|
-
flexDirection: 'column',
|
44
|
-
justifyContent: 'center',
|
45
|
-
width: '100%',
|
46
|
-
overflow: 'hidden',
|
47
|
-
lineHeight: '20px'
|
48
|
-
}) },
|
49
|
-
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
50
|
-
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
51
|
-
} }),
|
52
|
-
React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
53
|
-
__html: setFontForText((_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', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
54
|
-
} }))))));
|
13
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
|
14
|
+
const { sxpParameter } = useSxpDataSource();
|
15
|
+
const [products] = 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]);
|
16
|
+
return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18
|
+
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
19
|
+
React.createElement(EventProvider, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
|
20
|
+
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: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
|
21
|
+
React.createElement("div", { className: css({
|
22
|
+
color: '#fff',
|
23
|
+
display: 'flex',
|
24
|
+
flexDirection: 'column',
|
25
|
+
justifyContent: 'center',
|
26
|
+
width: '100%',
|
27
|
+
overflow: 'hidden',
|
28
|
+
lineHeight: '20px'
|
29
|
+
}) },
|
30
|
+
React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
31
|
+
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
32
|
+
} }),
|
33
|
+
React.createElement("button", { "aria-label": (_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', className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
34
|
+
__html: setFontForText((_j = (_h = item === null || item === void 0 ? void 0 : item.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
35
|
+
} })))))));
|
55
36
|
})));
|
56
37
|
};
|
57
38
|
export default memo(MultiCommodityDiroNew);
|
@@ -9,6 +9,8 @@ export interface IEventProviderProps {
|
|
9
9
|
isExternalLink?: boolean;
|
10
10
|
index?: number;
|
11
11
|
jumpLink?: string;
|
12
|
+
multItem?: any;
|
13
|
+
multiCheckIndex?: number;
|
12
14
|
}
|
13
15
|
declare const _default: React.NamedExoticComponent<IEventProviderProps>;
|
14
16
|
export default _default;
|
@@ -1,34 +1,45 @@
|
|
1
1
|
import { __rest } from "tslib";
|
2
|
-
import React, { memo, useRef } from 'react';
|
2
|
+
import React, { memo, useEffect, useRef, useState } from 'react';
|
3
3
|
import { throttle } from 'lodash';
|
4
4
|
import { useEditor, useSxpDataSource } from '../../../../core/hooks';
|
5
5
|
import { useEventReport } from '../../../../core/hooks/useEventReport';
|
6
6
|
const EventProvider = (_a) => {
|
7
|
-
var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink"]);
|
7
|
+
var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
|
8
8
|
const ref = useRef(null);
|
9
9
|
const { popup } = useEditor();
|
10
10
|
const { setPopupDetailData, ctaEvent } = useSxpDataSource();
|
11
11
|
const { jumpToWeb } = useEventReport();
|
12
|
-
const
|
13
|
-
|
14
|
-
|
12
|
+
const [element, setElement] = useState(null);
|
13
|
+
const handleClick = throttle((event) => {
|
14
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
15
|
+
event.preventDefault();
|
16
|
+
const item = (_c = (_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) !== null && _c !== void 0 ? _c : multItem;
|
15
17
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
16
18
|
eventSubject: 'clickCta',
|
17
19
|
eventDescription: 'User clicked the CTA'
|
18
20
|
}, rec, item, index);
|
19
|
-
setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(
|
21
|
+
setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex
|
22
|
+
? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
|
23
|
+
setElement(ref === null || ref === void 0 ? void 0 : ref.current);
|
20
24
|
if (isExternalLink) {
|
21
|
-
|
22
|
-
|
23
|
-
const
|
25
|
+
const link = ((_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
|
26
|
+
if (jumpLink || link) {
|
27
|
+
const cta = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
|
28
|
+
const product = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) || multItem;
|
24
29
|
jumpToWeb(rec, product, cta, index);
|
25
|
-
window.location.href = window.getJointUtmLink(jumpLink ||
|
30
|
+
window.location.href = window.getJointUtmLink(jumpLink || link || '');
|
26
31
|
}
|
27
32
|
}
|
28
33
|
else {
|
29
34
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
30
35
|
}
|
31
36
|
}, popup === null || popup === void 0 ? void 0 : popup.duration);
|
32
|
-
|
37
|
+
useEffect(() => {
|
38
|
+
if (element && !(popup === null || popup === void 0 ? void 0 : popup.id)) {
|
39
|
+
element === null || element === void 0 ? void 0 : element.focus();
|
40
|
+
setElement(null);
|
41
|
+
}
|
42
|
+
}, [element, popup]);
|
43
|
+
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));
|
33
44
|
};
|
34
45
|
export default memo(EventProvider);
|
@@ -13,6 +13,6 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
|
|
13
13
|
if (enableSlideActive)
|
14
14
|
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
|
15
15
|
}, [popupDetailData, enableSlideActive]);
|
16
|
-
return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
|
16
|
+
return (React.createElement(Swiper, { role: 'list', tag: 'ul', ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
|
17
17
|
};
|
18
18
|
export default memo(Scroll);
|
@@ -53,7 +53,7 @@ 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("
|
56
|
+
text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
57
57
|
__html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
58
58
|
} }))));
|
59
59
|
};
|
@@ -43,7 +43,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRigh
|
|
43
43
|
marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`,
|
44
44
|
width: hashTagRightMargin
|
45
45
|
} },
|
46
|
-
react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: '
|
47
|
-
react_1.default.createElement("
|
46
|
+
react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'li', role: 'listitem' },
|
47
|
+
react_1.default.createElement("button", { className: 'clc-sxp-bottom-hashtag-item-button', "aria-label": item, "aria-describedby": item, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
|
48
48
|
};
|
49
49
|
exports.default = (0, react_1.memo)(Hashtag);
|