pb-sxp-ui 1.0.100 → 1.0.102

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

@@ -29,14 +29,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const { schema } = (0, hooks_1.useEditor)();
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const viewImageStartTime = (0, react_1.useRef)(0);
-    const [isInit, setIsInit] = (0, react_1.useState)(false);
     const [isMuted, setIsMuted] = (0, react_1.useState)(true);
     const viewTime = (0, react_1.useRef)();
     const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed } = (0, useEventReport_1.useEventReport)();
-    const videoRef = (0, react_1.useRef)();
     const { productView } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
@@ -64,16 +62,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     }, [data.length, bffFbReport, h5EnterLink]);
-    const firstRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
-            firstRef.current = true;
-            if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
-                videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
-            }
-        }
-    }, [videoRef, data]);
     (0, react_1.useEffect)(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -171,11 +159,14 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return h;
     }, [tagList, waterFallData]);
-    const height = (0, react_1.useMemo)(() => {
+    const minusHeight = (0, react_1.useMemo)(() => {
         let minusHeight = 0;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
             minusHeight += 45;
         }
+        return minusHeight;
+    }, []);
+    const height = (0, react_1.useMemo)(() => {
         return containerHeight - minusHeight - tagHeight;
     }, [globalConfig, containerHeight, tagHeight]);
     const renderLogo = (0, react_1.useMemo)(() => {
@@ -188,7 +179,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -214,8 +205,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         viewTime,
         tipText,
         resolver,
-        schema,
-        videoRef.current
+        schema
     ]);
     const onExpandableChange = (0, react_1.useCallback)((v) => {
         setIsShowMore(v);
@@ -408,7 +398,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
             } })),
         renderLogo,
-        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
+        react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
+                top: minusHeight
+            } }),
         isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
         react_1.default.createElement(react_2.Swiper, { style: {
                 marginTop: tagHeight
@@ -441,15 +433,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
                 }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
             renderView),
-        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
-        react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
-            react_1.default.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
-                    backgroundColor: 'transparent',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    pointerEvents: 'none'
-                } }),
-            react_1.default.createElement("div", { id: 'player-container-id-copy' }))));
+        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
 };
 exports.default = SxpPageRender;

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

@@ -20,12 +20,12 @@ exports.default = [
                 child: [
                     {
                         type: 'Select',
-                        name: ['testStyle', 'fontFamily-cn'],
+                        name: ['textStyle', 'fontFamily-cn'],
                         bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['testStyle', 'fontFamily-en'],
+                        name: ['textStyle', 'fontFamily-en'],
                         bottomText: '英文/其他字体'
                     }
                 ]

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

@@ -83,9 +83,10 @@ const CommodityDetail = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle, dangerouslySetInnerHTML: {
-                __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
-            } }))));
+        return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
+            react_1.default.createElement("span", { dangerouslySetInnerHTML: {
+                    __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
+                } })))));
     };
     const getStyle = (0, react_1.useCallback)((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {

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

@@ -158,9 +158,10 @@ Made in Italy` })));
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
                                 __html: (0, tool_1.setFontForText)((_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle, dangerouslySetInnerHTML: {
-                        __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
-                    } })),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                    react_1.default.createElement("span", { dangerouslySetInnerHTML: {
+                            __html: (0, tool_1.setFontForText)((_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now', buttonStyle)
+                        } }))),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };

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

@@ -10,6 +10,7 @@ export interface IPromptProps {
     onClose?: () => void;
     onClick?: () => void;
     submitButtonStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
 }
 declare const _default: React.NamedExoticComponent<IPromptProps>;
 export default _default;

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

@@ -10,7 +10,7 @@ const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const tool_1 = require("../../../../core/utils/tool");
 const Prompt = (_a) => {
-    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle"]);
+    var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle"]);
     const { popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const iconSrc = typeof icon === 'string' ? icon : (0, materials_1.getMediaValueByMode)(icon);
@@ -31,7 +31,9 @@ const Prompt = (_a) => {
     return (react_1.default.createElement("div", Object.assign({ className: `pb-prompt ${(0, css_1.css)(Object.assign({}, style))}` }, props),
         react_1.default.createElement("div", { className: 'pb-prompt-icon' },
             react_1.default.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success_png_1.default, alt: 'success image' })),
-        react_1.default.createElement("div", { className: 'pb-prompt-content' }, content),
+        react_1.default.createElement("div", { className: 'pb-prompt-content', style: contentStyle, dangerouslySetInnerHTML: {
+                __html: (0, tool_1.setFontForText)(content, contentStyle)
+            } }),
         react_1.default.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk, dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)(btnText, submitButtonStyle)
             } })));

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

@@ -6,12 +6,14 @@ declare const _default: {
         name: string[];
         mediaType: string;
         child?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
         name: string[];
         mediaType?: undefined;
         child?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
@@ -22,6 +24,7 @@ declare const _default: {
         }[];
         name?: undefined;
         mediaType?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         label: string;
@@ -38,12 +41,21 @@ declare const _default: {
         })[];
         name?: undefined;
         mediaType?: undefined;
+        initialValue?: undefined;
     } | {
         type: string;
         name: string[];
         label?: undefined;
         mediaType?: undefined;
         child?: undefined;
+        initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        initialValue: string;
+        mediaType?: undefined;
+        child?: undefined;
     })[];
 }[];
 export default _default;

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

@@ -16,9 +16,37 @@ exports.default = [
                 name: ['props', 'content']
             },
             {
-                type: 'Text',
-                label: '按钮文案',
-                name: ['props', 'btnText']
+                type: 'Group',
+                label: '内容字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'contentStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'contentStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'contentStyle', 'color'],
+                        initialValue: '#000'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'contentStyle', 'fontSize'],
+                        addonAfter: 'px',
+                        initialValue: 14
+                    }
+                ]
             },
             {
                 type: 'Group',
@@ -64,7 +92,8 @@ exports.default = [
             {
                 label: '提交按钮颜色',
                 type: 'Color',
-                name: ['props', 'submitButtonStyle', 'backgroundColor']
+                name: ['props', 'submitButtonStyle', 'backgroundColor'],
+                initialValue: '#000'
             }
         ]
     }

package/package.json

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