pb-sxp-ui 1.2.4 → 1.2.5

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

@@ -4,31 +4,28 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const Scroll_1 = tslib_1.__importDefault(require("./Scroll"));
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
-const hooks_1 = require("../../../../core/hooks");
 const react_2 = require("swiper/react");
 const css_1 = require("@emotion/css");
-const CommodityGroup = ({ products, data, defImg, style }) => {
-    var _a, _b;
-    const { setPopupDetailData, popupDetailData } = (0, hooks_1.useSxpDataSource)();
-    const [check, setCheck] = (0, react_1.useState)((_a = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _a !== void 0 ? _a : 0);
-    const handleClick = (0, react_1.useCallback)((index) => {
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData((val) => (Object.assign(Object.assign({}, val), { video: Object.assign(Object.assign({}, val === null || val === void 0 ? void 0 : val.video), { bindProduct: products === null || products === void 0 ? void 0 : products[index] }), multiCheckIndex: index })));
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 0) || !popupDetailData) && (react_1.default.createElement(Scroll_1.default, { isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_b = (popupDetailData ? products : [0, 1, 2, 3])) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailData, check }) => {
+    var _a;
+    return (react_1.default.createElement(react_1.default.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 1) || !popupDetailData) && (react_1.default.createElement(Scroll_1.default, { enableSlideActive: true, isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_a = (popupDetailData ? products : [0, 1, 2, 3])) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
         var _a, _b, _c;
-        return (react_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
+        return (react_1.default.createElement(react_1.default.Fragment, null, (item === null || item === void 0 ? void 0 : item.bindCta) ? (react_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
                 width: '50px',
                 height: '50px',
                 marginRight: '10px'
-            }), onClick: () => handleClick(index), key: index },
+            }), onClick: () => {
+                onCLick === null || onCLick === void 0 ? void 0 : onCLick(index);
+            }, key: index },
             react_1.default.createElement(FormatImage_1.default, { style: {
                     height: '100%',
                     width: '100%',
                     objectFit: 'cover',
                     display: 'block',
-                    objectPosition: `50% ${(data === null || data === void 0 ? void 0 : data.translateY) ? -(data === null || data === void 0 ? void 0 : data.translateY) + 50 : 50}%`,
-                    border: check === index ? '1px solid #000' : '1px solid #f2f2f2'
-                }, src: (_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 : defImg })));
+                    objectPosition: `50% ${(data === null || data === void 0 ? void 0 : data.translateY) ? (data === null || data === void 0 ? void 0 : data.translateY) + 50 : 50}%`,
+                    border: check === index ? '1px solid #000' : '1px solid #f2f2f2',
+                    boxSizing: 'border-box'
+                }, src: (_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 : defImg }))) : null));
     })))));
 };
 exports.default = (0, react_1.memo)(CommodityGroup);

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

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

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

@@ -6,18 +6,18 @@ 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 }) => {
+const Img = ({ src, rec, item, index, style, translateY, imgStyle, enableEventReport = true }) => {
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const { ctaEvent } = (0, hooks_1.useSxpDataSource)();
     (0, react_1.useEffect)(() => {
-        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current) && enableEventReport) {
             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]);
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index, enableEventReport]);
     const imgSrc = (0, react_1.useMemo)(() => {
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/20`;
     }, [src]);

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

@@ -6,6 +6,7 @@ interface IScrollProps {
     children: any;
     isPadding?: boolean;
     style?: CSSProperties;
+    enableSlideActive?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IScrollProps>;
 export default _default;

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

@@ -8,13 +8,14 @@ require("swiper/css/free-mode");
 require("swiper/css/scrollbar");
 const modules_1 = require("swiper/modules");
 const hooks_1 = require("../../../../core/hooks");
-const Scroll = ({ children, isPadding = true, style }) => {
+const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }) => {
     const ref = (0, react_1.useRef)();
     const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
     (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex);
-    }, [popupDetailData]);
+        var _a, _b;
+        if (enableSlideActive)
+            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
+    }, [popupDetailData, enableSlideActive]);
     return (react_1.default.createElement(react_2.Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [modules_1.FreeMode, modules_1.Scrollbar, modules_1.Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
 };
 exports.default = (0, react_1.memo)(Scroll);

package/package.json

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