pb-sxp-ui 1.6.0 → 1.6.2

package/lib/materials/sxp/cta/AniLink/index.js

@@ -10,7 +10,7 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const AniLink = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
+    var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
     const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -54,13 +54,13 @@ const AniLink = (_a) => {
     }, [event === null || event === void 0 ? void 0 : event.animation]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
-        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current) && isActive) {
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
             }, 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);
         }
-    }, [isOnScreen]);
+    }, [isOnScreen, isActive]);
     (0, react_1.useEffect)(() => {
         if (isOnScreen) {
             setVisible(true);

package/lib/materials/sxp/cta/AniLinkPopup/index.js

@@ -68,7 +68,7 @@ const AniLinkPopup = (_a) => {
         } }, "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 }),
         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 } },
             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'] })),
-        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 }),
+        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, isActive: isActive }),
         (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                 __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)
             } })),

package/lib/materials/sxp/template/Appoint/index.d.ts

@@ -10,6 +10,7 @@ export interface IAppointProps {
     ctaTempStyles?: ICtaTempStylesType;
     isExternalLink?: boolean;
     index?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IAppointProps>;
 export default _default;

package/lib/materials/sxp/template/Appoint/index.js

@@ -9,12 +9,12 @@ const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
 const Appoint = (_a) => {
     var _b, _c, _d, _e, _f, _g;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "isActive"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     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;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
-        react_1.default.createElement(Img_1.default, { 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 }),
+        react_1.default.createElement(Img_1.default, { 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 }),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
                 __html: (0, tool_1.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)
             } })));

package/lib/materials/sxp/template/Commodity/index.d.ts

@@ -11,6 +11,7 @@ export interface ICommodityProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<ICommodityProps>;
 export default _default;

package/lib/materials/sxp/template/Commodity/index.js

@@ -10,12 +10,12 @@ const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
 const Commodity = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     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;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        react_1.default.createElement(Img_1.default, { 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 }),
+        react_1.default.createElement(Img_1.default, { 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 }),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',

package/lib/materials/sxp/template/CommodityDiro/index.d.ts

@@ -11,6 +11,7 @@ export interface ICommodityDiroProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<ICommodityDiroProps>;
 export default _default;

package/lib/materials/sxp/template/CommodityDiro/index.js

@@ -10,12 +10,12 @@ const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
 const CommodityDiro = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     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;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        react_1.default.createElement(Img_1.default, { 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 }),
+        react_1.default.createElement(Img_1.default, { 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 }),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',

package/lib/materials/sxp/template/CommodityDiroNew/index.d.ts

@@ -11,6 +11,7 @@ export interface ICommodityDiroNewProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<ICommodityDiroNewProps>;
 export default _default;

package/lib/materials/sxp/template/CommodityDiroNew/index.js

@@ -10,12 +10,12 @@ const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
 const CommodityDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     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;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-        react_1.default.createElement(Img_1.default, { 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 }),
+        react_1.default.createElement(Img_1.default, { 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 }),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',
                 display: 'flex',

package/lib/materials/sxp/template/Link/index.d.ts

@@ -14,6 +14,7 @@ export interface ILinkProps {
         display?: boolean;
         text?: string;
     };
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<ILinkProps>;
 export default _default;

package/lib/materials/sxp/template/Link/index.js

@@ -11,14 +11,14 @@ const tool_1 = require("../../../../core/utils/tool");
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const Link = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle", "isActive"]);
     const { sxpParameter, bffEventReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     const product = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
     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;
     return (react_1.default.createElement(EventProvider_1.default, Object.assign({ index: index, rec: recData, className: (0, css_1.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 : '' }),
-        react_1.default.createElement(Img_1.default, { 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 }),
+        react_1.default.createElement(Img_1.default, { 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 }),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 display: 'flex',
                 alignItems: 'center',

package/lib/materials/sxp/template/MultiCommodity/index.d.ts

@@ -12,6 +12,7 @@ export interface IMultiCommodityProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IMultiCommodityProps>;
 export default _default;

package/lib/materials/sxp/template/MultiCommodity/index.js

@@ -13,7 +13,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const MultiCommodity = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
@@ -38,7 +38,7 @@ const MultiCommodity = (_a) => {
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',

package/lib/materials/sxp/template/MultiCommodityDiro/index.d.ts

@@ -12,6 +12,7 @@ export interface IMultiCommodityDiroProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IMultiCommodityDiroProps>;
 export default _default;

package/lib/materials/sxp/template/MultiCommodityDiro/index.js

@@ -13,7 +13,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const MultiCommodityDiro = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -37,7 +37,7 @@ const MultiCommodityDiro = (_a) => {
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#000',
                     display: 'flex',

package/lib/materials/sxp/template/MultiCommodityDiroNew/index.d.ts

@@ -12,6 +12,7 @@ export interface IMultiCommodityDiroNewProps {
     isExternalLink?: boolean;
     index?: number;
     translateY?: number;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IMultiCommodityDiroNewProps>;
 export default _default;

package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -13,7 +13,7 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -38,7 +38,7 @@ const MultiCommodityDiroNew = (_a) => {
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
         return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ key: index, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',

package/lib/materials/sxp/template/components/Img.d.ts

@@ -9,6 +9,7 @@ export interface IImgProps {
     translateY?: number;
     imgStyle?: CSSProperties;
     enableEventReport?: boolean;
+    isActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

package/lib/materials/sxp/template/components/Img.js

@@ -6,18 +6,20 @@ const react_1 = tslib_1.__importStar(require("react"));
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const hooks_1 = require("../../../../core/hooks");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
-const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true, isActive }) => {
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { ctaEvent } = (0, hooks_1.useSxpDataSource)();
+    const [visible, setVisible] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
-        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport) {
+        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport && !visible && isActive) {
+            setVisible(true);
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
             }, rec, item, index);
         }
-    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport]);
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport, visible, isActive]);
     const imgSrc = (0, react_1.useMemo)(() => {
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
     }, [src]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",