pb-sxp-ui 1.0.20 → 1.0.22

package/dist/pb-ui.js

@@ -8299,6 +8299,36 @@
     };
     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"]);
@@ -8376,7 +8406,7 @@
                                 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',
@@ -8823,7 +8853,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',
@@ -9237,7 +9267,7 @@ Made in Italy` })));
         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',
@@ -9398,7 +9428,7 @@ Made in Italy` })));
         };
         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',
@@ -9480,7 +9510,7 @@ Made in Italy` })));
         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',
@@ -9572,7 +9602,7 @@ Made in Italy` })));
         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',
@@ -9664,7 +9694,7 @@ Made in Italy` })));
      * @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
      *
      */
@@ -9680,7 +9710,8 @@ Made in Italy` })));
                 }, 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);
 
@@ -11481,6 +11512,7 @@ Made in Italy` })));
         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('');
@@ -11537,20 +11569,20 @@ Made in Italy` })));
             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();
             };
@@ -11592,12 +11624,12 @@ Made in Italy` })));
                 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))));
@@ -12229,36 +12261,34 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-17 16:46:54
+     * @LastEditTime: 2024-04-17 18:59:40
      * @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();
-        React.useEffect(() => {
-            if (src === '' || !src)
-                return;
-            const img = new Image();
-            img.src = `${src}?imageMogr2/format/jpg`;
-            img.onload = () => {
-                const aspectRatio = img.height / img.width;
-                const targetAspectRatio = 16 / 9;
-                const tolerance = 0.05; // 允许的宽高比误差范围
-                if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
-                    setBlur(true);
-                }
-            };
-        }, [src]);
-        const getImg = React.useCallback((src, style) => {
+        useSxpDataSource();
+        const onLoad = (img) => {
+            const aspectRatio = img.height / img.width;
+            const targetAspectRatio = 16 / 9;
+            const tolerance = 0.05; // 允许的宽高比误差范围
+            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+                setBlur(true);
+            }
+        };
+        React.useCallback((src, style) => {
             if (src === '' || !src)
                 return;
-            return (src === null || src === void 0 ? void 0 : src.indexOf('.avif')) !== -1 ? (React.createElement("picture", null,
+            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", { loading: 'lazy', src: src, style: style }))) : (React.createElement("img", { loading: 'lazy', src: src, style: style }));
+                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',
@@ -12266,15 +12296,14 @@ Made in Italy` })));
                 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',
@@ -12282,14 +12311,14 @@ Made in Italy` })));
                     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 }) => {
@@ -13058,3 +13087,4 @@ Made in Italy` })));
     Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
+//# sourceMappingURL=pb-ui.js.map