pb-sxp-ui 1.2.3 → 1.2.5

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 (68) hide show
  1. package/dist/index.cjs +276 -172
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +2 -2
  4. package/dist/index.js +276 -172
  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 +276 -172
  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/Hashtag/index.js +0 -1
  15. package/es/core/components/SxpPageRender/LikeButton/index.js +34 -15
  16. package/es/core/components/SxpPageRender/Modal/index.js +16 -8
  17. package/es/core/components/SxpPageRender/Popup/index.js +24 -13
  18. package/es/core/components/SxpPageRender/RenderCard.d.ts +1 -0
  19. package/es/core/components/SxpPageRender/RenderCard.js +17 -4
  20. package/es/core/components/SxpPageRender/index.js +3 -3
  21. package/es/core/components/SxpPageRender/typing.d.ts +1 -0
  22. package/es/core/context/SxpDataSourceProvider.d.ts +3 -3
  23. package/es/core/context/SxpDataSourceProvider.js +7 -3
  24. package/es/materials/sxp/cta/AniLink/index.js +5 -1
  25. package/es/materials/sxp/cta/AniLinkPopup/index.d.ts +1 -0
  26. package/es/materials/sxp/cta/AniLinkPopup/index.js +12 -18
  27. package/es/materials/sxp/cta/AniLinkPopup/settingRender.js +1 -1
  28. package/es/materials/sxp/popup/CommodityDetail/index.js +25 -13
  29. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +28 -17
  30. package/es/materials/sxp/popup/CommodityList/index.js +28 -10
  31. package/es/materials/sxp/popup/CommodityList/material.js +1 -0
  32. package/es/materials/sxp/popup/CommodityList/settingRender.js +5 -0
  33. package/es/materials/sxp/template/MultiCommodity/index.js +3 -3
  34. package/es/materials/sxp/template/MultiCommodityDiro/index.js +3 -3
  35. package/es/materials/sxp/template/components/CommodityGroup.d.ts +4 -0
  36. package/es/materials/sxp/template/components/CommodityGroup.js +12 -15
  37. package/es/materials/sxp/template/components/Img.d.ts +1 -0
  38. package/es/materials/sxp/template/components/Img.js +3 -3
  39. package/es/materials/sxp/template/components/Scroll.d.ts +1 -0
  40. package/es/materials/sxp/template/components/Scroll.js +5 -4
  41. package/lib/core/components/SxpPageRender/Hashtag/index.js +0 -1
  42. package/lib/core/components/SxpPageRender/LikeButton/index.js +34 -15
  43. package/lib/core/components/SxpPageRender/Modal/index.js +16 -8
  44. package/lib/core/components/SxpPageRender/Popup/index.js +23 -12
  45. package/lib/core/components/SxpPageRender/RenderCard.d.ts +1 -0
  46. package/lib/core/components/SxpPageRender/RenderCard.js +17 -4
  47. package/lib/core/components/SxpPageRender/index.js +3 -3
  48. package/lib/core/components/SxpPageRender/typing.d.ts +1 -0
  49. package/lib/core/context/SxpDataSourceProvider.d.ts +3 -3
  50. package/lib/core/context/SxpDataSourceProvider.js +7 -3
  51. package/lib/materials/sxp/cta/AniLink/index.js +5 -1
  52. package/lib/materials/sxp/cta/AniLinkPopup/index.d.ts +1 -0
  53. package/lib/materials/sxp/cta/AniLinkPopup/index.js +11 -17
  54. package/lib/materials/sxp/cta/AniLinkPopup/settingRender.js +1 -1
  55. package/lib/materials/sxp/popup/CommodityDetail/index.js +24 -12
  56. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +28 -17
  57. package/lib/materials/sxp/popup/CommodityList/index.js +27 -9
  58. package/lib/materials/sxp/popup/CommodityList/material.js +1 -0
  59. package/lib/materials/sxp/popup/CommodityList/settingRender.js +5 -0
  60. package/lib/materials/sxp/template/MultiCommodity/index.js +3 -3
  61. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +3 -3
  62. package/lib/materials/sxp/template/components/CommodityGroup.d.ts +4 -0
  63. package/lib/materials/sxp/template/components/CommodityGroup.js +11 -14
  64. package/lib/materials/sxp/template/components/Img.d.ts +1 -0
  65. package/lib/materials/sxp/template/components/Img.js +3 -3
  66. package/lib/materials/sxp/template/components/Scroll.d.ts +1 -0
  67. package/lib/materials/sxp/template/components/Scroll.js +5 -4
  68. package/package.json +1 -1
package/lib/core/components/SxpPageRender/Popup/index.js CHANGED
@@ -8,13 +8,12 @@ const withBindDataSource_1 = tslib_1.__importDefault(require("../../../../core/h
8
8
  const useEventReport_1 = require("../../../../core/hooks/useEventReport");
9
9
  const Popup = () => {
10
10
  const { schema, resolver, popup } = (0, hooks_1.useEditor)();
11
- const { setPopupDetailData, popupDetailData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
11
+ const { setPopupDetailData, popupDetailData, popupCurTimeRef, checkCommodityIndexRef } = (0, hooks_1.useSxpDataSource)();
12
12
  const { productView } = (0, useEventReport_1.useEventReport)();
13
13
  const [visible, setVisible] = (0, react_1.useState)();
14
- const curTimeRef = (0, react_1.useRef)(null);
15
14
  (0, react_1.useEffect)(() => {
16
15
  const initTime = () => {
17
- curTimeRef.current = new Date();
16
+ popupCurTimeRef.current = new Date();
18
17
  };
19
18
  initTime();
20
19
  window.addEventListener('pageshow', initTime);
@@ -24,25 +23,37 @@ const Popup = () => {
24
23
  }, []);
25
24
  (0, react_1.useEffect)(() => {
26
25
  if (popup && (popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') {
27
- curTimeRef.current = new Date();
26
+ popupCurTimeRef.current = new Date();
28
27
  setVisible(popup);
29
28
  }
30
29
  }, [popup]);
31
30
  const handleClose = () => {
32
- var _a, _b, _c, _d;
33
- if (!popup || (popup === null || popup === void 0 ? void 0 : popup.id) === '' || !visible || new Date() - curTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
31
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
32
+ if (!popup ||
33
+ (popup === null || popup === void 0 ? void 0 : popup.id) === '' ||
34
+ !visible ||
35
+ new Date() - popupCurTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
34
36
  return;
35
37
  }
36
38
  setVisible(Object.assign(Object.assign({}, popup), { id: '' }));
37
- const data = popupDetailData;
38
- const product = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
39
- const cta = (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
40
- if (product && cta) {
41
- productView(data, product, cta, curTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
39
+ const value = (_d = (_c = (_b = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig) === null || _c === void 0 ? void 0 : _c.popupList) === null || _d === void 0 ? void 0 : _d.find((item) => (item === null || item === void 0 ? void 0 : item.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
40
+ if (((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'CommodityDetail' || ((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDetailDiroNew') {
41
+ const data = popupDetailData;
42
+ let product = (_g = data === null || data === void 0 ? void 0 : data.video) === null || _g === void 0 ? void 0 : _g.bindProduct;
43
+ let cta = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta;
44
+ if ((checkCommodityIndexRef === null || checkCommodityIndexRef === void 0 ? void 0 : checkCommodityIndexRef.current) >= 0) {
45
+ const p = (_k = data === null || data === void 0 ? void 0 : data.video) === null || _k === void 0 ? void 0 : _k.bindProducts[checkCommodityIndexRef === null || checkCommodityIndexRef === void 0 ? void 0 : checkCommodityIndexRef.current];
46
+ product = p;
47
+ cta = p === null || p === void 0 ? void 0 : p.bindCta;
48
+ }
49
+ if (product && cta) {
50
+ productView(data, product, cta, popupCurTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
51
+ }
42
52
  }
43
53
  setTimeout(() => {
44
54
  window === null || window === void 0 ? void 0 : window.sxpPopup('');
45
55
  setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
56
+ checkCommodityIndexRef.current = -1;
46
57
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
47
58
  };
48
59
  const renderPopupDetail = (0, react_1.useMemo)(() => {
@@ -55,7 +66,7 @@ const Popup = () => {
55
66
  const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
56
67
  const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
57
68
  const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
58
- return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
69
+ return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '100%' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
59
70
  }
60
71
  else {
61
72
  return react_1.default.createElement(react_1.default.Fragment, null);
package/lib/core/components/SxpPageRender/RenderCard.d.ts CHANGED
@@ -7,6 +7,7 @@ interface IRenderCardProps {
7
7
  tempMap?: Record<string, any>;
8
8
  resolver: any;
9
9
  includesCtaType?: string[];
10
+ isActive?: boolean;
10
11
  }
11
12
  declare const _default: React.NamedExoticComponent<IRenderCardProps>;
12
13
  export default _default;
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -5,8 +5,22 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  require("./index.less");
6
6
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
7
7
  const hooks_1 = require("../../../core/hooks");
8
- const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
8
+ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }) => {
9
+ var _a, _b, _c, _d, _e;
9
10
  const { schema } = (0, hooks_1.useEditor)();
11
+ if (!(rec === null || rec === void 0 ? void 0 : rec.video))
12
+ return null;
13
+ let cta = null;
14
+ if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
15
+ cta = '多商品CTA';
16
+ }
17
+ else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
18
+ cta = '商品CTA';
19
+ }
20
+ else {
21
+ cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
22
+ }
23
+ const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
10
24
  const renderComp = (0, react_1.useMemo)(() => {
11
25
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
12
26
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
@@ -21,7 +35,6 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
21
35
  else {
22
36
  cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
23
37
  }
24
- const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
25
38
  if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
26
39
  return;
27
40
  if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
@@ -39,12 +52,12 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
39
52
  const Component = (0, withBindDataSource_1.default)(t);
40
53
  const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
41
54
  const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
42
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
55
+ return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
43
56
  }
44
57
  else {
45
58
  return null;
46
59
  }
47
- }, [rec, resolver, tempMap, schema]);
60
+ }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id, isActive]);
48
61
  return react_1.default.createElement(react_1.default.Fragment, null, renderComp);
49
62
  };
50
63
  exports.default = (0, react_1.memo)(RenderCard);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -235,7 +235,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
235
235
  react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
236
236
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
237
237
  react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
238
- react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
238
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
239
239
  }
240
240
  return null;
241
241
  }, [
@@ -290,11 +290,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
290
290
  };
291
291
  const handleSlideSkip = (item, position) => {
292
292
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
293
- if (isPreview)
293
+ if (isPreview || waterFallData)
294
294
  return;
295
295
  const t = new Date() - curTime.current;
296
296
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.openSlideSkip) && t >= ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.slideSkipStartTime) !== null && _a !== void 0 ? _a : 0) && (0, localStore_1.getSlideSkipState)() && item) {
297
- const link = ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.link) || ((_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.link) || ((_g = item === null || item === void 0 ? void 0 : item.product) === null || _g === void 0 ? void 0 : _g.link);
297
+ const link = ((_d = (_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.link) || ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.link) || ((_g = item === null || item === void 0 ? void 0 : item.product) === null || _g === void 0 ? void 0 : _g.link);
298
298
  const product = (item === null || item === void 0 ? void 0 : item.product) || ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]);
299
299
  if (link) {
300
300
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
package/lib/core/components/SxpPageRender/typing.d.ts CHANGED
@@ -14,6 +14,7 @@ export type RecItemType = {
14
14
  hashTags: string[];
15
15
  tags: string[];
16
16
  multiCheckIndex?: number;
17
+ index?: number;
17
18
  };
18
19
  export type CTAInfoType = {
19
20
  traceInfo: string;
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -23,9 +23,7 @@ export interface ISxpDataSourceContext {
23
23
  mutateLike?: (body: {
24
24
  content: string;
25
25
  }) => Promise<boolean>;
26
- popupDetailData?: RecItemType & {
27
- index: number;
28
- };
26
+ popupDetailData?: RecItemType;
29
27
  setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
30
28
  loadVideos?: (page: number) => Promise<void>;
31
29
  getRecommendVideos?: (query?: {
@@ -81,6 +79,8 @@ export interface ISxpDataSourceContext {
81
79
  selectTag?: string;
82
80
  setSelectTag?: React.Dispatch<React.SetStateAction<string>>;
83
81
  globalConfig?: ISxpPageRenderProps['globalConfig'];
82
+ popupCurTimeRef?: any;
83
+ checkCommodityIndexRef?: any;
84
84
  }
85
85
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
86
86
  export interface SxpDataSourceProviderProps {
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -37,6 +37,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
37
37
  const themeTag = (0, react_1.useRef)();
38
38
  const curTime = (0, react_1.useRef)();
39
39
  const [selectTag, setSelectTag] = (0, react_1.useState)(exports.DEFAULT_TAG);
40
+ const checkCommodityIndexRef = (0, react_1.useRef)();
41
+ const popupCurTimeRef = (0, react_1.useRef)(null);
40
42
  const isShowConsent = (0, react_1.useMemo)(() => {
41
43
  var _a, _b, _c, _d;
42
44
  return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
@@ -193,7 +195,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
193
195
  }
194
196
  }), [bffFetch, utmVal, isShowTag]);
195
197
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
196
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
198
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
197
199
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
198
200
  const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
199
201
  let fromKName = '';
@@ -207,7 +209,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
207
209
  fromKName = 'imagePage';
208
210
  }
209
211
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
210
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
212
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName, fromKPage: (_o = location === null || location === void 0 ? void 0 : location.href) !== null && _o !== void 0 ? _o : '' })
211
213
  });
212
214
  }, [bffEventReport, isFromHashtag]);
213
215
  const h5EnterLink = (0, react_1.useCallback)(() => {
@@ -322,7 +324,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
322
324
  isShowConsent,
323
325
  selectTag,
324
326
  setSelectTag,
325
- globalConfig
327
+ globalConfig,
328
+ popupCurTimeRef,
329
+ checkCommodityIndexRef
326
330
  } }, isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
327
331
  rtcList,
328
332
  mutateLike: bffMutateLike,
package/lib/materials/sxp/cta/AniLink/index.js CHANGED
@@ -53,17 +53,21 @@ const AniLink = (_a) => {
53
53
  }
54
54
  }, [event === null || event === void 0 ? void 0 : event.animation]);
55
55
  (0, react_1.useEffect)(() => {
56
+ var _a, _b, _c;
56
57
  if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
57
58
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
58
59
  eventSubject: 'ctaExposure',
59
60
  eventDescription: 'The cta was shown to the user'
60
- }, recData, product, index);
61
+ }, recData, ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video), index);
61
62
  }
62
63
  }, [isOnScreen]);
63
64
  (0, react_1.useEffect)(() => {
64
65
  if (isOnScreen) {
65
66
  setVisible(true);
66
67
  }
68
+ else {
69
+ setVisible(false);
70
+ }
67
71
  }, [isOnScreen]);
68
72
  const aniNamStyle = (0, react_1.useMemo)(() => {
69
73
  if (!visible)
package/lib/materials/sxp/cta/AniLinkPopup/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IAniLinkPopupProps {
12
12
  isTel?: boolean;
13
13
  onClick?: () => void;
14
14
  isExternalLink?: boolean;
15
+ isActive?: boolean;
15
16
  }
16
17
  declare const _default: React.NamedExoticComponent<IAniLinkPopupProps>;
17
18
  export default _default;
package/lib/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -8,18 +8,14 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
8
8
  const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
9
9
  const tool_1 = require("../../../../core/utils/tool");
10
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
11
- const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
12
11
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
13
12
  const AniLinkPopup = (_a) => {
14
13
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
15
- var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
14
+ var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
16
15
  style === null || style === void 0 ? true : delete style.transform;
17
16
  const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
18
17
  const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
19
- const ref = (0, react_1.useRef)(null);
20
- const isOnScreen = (0, useOnScreen_1.default)(ref);
21
- const [visible, setVisible] = (0, react_1.useState)(false);
22
- const [startAni, setStartAni] = (0, react_1.useState)(true);
18
+ const [visible, setVisible] = (0, react_1.useState)(true);
23
19
  const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
24
20
  const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
25
21
  const handleTo = () => {
@@ -55,29 +51,27 @@ const AniLinkPopup = (_a) => {
55
51
  const src = (_q = (_p = (_o = (_l = product === null || product === void 0 ? void 0 : product.cover) !== null && _l !== void 0 ? _l : (_m = product === null || product === void 0 ? void 0 : product.homePage) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _p !== void 0 ? _p : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _q !== void 0 ? _q : bottom_image;
56
52
  const onClose = (event) => {
57
53
  event.stopPropagation();
58
- setStartAni(false);
54
+ setVisible(false);
59
55
  };
60
56
  (0, react_1.useEffect)(() => {
61
- if (isOnScreen) {
62
- setVisible(true);
63
- }
64
- }, [isOnScreen]);
57
+ setVisible(true);
58
+ }, [isActive]);
65
59
  const aniNamStyle = (0, react_1.useMemo)(() => {
66
- if (!visible)
60
+ if (!isActive)
67
61
  return null;
68
- return startAni ? index_module_less_1.default['animated-fadeIn'] : null;
69
- }, [visible, startAni]);
62
+ return visible ? index_module_less_1.default['animated-fadeIn'] : null;
63
+ }, [isActive, visible]);
70
64
  return (react_1.default.createElement(react_1.default.Fragment, null, isTel ? (react_1.default.createElement("div", { style: {
71
65
  height: '40px',
72
66
  lineHeight: '40px',
73
67
  paddingLeft: '6px'
74
- } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({ ref: ref }, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
68
+ } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
75
69
  react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
76
70
  react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
77
71
  react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
78
- react_1.default.createElement("div", { hidden: !!recData && !(product === null || product === void 0 ? void 0 : product.title), className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
72
+ (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
79
73
  __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
80
- } }),
74
+ } })),
81
75
  react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
82
76
  __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
83
77
  } })))));
package/lib/materials/sxp/cta/AniLinkPopup/settingRender.js CHANGED
@@ -198,7 +198,7 @@ exports.default = [
198
198
  },
199
199
  {
200
200
  type: 'TextSpace',
201
- name: ['props', 'ctaTempStyles', 'title']
201
+ name: ['props', 'ctaTempStyles', 'ctaTitle']
202
202
  },
203
203
  {
204
204
  type: 'Color',
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -14,18 +14,26 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetail = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
18
18
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
19
- const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
20
- const { popupDetailData, bffEventReport, isPreview, bffFbReport } = (0, hooks_1.useSxpDataSource)();
19
+ const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef } = (0, hooks_1.useSxpDataSource)();
20
+ const { popup } = (0, hooks_1.useEditor)();
21
21
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
22
22
  const curTimeRef = (0, react_1.useRef)(null);
23
23
  const [showModal, setShowModal] = (0, react_1.useState)(false);
24
24
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
25
+ const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
25
26
  const data = isPost ? rec : popupDetailData;
26
- const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
27
- const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
27
+ let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
28
+ let cta = isPost
29
+ ? (_g = data === null || data === void 0 ? void 0 : data.product) === null || _g === void 0 ? void 0 : _g.bindCta
30
+ : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta;
28
31
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
32
+ if (!isPost && (commodityGroup === null || commodityGroup === void 0 ? void 0 : commodityGroup.open) && ((_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProducts) && ((_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length) > 0) {
33
+ const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
34
+ product = p;
35
+ cta = p === null || p === void 0 ? void 0 : p.bindCta;
36
+ }
29
37
  const handleLink = () => {
30
38
  if (product === null || product === void 0 ? void 0 : product.link) {
31
39
  jumpToWeb(data, product, cta, position);
@@ -63,7 +71,7 @@ const CommodityDetail = (_a) => {
63
71
  return '$7,000';
64
72
  }
65
73
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
66
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
74
+ const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
67
75
  const renderContent = ({ isPost }) => {
68
76
  var _a, _b, _c;
69
77
  return (react_1.default.createElement("div", null,
@@ -96,15 +104,19 @@ const CommodityDetail = (_a) => {
96
104
  }
97
105
  return style;
98
106
  }, []);
107
+ const handleClick = (0, react_1.useCallback)((index) => {
108
+ popupCurTimeRef.current = new Date();
109
+ setCheckCommodityIndex(index);
110
+ }, []);
99
111
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
100
112
  var _a, _b, _c;
101
113
  if (isPost)
102
114
  return;
103
- return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
104
- }, []);
115
+ return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
116
+ }, [checkCommodityIndex]);
105
117
  return (react_1.default.createElement(react_1.default.Fragment, null,
106
118
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
107
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
119
+ product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
108
120
  react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
109
121
  clickable: true,
110
122
  bulletActiveClass: 'swipe-item-active-bullet',
@@ -114,7 +126,7 @@ const CommodityDetail = (_a) => {
114
126
  }, loop: true, autoplay: {
115
127
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
116
128
  } },
117
- react_1.default.createElement(react_1.default.Fragment, null, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
129
+ react_1.default.createElement(react_1.default.Fragment, null, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
118
130
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
119
131
  react_1.default.createElement("div", { style: {
120
132
  overflow: 'hidden',
@@ -129,7 +141,7 @@ const CommodityDetail = (_a) => {
129
141
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
130
142
  }, src: src }))));
131
143
  }))))),
132
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
144
+ !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
133
145
  position: 'relative',
134
146
  height: 0,
135
147
  width: '100%',
@@ -142,7 +154,7 @@ const CommodityDetail = (_a) => {
142
154
  top: 0,
143
155
  objectFit: 'cover',
144
156
  width: '100%'
145
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
157
+ }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
146
158
  renderCommodityGroup(),
147
159
  react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
148
160
  renderBtn(),
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -14,21 +14,28 @@ const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/componen
14
14
  const tool_1 = require("../../../../core/utils/tool");
15
15
  const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
16
16
  const CommodityDetailDiroNew = (_a) => {
17
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
17
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
18
18
  var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
19
19
  const [spread, setSpread] = (0, react_1.useState)(true);
20
- const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
21
- const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = (0, hooks_1.useSxpDataSource)();
20
+ const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport } = (0, hooks_1.useSxpDataSource)();
22
21
  const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
23
22
  const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
24
23
  const [isBottom, setIsBottom] = (0, react_1.useState)(false);
25
24
  const [isTop, setIsTop] = (0, react_1.useState)(true);
26
25
  const [showModal, setShowModal] = (0, react_1.useState)(false);
27
26
  const curTimeRef = (0, react_1.useRef)(null);
27
+ const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
28
28
  const data = isPost ? rec : popupDetailData;
29
- const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
30
- const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
29
+ let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
30
+ let cta = isPost
31
+ ? (_g = data === null || data === void 0 ? void 0 : data.product) === null || _g === void 0 ? void 0 : _g.bindCta
32
+ : (_k = (_j = (_h = data === null || data === void 0 ? void 0 : data.video) === null || _h === void 0 ? void 0 : _h.bindProduct) === null || _j === void 0 ? void 0 : _j.bindCta) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta;
31
33
  const position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
34
+ if (!isPost && (commodityGroup === null || commodityGroup === void 0 ? void 0 : commodityGroup.open) && ((_p = data === null || data === void 0 ? void 0 : data.video) === null || _p === void 0 ? void 0 : _p.bindProducts) && ((_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length) > 0) {
35
+ const p = (_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.bindProducts[checkCommodityIndex];
36
+ product = p;
37
+ cta = p === null || p === void 0 ? void 0 : p.bindCta;
38
+ }
32
39
  const handleLink = () => {
33
40
  if (product === null || product === void 0 ? void 0 : product.link) {
34
41
  jumpToWeb(data, product, cta, position);
@@ -66,7 +73,7 @@ const CommodityDetailDiroNew = (_a) => {
66
73
  return '£102,300.00';
67
74
  }
68
75
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
69
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
76
+ const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
70
77
  const handleClickCollapse = () => {
71
78
  setSpread(!spread);
72
79
  };
@@ -82,15 +89,19 @@ Made in Italy` })));
82
89
  }
83
90
  return style;
84
91
  }, []);
92
+ const handleClick = (0, react_1.useCallback)((index) => {
93
+ popupCurTimeRef.current = new Date();
94
+ setCheckCommodityIndex(index);
95
+ }, []);
85
96
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
86
97
  var _a, _b, _c;
87
98
  if (isPost)
88
99
  return;
89
- return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
90
- }, []);
100
+ return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
101
+ }, [checkCommodityIndex]);
91
102
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
92
- react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
93
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
103
+ react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
104
+ product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
94
105
  clickable: true,
95
106
  bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
96
107
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -98,7 +109,7 @@ Made in Italy` })));
98
109
  : 'commondityDiroNew-swiper-clickable-center'
99
110
  }, loop: true, autoplay: {
100
111
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
101
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
112
+ } }, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
102
113
  return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
103
114
  react_1.default.createElement("div", { style: {
104
115
  overflow: 'hidden',
@@ -113,7 +124,7 @@ Made in Italy` })));
113
124
  objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
114
125
  }, src: src }))));
115
126
  }))),
116
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
127
+ !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
117
128
  position: 'relative',
118
129
  height: 0,
119
130
  width: '100%',
@@ -126,13 +137,13 @@ Made in Italy` })));
126
137
  top: 0,
127
138
  objectFit: 'cover',
128
139
  width: '100%'
129
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
140
+ }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
130
141
  renderCommodityGroup(),
131
142
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
132
143
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
133
144
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
134
145
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
135
- __html: (0, tool_1.setFontForText)((_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
146
+ __html: (0, tool_1.setFontForText)((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
136
147
  } }),
137
148
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
138
149
  __html: (0, tool_1.setFontForText)((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -142,11 +153,11 @@ Made in Italy` })));
142
153
  __html: (0, tool_1.setFontForText)(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
143
154
  } }),
144
155
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
145
- __html: (0, tool_1.setFontForText)((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
156
+ __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _z !== void 0 ? _z : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
146
157
  } }))),
147
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
158
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_0 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _0 !== void 0 ? _0 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
148
159
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
149
- __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
160
+ __html: (0, tool_1.setFontForText)((_1 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _1 !== void 0 ? _1 : 'Shop now', buttonStyle)
150
161
  } }))),
151
162
  productInfoText({ isPost }))),
152
163
  react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));