pb-sxp-ui 1.0.8 → 1.0.10

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

@@ -9,18 +9,18 @@ const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Link = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
     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 handleTo = () => {
         if (cta === null || cta === void 0 ? void 0 : cta.link) {
-            jumpToWeb(recData, product, cta);
+            jumpToWeb(recData, product, cta, index);
             window.location.href = window.getJointUtmLink(cta.link);
         }
     };
-    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
+    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, { onClick: handleTo }),
         react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
             react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), 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, alt: '' })),
         react_1.default.createElement("div", { className: (0, css_1.css)({

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

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

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

@@ -12,7 +12,7 @@ const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const MultiCommodity = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
@@ -22,11 +22,11 @@ const MultiCommodity = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
+        }, recData, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta);
+                jumpToWeb(recData, item, item.bindCta, index);
                 window.location.href = window.getJointUtmLink(item.link);
             }
         }
@@ -38,7 +38,7 @@ const MultiCommodity = (_a) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
+                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',

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

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

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

@@ -12,7 +12,7 @@ const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const MultiCommodityDiro = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -21,11 +21,11 @@ const MultiCommodityDiro = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
+        }, recData, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta);
+                jumpToWeb(recData, item, item.bindCta, index);
                 window.location.href = window.getJointUtmLink(item.link);
             }
         }
@@ -37,7 +37,7 @@ const MultiCommodityDiro = (_a) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
+                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#000',
                     display: 'flex',

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

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

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

@@ -12,7 +12,7 @@ const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
@@ -21,11 +21,11 @@ const MultiCommodityDiroNew = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, recData, item);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
+        }, recData, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta);
+                jumpToWeb(recData, item, item.bindCta, index);
                 window.location.href = window.getJointUtmLink(item.link);
             }
         }
@@ -37,7 +37,7 @@ const MultiCommodityDiroNew = (_a) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item })),
+                react_1.default.createElement(Img_1.default, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',
                     display: 'flex',

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

@@ -7,6 +7,7 @@ export interface IImgProps {
     onClick?: any;
     style?: CSSProperties;
     isExternalLink?: boolean;
+    index?: number;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

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

@@ -7,7 +7,7 @@ const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/us
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const EventProvider = (_a) => {
-    var { rec, children, className, onClick, style, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink"]);
+    var { rec, children, className, onClick, style, isExternalLink = false, index } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { popup } = (0, hooks_1.useEditor)();
@@ -20,22 +20,22 @@ const EventProvider = (_a) => {
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
-            }, rec, item);
+            }, rec, item, index);
         }
-    }, [isOnScreen, ref, rec, ctaEvent]);
+    }, [isOnScreen, ref, rec, ctaEvent, index]);
     const handleClick = (0, lodash_1.throttle)(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
-        }, rec, item);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(rec);
+        }, rec, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
         if (isExternalLink) {
             if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
                 const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
                 const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
-                jumpToWeb(rec, product, cta);
+                jumpToWeb(rec, product, cta, index);
                 window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link;
                 window.location.href = window.getJointUtmLink((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.link);
             }

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

@@ -4,6 +4,7 @@ export interface IImgProps {
     src: string;
     rec?: RecItemType;
     item?: ProductInfoType;
+    index?: number;
 }
 declare const _default: React.NamedExoticComponent<IImgProps>;
 export default _default;

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

@@ -5,7 +5,7 @@ const css_1 = require("@emotion/css");
 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 Img = ({ src, rec, item }) => {
+const Img = ({ src, rec, item, index }) => {
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { ctaEvent } = (0, hooks_1.useSxpDataSource)();
@@ -14,9 +14,9 @@ const Img = ({ src, rec, item }) => {
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
-            }, rec, item);
+            }, rec, item, index);
         }
-    }, [isOnScreen, src, ref, rec, ctaEvent, item]);
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
     return (react_1.default.createElement("img", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, alt: '' }));
 };
 exports.default = (0, react_1.memo)(Img);

package/package.json

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