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.
Files changed (66) hide show
  1. package/dist/index.cjs +1005 -241
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +72 -4
  4. package/dist/index.js +1005 -241
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +1005 -241
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  15. package/es/core/components/SxpPageRender/Hashtag/index.js +2 -2
  16. package/es/core/components/SxpPageRender/Modal/index.js +45 -7
  17. package/es/core/components/SxpPageRender/PictureGroup/index.js +51 -25
  18. package/es/core/components/SxpPageRender/index.js +3 -3
  19. package/es/core/hooks/useFocusTrap.d.ts +2 -0
  20. package/es/core/hooks/useFocusTrap.js +37 -0
  21. package/es/core/utils/tool.d.ts +2 -1
  22. package/es/core/utils/tool.js +12 -1
  23. package/es/index.d.ts +1 -0
  24. package/es/index.js +1 -0
  25. package/es/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  26. package/es/materials/sxp/popup/CommodityDetail/index.js +38 -14
  27. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +37 -13
  28. package/es/materials/sxp/popup/CommodityList/index.js +32 -28
  29. package/es/materials/sxp/template/Appoint/index.js +1 -1
  30. package/es/materials/sxp/template/Commodity/index.js +4 -4
  31. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  32. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  33. package/es/materials/sxp/template/Link/index.js +1 -1
  34. package/es/materials/sxp/template/MultiCommodity/index.js +23 -42
  35. package/es/materials/sxp/template/MultiCommodityDiro/index.js +24 -42
  36. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +25 -44
  37. package/es/materials/sxp/template/components/EventProvider.d.ts +2 -0
  38. package/es/materials/sxp/template/components/EventProvider.js +22 -11
  39. package/es/materials/sxp/template/components/Scroll.js +1 -1
  40. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  41. package/lib/core/components/SxpPageRender/Hashtag/index.js +2 -2
  42. package/lib/core/components/SxpPageRender/Modal/index.js +45 -7
  43. package/lib/core/components/SxpPageRender/PictureGroup/index.js +49 -23
  44. package/lib/core/components/SxpPageRender/index.js +3 -3
  45. package/lib/core/hooks/useFocusTrap.d.ts +2 -0
  46. package/lib/core/hooks/useFocusTrap.js +39 -0
  47. package/lib/core/utils/tool.d.ts +2 -1
  48. package/lib/core/utils/tool.js +13 -1
  49. package/lib/index.d.ts +1 -0
  50. package/lib/index.js +1 -0
  51. package/lib/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  52. package/lib/materials/sxp/popup/CommodityDetail/index.js +36 -12
  53. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +35 -11
  54. package/lib/materials/sxp/popup/CommodityList/index.js +32 -28
  55. package/lib/materials/sxp/template/Appoint/index.js +1 -1
  56. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  57. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  58. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  59. package/lib/materials/sxp/template/Link/index.js +1 -1
  60. package/lib/materials/sxp/template/MultiCommodity/index.js +22 -41
  61. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +23 -41
  62. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +24 -43
  63. package/lib/materials/sxp/template/components/EventProvider.d.ts +2 -0
  64. package/lib/materials/sxp/template/components/EventProvider.js +21 -10
  65. package/lib/materials/sxp/template/components/Scroll.js +1 -1
  66. package/package.json +1 -1
@@ -47,39 +47,43 @@ const CommodityList = (_a) => {
47
47
  eventName: 'PageView'
48
48
  });
49
49
  }, []);
50
- return (React.createElement("div", { 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) => {
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("div", Object.assign({ key: index }, props, { className: css({
53
- display: 'flex'
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
- flexDirection: 'column',
60
- justifyContent: 'space-between'
61
- } },
62
- React.createElement("div", null,
63
- 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: {
64
- __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)
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
- alignItems: 'flex-end',
72
- justifyContent: 'space-between',
73
- width: '100%',
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.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
78
- __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
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: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
81
- __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)
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, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
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, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
29
- __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
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, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
29
- __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
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, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
29
- __html: setFontForText((_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', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
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, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
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 { useEditor, useSxpDataSource } from '../../../../core/hooks';
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, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
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 { ctaEvent, setPopupDetailData } = useSxpDataSource();
17
- const { popup } = useEditor();
18
- const [products, setProducts] = 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]);
19
- const { jumpToWeb } = useEventReport();
20
- const handleClick = throttle((item, multiCheckIndex) => {
21
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
22
- eventSubject: 'clickCta',
23
- eventDescription: 'User clicked the CTA'
24
- }, recData, item, index);
25
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
26
- if (isExternalLink) {
27
- if (item === null || item === void 0 ? void 0 : item.link) {
28
- jumpToWeb(recData, item, item.bindCta, index);
29
- window.location.href = window.getJointUtmLink(item.link);
30
- }
31
- }
32
- else {
33
- onClick === null || onClick === void 0 ? void 0 : onClick();
34
- }
35
- }, popup === null || popup === void 0 ? void 0 : popup.duration);
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 { useEditor, useSxpDataSource } from '../../../../core/hooks';
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, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
15
- const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
- const { popup } = useEditor();
17
- const { jumpToWeb } = useEventReport();
18
- const [products, setProducts] = 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]);
19
- const handleClick = throttle((item, multiCheckIndex) => {
20
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
21
- eventSubject: 'clickCta',
22
- eventDescription: 'User clicked the CTA'
23
- }, recData, item, index);
24
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
25
- if (isExternalLink) {
26
- if (item === null || item === void 0 ? void 0 : item.link) {
27
- jumpToWeb(recData, item, item.bindCta, index);
28
- window.location.href = window.getJointUtmLink(item.link);
29
- }
30
- }
31
- else {
32
- onClick === null || onClick === void 0 ? void 0 : onClick();
33
- }
34
- }, popup === null || popup === void 0 ? void 0 : popup.duration);
35
- return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
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 { useEditor, useSxpDataSource } from '../../../../core/hooks';
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, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
15
- const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
- const { popup } = useEditor();
17
- const { jumpToWeb } = useEventReport();
18
- const [products, setProducts] = 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]);
19
- const handleClick = throttle((item, multiCheckIndex) => {
20
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
21
- eventSubject: 'clickCta',
22
- eventDescription: 'User clicked the CTA'
23
- }, recData, item, index);
24
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index,
25
- multiCheckIndex }));
26
- if (isExternalLink) {
27
- if (item === null || item === void 0 ? void 0 : item.link) {
28
- jumpToWeb(recData, item, item.bindCta, index);
29
- window.location.href = window.getJointUtmLink(item.link);
30
- }
31
- }
32
- else {
33
- onClick === null || onClick === void 0 ? void 0 : onClick();
34
- }
35
- }, popup === null || popup === void 0 ? void 0 : popup.duration);
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;
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 handleClick = throttle(() => {
13
- var _a, _b, _c, _d, _e, _f, _g, _h;
14
- const item = (_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;
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(Object.assign(Object.assign({}, rec), { index }));
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
- if (jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link)) {
22
- const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
23
- const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
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 || ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link) || '');
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
- return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
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("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
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: 'button', "aria-label": item },
47
- react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
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);