pb-sxp-ui 1.6.0 → 1.6.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 (61) hide show
  1. package/dist/index.cjs +54 -46
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +54 -46
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +54 -46
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/RenderCard.d.ts +3 -3
  14. package/es/core/components/SxpPageRender/RenderCard.js +27 -17
  15. package/es/core/components/SxpPageRender/index.js +3 -3
  16. package/es/materials/sxp/cta/AniLink/index.d.ts +1 -0
  17. package/es/materials/sxp/cta/AniLink/index.js +3 -3
  18. package/es/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  19. package/es/materials/sxp/template/Appoint/index.d.ts +1 -0
  20. package/es/materials/sxp/template/Appoint/index.js +2 -2
  21. package/es/materials/sxp/template/Commodity/index.d.ts +1 -0
  22. package/es/materials/sxp/template/Commodity/index.js +2 -2
  23. package/es/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  24. package/es/materials/sxp/template/CommodityDiro/index.js +2 -2
  25. package/es/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  26. package/es/materials/sxp/template/CommodityDiroNew/index.js +2 -2
  27. package/es/materials/sxp/template/Link/index.d.ts +1 -0
  28. package/es/materials/sxp/template/Link/index.js +2 -2
  29. package/es/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  30. package/es/materials/sxp/template/MultiCommodity/index.js +2 -2
  31. package/es/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  32. package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -2
  33. package/es/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  34. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -2
  35. package/es/materials/sxp/template/components/Img.d.ts +1 -0
  36. package/es/materials/sxp/template/components/Img.js +6 -4
  37. package/lib/core/components/SxpPageRender/RenderCard.d.ts +3 -3
  38. package/lib/core/components/SxpPageRender/RenderCard.js +26 -16
  39. package/lib/core/components/SxpPageRender/index.js +3 -3
  40. package/lib/materials/sxp/cta/AniLink/index.d.ts +1 -0
  41. package/lib/materials/sxp/cta/AniLink/index.js +3 -3
  42. package/lib/materials/sxp/cta/AniLinkPopup/index.js +1 -1
  43. package/lib/materials/sxp/template/Appoint/index.d.ts +1 -0
  44. package/lib/materials/sxp/template/Appoint/index.js +2 -2
  45. package/lib/materials/sxp/template/Commodity/index.d.ts +1 -0
  46. package/lib/materials/sxp/template/Commodity/index.js +2 -2
  47. package/lib/materials/sxp/template/CommodityDiro/index.d.ts +1 -0
  48. package/lib/materials/sxp/template/CommodityDiro/index.js +2 -2
  49. package/lib/materials/sxp/template/CommodityDiroNew/index.d.ts +1 -0
  50. package/lib/materials/sxp/template/CommodityDiroNew/index.js +2 -2
  51. package/lib/materials/sxp/template/Link/index.d.ts +1 -0
  52. package/lib/materials/sxp/template/Link/index.js +2 -2
  53. package/lib/materials/sxp/template/MultiCommodity/index.d.ts +1 -0
  54. package/lib/materials/sxp/template/MultiCommodity/index.js +2 -2
  55. package/lib/materials/sxp/template/MultiCommodityDiro/index.d.ts +1 -0
  56. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -2
  57. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.d.ts +1 -0
  58. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -2
  59. package/lib/materials/sxp/template/components/Img.d.ts +1 -0
  60. package/lib/materials/sxp/template/components/Img.js +5 -3
  61. package/package.json +1 -1
package/es/core/components/SxpPageRender/RenderCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import './index.less';
3
3
  import { RecItemType } from './typing';
4
4
  interface IRenderCardProps {
@@ -9,5 +9,5 @@ interface IRenderCardProps {
9
9
  includesCtaType?: string[];
10
10
  isActive?: boolean;
11
11
  }
12
- declare const RenderCard: FC<IRenderCardProps>;
13
- export default RenderCard;
12
+ declare const _default: React.NamedExoticComponent<IRenderCardProps>;
13
+ export default _default;
package/es/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { memo, useMemo } from 'react';
2
2
  import './index.less';
3
3
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
4
4
  import { useEditor } from '../../../core/hooks';
@@ -18,33 +18,43 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
18
18
  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;
19
19
  }
20
20
  const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
21
- const renderComp = useCallback(() => {
22
- 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;
21
+ const renderComp = useMemo(() => {
22
+ 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;
23
23
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
24
24
  return null;
25
- if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
25
+ let cta = null;
26
+ 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) {
27
+ cta = '多商品CTA';
28
+ }
29
+ else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
30
+ cta = '商品CTA';
31
+ }
32
+ else {
33
+ 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;
34
+ }
35
+ 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
36
  return;
27
- if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
37
+ if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
28
38
  return;
29
- if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
30
- (((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'Commodity' && !((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct)) ||
31
- (((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type) === 'CommodityDiroNew' && !((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct)) ||
32
- (((_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.type) === 'MultiCommodity' && !((_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l.length)) ||
33
- (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodityDiro' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
34
- (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiroNew' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length))) {
39
+ if ((((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'CommodityDiro' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
40
+ (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'Commodity' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
41
+ (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'CommodityDiroNew' && !((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProduct)) ||
42
+ (((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.type) === 'MultiCommodity' && !((_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length)) ||
43
+ (((_s = value === null || value === void 0 ? void 0 : value.item) === null || _s === void 0 ? void 0 : _s.type) === 'MultiCommodityDiro' && !((_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u.length)) ||
44
+ (((_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.type) === 'MultiCommodityDiroNew' && !((_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindProducts) === null || _x === void 0 ? void 0 : _x.length))) {
35
45
  return null;
36
46
  }
37
47
  if (value && resolver) {
38
- const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
48
+ const t = resolver[(_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.type];
39
49
  const Component = withBindDataSource(t);
40
- const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
41
- const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
42
- return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
50
+ const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
51
+ 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';
52
+ return (React.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
53
  }
44
54
  else {
45
55
  return null;
46
56
  }
47
57
  }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id, isActive]);
48
- return React.createElement(React.Fragment, null, renderComp());
58
+ return React.createElement(React.Fragment, null, renderComp);
49
59
  };
50
- export default RenderCard;
60
+ export default memo(RenderCard);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -269,10 +269,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
269
269
  React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
270
270
  React.createElement(Nudge, { nudge: nudge }),
271
271
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
272
- React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
272
+ React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
273
273
  React.createElement("div", null,
274
274
  React.createElement(ExpandableText, { 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 }),
275
- React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
275
+ React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
276
276
  React.createElement(Hashtag, { 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 }))),
277
277
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
278
278
  }
@@ -514,7 +514,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
514
514
  position: 'absolute',
515
515
  [(_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _g === void 0 ? void 0 : _g.xPosit) !== null && _h !== void 0 ? _h : 'left']: (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0,
516
516
  [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (_p = (_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0,
517
- zIndex: 10,
517
+ zIndex: 8,
518
518
  border: 'none',
519
519
  padding: 0,
520
520
  background: 'transparent'
package/es/materials/sxp/cta/AniLink/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IAniLinkProps {
9
9
  event?: any;
10
10
  onClick?: () => void;
11
11
  isExternalLink?: boolean;
12
+ isActive?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IAniLinkProps>;
14
15
  export default _default;
package/es/materials/sxp/cta/AniLink/index.js CHANGED
@@ -8,7 +8,7 @@ import styles from './index.module.less';
8
8
  import useOnScreen from '../../../../core/hooks/useOnScreen';
9
9
  const AniLink = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
11
- var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
11
+ var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
12
12
  const { ctaEvent, setPopupDetailData } = useSxpDataSource();
13
13
  const { jumpToWeb } = useEventReport();
14
14
  const [visible, setVisible] = useState(false);
@@ -52,13 +52,13 @@ const AniLink = (_a) => {
52
52
  }, [event === null || event === void 0 ? void 0 : event.animation]);
53
53
  useEffect(() => {
54
54
  var _a, _b, _c;
55
- if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
55
+ if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current) && isActive) {
56
56
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
57
57
  eventSubject: 'ctaExposure',
58
58
  eventDescription: 'The cta was shown to the user'
59
59
  }, 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);
60
60
  }
61
- }, [isOnScreen]);
61
+ }, [isOnScreen, isActive]);
62
62
  useEffect(() => {
63
63
  if (isOnScreen) {
64
64
  setVisible(true);
package/es/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -66,7 +66,7 @@ const AniLinkPopup = (_a) => {
66
66
  } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${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))` }))} ${styles['aniLinkPopup']} ${aniNamStyle} ${css(aniTimStyle)}`, onClick: handleTo }),
67
67
  React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
68
68
  React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
- React.createElement(Img, { 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 }),
69
+ React.createElement(Img, { 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, isActive: isActive }),
70
70
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
71
71
  __html: 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)
72
72
  } })),
package/es/materials/sxp/template/Appoint/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface IAppointProps {
10
10
  ctaTempStyles?: ICtaTempStylesType;
11
11
  isExternalLink?: boolean;
12
12
  index?: number;
13
+ isActive?: boolean;
13
14
  }
14
15
  declare const _default: React.NamedExoticComponent<IAppointProps>;
15
16
  export default _default;
package/es/materials/sxp/template/Appoint/index.js CHANGED
@@ -7,12 +7,12 @@ import Img from '../components/Img';
7
7
  import { setFontForText } from '../../../../core/utils/tool';
8
8
  const Appoint = (_a) => {
9
9
  var _b, _c, _d, _e, _f, _g;
10
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
10
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "isActive"]);
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
14
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
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 }),
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)
18
18
  } })));
package/es/materials/sxp/template/Commodity/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface ICommodityProps {
11
11
  isExternalLink?: boolean;
12
12
  index?: number;
13
13
  translateY?: number;
14
+ isActive?: boolean;
14
15
  }
15
16
  declare const _default: React.NamedExoticComponent<ICommodityProps>;
16
17
  export default _default;
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -8,12 +8,12 @@ import Img from '../components/Img';
8
8
  import { setFontForText } from '../../../../core/utils/tool';
9
9
  const Commodity = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
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
15
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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 }),
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',
19
19
  display: 'flex',
package/es/materials/sxp/template/CommodityDiro/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface ICommodityDiroProps {
11
11
  isExternalLink?: boolean;
12
12
  index?: number;
13
13
  translateY?: number;
14
+ isActive?: boolean;
14
15
  }
15
16
  declare const _default: React.NamedExoticComponent<ICommodityDiroProps>;
16
17
  export default _default;
package/es/materials/sxp/template/CommodityDiro/index.js CHANGED
@@ -8,12 +8,12 @@ import Img from '../components/Img';
8
8
  import { setFontForText } from '../../../../core/utils/tool';
9
9
  const CommodityDiro = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
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
15
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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 }),
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',
19
19
  display: 'flex',
package/es/materials/sxp/template/CommodityDiroNew/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface ICommodityDiroNewProps {
11
11
  isExternalLink?: boolean;
12
12
  index?: number;
13
13
  translateY?: number;
14
+ isActive?: boolean;
14
15
  }
15
16
  declare const _default: React.NamedExoticComponent<ICommodityDiroNewProps>;
16
17
  export default _default;
package/es/materials/sxp/template/CommodityDiroNew/index.js CHANGED
@@ -8,12 +8,12 @@ import Img from '../components/Img';
8
8
  import { setFontForText } from '../../../../core/utils/tool';
9
9
  const CommodityDiroNew = (_a) => {
10
10
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
11
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
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
15
  return (React.createElement(EventProvider, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
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 }),
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',
19
19
  display: 'flex',
package/es/materials/sxp/template/Link/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export interface ILinkProps {
14
14
  display?: boolean;
15
15
  text?: string;
16
16
  };
17
+ isActive?: boolean;
17
18
  }
18
19
  declare const _default: React.NamedExoticComponent<ILinkProps>;
19
20
  export default _default;
package/es/materials/sxp/template/Link/index.js CHANGED
@@ -9,14 +9,14 @@ import { setFontForText } from '../../../../core/utils/tool';
9
9
  import styles from './index.module.less';
10
10
  const Link = (_a) => {
11
11
  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
12
- var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
12
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle", "isActive"]);
13
13
  const { sxpParameter, bffEventReport } = useSxpDataSource();
14
14
  const { jumpToWeb } = useEventReport();
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
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 : '' }),
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 }),
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',
22
22
  alignItems: 'center',
package/es/materials/sxp/template/MultiCommodity/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IMultiCommodityProps {
12
12
  isExternalLink?: boolean;
13
13
  index?: number;
14
14
  translateY?: number;
15
+ isActive?: boolean;
15
16
  }
16
17
  declare const _default: React.NamedExoticComponent<IMultiCommodityProps>;
17
18
  export default _default;
package/es/materials/sxp/template/MultiCommodity/index.js CHANGED
@@ -11,7 +11,7 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import { setFontForText } from '../../../../core/utils/tool';
12
12
  const MultiCommodity = (_a) => {
13
13
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
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
15
  const { sxpParameter } = useSxpDataSource();
16
16
  const { ctaEvent, setPopupDetailData } = useSxpDataSource();
17
17
  const { popup } = useEditor();
@@ -36,7 +36,7 @@ const MultiCommodity = (_a) => {
36
36
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
37
37
  var _a, _b, _c, _d, _e, _f, _g, _h;
38
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 }),
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
40
  React.createElement("div", { className: css({
41
41
  color: '#fff',
42
42
  display: 'flex',
package/es/materials/sxp/template/MultiCommodityDiro/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IMultiCommodityDiroProps {
12
12
  isExternalLink?: boolean;
13
13
  index?: number;
14
14
  translateY?: number;
15
+ isActive?: boolean;
15
16
  }
16
17
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroProps>;
17
18
  export default _default;
package/es/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -11,7 +11,7 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import { setFontForText } from '../../../../core/utils/tool';
12
12
  const MultiCommodityDiro = (_a) => {
13
13
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
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
15
  const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
16
  const { popup } = useEditor();
17
17
  const { jumpToWeb } = useEventReport();
@@ -35,7 +35,7 @@ const MultiCommodityDiro = (_a) => {
35
35
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
36
36
  var _a, _b, _c, _d, _e, _f, _g, _h;
37
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 }),
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
39
  React.createElement("div", { className: css({
40
40
  color: '#000',
41
41
  display: 'flex',
package/es/materials/sxp/template/MultiCommodityDiroNew/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface IMultiCommodityDiroNewProps {
12
12
  isExternalLink?: boolean;
13
13
  index?: number;
14
14
  translateY?: number;
15
+ isActive?: boolean;
15
16
  }
16
17
  declare const _default: React.NamedExoticComponent<IMultiCommodityDiroNewProps>;
17
18
  export default _default;
package/es/materials/sxp/template/MultiCommodityDiroNew/index.js CHANGED
@@ -11,7 +11,7 @@ import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import { setFontForText } from '../../../../core/utils/tool';
12
12
  const MultiCommodityDiroNew = (_a) => {
13
13
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
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
15
  const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
16
  const { popup } = useEditor();
17
17
  const { jumpToWeb } = useEventReport();
@@ -36,7 +36,7 @@ const MultiCommodityDiroNew = (_a) => {
36
36
  return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
37
37
  var _a, _b, _c, _d, _e, _f, _g;
38
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 }),
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
40
  React.createElement("div", { className: css({
41
41
  color: '#fff',
42
42
  display: 'flex',
package/es/materials/sxp/template/components/Img.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IImgProps {
9
9
  translateY?: number;
10
10
  imgStyle?: CSSProperties;
11
11
  enableEventReport?: boolean;
12
+ isActive?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IImgProps>;
14
15
  export default _default;
package/es/materials/sxp/template/components/Img.js CHANGED
@@ -1,20 +1,22 @@
1
1
  import { css } from '@emotion/css';
2
- import React, { memo, useEffect, useMemo, useRef } from 'react';
2
+ import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import useOnScreen from '../../../../core/hooks/useOnScreen';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
6
- const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true }) => {
6
+ const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true, isActive }) => {
7
7
  const ref = useRef(null);
8
8
  const isOnScreen = useOnScreen(ref);
9
9
  const { ctaEvent } = useSxpDataSource();
10
+ const [visible, setVisible] = useState(false);
10
11
  useEffect(() => {
11
- if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport) {
12
+ if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport && !visible && isActive) {
13
+ setVisible(true);
12
14
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
13
15
  eventSubject: 'ctaExposure',
14
16
  eventDescription: 'The cta was shown to the user'
15
17
  }, rec, item, index);
16
18
  }
17
- }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport]);
19
+ }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport, visible, isActive]);
18
20
  const imgSrc = useMemo(() => {
19
21
  return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
20
22
  }, [src]);
package/lib/core/components/SxpPageRender/RenderCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import React from 'react';
2
2
  import './index.less';
3
3
  import { RecItemType } from './typing';
4
4
  interface IRenderCardProps {
@@ -9,5 +9,5 @@ interface IRenderCardProps {
9
9
  includesCtaType?: string[];
10
10
  isActive?: boolean;
11
11
  }
12
- declare const RenderCard: FC<IRenderCardProps>;
13
- export default RenderCard;
12
+ declare const _default: React.NamedExoticComponent<IRenderCardProps>;
13
+ export default _default;
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -21,33 +21,43 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
21
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
22
  }
23
23
  const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
24
- const renderComp = (0, react_1.useCallback)(() => {
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;
24
+ const renderComp = (0, react_1.useMemo)(() => {
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;
26
26
  if (!(rec === null || rec === void 0 ? void 0 : rec.video))
27
27
  return null;
28
- if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
28
+ let cta = null;
29
+ 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) {
30
+ cta = '多商品CTA';
31
+ }
32
+ else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
33
+ cta = '商品CTA';
34
+ }
35
+ else {
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;
37
+ }
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)))
29
39
  return;
30
- if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
40
+ if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
31
41
  return;
32
- if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
33
- (((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'Commodity' && !((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct)) ||
34
- (((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type) === 'CommodityDiroNew' && !((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct)) ||
35
- (((_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.type) === 'MultiCommodity' && !((_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l.length)) ||
36
- (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodityDiro' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
37
- (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiroNew' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length))) {
42
+ if ((((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'CommodityDiro' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
43
+ (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'Commodity' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
44
+ (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'CommodityDiroNew' && !((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProduct)) ||
45
+ (((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.type) === 'MultiCommodity' && !((_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length)) ||
46
+ (((_s = value === null || value === void 0 ? void 0 : value.item) === null || _s === void 0 ? void 0 : _s.type) === 'MultiCommodityDiro' && !((_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u.length)) ||
47
+ (((_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.type) === 'MultiCommodityDiroNew' && !((_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindProducts) === null || _x === void 0 ? void 0 : _x.length))) {
38
48
  return null;
39
49
  }
40
50
  if (value && resolver) {
41
- const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
51
+ const t = resolver[(_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.type];
42
52
  const Component = (0, withBindDataSource_1.default)(t);
43
- const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
44
- const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
45
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
53
+ const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
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';
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 })));
46
56
  }
47
57
  else {
48
58
  return null;
49
59
  }
50
60
  }, [rec, resolver, tempMap, schema, value === null || value === void 0 ? void 0 : value.id, isActive]);
51
- return react_1.default.createElement(react_1.default.Fragment, null, renderComp());
61
+ return react_1.default.createElement(react_1.default.Fragment, null, renderComp);
52
62
  };
53
- exports.default = RenderCard;
63
+ exports.default = (0, react_1.memo)(RenderCard);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -272,10 +272,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
272
272
  react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
273
273
  react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
274
274
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
275
- react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
275
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
276
276
  react_1.default.createElement("div", null,
277
277
  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 }),
278
- react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
278
+ react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
279
279
  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 }))),
280
280
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
281
281
  }
@@ -517,7 +517,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
517
517
  position: 'absolute',
518
518
  [(_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _g === void 0 ? void 0 : _g.xPosit) !== null && _h !== void 0 ? _h : 'left']: (_k = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0,
519
519
  [(_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _l === void 0 ? void 0 : _l.yPosit) !== null && _m !== void 0 ? _m : 'top']: (_p = (_o = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _o === void 0 ? void 0 : _o.y) !== null && _p !== void 0 ? _p : 0,
520
- zIndex: 10,
520
+ zIndex: 8,
521
521
  border: 'none',
522
522
  padding: 0,
523
523
  background: 'transparent'
package/lib/materials/sxp/cta/AniLink/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface IAniLinkProps {
9
9
  event?: any;
10
10
  onClick?: () => void;
11
11
  isExternalLink?: boolean;
12
+ isActive?: boolean;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IAniLinkProps>;
14
15
  export default _default;