pb-sxp-ui 1.1.1 → 1.2.0

package/es/materials/sxp/popup/CommodityList/settingRender.js

@@ -0,0 +1,207 @@
+export default [
+    {
+        title: '商品图片',
+        child: [
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'commodityPicture', 'width'],
+                        addonAfter: 'W'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'commodityPicture', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'commodityPicture', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'commodityPicture', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'Number',
+                label: '与右侧边距',
+                addonAfter: 'px',
+                name: ['props', 'commodityPicture', 'marginRight']
+            },
+            {
+                label: '居中垂直偏移',
+                type: 'Number',
+                name: ['props', 'translateY'],
+                min: -1000,
+                addonAfter: '%',
+                initialValue: 0
+            }
+        ]
+    },
+    {
+        title: '商品文本',
+        child: [
+            {
+                name: ['props', 'commodityStyles'],
+                type: 'SelectLinkage',
+                child: [
+                    {
+                        label: '字段',
+                        type: 'Select',
+                        options: [
+                            {
+                                label: '商品名称',
+                                value: 'title'
+                            },
+                            {
+                                label: '系列名称',
+                                value: 'collection'
+                            },
+                            {
+                                label: '价格',
+                                value: 'price'
+                            }
+                        ],
+                        name: ['props', 'commodityStyles', 'field'],
+                        initialValue: 'title'
+                    },
+                    {
+                        type: 'Group',
+                        label: '标题字体',
+                        child: [
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
+                            },
+                            {
+                                type: 'Select',
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
+                            },
+                            {
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['fontSize']
+                            }
+                        ]
+                    },
+                    {
+                        label: '标题样式',
+                        type: 'TextStyle'
+                    },
+                    {
+                        label: '标题对齐',
+                        type: 'TextAlign'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        title: '按钮样式',
+        child: [
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'buttonStyle', 'backgroundColor']
+            },
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'TextSpace',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color']
+                    },
+                    {
+                        type: 'Number',
+                        addonAfter: 'px',
+                        name: ['props', 'buttonStyle', 'fontSize']
+                    }
+                ]
+            },
+            {
+                label: '样式',
+                type: 'TextStyle',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                label: '对齐',
+                type: 'TextAlign',
+                name: ['props', 'buttonStyle']
+            }
+        ]
+    }
+];

package/es/materials/sxp/popup/index.d.ts

@@ -2,3 +2,4 @@ export * from './AppointForm/material';
 export * from './CommodityDetail/material';
 export * from './Prompt/material';
 export * from './CommodityDetailDiroNew/material';
+export * from './CommodityList/material';

package/es/materials/sxp/popup/index.js

@@ -2,3 +2,4 @@ export * from './AppointForm/material';
 export * from './CommodityDetail/material';
 export * from './Prompt/material';
 export * from './CommodityDetailDiroNew/material';
+export * from './CommodityList/material';

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

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { css } from '@emotion/css';
 import React, { memo } from 'react';
 import EventProvider from '../components/EventProvider';
+import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import Img from '../components/Img';
 import { setFontForText } from '../../../../core/utils/tool';
-import styles from './index.module.less';
 const Link = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
@@ -30,7 +30,7 @@ const Link = (_a) => {
                 overflow: 'hidden'
             }) },
             React.createElement("div", null,
-                React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                React.createElement("div", { className: (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) ? styles['one-line-ellipsis'] : styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
                         __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                     } }),
                 (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: styles['one-line-ellipsis'], dangerouslySetInnerHTML: {

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

@@ -33,9 +33,9 @@ const MultiCommodity = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             React.createElement(Img, { 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.createElement("div", { className: css({
                     color: '#fff',

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

@@ -32,9 +32,9 @@ const MultiCommodityDiro = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             React.createElement(Img, { 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.createElement("div", { className: css({
                     color: '#000',

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

@@ -16,12 +16,13 @@ const MultiCommodityDiroNew = (_a) => {
     const { popup } = useEditor();
     const { jumpToWeb } = useEventReport();
     const [products, setProducts] = 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 = throttle((item) => {
+    const handleClick = 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);
@@ -32,9 +33,9 @@ const MultiCommodityDiroNew = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
+    return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
             React.createElement(Img, { 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.createElement("div", { className: css({
                     color: '#fff',

package/es/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/es/materials/sxp/template/components/CommodityGroup.js

@@ -0,0 +1,31 @@
+import React, { memo, useState, useCallback } from 'react';
+import Scroll from './Scroll';
+import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
+import { useSxpDataSource } from '../../../../core/hooks';
+import { SwiperSlide } from 'swiper/react';
+import { css } from '@emotion/css';
+const CommodityGroup = ({ products, data, defImg, style }) => {
+    var _a, _b;
+    const { setPopupDetailData, popupDetailData } = useSxpDataSource();
+    const [check, setCheck] = useState((_a = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _a !== void 0 ? _a : 0);
+    const handleClick = 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.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 0) || !popupDetailData) && (React.createElement(Scroll, { 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.createElement(SwiperSlide, { className: css({
+                width: '50px',
+                height: '50px',
+                marginRight: '10px'
+            }), onClick: () => handleClick(index), key: index },
+            React.createElement(FormatImage, { 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 })));
+    })))));
+};
+export default memo(CommodityGroup);

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

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

package/es/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/es/materials/sxp/template/components/Scroll.js

@@ -1,10 +1,17 @@
-import React, { memo } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import { Swiper } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/scrollbar';
 import { FreeMode, Scrollbar, Mousewheel } from 'swiper/modules';
-const Scroll = ({ children, isPadding = true }) => {
-    return (React.createElement(Swiper, { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: { padding: isPadding ? '0 12px 0 20px' : 0 } }, children));
+import { useSxpDataSource } from '../../../../core/hooks';
+const Scroll = ({ children, isPadding = true, style }) => {
+    const ref = useRef();
+    const { popupDetailData } = useSxpDataSource();
+    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.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
 };
 export default memo(Scroll);

package/es/materials/sxp/template/components/settingRender.js

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

package/lib/core/Pagebuilder/type.d.ts

@@ -26,6 +26,7 @@ export interface PageData {
         privacy_policy_url?: string;
         privacy_title?: string;
         template?: any | null;
+        channels?: string[];
     };
 }
 export interface DataSource {

package/lib/core/components/SxpPageRender/Hashtag/index.js

@@ -7,7 +7,6 @@ const hooks_1 = require("../../../../core/hooks");
 const Scroll_1 = tslib_1.__importDefault(require("../../../../materials/sxp/template/components/Scroll"));
 const tool_1 = require("../../../../core/utils/tool");
 const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
-    var _a;
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = (0, hooks_1.useSxpDataSource)();
     const handleClickTag = (data) => {
@@ -39,8 +38,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         }
         return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
     }, [isShowMore, tags]);
-    console.log(hashTagStyle, '111');
-    return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
+    return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
         react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
             react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
 };

package/lib/core/components/SxpPageRender/Modal/index.d.ts

@@ -6,6 +6,9 @@ interface IModalProps {
     padding?: number | string;
     modalStyle?: CSSProperties;
     onClose?: () => void;
+    schema?: any;
+    fullHeight?: number;
+    isFullScreen?: boolean;
 }
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
 export default _default;

package/lib/core/components/SxpPageRender/Modal/index.js

@@ -4,11 +4,21 @@ const tslib_1 = require("tslib");
 const lodash_1 = require("lodash");
 const react_1 = tslib_1.__importStar(require("react"));
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const hooks_1 = require("../../../../core/hooks");
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
-    var _a;
+const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
+    var _a, _b;
+    const touchRef = (0, react_1.useRef)(null);
+    const fTouchRef = (0, react_1.useRef)(null);
+    const touchMoveRef = (0, react_1.useRef)(null);
+    const ref = (0, react_1.useRef)(null);
+    const MODAL_DEF_TRANS = fullHeight * 0.2;
+    const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
+    const [modalTrans, setModalTrans] = (0, react_1.useState)(MODAL_DEF_TRANS);
     const [isShow, setIsShow] = (0, react_1.useState)(false);
     const modalEleRef = (0, react_1.useRef)(null);
+    const { globalConfig, popupDetailData } = (0, hooks_1.useSxpDataSource)();
+    const { schema: _schema } = (0, hooks_1.useEditor)();
     (0, react_1.useEffect)(() => {
         const parentNode = document.getElementById('sxp-render');
         const node = document.getElementById('pb-modal');
@@ -24,6 +34,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     const isOpen = (0, react_1.useMemo)(() => {
         return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
     }, [visible, popup]);
+    const isScrollFullScreen = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e;
+        const schemaData = schema !== null && schema !== void 0 ? schema : _schema;
+        const value = (_c = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.find((value) => (value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
+        return ((_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.event) === null || _e === void 0 ? void 0 : _e.isScrollFullScreen) || false;
+    }, [popup, schema, _schema]);
     (0, react_1.useEffect)(() => {
         if (isOpen) {
             setIsShow(true);
@@ -31,6 +47,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
         else {
             setTimeout(() => {
                 setIsShow(false);
+                setModalTrans(MODAL_DEF_TRANS);
             }, popup === null || popup === void 0 ? void 0 : popup.duration);
         }
     }, [isOpen, popup]);
@@ -39,13 +56,60 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     const handleClose = (0, lodash_1.debounce)(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, 300);
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        fTouchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        event.stopPropagation();
+        requestAnimationFrame(() => {
+            var _a;
+            if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+                const currentY = event.touches[0].clientY;
+                const diff = touchRef.current - currentY;
+                touchRef.current = currentY;
+                const ts = modalTrans - diff;
+                if (ts > 0) {
+                    setModalTrans(ts);
+                }
+            }
+        });
+    };
+    const handleTouchEnd = (event) => {
+        var _a;
+        event.stopPropagation();
+        if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+            const diff = fTouchRef.current - touchRef.current;
+            if (diff > 0) {
+                setModalTrans(0);
+            }
+            else if (modalTrans < MODAL_DEF_TRANS && diff < 0) {
+                setModalTrans(MODAL_DEF_TRANS);
+            }
+            else if (modalTrans >= MODAL_DEF_TRANS && diff < 0) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        }
+        touchMoveRef.current = false;
+    };
     return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null, isShow && (react_1.default.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-        react_1.default.createElement("div", { className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, onClick: (e) => {
+        react_1.default.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign({ padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, (isScrollFullScreen && {
+                transform: `translateY(${modalTrans}px)`
+            })), onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-            } },
+            } }, (isScrollFullScreen && {
+            onTouchMove: handleTouchMove,
+            onTouchStart: handleTouchStart,
+            onTouchEnd: handleTouchEnd
+        })),
             react_1.default.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
-                react_1.default.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
-            children)))), modalEleRef.current);
+                react_1.default.createElement("img", { src: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _b !== void 0 ? _b : closeIcon, alt: 'close', className: 'modal-icon' })),
+            react_1.default.createElement("div", { ref: ref, style: {
+                    height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                    overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
+                } }, children))))), modalEleRef.current);
 };
 exports.default = (0, react_1.memo)(Modal);

package/lib/core/components/SxpPageRender/Navbar.js

@@ -9,7 +9,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
     const { waterFallData, setOpenHashtag } = (0, hooks_1.useSxpDataSource)();
     return (react_1.default.createElement("div", { className: 'clc-sxp-nav', style: styles },
         react_1.default.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
-        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
+        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
             } })));
 };

package/lib/core/components/SxpPageRender/Popup/index.js

@@ -55,7 +55,7 @@ const Popup = () => {
                 const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
                 const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
                 const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
-                return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
+                return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
             }
             else {
                 return react_1.default.createElement(react_1.default.Fragment, null);

package/lib/core/components/SxpPageRender/RenderCard.d.ts

@@ -6,6 +6,7 @@ interface IRenderCardProps {
     rec: RecItemType;
     tempMap?: Record<string, any>;
     resolver: any;
+    includesCtaType?: string[];
 }
 declare const _default: React.NamedExoticComponent<IRenderCardProps>;
 export default _default;