pb-sxp-ui 1.6.1 → 1.6.2

package/dist/pb-ui.js

@@ -10831,7 +10831,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-16 14:50:13
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-10-12 18:04:36
+     * @LastEditTime: 2024-10-12 18:31:19
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
      *
      */
@@ -10841,14 +10841,14 @@ Made in Italy` })));
         const { ctaEvent } = useSxpDataSource();
         const [visible, setVisible] = React.useState(false);
         React.useEffect(() => {
-            if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport && !visible) {
+            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, visible]);
+        }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport, visible, isActive]);
         React.useMemo(() => {
             return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
         }, [src]);
@@ -11372,12 +11372,12 @@ Made in Italy` })));
 
     const Commodity$1 = (_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 = __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 = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
         const { sxpParameter } = 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.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -11466,12 +11466,12 @@ Made in Italy` })));
 
     const Appoint$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+        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"]);
         const { sxpParameter } = 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.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
                     __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)
                 } })));
@@ -11648,14 +11648,14 @@ Made in Italy` })));
 
     const Link$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
+        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"]);
         const { sxpParameter, bffEventReport } = useSxpDataSource();
         useEventReport();
         const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
         (_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.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.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.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: css.css({
                     display: 'flex',
                     alignItems: 'center',
@@ -11765,12 +11765,12 @@ Made in Italy` })));
 
     const CommodityDiro$1 = (_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 = __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 = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
         const { sxpParameter } = 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.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -11861,12 +11861,12 @@ Made in Italy` })));
 
     const CommodityDiroNew$1 = (_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 = __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 = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
         const { sxpParameter } = 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.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -14794,7 +14794,7 @@ Made in Italy` })));
 
     const AniLink$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
+        var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink", "isActive"]);
         const { ctaEvent, setPopupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         const [visible, setVisible] = React.useState(false);
@@ -14838,13 +14838,13 @@ Made in Italy` })));
         }, [event === null || event === void 0 ? void 0 : event.animation]);
         React.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]);
         React.useEffect(() => {
             if (isOnScreen) {
                 setVisible(true);
@@ -15293,7 +15293,7 @@ Made in Italy` })));
             } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.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.css(aniTimStyle)}`, onClick: handleTo }),
             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 } },
                 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'] })),
-            React.createElement(Img$1, { 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.createElement(Img$1, { 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.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                     __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)
                 } })),
@@ -16310,7 +16310,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-10-12 15:27:17
+     * @LastEditTime: 2024-10-12 18:38:11
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -16567,7 +16567,7 @@ Made in Italy` })));
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
                         React.createElement("div", null,
                             React.createElement(ExpandableText$1, { 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 }),
-                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
+                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
                             React.createElement(Hashtag$1, { 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 }))),
                     React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
             }