pb-sxp-ui 1.1.1 → 1.2.0

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

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '主题样式',
+        child: [
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['style', 'width'],
+                        addonAfter: 'W'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['style', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['style', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['style', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['style', 'backgroundColor']
+            },
+            {
+                label: '外边距',
+                type: 'Number',
+                name: ['style', 'margin'],
+                addonAfter: 'px'
+            },
+            {
+                label: '内边距',
+                type: 'Number',
+                name: ['style', 'padding'],
+                addonAfter: 'px'
+            }
+        ]
+    },
+    {
+        title: '商品图片',
+        child: [
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'img', 'width'],
+                        addonAfter: 'W'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'img', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'Number',
+                label: '与下边边距',
+                addonAfter: 'px',
+                name: ['props', 'ctaTempStyles', 'img', 'marginBottom']
+            },
+            {
+                label: '居中垂直偏移',
+                type: 'Number',
+                name: ['props', 'translateY'],
+                min: -1000,
+                addonAfter: '%',
+                initialValue: 0
+            }
+        ]
+    },
+    {
+        title: '商品标题文本',
+        type: 'commodityTitle',
+        child: [
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'title', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'title', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'ctaTempStyles', 'title', 'color']
+                    },
+                    {
+                        type: 'Number',
+                        addonAfter: 'px',
+                        name: ['props', 'ctaTempStyles', 'title', 'fontSize']
+                    }
+                ]
+            },
+            {
+                label: '样式',
+                type: 'TextStyle',
+                name: ['props', 'ctaTempStyles', 'title']
+            },
+            {
+                label: '对齐',
+                type: 'TextAlign',
+                name: ['props', 'ctaTempStyles', 'title']
+            },
+            {
+                label: '间距',
+                type: 'TextSpace',
+                name: ['props', 'ctaTempStyles', 'title']
+            }
+        ]
+    },
+    {
+        title: 'CTA标题',
+        child: [
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'width'],
+                        addonAfter: 'W'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'TextSpace',
+                name: ['props', 'ctaTempStyles', 'title']
+            },
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'ctaTempStyles', 'ctaTitle', 'backgroundColor']
+            },
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                    },
+                    {
+                        type: 'Number',
+                        addonAfter: 'px',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                    }
+                ]
+            },
+            {
+                label: '样式',
+                type: 'TextStyle',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
+            },
+            {
+                label: '对齐',
+                type: 'TextAlign',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
+            }
+        ]
+    }
+];

package/lib/materials/sxp/cta/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AniLink/material';
+export * from './AniLinkPopup/material';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AniLink/material"), exports);
+tslib_1.__exportStar(require("./AniLinkPopup/material"), exports);

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

@@ -2,3 +2,4 @@ export * from './popup';
 export * from './template';
 export * from './HashTag/material';
 export * from './Consent/material';
+export * from './cta';

package/lib/materials/sxp/index.js

@@ -5,3 +5,4 @@ tslib_1.__exportStar(require("./popup"), exports);
 tslib_1.__exportStar(require("./template"), exports);
 tslib_1.__exportStar(require("./HashTag/material"), exports);
 tslib_1.__exportStar(require("./Consent/material"), exports);
+tslib_1.__exportStar(require("./cta"), exports);

package/lib/materials/sxp/popup/AppointForm/Form.js

@@ -6,6 +6,6 @@ const react_2 = tslib_1.__importDefault(require("react"));
 const Form = ({ layout, columns, onChange }) => {
     return (react_2.default.createElement(react_2.default.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (react_2.default.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
         layout !== 'inline' && react_2.default.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
-        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", { className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex, onChange: onChange })))))));
+        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (react_2.default.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange: onChange })))))))));
 };
 exports.default = (0, react_1.memo)(Form);

package/lib/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -30,6 +30,11 @@ export interface ICommodityDetailProps {
     };
     buttonStyle?: CSSProperties;
     index?: number;
+    commodityGroup?: {
+        open?: boolean;
+        translateY?: number;
+        style?: CSSProperties;
+    };
 }
 declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
 export default _default;

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -12,14 +12,16 @@ const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/Sxp
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const tool_1 = require("../../../../core/utils/tool");
+const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const CommodityDetail = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
+    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popupDetailData, bffEventReport, isPreview, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
     const curTimeRef = (0, react_1.useRef)(null);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
     const data = isPost ? rec : popupDetailData;
     const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
@@ -94,31 +96,39 @@ const CommodityDetail = (_a) => {
         }
         return style;
     }, []);
-    return (react_1.default.createElement("div", { className: 'pb-commondity' },
+    const renderCommodityGroup = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (isPost)
+            return;
+        return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
-                    clickable: true,
-                    bulletActiveClass: 'swipe-item-active-bullet',
-                    clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
-                        ? 'commondityDetail-swiper-clickable-left'
-                        : 'commondityDetail-swiper-clickable-center'
-                }, loop: true, autoplay: {
-                    delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
-                return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
-                    react_1.default.createElement("div", { style: {
-                            overflow: 'hidden',
-                            width,
-                            height: width
-                        } },
-                        react_1.default.createElement(FormatImage_1.default, { style: {
-                                height: '100%',
-                                width: '100%',
-                                objectFit: 'cover',
-                                display: 'block',
-                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
-                            }, src: src }))));
-            }))),
+            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement("div", { style: { position: 'relative' } },
+                react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+                        clickable: true,
+                        bulletActiveClass: 'swipe-item-active-bullet',
+                        clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
+                            ? 'commondityDetail-swiper-clickable-left'
+                            : 'commondityDetail-swiper-clickable-center'
+                    }, loop: true, autoplay: {
+                        delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
+                    } },
+                    react_1.default.createElement(react_1.default.Fragment, null, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                        return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
+                            react_1.default.createElement("div", { style: {
+                                    overflow: 'hidden',
+                                    width,
+                                    height: width
+                                } },
+                                react_1.default.createElement(FormatImage_1.default, { style: {
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: 'cover',
+                                        display: 'block',
+                                        objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                    }, src: src }))));
+                    }))))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',
                     height: 0,
@@ -133,10 +143,17 @@ const CommodityDetail = (_a) => {
                         objectFit: 'cover',
                         width: '100%'
                     }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
+            renderCommodityGroup(),
             react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
             react_1.default.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
-            renderBtn())));
+            renderBtn()),
+        react_1.default.createElement(Modal_1.default, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
+            react_1.default.createElement("iframe", { src: 'https://rimowa.threedium.co.uk/product-experience/latest/?sku=92573974&lang=en', style: {
+                    width: '100%',
+                    height: 'calc(100% - 40px)',
+                    marginTop: '40px'
+                } }))));
 };
 exports.default = (0, react_1.memo)(CommodityDetail);

package/lib/materials/sxp/popup/CommodityDetail/interactionRender.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        label: string;
+        name: string[];
+    }[];
+}[];
+export default _default;

package/lib/materials/sxp/popup/CommodityDetail/interactionRender.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '滑动事件',
+        child: [
+            {
+                type: 'Switch',
+                label: '滑动铺满全屏',
+                name: ['isScrollFullScreen']
+            }
+        ]
+    }
+];

package/lib/materials/sxp/popup/CommodityDetail/material.js

@@ -5,13 +5,15 @@ const tslib_1 = require("tslib");
 const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
 const _1 = tslib_1.__importDefault(require("."));
 const create_1 = require("../../../../core/create");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
 const CommodityDetail = (0, create_1.createMaterial)(_1.default, {
     displayName: '商品详情',
     icon: '',
     category: 'popup',
     type: 'CommodityDetail',
     related: {
-        settingRender: settingRender_1.default
+        settingRender: settingRender_1.default,
+        interactionRender: interactionRender_1.default
     },
     defaulSetting: {
         props: {

package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -32,6 +32,43 @@ declare const _default: ({
         name?: undefined;
         addonAfter?: undefined;
     })[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        name: string[];
+        label: string;
+        child?: undefined;
+    } | {
+        type: string;
+        child: {
+            label: string;
+            type: string;
+            name: string[];
+            min: number;
+            addonAfter: string;
+            initialValue: number;
+        }[];
+        name?: undefined;
+        label?: undefined;
+    } | {
+        type: string;
+        child: ({
+            label: string;
+            name: string[];
+            type: string;
+            addonAfter: string;
+            initialValue: number;
+        } | {
+            label: string;
+            name: string[];
+            type: string;
+            addonAfter: string;
+            initialValue?: undefined;
+        })[];
+        name?: undefined;
+        label?: undefined;
+    })[];
 } | {
     title: string;
     child: {

package/lib/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -39,6 +39,47 @@ exports.default = [
             }
         ]
     },
+    {
+        title: '多商品切换器',
+        child: [
+            {
+                type: 'Switch',
+                name: ['props', 'commodityGroup', 'open'],
+                label: '快速切换开关'
+            },
+            {
+                type: 'Group',
+                child: [
+                    {
+                        label: '居中垂直偏移',
+                        type: 'Number',
+                        name: ['props', 'commodityGroup', 'translateY'],
+                        min: -1000,
+                        addonAfter: '%',
+                        initialValue: 0
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                child: [
+                    {
+                        label: '上边距',
+                        name: ['props', 'commodityGroup', 'style', 'marginTop'],
+                        type: 'Number',
+                        addonAfter: 'px',
+                        initialValue: 20
+                    },
+                    {
+                        label: '下边距',
+                        name: ['props', 'commodityGroup', 'style', 'marginBottom'],
+                        type: 'Number',
+                        addonAfter: 'px'
+                    }
+                ]
+            }
+        ]
+    },
     {
         title: '商品文本',
         child: [

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts

@@ -31,6 +31,11 @@ export interface ICommodityDetailDiroNewProps {
     };
     buttonStyle?: CSSProperties;
     index?: number;
+    commodityGroup?: {
+        open?: boolean;
+        translateY?: number;
+        style?: CSSProperties;
+    };
 }
 declare const _default: React.NamedExoticComponent<ICommodityDetailDiroNewProps>;
 export default _default;

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -12,16 +12,14 @@ const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/compo
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const tool_1 = require("../../../../core/utils/tool");
+const CommodityGroup_1 = tslib_1.__importDefault(require("../../template/components/CommodityGroup"));
 const CommodityDetailDiroNew = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
     const [spread, setSpread] = (0, react_1.useState)(true);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
-    const scrollRef = (0, react_1.useRef)(null);
-    const touchRef = (0, react_1.useRef)(null);
-    const touchMoveRef = (0, react_1.useRef)(null);
     const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
     const [isBottom, setIsBottom] = (0, react_1.useState)(false);
     const [isTop, setIsTop] = (0, react_1.useState)(true);
@@ -72,25 +70,6 @@ const CommodityDetailDiroNew = (_a) => {
     const handleClickCollapse = () => {
         setSpread(!spread);
     };
-    const handleTouchStart = (event) => {
-        event.stopPropagation();
-        touchRef.current = event.touches[0].clientY;
-        touchMoveRef.current = true;
-    };
-    const handleTouchMove = (event) => {
-        var _a, _b, _c, _d;
-        if (touchMoveRef.current) {
-            touchMoveRef.current = false;
-            const currentY = event.touches[0].clientY;
-            const diff = touchRef.current - currentY;
-            if (diff > 0 && (isBottom || !stopSlide)) {
-                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideNext();
-            }
-            else if (diff < 0 && (isTop || !stopSlide)) {
-                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
-            }
-        }
-    };
     const productInfoText = ({ isPost }) => {
         return (react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
             react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
@@ -103,8 +82,14 @@ Made in Italy` })));
         }
         return style;
     }, []);
+    const renderCommodityGroup = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (isPost)
+            return;
+        return (react_1.default.createElement(CommodityGroup_1.default, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
+    }, []);
     return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
-        react_1.default.createElement("div", Object.assign({ ref: scrollRef, className: (0, css_1.css)(Object.assign({}, style)) }, props),
+        react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
             product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
@@ -125,7 +110,7 @@ Made in Italy` })));
                                 width: '100%',
                                 objectFit: 'cover',
                                 display: 'block',
-                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                             }, src: src }))));
             }))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
@@ -142,6 +127,7 @@ Made in Italy` })));
                         objectFit: 'cover',
                         width: '100%'
                     }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
+            renderCommodityGroup(),
             react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },

package/lib/materials/sxp/popup/CommodityDetailDiroNew/interactionRender.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        label: string;
+        name: string[];
+    }[];
+}[];
+export default _default;

package/lib/materials/sxp/popup/CommodityDetailDiroNew/interactionRender.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '滑动事件',
+        child: [
+            {
+                type: 'Switch',
+                label: '滑动铺满全屏',
+                name: ['isScrollFullScreen']
+            }
+        ]
+    }
+];