pb-sxp-ui 1.0.0 → 1.0.2-alpha.1

package/es/core/components/SxpPageCore/index.d.ts

@@ -6,6 +6,7 @@ export interface ISxpPageCoreProps {
     defaultSize?: number;
     hashTagSize?: number;
     loadingImage?: string;
+    appDomain?: string;
 }
 declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
 export default _default;

package/es/core/components/SxpPageCore/index.js

@@ -8,7 +8,7 @@ const RESOLVER = {};
 Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
-const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage }) => {
+const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain }) => {
     var _a, _b, _c, _d, _e, _f;
     const utmVal = useMemo(() => {
         var _a;
@@ -16,7 +16,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
         return searchParams;
     }, []);
     return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, render: ({ rtcList }) => {
+        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList }) => {
                 var _a;
                 return (React.createElement(React.Fragment, null,
                     React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { data: rtcList, resolver: RESOLVER })),

package/es/core/components/SxpPageRender/ExpandableText.d.ts

@@ -7,6 +7,7 @@ interface IExpandableTextProps {
     onClick?: () => void;
     foldText?: string;
     unfoldText?: string;
+    isPost?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IExpandableTextProps>;
 export default _default;

package/es/core/components/SxpPageRender/ExpandableText.js

@@ -15,7 +15,7 @@ const limitTextLastWholeWord = (originalText = '', limit) => {
     const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
     return _words.join(' ') + ' ';
 };
-const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText }) => {
+const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost }) => {
     const [isShowMore, setIsShowMore] = useState(true);
     const [isShow, setIsShow] = useState(false);
     const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
@@ -27,19 +27,26 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
         return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
     }, [text, maxStr, isShowMore]);
     useEffect(() => {
-        if (multiRow.current) {
+        if (multiRow.current && isPost) {
             setIsShowMore(true);
             setTimeout(() => {
+                var _a;
                 setIsShow(false);
-                const height = parseInt(getComputedStyle(multiRow.current).height);
-                const lineHeight = parseInt(getComputedStyle(multiRow === null || multiRow === void 0 ? void 0 : multiRow.current).lineHeight);
-                if (text && height > lineHeight * lineClamp) {
-                    setIsShowMore(false);
-                    setIsShow(true);
+                try {
+                    const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
+                    const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
+                    const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
+                    const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 4;
+                    const lineHeight = isNaN(lh) ? fs : lh;
+                    if (text && height > lineHeight * lineClamp) {
+                        setIsShowMore(false);
+                        setIsShow(true);
+                    }
                 }
+                catch (_b) { }
             }, 100);
         }
-    }, [multiRow, text, lineClamp, style]);
+    }, [multiRow, text, lineClamp, style, isPost]);
     return (React.createElement("div", { className: className, style: Object.assign({}, style) },
         React.createElement("div", { ref: multiRow, style: {
                 overflow: 'hidden',
@@ -48,7 +55,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical',
                 wordBreak: 'break-word'
-            } }, text),
+            }, dangerouslySetInnerHTML: { __html: text ? text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') : React.createElement(React.Fragment, null) } }),
         isShow && text && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
 };
 export default memo(ExpandableText);

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

@@ -4,7 +4,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import Scroll from '../../../../materials/sxp/template/components/Scroll';
 const Hashtag = ({ tags, itemId, itemType, index, rec }) => {
     const [isShowMore, setIsShowMore] = useState(false);
-    const { setWaterFallData, setOpenHashtag, setCacheRtcList, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
+    const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
     const handleClickTag = (data) => {
         if (!waterFallData) {
             setCacheActiveIndex === null || setCacheActiveIndex === void 0 ? void 0 : setCacheActiveIndex(index);

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

@@ -1,8 +1,10 @@
 import React, { CSSProperties } from 'react';
+import { IPopupAniType } from '../../../../core/context/EditorContext';
 interface IModalProps {
     visible?: boolean;
     padding?: number | string;
     modalStyle?: CSSProperties;
+    popupAniData?: IPopupAniType;
     onClose?: () => void;
 }
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;

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

@@ -1,8 +1,11 @@
 import { debounce } from 'lodash';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
+import { useEditor } from '../../../../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 }) => {
+const Modal = ({ visible, onClose, children, modalStyle, padding, popupAniData }) => {
+    const { popupAni } = useEditor();
+    const cssAni = popupAniData !== null && popupAniData !== void 0 ? popupAniData : popupAni;
     const [isShow, setIsShow] = useState(false);
     const modalEleRef = useRef(null);
     useEffect(() => {
@@ -24,16 +27,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding }) => {
         else {
             setTimeout(() => {
                 setIsShow(false);
-            }, 1200);
+            }, cssAni === null || cssAni === void 0 ? void 0 : cssAni.duration);
         }
-    }, [visible]);
+    }, [visible, cssAni]);
     if (!modalEleRef.current)
         return null;
     const handleClose = debounce(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, 300);
     return ReactDOM.createPortal(React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: isShow ? 'flex' : 'none', backgroundColor: visible ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-        React.createElement("div", { className: `modal-container ${visible ? 'modal-popIn' : 'modal-popOut'}`, style: { padding }, onClick: (e) => {
+        React.createElement("div", { className: `modal-container ${visible ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: (cssAni === null || cssAni === void 0 ? void 0 : cssAni.duration) / 1000 + 's' }, onClick: (e) => {
                 e.stopPropagation();
                 e.preventDefault();
             } },

package/es/core/components/SxpPageRender/Nudge/index.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+interface IProps {
+    nudge?: {
+        isOpen: boolean;
+        icon?: string;
+        backgroundColor: string;
+        content?: string;
+        marginBottom: number;
+        borderRadius: number;
+        size: {
+            height: number;
+            width: number;
+        };
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            fontStyle: string;
+            textAlign: string;
+        };
+    };
+}
+declare const Nudge: FC<IProps>;
+export default Nudge;

package/es/core/components/SxpPageRender/Nudge/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+const Nudge = ({ nudge }) => {
+    return (React.createElement("div", { hidden: !(nudge === null || nudge === void 0 ? void 0 : nudge.isOpen), className: 'clc-sxp-bottom-nudge', style: {
+            marginBottom: nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom,
+            width: nudge === null || nudge === void 0 ? void 0 : nudge.size.width,
+            height: nudge === null || nudge === void 0 ? void 0 : nudge.size.height,
+            backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
+            borderRadius: nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius
+        } },
+        (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
+        React.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, nudge === null || nudge === void 0 ? void 0 : nudge.content)));
+};
+export default Nudge;

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
@@ -6,16 +6,20 @@ import { useSxpDataSource } from '../../../../core/hooks';
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
+    const [isLoad, setIsLoad] = useState(false);
     useEffect(() => {
-        if (!isActive)
-            return;
-        if (openHashtag) {
-            onReportViewImageEnd(rec);
+        if (isLoad && isActive) {
+            if (openHashtag) {
+                onReportViewImageEnd(rec);
+            }
+            else {
+                onViewImageStartEvent(index);
+            }
         }
         else {
-            onViewImageStartEvent(index);
+            setIsLoad(true);
         }
-    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent]);
+    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
     if (!isActive) {
         return React.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
     }

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

@@ -4,7 +4,7 @@ import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import withBindDataSource from '../../../../core/hoc/withBindDataSource';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 const Popup = () => {
-    const { schema, resolver, popup } = useEditor();
+    const { schema, resolver, popup, popupAni } = useEditor();
     const { setPopupDetailData, popupDetailData, bffEventReport } = useSxpDataSource();
     const { productView } = useEventReport();
     const [visible, setVisible] = useState(false);
@@ -27,7 +27,7 @@ const Popup = () => {
     }, [popup]);
     const handleClose = () => {
         var _a, _b, _c;
-        if (!popup || popup === '' || !visible || new Date() - curTimeRef.current < 1200) {
+        if (!popup || popup === '' || !visible || new Date() - curTimeRef.current < (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
             return;
         }
         setVisible(false);
@@ -40,7 +40,7 @@ const Popup = () => {
         setTimeout(() => {
             window === null || window === void 0 ? void 0 : window.sxpPopup('');
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
-        }, 1200);
+        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
     };
     const renderPopupDetail = useMemo(() => {
         var _a, _b, _c;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -16,8 +16,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         videoRef.current.muted = muted;
     }, [muted]);
     const handleVideoStart = useCallback(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+        var _a, _b;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+            return;
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
     }, []);
     const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = useCallback(() => {
@@ -74,37 +76,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             });
         }
         setTimeout(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            var _a, _b;
+            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+                return;
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
         }, 0);
     }, [index, bffEventReport, data, isLoad]);
     const handleClickVideo = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+            return;
         if (!isLoad)
             return;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
+        const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
+                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
                 }
                 else {
-                    (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
+                    (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
@@ -135,14 +138,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
     }, [data, index, bffEventReport]);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         if (data.length <= 0)
             return;
         if (!videoRef.current)
             return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         setIsPauseVideo(false);
         if (!isActive) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
             return;
         }
         if (!videoRef.current.src) {
@@ -152,10 +157,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
         else {
+            if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
+                return;
             videoRef.current.play();
         }
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
+        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
+        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
         return () => {
             var _a, _b;
             (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
@@ -163,15 +170,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         };
     }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
     useEffect(() => {
-        var _a, _b, _c;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        var _a, _b, _c, _d;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+            return;
+        const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
         if (!isActive)
             return;
         if (!isPause && openHashtag) {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
         }
         else if (!openHashtag) {
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
         }
     }, [openHashtag, isActive]);
     useEffect(() => {

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { useSxpDataSource } from '../../../../core/hooks';
+import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 import './WaterfallList.less';
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView } = props;
@@ -143,6 +143,7 @@ const WaterfallFlowItem = (props) => {
 };
 export default function WaterfallList({ reportTagsView }) {
     var _a, _b, _c, _d, _e, _f;
+    const { popupAni } = useEditor();
     const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
     const scrollParent = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
@@ -160,7 +161,7 @@ export default function WaterfallList({ reportTagsView }) {
     const [frameInfo, setFrameInfoInfo] = useState({ width: 0 });
     const rowsNum = useMemo(() => {
         const width = frameInfo.width || 0;
-        if (width >= 1200) {
+        if (width >= (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
             return 6;
         }
         else if (width >= 768 && width <= 1199) {
@@ -169,7 +170,7 @@ export default function WaterfallList({ reportTagsView }) {
         else {
             return 2;
         }
-    }, [frameInfo]);
+    }, [frameInfo, popupAni]);
     const unitWidth = useMemo(() => {
         return frameInfo.width / rowsNum - 2;
     }, [rowsNum, frameInfo]);

package/es/core/components/SxpPageRender/index.d.ts

@@ -10,7 +10,7 @@ interface ISxpPageRenderProps {
         likeIcon?: string;
         unlikeIcon?: string;
         color?: string;
-        productPost?: string;
+        productPost?: any[];
         muteIconX?: number;
         muteIconY?: number;
         likeIconX?: number;
@@ -23,6 +23,25 @@ interface ISxpPageRenderProps {
         foldText: string;
         unfoldText: string;
     };
+    nudge?: {
+        isOpen: boolean;
+        icon?: string;
+        backgroundColor: string;
+        content?: string;
+        marginBottom: number;
+        borderRadius: number;
+        size: {
+            height: number;
+            width: number;
+        };
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            fontStyle: string;
+            textAlign: string;
+        };
+    };
     containerHeight?: number;
     containerWidth?: number;
     tempMap?: Record<string, any>;

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

@@ -7,20 +7,20 @@ import VideoWidget from './VideoWidget';
 import ToggleButton from './ToggleButton';
 import FingerSwipeTip from './FingerSwipeTip';
 import PictureGroup from './PictureGroup';
-import ProductInfo from './ProductInfo';
 import Hashtag from './Hashtag';
 import Navbar from './Navbar';
 import left from './left.png';
 import RenderCard from './RenderCard';
 import { useIconLink } from './useIconLink';
 import WaterFall from './WaterFall';
-import CommodityDetailDiroNew from '../../../materials/sxp/popup/CommodityDetailDiroNew';
+import Nudge from './Nudge';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
 import { useEditor, useSxpDataSource } from '../../../core/hooks';
 import { refreshFeSessionId } from '../../../core/utils/sessionStore';
 import './index.less';
 import { useEventReport } from '../../../core/hooks/useEventReport';
-const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, _schema }) => {
+import withBindDataSource from '../../../core/hoc/withBindDataSource';
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema }) => {
     var _a, _b, _c, _d;
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = useState(0);
@@ -149,39 +149,37 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return null;
     }, [globalConfig]);
     const renderContent = useCallback((rec, index) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
             return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
         }
         if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
         }
-        if (rec.product) {
-            switch (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) {
-                case 'CommodityDetailDiroNew':
-                    return (React.createElement(CommodityDetailDiroNew, { key: rec.product.itemId, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: { height: '100%', overflow: 'auto' } }));
-                case 'CommodityDetail':
-                    return (React.createElement(ProductInfo, { key: rec.product.itemId, viewTime: viewTime.current, data: rec, height: height, tipText: tipText, width: containerWidth }));
-                default:
-                    return (React.createElement(ProductInfo, { key: rec.product.itemId, viewTime: viewTime.current, data: rec, height: height, tipText: tipText, width: containerWidth }));
-            }
+        if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, index) => {
+                var _a, _b, _c, _d, _e, _f;
+                const Component = withBindDataSource(resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type]);
+                return (React.createElement(Component, Object.assign({ key: index, textStyle: (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.textStyle, bindDatas: (_d = (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.bindDatas) !== null && _d !== void 0 ? _d : [] }, (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.props, { event: ((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: { height: '100%', overflow: 'auto' }, data: rec, height: height, width: containerWidth })));
+            });
         }
         return null;
-    }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText]);
+    }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
     const renderBottom = useCallback((rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (rec.video) {
             return (React.createElement(React.Fragment, null,
                 ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 React.createElement("div", { className: 'clc-sxp-bottom' },
+                    React.createElement(Nudge, { nudge: nudge }),
                     React.createElement("div", { className: 'clc-sxp-bottom-card' },
                         React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
                     React.createElement("div", { className: 'clc-sxp-bottom-text' },
-                        React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle })),
+                        React.createElement(ExpandableText, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: descStyle })),
                     React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec }))));
         }
         return null;
-    }, [descStyle, activeIndex, tempMap, resolver, tipText]);
+    }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge]);
     const renderLikeButton = useCallback((rec) => {
         var _a, _b;
         if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -257,6 +255,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current);
         }
     };
+    useEffect(() => {
+        const item = data[activeIndex];
+        if (openHashtag)
+            handleReportProductView(item);
+    }, [openHashtag, data, activeIndex]);
     const handleViewImageStartEvent = (activeIndex) => {
         var _a, _b, _c, _d, _e, _f;
         const item = data[activeIndex];

package/es/core/components/SxpPageRender/typing.d.ts

@@ -39,6 +39,7 @@ export type ProductInfoType = {
     info: string;
     currency: string;
     bindCta?: CTAInfoType;
+    taxInfo?: string;
 };
 export type VideoInfoType = {
     bindCtaId: string;

package/es/core/components/SxpPageRender/useIconLink.d.ts

@@ -1 +1 @@
-export declare function useIconLink(path: string): string;
+export declare function useIconLink(path: string, domain?: string): string;

package/es/core/components/SxpPageRender/useIconLink.js

@@ -1,8 +1,13 @@
 import { useMemo } from 'react';
 import { useSxpDataSource } from '../../../core/hooks';
-export function useIconLink(path) {
+export function useIconLink(path, domain) {
     const { appDomain } = useSxpDataSource();
     return useMemo(() => {
-        return appDomain ? `https://${appDomain}${path}` : `${window.location.origin}${path}`;
-    }, [appDomain, path]);
+        if (domain) {
+            return `https://${domain}${path}`;
+        }
+        else {
+            return appDomain ? `https://${appDomain}${path}` : `${window.location.origin}${path}`;
+        }
+    }, [appDomain, path, domain]);
 }

package/es/core/context/EditorContext.d.ts

@@ -15,6 +15,10 @@ export interface IPageParams {
     h5_url?: string;
     mp_rul?: string;
 }
+export type IPopupAniType = {
+    name: string;
+    duration: number;
+};
 export interface IEditorContext {
     resolver: Record<string, MaterialComponet>;
     currentNode: any | null;
@@ -55,6 +59,7 @@ export interface IEditorContext {
     getCurPageConf?: any;
     popup: string;
     setPopup: React.Dispatch<React.SetStateAction<string>>;
+    popupAni: IPopupAniType;
 }
 export interface IEditorCoreProps {
     resolver: Record<string, MaterialComponet>;

package/es/core/context/EditorContext.js

@@ -45,7 +45,11 @@ export const EditorContext = React.createContext({
     undoStack: [item],
     redoStack: [],
     popup: '',
-    setPopup: () => { }
+    setPopup: () => { },
+    popupAni: {
+        name: 'none',
+        duration: 0
+    }
 });
 const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSource = true, utmVal }, ref) => {
     const [currentNode, setCurrentNode] = useState(null);
@@ -64,9 +68,22 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
     const [undoStack, setUndoStack] = useState([[item]]);
     const [redoStack, setRedoStack] = useState([]);
     const [popup, setPopup] = useState('');
+    const [popupAni, setPopupAni] = useState({
+        name: 'none',
+        duration: 0
+    });
     typeof window !== 'undefined' &&
-        (window.sxpPopup = (type) => {
+        (window.sxpPopup = (type, aniType) => {
             setPopup(type);
+            if (aniType && (aniType === null || aniType === void 0 ? void 0 : aniType.name) !== 'none') {
+                setPopupAni(Object.assign(Object.assign({}, popupAni), aniType));
+            }
+            else {
+                setPopupAni({
+                    name: 'none',
+                    duration: 0
+                });
+            }
         });
     typeof window !== 'undefined' &&
         (window.getJointUtmLink = (url) => {
@@ -135,7 +152,8 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
             setUndoStack,
             getCurPageConf,
             popup,
-            setPopup
+            setPopup,
+            popupAni
         } },
         React.createElement(DataSourceProvider, { isSsr: isSsr, enable: enableDataSource }, children)));
 });

package/es/core/context/SxpDataSourceProvider.js

@@ -168,7 +168,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setLoading(false);
         });
     }, [getRecommendVideos]);
-    const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif');
+    const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
     return (React.createElement(SxpDataSourceContext.Provider, { value: {
             rtcList,
             setRtcList,