pb-sxp-ui 1.0.21 → 1.0.23

package/dist/index.cjs

@@ -8307,6 +8307,36 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
 };
 var ExpandableText$1 = React.memo(ExpandableText);
 
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2024-03-20 10:27:31
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2024-04-17 20:45:55
+ * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
+ *
+ */
+const FormatImage = React.forwardRef((props, ref) => {
+    const { src, onLoad, style, className, loading } = props;
+    const [imgSrc, setImgSrc] = React.useState(src);
+    React.useImperativeHandle(ref, () => ({
+        setSrc: (v) => {
+            setImgSrc(v);
+        }
+    }));
+    if (imgSrc === '' || !imgSrc)
+        return null;
+    return (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
+        React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
+        React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
+        React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
+        React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+            } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+        } }));
+});
+var FormatImage$1 = React.memo(FormatImage);
+
 const CommodityDetail$1 = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
@@ -8384,7 +8414,7 @@ const CommodityDetail$1 = (_a) => {
                             width,
                             height: width
                         } },
-                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css.css({
                     position: 'relative',
@@ -8831,7 +8861,7 @@ Made in Italy` })));
                             width,
                             height: width
                         } },
-                        React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+                        React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
             !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css.css({
                     position: 'relative',
@@ -9245,7 +9275,7 @@ const Commodity$1 = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -9406,7 +9436,7 @@ const Link$1 = (_a) => {
     };
     return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
         React.createElement("div", { className: css.css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image, alt: '' })),
+            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
         React.createElement("div", { className: css.css({
                 display: 'flex',
                 alignItems: 'center',
@@ -9488,7 +9518,7 @@ const CommodityDiro$1 = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -9580,7 +9610,7 @@ const CommodityDiroNew$1 = (_a) => {
     const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
         React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -9672,7 +9702,7 @@ var Scroll$1 = React.memo(Scroll);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-16 14:50:13
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-11 18:24:15
+ * @LastEditTime: 2024-04-17 19:03:01
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
  *
  */
@@ -9688,7 +9718,8 @@ const Img = ({ src, rec, item, index }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (React.createElement("img", { ref: ref, hidden: !src, className: css.css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, alt: '' }));
+    return (React.createElement("div", { ref: ref, hidden: !src },
+        React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
 };
 var Img$1 = React.memo(Img);
 
@@ -11489,6 +11520,7 @@ const WaterfallFlowItem = (props) => {
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = React.useState(false);
     const imgDom = React.useRef(null);
+    const ref = React.useRef(null);
     const videoDom = React.useRef(null);
     const canvasRef = React.useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
@@ -11545,20 +11577,20 @@ const WaterfallFlowItem = (props) => {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
-                    if (imgDom.current === null || src === '') {
+                    if (ref.current === null || src === '') {
                         return;
                     }
                     if (showVideo && firstFrameSrc) {
-                        imgDom.current.src = firstFrameSrc;
+                        imgDom.current.setSrc(firstFrameSrc);
                     }
                     else {
-                        imgDom.current.src = src;
+                        imgDom.current.setSrc(src);
                     }
-                    observer.unobserve(imgDom.current);
+                    observer.unobserve(ref.current);
                 }
             });
         });
-        observer.observe(imgDom.current);
+        observer.observe(ref.current);
         return () => {
             observer.disconnect();
         };
@@ -11600,12 +11632,12 @@ const WaterfallFlowItem = (props) => {
             setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
         }, 0);
     };
-    return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
+    return (React.createElement("div", { ref: ref, className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
         React.createElement("div", { className: 'list-content-listItem-picture' },
             showVideo && (React.createElement("div", { style: { display: 'none' } },
                 React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                 React.createElement("canvas", { ref: canvasRef }))),
-            React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
+            React.createElement(FormatImage$1, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
         React.createElement("div", { className: 'list-content-listItem-info' },
             React.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.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
@@ -12237,50 +12269,35 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 18:09:29
+ * @LastEditTime: 2024-04-18 10:30:17
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
  *
  */
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = React.useState(false);
-    const { sxpParameter } = useSxpDataSource();
     const onLoad = (img) => {
-        const aspectRatio = img.height / img.width;
+        const aspectRatio = img.naturalHeight / img.naturalWidth;
         const targetAspectRatio = 16 / 9;
         const tolerance = 0.05; // 允许的宽高比误差范围
         if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
             setBlur(true);
         }
     };
-    const getImg = React.useCallback((src, style) => {
-        if (src === '' || !src)
-            return;
-        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
-            React.createElement("source", { type: 'image/avif', srcSet: src }),
-            React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
-            React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
-            React.createElement("img", { src: src, style: style, onLoad: (e) => {
-                    onLoad(e.target);
-                } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
-                onLoad(e.target);
-            } }));
-    }, []);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
             height,
             width: '100%',
             position: 'relative'
         } },
-        getImg(src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, {
-            height: '100%',
-            width: '100%',
-            objectFit: 'cover',
-            filter: blur ? 'blur(10px)' : 'none',
-            transform: blur ? 'scale(1.2)' : 'none'
-        }),
-        blur &&
-            getImg(src, {
+        React.createElement(FormatImage$1, { src: src, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            }, onLoad: onLoad }),
+        blur && (React.createElement(FormatImage$1, { src: src, style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
@@ -12288,14 +12305,14 @@ const Picture = (props) => {
                 transform: 'translateY(-50%)',
                 left: 0,
                 right: 0
-            })));
+            } }))));
 };
 
 /*
  * @Author: lewinlu@chatlabs.com
  * @Date: 2024-01-03 14:39:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 15:15:33
+ * @LastEditTime: 2024-04-17 18:52:45
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
  */
 const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
@@ -12505,7 +12522,7 @@ const Nudge = ({ nudge }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 10:30:08
+ * @LastEditTime: 2024-04-18 09:43:19
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -12709,7 +12726,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', 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: Object.assign({}, descStyle
                             // textShadow: globalConfig?.isOpenTextShadow ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none'
                             ), onChange: onExpandableChange }),
-                        React.createElement(Hashtag$1, { 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, hashTagStyle: hashTagStyle })))));
+                        React.createElement(Hashtag$1, { 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.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
         }
         return null;
     }, [