pb-sxp-ui 1.0.77 → 1.0.78

package/dist/pb-ui.js

@@ -10353,29 +10353,19 @@ Made in Italy` })));
      *
      */
     var settingRender = [
-        {
-            title: 'Banner',
-            child: [
-                {
-                    type: 'Switch',
-                    label: 'Banner图开关',
-                    name: ['props', 'showBanner']
-                }
-            ]
-        },
         {
             title: '卡片样式',
             child: [
+                // {
+                //   type: 'Number',
+                //   label: '文本行数',
+                //   name: ['props', 'lineClamp']
+                // },
                 {
                     type: 'Number',
                     label: '上下边距',
                     name: ['props', 'space'],
                     addonAfter: 'px'
-                },
-                {
-                    type: 'Switch',
-                    label: '固定宽高',
-                    name: ['props', 'isWaterfallFlow']
                 }
             ]
         },
@@ -11845,14 +11835,9 @@ Made in Italy` })));
     };
 
     const WaterfallFlowItem = (props) => {
-        const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
-        const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
+        const { rec, index, list, reportTagsView, textStyles, space } = props;
+        const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
         const [showVideo, setShowVideo] = React.useState(false);
-        const [isLoading, setIsLoading] = React.useState(false);
-        const [imgInfo, setImgInfo] = React.useState({
-            height: 1,
-            width: 1
-        });
         const imgDom = React.useRef(null);
         const ref = React.useRef(null);
         const videoDom = React.useRef(null);
@@ -11877,26 +11862,6 @@ Made in Italy` })));
             var _a, _b;
             return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
         }, [rec]);
-        /** 离父亲上边框的距离 */
-        const top = React.useMemo(() => {
-            var _a;
-            const y = style.transform
-                ? Number((_a = style.transform) === null || _a === void 0 ? void 0 : _a.substring(style.transform.indexOf(',', 0) + 1, style.transform.length - 3))
-                : undefined;
-            return y;
-        }, [style]);
-        /** 是否加载图片 */
-        const isImgShow = React.useMemo(() => {
-            if (top === undefined) {
-                return false;
-            }
-            if (top <= showBorder) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }, [top, showBorder]);
         const priceText = React.useMemo(() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
@@ -11909,55 +11874,42 @@ Made in Italy` })));
             }
         }, [rec]);
         // useEffect(() => {
-        //   const observer = new IntersectionObserver((entries) => {
-        //     entries.forEach((entry) => {
-        //       if (entry.isIntersecting) {
-        //         if (ref.current === null || src === '') {
-        //           return;
-        //         }
-        //         if (showVideo && firstFrameSrc) {
-        //           imgDom.current.setSrc(firstFrameSrc);
-        //         } else {
-        //           imgDom.current.setSrc(src);
-        //         }
-        //         observer.unobserve(ref.current);
-        //       }
-        //     });
-        //   });
-        //   observer.observe(ref.current);
-        //   return () => {
-        //     observer.disconnect();
-        //   };
+        //   if (imgDom.current === null || src === '') {
+        //     return;
+        //   }
+        //   const img = new Image();
+        //   if (showVideo && firstFrameSrc) {
+        //     img.src = firstFrameSrc;
+        //   } else {
+        //     img.src = src;
+        //   }
+        //   // img.onload = () => {
+        //   //   setIsLoading(true);
+        //   // };
+        //   imgDom.current.src = img.src;
         // }, [src, showVideo, firstFrameSrc]);
         React.useEffect(() => {
-            if (imgDom.current === null || src === '' || isImgShow === false) {
-                return;
-            }
-            const img = new Image();
-            if (showVideo && firstFrameSrc) {
-                img.src = firstFrameSrc;
-            }
-            else {
-                img.src = src;
-            }
-            img.onload = () => {
-                setImgInfo({
-                    height: img.height,
-                    width: img.width
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        if (ref.current === null || src === '') {
+                            return;
+                        }
+                        if (showVideo && firstFrameSrc) {
+                            imgDom.current.setSrc(firstFrameSrc);
+                        }
+                        else {
+                            imgDom.current.setSrc(src);
+                        }
+                        observer.unobserve(ref.current);
+                    }
                 });
-                setIsLoading(true);
+            });
+            observer.observe(ref.current);
+            return () => {
+                observer.disconnect();
             };
-            // imgDom.current.setSrc(img.src);
-            imgDom.current.src = img.src;
-        }, [src, showVideo, firstFrameSrc, isImgShow]);
-        React.useEffect(() => {
-            // 通过宽度比例获取图片高度
-            const height = imgInfo.height * (unitWidth / imgInfo.width);
-            if (isLoading) {
-                // 加40是因为下方文字部分高度为40，可以自己设置
-                sizeChange(height + 76 + space, index);
-            }
-        }, [imgInfo, index, unitWidth, isLoading, space]); /* 增加sizeChange依赖项会导致在admin预览编辑时无限刷新 */
+        }, [src, showVideo, firstFrameSrc]);
         const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
             const aspectRatio = videoWidth / videoHeight;
             const targetHeight = targetWidth / aspectRatio;
@@ -11995,135 +11947,40 @@ Made in Italy` })));
                 setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
             }, 0);
         };
-        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' },
+        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, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
+                    React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
                     React.createElement("canvas", { ref: canvasRef }))),
-                React.createElement("img", { 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))));
+                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))));
     };
     function WaterfallList(_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
         const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
-        /** 滚动的父元素 */
-        const scrollParent = React.useRef(null);
-        /** 向上滚动的距离 */
-        const [scrollTop, setScrollTop] = React.useState(0);
-        /** 数据列表 */
+        const [list, setList] = React.useState();
         const [data, setData] = React.useState();
-        const waterfallFlowDom = React.useRef(null);
-        /** 样式列表 */
-        const [styleList, setStyleList] = React.useState([]);
-        const styleListRef = React.useRef();
-        /** 自定义骨架屏高度 */
-        const heightList = [170, 230, 300];
-        /** 到达底部 */
         const [isLoadingData, setIsLoadingData] = React.useState(false);
-        const [list, setList] = React.useState([]);
-        const buttonRef = React.useRef();
-        /** 生成随机数 */
-        const createRandomNum = React.useCallback((min, max) => {
-            return Math.floor(Math.random() * (max - min + 1)) + min;
-        }, []);
-        const waterfallFlowListInfo = React.useRef([]);
-        /** 当前容器信息 */
-        const [frameInfo, setFrameInfoInfo] = React.useState({ width: 0 });
-        /** 每行个数 */
-        const rowsNum = React.useMemo(() => {
-            const width = frameInfo.width || 0;
-            if (width >= 1200) {
-                return 6;
-            }
-            else if (width >= 768 && width <= 1199) {
-                return 4;
-            }
-            else {
-                return 2;
-            }
-        }, [frameInfo]);
-        /** 每一个的宽度 */
-        const unitWidth = React.useMemo(() => {
-            return frameInfo.width / rowsNum - 2;
-        }, [rowsNum, frameInfo]);
-        /** 获取位置 */
-        const getStyleList = React.useCallback(() => {
-            var _a;
-            const temporaryStyleList = (_a = styleListRef.current) !== null && _a !== void 0 ? _a : [];
-            /** 目前最下一行的index */
-            const bottomItemIndex = [];
-            for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
-                // 原本应对应的行数
-                const currentRow = Math.floor(i / rowsNum);
-                //
-                const remainder = (i % rowsNum) + 1;
-                // 最低item下标
-                let minHeightInd = 0;
-                // 最低高度
-                let minHeight = 9999999999;
-                // 寻找最低高度的下标
-                if (currentRow === 0) {
-                    bottomItemIndex[i] = i;
-                }
-                else {
-                    for (let j = 0; j < bottomItemIndex.length; j++) {
-                        if (waterfallFlowListInfo.current[bottomItemIndex[j]].top +
-                            waterfallFlowListInfo.current[bottomItemIndex[j]].height <
-                            minHeight) {
-                            minHeightInd = j;
-                            minHeight =
-                                waterfallFlowListInfo.current[bottomItemIndex[j]].top +
-                                    waterfallFlowListInfo.current[bottomItemIndex[j]].height;
-                        }
-                    }
-                    bottomItemIndex[minHeightInd] = i;
-                }
-                if (waterfallFlowListInfo.current[i] === undefined) {
-                    waterfallFlowListInfo.current[i] = {};
-                }
-                // 第一行特殊处理，一定是从左到右铺的
-                if (currentRow === 0) {
-                    if (remainder === 1) {
-                        waterfallFlowListInfo.current[i].left = 0;
-                    }
-                    else {
-                        waterfallFlowListInfo.current[i].left = waterfallFlowListInfo.current[i - 1].left + unitWidth + 4;
-                    }
-                    waterfallFlowListInfo.current[i].top = 0;
-                }
-                // 剩下的行数，铺在当前最低高度下面
-                else {
-                    waterfallFlowListInfo.current[i].left = waterfallFlowListInfo.current[minHeightInd].left;
-                    waterfallFlowListInfo.current[i].top = minHeight;
-                }
-                // 是否已经有高度，有高度使用已有高度，否则随机生成
-                waterfallFlowListInfo.current[i].height =
-                    waterfallFlowListInfo.current[i].height || heightList[createRandomNum(0, 2)];
-                temporaryStyleList[i] = {
-                    transform: `translate(${waterfallFlowListInfo.current[i].left}px,${waterfallFlowListInfo.current[i].top}px)`,
-                    width: `${unitWidth}px`,
-                    height: waterfallFlowListInfo.current[i].height
-                };
-            }
-            setStyleList([...temporaryStyleList]);
-            return [...temporaryStyleList];
-        }, [unitWidth, rowsNum, heightList, createRandomNum, list]);
-        /** 图片加载完更新高度 */
-        const onSizeChange = React.useCallback((height, index) => {
-            if (waterfallFlowListInfo.current[index] === undefined) {
-                waterfallFlowListInfo.current[index] = {};
-            }
-            waterfallFlowListInfo.current[index].height = height;
-            styleListRef.current = getStyleList();
-        }, [getStyleList]);
-        /** 大小、数量发生变化时触发 */
-        React.useEffect(() => {
-            styleListRef.current = getStyleList();
-        }, [unitWidth, rowsNum, list]); /* 增加getStyleList依赖项会导致在admin预览编辑时无限刷新 */
-        /** 初始化请求数据 */
+        const containerRef = React.useRef(null);
+        const [isLoadMore, setIsLoadMore] = React.useState(false);
+        React.useCallback(() => {
+            if (isLoadMore)
+                return;
+            setIsLoadMore(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
+                }).then((res) => {
+                    var _a;
+                    setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
+                    setIsLoadMore(false);
+                }));
+        }, [waterFallData, getRecommendVideos, list, isLoadMore]);
         React.useEffect(() => {
             var _a, _b;
             setIsLoadingData(true);
@@ -12147,60 +12004,22 @@ Made in Italy` })));
                 setIsLoadingData(false);
             }
         }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
-        const onResize = React.useCallback(() => {
-            if (waterfallFlowDom.current === null) {
-                return;
-            }
-            setFrameInfoInfo({
-                width: waterfallFlowDom.current.getBoundingClientRect().width
-            });
-        }, []);
-        /** 监听列表容器大小变化 */
-        React.useEffect(() => {
-            if (waterfallFlowDom.current === null) {
-                return;
-            }
-            const resizeObserver = new ResizeObserver((entries) => {
-                onResize();
-            });
-            resizeObserver.observe(waterfallFlowDom.current);
-            return () => {
-                resizeObserver.disconnect();
-            };
-        }, [onResize]);
-        React.useCallback(() => {
-            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
-                }).then((res) => {
-                    var _a, _b;
-                    setList(list === null || list === void 0 ? void 0 : list.concat((_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 && _b !== void 0 ? _b : []));
-                    setIsLoadingData(false);
-                }));
-        }, [waterFallData, getRecommendVideos, list]);
-        const onScroll = React.useCallback(() => {
-            // 记录滚动值
-            setScrollTop(scrollParent.current.scrollTop);
-            // const top = (scrollParent.current as any).scrollTop;
-            // const clientHeight = (scrollParent.current as any).clientHeight;
-            // const scrollHeight = (scrollParent.current as any).scrollHeight;
-            // // 做底部加载
-            // if (scrollHeight <= top + clientHeight && !isLoadingData) {
-            //   loadMoreData();
-            // }
-        }, []);
-        /** 监听滚动 */
-        React.useEffect(() => {
-            var _a;
-            (_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', onScroll);
-            return () => {
-                var _a;
-                (_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', onScroll);
-            };
-        }, [onScroll, scrollParent]);
+        // useEffect(() => {
+        //   const container = containerRef?.current;
+        //   if (!container) return;
+        //   const handleScroll = () => {
+        //     const top = (container as any)?.scrollTop;
+        //     const clientHeight = (container as any)?.clientHeight;
+        //     const scrollHeight = (container as any)?.scrollHeight;
+        //     if (scrollHeight <= top + clientHeight && !isLoadingData) {
+        //       loadMoreData();
+        //     }
+        //   };
+        //   container?.addEventListener('scroll', handleScroll);
+        //   return () => {
+        //     container?.removeEventListener('scroll', handleScroll); // 在组件卸载时移除事件监听器
+        //   };
+        // }, [isLoadingData, containerRef, loadMoreData]);
         const handleClickLink = () => {
             var _a, _b;
             if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
@@ -12209,27 +12028,20 @@ Made in Italy` })));
             }
         };
         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'))))));
+            React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
+            React.createElement("div", { className: 'list-scroll', ref: containerRef },
+                React.createElement("div", { className: 'list-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: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_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: 'list-content' }, 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, reportTagsView: reportTagsView }, props)));
+                })),
+                React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
+                React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                        height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
+                    } })),
+            React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+            React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+                React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
     }
 
     var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12238,7 +12050,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-10 10:58:24
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-06 17:19:25
+     * @LastEditTime: 2024-04-15 17:57:59
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
      *
      */