pb-sxp-ui 1.0.78 → 1.0.80

package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -4,6 +4,7 @@ interface IPictureProps {
     src: string;
     height?: number;
     imgUrlsPostConfig?: postConfigType;
+    onShowFirstImage?: () => void;
 }
 declare const Picture: (props: IPictureProps) => React.JSX.Element;
 export default Picture;

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import FormatImage from '../FormatImage';
 const Picture = (props) => {
-    const { src, height, imgUrlsPostConfig } = props;
+    const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
     const blur = useMemo(() => {
         return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
     }, [imgUrlsPostConfig]);
@@ -26,7 +26,7 @@ const Picture = (props) => {
         return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
     }, [imgUrlsPostConfig, isBgColor]);
     return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
-        (!blur || !isBgColor) && (React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+        (!blur || !isBgColor) && (React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
         blur && (React.createElement(FormatImage, { src: src, style: {
                 width: '100%',
                 height: '100%',

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
@@ -20,13 +20,17 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
             }
         }
         else {
-            setIsLoad(true);
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (React.createElement(SwiperSlide, { key: url },
-            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
+    const showFirstImageFn = useCallback(() => {
+        if (!isLoad) {
+            setIsLoad(true);
+        }
+    }, [isLoad]);
+    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+        return (React.createElement(SwiperSlide, { key: index },
+            React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));
 };
 export default memo(PictureGroup);

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

@@ -2,8 +2,10 @@ import { __rest } from "tslib";
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './WaterfallList.less';
+import previewData from './preview.json';
+import FormatImage from '../FormatImage';
 const WaterfallFlowItem = (props) => {
-    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
+    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -12,23 +14,20 @@ const WaterfallFlowItem = (props) => {
         width: 1
     });
     const imgDom = useRef(null);
+    const ref = useRef(null);
     const videoDom = useRef(null);
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
     const src = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
             return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
         }
-        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
-            setShowVideo(true);
-            return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
+        else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
+            return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
         }
-        else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
-            return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
-        }
-        else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
-            return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
+        else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
+            return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
         }
         else {
             return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -68,7 +67,7 @@ const WaterfallFlowItem = (props) => {
         }
     }, [rec]);
     useEffect(() => {
-        if (imgDom.current === null || src === '' || isImgShow === false) {
+        if (imgDom.current === null || src === '') {
             return;
         }
         const img = new Image();
@@ -85,14 +84,14 @@ const WaterfallFlowItem = (props) => {
             });
             setIsLoading(true);
         };
-        imgDom.current.src = img.src;
+        imgDom.current.setSrc(img.src);
     }, [src, showVideo, firstFrameSrc, isImgShow]);
     useEffect(() => {
         const height = imgInfo.height * (unitWidth / imgInfo.width);
         if (isLoading) {
-            sizeChange(height + 76, index);
+            sizeChange(height + 76 + space, index);
         }
-    }, [imgInfo, index, unitWidth, isLoading]);
+    }, [imgInfo, index, unitWidth, isLoading, space]);
     const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
         const aspectRatio = videoWidth / videoHeight;
         const targetHeight = targetWidth / aspectRatio;
@@ -130,22 +129,20 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (React.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
+    return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
         React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
             showVideo && (React.createElement("div", { style: { display: 'none' } },
                 React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
                 React.createElement("canvas", { ref: canvasRef }))),
-            React.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
-                    visibility: isLoading ? 'visible' : 'hidden'
-                } })),
+            React.createElement(FormatImage, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
         React.createElement("div", { className: 'waterFallList-content-listItem-info' },
             React.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.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
 export default function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
-    const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const scrollParent = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
     const [data, setData] = useState();
@@ -155,6 +152,7 @@ export default function WaterfallList(_a) {
     const heightList = [170, 230, 300];
     const [isLoadingData, setIsLoadingData] = useState(false);
     const [list, setList] = useState([]);
+    const buttonRef = useRef();
     const createRandomNum = useCallback((min, max) => {
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }, []);
@@ -238,19 +236,28 @@ export default function WaterfallList(_a) {
         styleListRef.current = getStyleList();
     }, [unitWidth, rowsNum, list]);
     useEffect(() => {
+        var _a, _b;
         setIsLoadingData(true);
         waterFallData &&
             (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
                 hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
                 'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
-                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
+                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
+                defaultSize: hashTagSize,
+                maxSize: hashTagSize
             }).then((res) => {
                 var _a, _b;
                 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]);
+        if (isOpenHashTag) {
+            const res = previewData;
+            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 onResize = useCallback(() => {
         if (waterfallFlowDom.current === null) {
             return;
@@ -270,7 +277,7 @@ export default function WaterfallList(_a) {
         return () => {
             resizeObserver.disconnect();
         };
-    }, []);
+    }, [onResize]);
     const loadMoreData = useCallback(() => {
         setIsLoadingData(true);
         waterFallData &&
@@ -302,18 +309,26 @@ export default function WaterfallList(_a) {
             window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { hidden: !isLoadingData, style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-            React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })),
-        React.createElement("div", { className: 'waterFallList', hidden: isLoadingData },
-            React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
-                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
-                } },
-                React.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.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.createElement("div", { className: 'waterFallList-content', ref: waterfallFlowDom }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                    return (React.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.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.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')))));
+    return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+        React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
+        React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
+            React.createElement("div", { className: 'waterFallList-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
+            React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'waterFallList-collection', style: Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
+                list.map((item, ind) => {
+                    var _a;
+                    return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
+                }),
+                React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                        position: 'absolute',
+                        width: '100%',
+                        transform: `translate(0px,${(_m = ((_j = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_h = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _h === void 0 ? void 0 : _h.length) - 1]) === null || _j === void 0 ? void 0 : _j.top) +
+                            ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.height)) !== null && _m !== void 0 ? _m : 0}px)`,
+                        height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
+                            ? ((_p = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _p === void 0 ? void 0 : _p.offsetHeight) || ((_q = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _q === void 0 ? void 0 : _q.height) || '100px'
+                            : 0
+                    } }))),
+        React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { ref: buttonRef, hidden: !((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection'))))));
 }

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

@@ -3,8 +3,9 @@ import * as ReactDOM from 'react-dom';
 import './index.less';
 import { isEqual } from 'lodash';
 import Navbar from '../Navbar';
-import WaterfallList from './List';
+import WaterfallList from './WaterfallList';
 import left from './left.png';
+import List from './List';
 import { useSxpDataSource } from '../../../../core/hooks';
 const WaterFall = (props) => {
     var _a;
@@ -96,6 +97,6 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         React.createElement(Navbar, { icon: left, 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.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
+        (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) === true || (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) === undefined ? (React.createElement(List, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 export default memo(WaterFall);

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

@@ -1,6 +1,5 @@
 import React, { useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import qs from 'qs';
 import ExpandableText from './ExpandableText';
 import LikeButton from './LikeButton';
 import VideoWidget from './VideoWidget';
@@ -45,30 +44,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return;
         }
         initTime();
-        const queryString = location.search.slice(1);
-        const params = qs.parse(queryString.replace(/\+/g, '%2B'));
-        for (const key in params) {
-            params[key] = params[key].replace(/%2B/g, '+');
-        }
-        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'h5LinkEnterFeed',
-                eventDescription: 'User enter h5 link',
-                utmSource: getVal('utm_source'),
-                utmMedium: getVal('utm_medium'),
-                utmCampaign: getVal('utm_campaign'),
-                utmId: getVal('utm_id'),
-                utmContent: getVal('utm_content'),
-                enterTime: `${Date.now()}`,
-                requestId: null
-            }
-        });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
             eventName: 'PageView'
         });
         setIsInit(true);
-    }, [bffEventReport, data.length, bffFbReport]);
+    }, [data.length, bffFbReport]);
     const initTime = () => {
         curTime.current = new Date();
         viewTime.current = new Date();

package/es/core/context/SxpDataSourceProvider.js

@@ -196,6 +196,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
         });
     }, [bffEventReport, isFromHashtag]);
+    useEffect(() => {
+        var _a, _b;
+        const queryString = location.search.slice(1);
+        const params = qs.parse(queryString.replace(/\+/g, '%2B'));
+        for (const key in params) {
+            params[key] = params[key].replace(/%2B/g, '+');
+        }
+        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'h5LinkEnterFeed',
+                eventDescription: 'User enter h5 link',
+                utmSource: getVal('utm_source'),
+                utmMedium: getVal('utm_medium'),
+                utmCampaign: getVal('utm_campaign'),
+                utmId: getVal('utm_id'),
+                utmContent: getVal('utm_content'),
+                enterTime: `${Date.now()}`,
+                requestId: null,
+                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
+                clSource: getVal('cl_sourc')
+            }
+        });
+    }, []);
     useEffect(() => {
         setLoading(true);
         bffGetTagList();
@@ -206,6 +230,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
         })
             .finally(() => {
+            bffEventReport({
+                eventInfo: {
+                    eventSubject: 'apiRequest',
+                    eventDescription: 'api request succeed'
+                }
+            });
             setLoading(false);
             isInit.current = true;
         });

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

@@ -11,6 +11,8 @@ export interface IHashTagProps {
         price: CSSProperties;
     };
     buttonBgStyle: CSSProperties;
+    showBanner?: boolean;
+    isWaterfallFlow?: boolean;
 }
 declare const _default: React.NamedExoticComponent<IHashTagProps>;
 export default _default;

package/es/materials/sxp/HashTag/settingRender.d.ts

@@ -4,8 +4,22 @@ declare const _default: ({
         type: string;
         label: string;
         name: string[];
-        addonAfter: string;
     }[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        name: string[];
+        addonAfter: string;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        initialValue: boolean;
+        addonAfter?: undefined;
+    })[];
 } | {
     title: string;
     child: {

package/es/materials/sxp/HashTag/settingRender.js

@@ -1,6 +1,16 @@
 var _a, _b;
 import { fontOptions } from '../defaultSetting';
 export default [
+    {
+        title: 'Banner',
+        child: [
+            {
+                type: 'Switch',
+                label: 'Banner图开关',
+                name: ['props', 'showBanner']
+            }
+        ]
+    },
     {
         title: '卡片样式',
         child: [
@@ -9,6 +19,12 @@ export default [
                 label: '上下边距',
                 name: ['props', 'space'],
                 addonAfter: 'px'
+            },
+            {
+                type: 'Switch',
+                label: '固定宽高',
+                name: ['props', 'isWaterfallFlow'],
+                initialValue: true
             }
         ]
     },

package/lib/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -4,6 +4,7 @@ interface IPictureProps {
     src: string;
     height?: number;
     imgUrlsPostConfig?: postConfigType;
+    onShowFirstImage?: () => void;
 }
 declare const Picture: (props: IPictureProps) => React.JSX.Element;
 export default Picture;

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

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const Picture = (props) => {
-    const { src, height, imgUrlsPostConfig } = props;
+    const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
     const blur = (0, react_1.useMemo)(() => {
         return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
     }, [imgUrlsPostConfig]);
@@ -29,7 +29,7 @@ const Picture = (props) => {
         return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
     }, [imgUrlsPostConfig, isBgColor]);
     return (react_1.default.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
-        (!blur || !isBgColor) && (react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+        (!blur || !isBgColor) && (react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
         blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
                 width: '100%',
                 height: '100%',

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

@@ -23,13 +23,17 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
             }
         }
         else {
-            setIsLoad(true);
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
-            react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
+    const showFirstImageFn = (0, react_1.useCallback)(() => {
+        if (!isLoad) {
+            setIsLoad(true);
+        }
+    }, [isLoad]);
+    return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+        return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
+            react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));
 };
 exports.default = (0, react_1.memo)(PictureGroup);