pb-sxp-ui 1.0.21 → 1.0.22

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,14 +12269,14 @@ 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-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();
+    useSxpDataSource();
     const onLoad = (img) => {
         const aspectRatio = img.height / img.width;
         const targetAspectRatio = 16 / 9;
@@ -12253,7 +12285,7 @@ const Picture = (props) => {
             setBlur(true);
         }
     };
-    const getImg = React.useCallback((src, style) => {
+    React.useCallback((src, style) => {
         if (src === '' || !src)
             return;
         return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
@@ -12272,15 +12304,14 @@ const Picture = (props) => {
             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 +12319,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 }) => {