pb-sxp-ui 1.0.17 → 1.0.18

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

@@ -0,0 +1,183 @@
+import { __rest } from "tslib";
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import './List.less';
+import previewData from './preview.json';
+import { useSxpDataSource } from '../../../../core/hooks';
+const WaterfallFlowItem = (props) => {
+    const { rec, index, list, reportTagsView, textStyles, space } = props;
+    const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+    const [showVideo, setShowVideo] = useState(false);
+    const imgDom = useRef(null);
+    const videoDom = useRef(null);
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const src = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
+            return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
+        }
+        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
+            setShowVideo(true);
+            return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
+        }
+        else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
+            return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
+        }
+        else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
+            return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
+        }
+        else {
+            return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
+        }
+    }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
+    const title = useMemo(() => {
+        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 priceText = 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)) {
+            return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _j !== void 0 ? _j : ''}`;
+        }
+        else {
+            return null;
+        }
+    }, [rec]);
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    if (imgDom.current === null || src === '') {
+                        return;
+                    }
+                    if (showVideo && firstFrameSrc) {
+                        imgDom.current.src = firstFrameSrc;
+                    }
+                    else {
+                        imgDom.current.src = src;
+                    }
+                    observer.unobserve(imgDom.current);
+                }
+            });
+        });
+        observer.observe(imgDom.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [src, showVideo, firstFrameSrc]);
+    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
+        const aspectRatio = videoWidth / videoHeight;
+        const targetHeight = targetWidth / aspectRatio;
+        return targetHeight;
+    };
+    useEffect(() => {
+        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
+        if (video === null || src === '' || !showVideo) {
+            return;
+        }
+        video.src = src;
+        video.currentTime = 1;
+        video.crossOrigin = 'anonymous';
+        video.onloadeddata = () => {
+            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
+            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
+            canvas.height = targetHeight;
+            canvas.width = targetWidth;
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            setFirstFrameSrc(canvas.toDataURL());
+            video.remove();
+            canvas.remove();
+        };
+    }, [src, showVideo]);
+    const handleClickToDetail = () => {
+        reportTagsView();
+        setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
+        setTimeout(() => {
+            var _a;
+            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
+            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 } },
+        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("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))));
+};
+export default function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+    const [list, setList] = useState();
+    const [data, setData] = useState();
+    const [isLoadingData, setIsLoadingData] = useState(false);
+    const containerRef = useRef(null);
+    const [isLoadMore, setIsLoadMore] = useState(false);
+    const loadMoreData = 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]);
+    useEffect(() => {
+        var _a, _b;
+        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,
+                defaultSize: hashTagSize
+            }).then((res) => {
+                var _a, _b;
+                setData(res);
+                setList((_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 || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                setIsLoadingData(false);
+            }));
+        if (isOpenHashTag) {
+            const res = previewData;
+            setData(res);
+            setList((_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 || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+            setIsLoadingData(false);
+        }
+    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
+    const handleClickLink = () => {
+        var _a, _b;
+        if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
+            reportTagsView();
+            window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
+        }
+    };
+    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: 'list' },
+        React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
+                bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
+            } },
+            React.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
+            React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { 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", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+            React.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
+}

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './WaterfallList.less';
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

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

@@ -0,0 +1,319 @@
+import { __rest } from "tslib";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import './WaterfallList.less';
+const WaterfallFlowItem = (props) => {
+    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, lineClamp } = props;
+    const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
+    const [showVideo, setShowVideo] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [imgInfo, setImgInfo] = useState({
+        height: 1,
+        width: 1
+    });
+    const imgDom = useRef(null);
+    const videoDom = useRef(null);
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const src = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
+            return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
+        }
+        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
+            setShowVideo(true);
+            return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
+        }
+        else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
+            return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
+        }
+        else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
+            return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
+        }
+        else {
+            return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
+        }
+    }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
+    const title = useMemo(() => {
+        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 = 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 = useMemo(() => {
+        if (top === undefined) {
+            return false;
+        }
+        if (top <= showBorder) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }, [top, showBorder]);
+    const priceText = 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)) {
+            return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _j !== void 0 ? _j : ''}`;
+        }
+        else {
+            return null;
+        }
+    }, [rec]);
+    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
+            });
+            setIsLoading(true);
+        };
+        imgDom.current.src = img.src;
+    }, [src, showVideo, firstFrameSrc, isImgShow]);
+    useEffect(() => {
+        const height = imgInfo.height * (unitWidth / imgInfo.width);
+        if (isLoading) {
+            sizeChange(height + 76, index);
+        }
+    }, [imgInfo, index, unitWidth, isLoading]);
+    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
+        const aspectRatio = videoWidth / videoHeight;
+        const targetHeight = targetWidth / aspectRatio;
+        return targetHeight;
+    };
+    useEffect(() => {
+        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
+        if (video === null || src === '' || !showVideo) {
+            return;
+        }
+        video.src = src;
+        video.currentTime = 1;
+        video.crossOrigin = 'anonymous';
+        video.onloadeddata = () => {
+            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
+            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
+            canvas.height = targetHeight;
+            canvas.width = targetWidth;
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            setFirstFrameSrc(canvas.toDataURL());
+            video.remove();
+            canvas.remove();
+        };
+    }, [src, showVideo]);
+    const handleClickToDetail = () => {
+        reportTagsView();
+        setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
+        setTimeout(() => {
+            var _a;
+            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
+            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+        }, 0);
+    };
+    return (React.createElement("div", { style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
+        React.createElement("div", { className: 'waterFallList-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("canvas", { ref: canvasRef }))),
+            React.createElement("img", { className: 'waterFallList-content-listItem-picture-img', loading: 'lazy', ref: imgDom, style: {
+                    visibility: isLoading ? 'visible' : 'hidden'
+                } })),
+        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))));
+};
+export default function WaterfallList(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, loadingImage } = useSxpDataSource();
+    const scrollParent = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [data, setData] = useState();
+    const waterfallFlowDom = useRef(null);
+    const [styleList, setStyleList] = useState([]);
+    const styleListRef = useRef();
+    const heightList = [170, 230, 300];
+    const [isLoadingData, setIsLoadingData] = useState(false);
+    const [list, setList] = useState([]);
+    const createRandomNum = useCallback((min, max) => {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }, []);
+    const waterfallFlowListInfo = useRef([]);
+    const [frameInfo, setFrameInfoInfo] = useState({ width: 0 });
+    const rowsNum = 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 = useMemo(() => {
+        return frameInfo.width / rowsNum - 2;
+    }, [rowsNum, frameInfo]);
+    const getStyleList = useCallback(() => {
+        var _a;
+        const temporaryStyleList = (_a = styleListRef.current) !== null && _a !== void 0 ? _a : [];
+        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;
+            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 = useCallback((height, index) => {
+        if (waterfallFlowListInfo.current[index] === undefined) {
+            waterfallFlowListInfo.current[index] = {};
+        }
+        waterfallFlowListInfo.current[index].height = height;
+        styleListRef.current = getStyleList();
+    }, [getStyleList]);
+    useEffect(() => {
+        styleListRef.current = getStyleList();
+    }, [unitWidth, rowsNum, list]);
+    useEffect(() => {
+        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;
+                setData(res);
+                setList((_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 || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                setIsLoadingData(false);
+            }));
+    }, [waterFallData, getRecommendVideos]);
+    const onResize = useCallback(() => {
+        if (waterfallFlowDom.current === null) {
+            return;
+        }
+        setFrameInfoInfo({
+            width: waterfallFlowDom.current.getBoundingClientRect().width
+        });
+    }, []);
+    useEffect(() => {
+        if (waterfallFlowDom.current === null) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            onResize();
+        });
+        resizeObserver.observe(waterfallFlowDom.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const loadMoreData = 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 = useCallback(() => {
+        setScrollTop(scrollParent.current.scrollTop);
+    }, []);
+    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]);
+    const handleClickLink = () => {
+        var _a, _b;
+        if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
+            reportTagsView();
+            window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { hidden: !isLoadingData, 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', hidden: isLoadingData },
+            React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent, style: {
+                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
+                } },
+                React.createElement("div", { className: 'waterFallList-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
+                React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'waterFallList-collection', 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', ref: waterfallFlowDom }, 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, showBorder: scrollTop + scrollParent.current.clientHeight, style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
+                }))),
+            React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+                React.createElement("button", { className: 'waterFallList-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection')))));
+}

package/es/core/components/SxpPageRender/WaterFall/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.less';
+import { IHashTagProps } from '../../../../materials/sxp/HashTag';
+interface IWaterFallProps {
+}
+declare const _default: React.NamedExoticComponent<IWaterFallProps & IHashTagProps>;
+export default _default;

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

@@ -0,0 +1,101 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import './index.less';
+import { isEqual } from 'lodash';
+import Navbar from '../Navbar';
+import WaterfallList from './List';
+import left from './left.png';
+import { useSxpDataSource } from '../../../../core/hooks';
+const WaterFall = (props) => {
+    var _a;
+    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = useSxpDataSource();
+    const ref = useRef(null);
+    const modalEleRef = useRef(null);
+    const [viewTime, setViewTime] = useState();
+    useEffect(() => {
+        const parentNode = document.getElementById('sxp-render');
+        const node = document.getElementById('water-fall');
+        if (node) {
+            modalEleRef.current = node;
+        }
+        else {
+            modalEleRef.current = document.createElement('div');
+            modalEleRef.current.setAttribute('id', 'water-fall');
+            parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(modalEleRef.current);
+        }
+    }, []);
+    const handleClose = () => {
+        const isEq = isEqual(rtcList, cacheRtcList);
+        if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
+            setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
+        }
+        reportTagsView();
+        setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
+        setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
+        setTimeout(() => {
+            var _a, _b;
+            if (!isEq) {
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(cacheActiveIndex, 0, false);
+            }
+            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+        }, 0);
+    };
+    const [recData, setRecData] = useState();
+    useEffect(() => {
+        if (waterFallData) {
+            setRecData(waterFallData);
+        }
+    }, [waterFallData]);
+    const reportTagsView = useCallback(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
+        if (!rec)
+            return;
+        let fromKName = '';
+        if (isFromHashtag) {
+            fromKName = 'hashTagPage';
+        }
+        else if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            fromKName = 'videoPage';
+        }
+        else if ((_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
+            fromKName = 'imagePage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                position: cacheActiveIndex + '',
+                contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
+                traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
+                hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
+                fromKName,
+                fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                eventSubject: 'clickTagsViewContents',
+                eventDescription: 'User click tags view contents'
+            }
+        });
+    }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
+    useEffect(() => {
+        if (openHashtag) {
+            setViewTime(new Date());
+        }
+    }, [openHashtag]);
+    useEffect(() => {
+        const initTime = () => {
+            setViewTime(new Date());
+        };
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    if (!modalEleRef.current)
+        return null;
+    return ReactDOM.createPortal(React.createElement("div", { className: 'waterfall', style: {
+            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);
+};
+export default memo(WaterFall);