pb-sxp-ui 1.1.1 → 1.2.0

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

@@ -35,9 +35,9 @@ const MultiCommodity = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    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: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        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) }),
             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("div", { className: (0, css_1.css)({
                     color: '#fff',

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

@@ -34,9 +34,9 @@ const MultiCommodityDiro = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    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: 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) }),
+        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) }),
             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("div", { className: (0, css_1.css)({
                     color: '#000',

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

@@ -18,12 +18,13 @@ const MultiCommodityDiroNew = (_a) => {
     const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-    const handleClick = (0, lodash_1.throttle)((item) => {
+    const handleClick = (0, lodash_1.throttle)((item, multiCheckIndex) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, 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 }));
+        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,
+            multiCheckIndex }));
         if (isExternalLink) {
             if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta, index);
@@ -34,9 +35,9 @@ const MultiCommodityDiroNew = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    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: 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) }),
+        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("div", { className: (0, css_1.css)({
                     color: '#fff',

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

@@ -0,0 +1,14 @@
+import { VideoInfoType } from '../../../../core/components/SxpPageRender/typing';
+import React, { CSSProperties } from 'react';
+interface ICommodityGroupProps {
+    products?: VideoInfoType['bindProducts'];
+    data?: {
+        open?: boolean;
+        translateY?: number;
+        style?: CSSProperties;
+    };
+    defImg: string;
+    style?: CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<ICommodityGroupProps>;
+export default _default;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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) => {
+        var _a, _b, _c;
+        return (react_1.default.createElement(react_2.SwiperSlide, { className: (0, css_1.css)({
+                width: '50px',
+                height: '50px',
+                marginRight: '10px'
+            }), onClick: () => handleClick(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 })));
+    })))));
+};
+exports.default = (0, react_1.memo)(CommodityGroup);

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

@@ -23,6 +23,6 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     }, [src]);
     return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? translateY + 50 : 50}%` }, style)), src: src }))));
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: src }))));
 };
 exports.default = (0, react_1.memo)(Img);

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/scrollbar';
 interface IScrollProps {
     children: any;
     isPadding?: boolean;
+    style?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IScrollProps>;
 export default _default;

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

@@ -7,7 +7,14 @@ require("swiper/css");
 require("swiper/css/free-mode");
 require("swiper/css/scrollbar");
 const modules_1 = require("swiper/modules");
-const Scroll = ({ children, isPadding = true }) => {
-    return (react_1.default.createElement(react_2.Swiper, { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [modules_1.FreeMode, modules_1.Scrollbar, modules_1.Mousewheel], style: { padding: isPadding ? '0 12px 0 20px' : 0 } }, children));
+const hooks_1 = require("../../../../core/hooks");
+const Scroll = ({ children, isPadding = true, style }) => {
+    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]);
+    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/lib/materials/sxp/template/components/settingRender.js

@@ -241,11 +241,6 @@ exports.default = [
                 label: '对齐',
                 type: 'TextAlign',
                 name: ['props', 'ctaTempStyles', 'ctaTitle']
-            },
-            {
-                label: '间距',
-                type: 'TextSpace',
-                name: ['props', 'ctaTempStyles', 'ctaTitle']
             }
         ]
     }

package/package.json

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