pb-sxp-ui 1.0.77 → 1.0.79

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

@@ -3,6 +3,7 @@ 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, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
@@ -66,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();
@@ -83,7 +84,7 @@ 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);
@@ -133,7 +134,7 @@ const WaterfallFlowItem = (props) => {
             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", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+            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))));

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

@@ -5,6 +5,7 @@ import { isEqual } from 'lodash';
 import Navbar from '../Navbar';
 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) ? (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(List, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 export default memo(WaterFall);

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

@@ -41,6 +41,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
     const handleH5EnterLink = useCallback(() => {
+        var _a, _b;
         if (data.length <= 0) {
             return;
         }
@@ -61,7 +62,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 utmId: getVal('utm_id'),
                 utmContent: getVal('utm_content'),
                 enterTime: `${Date.now()}`,
-                requestId: null
+                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')
             }
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({

package/es/core/context/SxpDataSourceProvider.js

@@ -206,6 +206,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/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);

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

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../../../core/hooks");
 require("./WaterfallList.less");
 const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
+const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -68,7 +69,7 @@ const WaterfallFlowItem = (props) => {
         }
     }, [rec]);
     (0, react_1.useEffect)(() => {
-        if (imgDom.current === null || src === '' || isImgShow === false) {
+        if (imgDom.current === null || src === '') {
             return;
         }
         const img = new Image();
@@ -85,7 +86,7 @@ const WaterfallFlowItem = (props) => {
             });
             setIsLoading(true);
         };
-        imgDom.current.src = img.src;
+        imgDom.current.setSrc(img.src);
     }, [src, showVideo, firstFrameSrc, isImgShow]);
     (0, react_1.useEffect)(() => {
         const height = imgInfo.height * (unitWidth / imgInfo.width);
@@ -135,7 +136,7 @@ const WaterfallFlowItem = (props) => {
             showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
                 react_1.default.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
                 react_1.default.createElement("canvas", { ref: canvasRef }))),
-            react_1.default.createElement("img", { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+            react_1.default.createElement(FormatImage_1.default, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
         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' : ''}`, 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))));

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

@@ -8,6 +8,7 @@ const lodash_1 = require("lodash");
 const Navbar_1 = tslib_1.__importDefault(require("../Navbar"));
 const WaterfallList_1 = tslib_1.__importDefault(require("./WaterfallList"));
 const left_png_1 = tslib_1.__importDefault(require("./left.png"));
+const List_1 = tslib_1.__importDefault(require("./List"));
 const hooks_1 = require("../../../../core/hooks");
 const WaterFall = (props) => {
     var _a;
@@ -99,6 +100,6 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         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(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
+        (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) ? (react_1.default.createElement(WaterfallList_1.default, Object.assign({ reportTagsView: reportTagsView }, props))) : (react_1.default.createElement(List_1.default, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 exports.default = (0, react_1.memo)(WaterFall);

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

@@ -44,6 +44,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
     }, [data, loading]);
     const handleH5EnterLink = (0, react_1.useCallback)(() => {
+        var _a, _b;
         if (data.length <= 0) {
             return;
         }
@@ -64,7 +65,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 utmId: getVal('utm_id'),
                 utmContent: getVal('utm_content'),
                 enterTime: `${Date.now()}`,
-                requestId: null
+                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')
             }
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({

package/lib/core/context/SxpDataSourceProvider.js

@@ -209,6 +209,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/package.json

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