pb-sxp-ui 1.0.2 → 1.0.3-alpha.2

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

@@ -4,8 +4,11 @@ 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 }) => {
+const Modal = ({ visible, onClose, children, modalStyle, padding, popupAniData }) => {
+    const { popupAni } = (0, hooks_1.useEditor)();
+    const cssAni = popupAniData !== null && popupAniData !== void 0 ? popupAniData : popupAni;
     const [isShow, setIsShow] = (0, react_1.useState)(false);
     const modalEleRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -27,16 +30,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 = (0, lodash_1.debounce)(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, 300);
     return ReactDOM.createPortal(react_1.default.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_1.default.createElement("div", { className: `modal-container ${visible ? 'modal-popIn' : 'modal-popOut'}`, style: { padding }, onClick: (e) => {
+        react_1.default.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/lib/core/components/SxpPageRender/Navbar.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 interface INavbarProps {
     icon?: string;
     styles?: CSSProperties;
+    textStyle?: CSSProperties;
     onClose?: () => void;
 }
 declare const _default: React.NamedExoticComponent<INavbarProps>;

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../core/hooks");
-const Navbar = ({ icon, styles, onClose }) => {
+const Navbar = ({ icon, styles, textStyle, onClose }) => {
+    var _a;
     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: '', onClick: onClose }),
-        react_1.default.createElement("div", { className: 'clc-sxp-nav-title' }, `#${waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag}`)));
+        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
 };
 exports.default = (0, react_1.memo)(Navbar);

package/lib/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/lib/core/components/SxpPageRender/Nudge/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Nudge = ({ nudge }) => {
+    return (react_1.default.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_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
+        react_1.default.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, nudge === null || nudge === void 0 ? void 0 : nudge.content)));
+};
+exports.default = Nudge;

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

@@ -9,16 +9,20 @@ const hooks_1 = require("../../../../core/hooks");
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
     const { isActive } = (0, react_2.useSwiperSlide)();
     const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
+    const [isLoad, setIsLoad] = (0, react_1.useState)(false);
     (0, react_1.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_1.default.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
     }

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

@@ -7,7 +7,7 @@ const hooks_1 = require("../../../../core/hooks");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../../core/hoc/withBindDataSource"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Popup = () => {
-    const { schema, resolver, popup } = (0, hooks_1.useEditor)();
+    const { schema, resolver, popup, popupAni } = (0, hooks_1.useEditor)();
     const { setPopupDetailData, popupDetailData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
     const { productView } = (0, useEventReport_1.useEventReport)();
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -30,7 +30,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);
@@ -43,7 +43,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 = (0, react_1.useMemo)(() => {
         var _a, _b, _c;

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

@@ -19,8 +19,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         videoRef.current.muted = muted;
     }, [muted]);
     const handleVideoStart = (0, react_1.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 = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
     const handlePlaying = (0, react_1.useCallback)(() => {
@@ -77,37 +79,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 = (0, react_1.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;
@@ -138,14 +141,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
     }, [data, index, bffEventReport]);
     (0, react_1.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) {
@@ -155,10 +160,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);
@@ -166,15 +173,17 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         };
     }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
     (0, react_1.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]);
     (0, react_1.useEffect)(() => {

package/lib/core/components/SxpPageRender/WaterFall/List.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import './List.less';
-export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

package/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("./List.less");
+const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
 const hooks_1 = require("../../../../core/hooks");
 const WaterfallFlowItem = (props) => {
-    const { rec, index, list, reportTagsView } = props;
+    const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const [showVideo, setShowVideo] = (0, react_1.useState)(false);
     const imgDom = (0, react_1.useRef)(null);
@@ -105,19 +106,20 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (react_1.default.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail },
+    return (react_1.default.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
         react_1.default.createElement("div", { className: 'list-content-listItem-picture' },
             showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
                 react_1.default.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                 react_1.default.createElement("canvas", { ref: canvasRef }))),
             react_1.default.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
         react_1.default.createElement("div", { className: 'list-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}` }, title && title),
-            react_1.default.createElement("div", { className: 'list-content-listItem-info-price', hidden: !priceText }, priceText))));
+            react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
+            react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
 };
-function WaterfallList({ reportTagsView }) {
-    var _a, _b, _c, _d, _e, _f;
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage } = (0, hooks_1.useSxpDataSource)();
+function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
     const [list, setList] = (0, react_1.useState)();
     const [data, setData] = (0, react_1.useState)();
     const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
@@ -139,6 +141,7 @@ function WaterfallList({ reportTagsView }) {
             }));
     }, [waterFallData, getRecommendVideos, list, isLoadMore]);
     (0, react_1.useEffect)(() => {
+        var _a, _b;
         setIsLoadingData(true);
         waterFallData &&
             (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
@@ -152,7 +155,13 @@ function WaterfallList({ reportTagsView }) {
                 setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
                 setIsLoadingData(false);
             }));
-    }, [waterFallData, getRecommendVideos, hashTagSize]);
+        if (isOpenHashTag) {
+            const res = preview_json_1.default;
+            setData(res);
+            setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+            setIsLoadingData(false);
+        }
+    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
     const handleClickLink = () => {
         var _a, _b;
         if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
@@ -163,15 +172,15 @@ function WaterfallList({ reportTagsView }) {
     return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
         react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { className: 'list' },
         react_1.default.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
-                bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
+                bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
             } },
-            react_1.default.createElement("div", { className: 'list-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
-            react_1.default.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'list-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
+            react_1.default.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
+            react_1.default.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
             react_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                return (react_1.default.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }));
+                return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
-        react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
-            react_1.default.createElement("button", { className: 'list-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'))))));
+        react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+            react_1.default.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
 }
 exports.default = WaterfallList;

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import './WaterfallList.less';
-export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

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

@@ -5,7 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 require("./WaterfallList.less");
 const WaterfallFlowItem = (props) => {
-    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView } = props;
+    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const [showVideo, setShowVideo] = (0, react_1.useState)(false);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
@@ -141,11 +141,13 @@ const WaterfallFlowItem = (props) => {
                     visibility: isLoading ? 'visible' : 'hidden'
                 } })),
         react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}` }, title && title),
-            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText }, priceText))));
+            react_1.default.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
+            react_1.default.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
-function WaterfallList({ reportTagsView }) {
-    var _a, _b, _c, _d, _e, _f;
+function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
+    const { popupAni } = (0, hooks_1.useEditor)();
     const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
     const scrollParent = (0, react_1.useRef)(null);
     const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -163,7 +165,7 @@ function WaterfallList({ reportTagsView }) {
     const [frameInfo, setFrameInfoInfo] = (0, react_1.useState)({ width: 0 });
     const rowsNum = (0, react_1.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) {
@@ -172,7 +174,7 @@ function WaterfallList({ reportTagsView }) {
         else {
             return 2;
         }
-    }, [frameInfo]);
+    }, [frameInfo, popupAni]);
     const unitWidth = (0, react_1.useMemo)(() => {
         return frameInfo.width / rowsNum - 2;
     }, [rowsNum, frameInfo]);
@@ -308,14 +310,14 @@ function WaterfallList({ reportTagsView }) {
             react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })),
         react_1.default.createElement("div", { className: 'waterFallList', hidden: isLoadingData },
             react_1.default.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
-                    bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
+                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
                 } },
-                react_1.default.createElement("div", { className: 'waterFallList-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
-                react_1.default.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
+                react_1.default.createElement("div", { className: 'waterFallList-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
+                react_1.default.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'waterFallList-collection', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
                 react_1.default.createElement("div", { className: 'waterFallList-content', ref: waterfallFlowDom }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                    return (react_1.default.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }));
+                    return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }))),
-            react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
-                react_1.default.createElement("button", { className: 'waterFallList-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection')))));
+            react_1.default.createElement("div", { className: 'waterFallList-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+                react_1.default.createElement("button", { className: 'waterFallList-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection')))));
 }
 exports.default = WaterfallList;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import './index.less';
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
 interface IWaterFallProps {
 }
-declare const _default: React.NamedExoticComponent<IWaterFallProps>;
+declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
 export default _default;

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

@@ -9,7 +9,8 @@ const Navbar_1 = tslib_1.__importDefault(require("../Navbar"));
 const List_1 = tslib_1.__importDefault(require("./List"));
 const left_png_1 = tslib_1.__importDefault(require("./left.png"));
 const hooks_1 = require("../../../../core/hooks");
-const WaterFall = () => {
+const WaterFall = (props) => {
+    var _a;
     const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = (0, hooks_1.useSxpDataSource)();
     const ref = (0, react_1.useRef)(null);
     const modalEleRef = (0, react_1.useRef)(null);
@@ -97,7 +98,7 @@ const WaterFall = () => {
     return ReactDOM.createPortal(react_1.default.createElement("div", { className: 'waterfall', style: {
             display: openHashtag ? 'block' : 'none'
         } },
-        react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { top: '32px' }, onClose: handleClose }),
-        react_1.default.createElement(List_1.default, { reportTagsView: reportTagsView })), modalEleRef.current);
+        react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
+        react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
 };
 exports.default = (0, react_1.memo)(WaterFall);