pb-sxp-ui 1.0.17 → 1.0.18

package/lib/core/components/SxpPageRender/index.d.ts

@@ -0,0 +1,57 @@
+import { CSSProperties, FC } from 'react';
+import { RecItemType } from './typing';
+import './index.less';
+interface ISxpPageRenderProps {
+    globalConfig?: {
+        isShowLogo?: boolean;
+        logoUrl?: string;
+        muteIcon?: string;
+        unMuteIcon?: string;
+        likeIcon?: string;
+        unlikeIcon?: string;
+        color?: string;
+        productPost?: any[];
+        muteIconX?: number;
+        muteIconY?: number;
+        likeIconX?: number;
+        likeIconY?: number;
+        isShowLike?: boolean;
+        swipeTipIcon?: string;
+        hashTag?: any[];
+        isOpenTextShadow?: boolean;
+    };
+    descStyle?: CSSProperties;
+    tipText?: {
+        foldText: string;
+        unfoldText: string;
+    };
+    nudge?: {
+        isOpen: boolean;
+        icon?: string;
+        backgroundColor: string;
+        content?: string;
+        marginBottom: number;
+        borderRadius: number;
+        size: {
+            height: number;
+            width: number;
+        };
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            fontStyle: string;
+            textAlign: string;
+        };
+    };
+    containerHeight?: number;
+    containerWidth?: number;
+    tempMap?: Record<string, any>;
+    data?: RecItemType[];
+    resolver: any;
+    ctaType?: string;
+    _schema?: any;
+    hashTagStyle?: CSSProperties;
+}
+declare const SxpPageRender: FC<ISxpPageRenderProps>;
+export default SxpPageRender;

package/lib/core/components/SxpPageRender/index.js

@@ -0,0 +1,381 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("swiper/react");
+const qs_1 = tslib_1.__importDefault(require("qs"));
+const ExpandableText_1 = tslib_1.__importDefault(require("./ExpandableText"));
+const LikeButton_1 = tslib_1.__importDefault(require("./LikeButton"));
+const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
+const ToggleButton_1 = tslib_1.__importDefault(require("./ToggleButton"));
+const FingerSwipeTip_1 = tslib_1.__importDefault(require("./FingerSwipeTip"));
+const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
+const Hashtag_1 = tslib_1.__importDefault(require("./Hashtag"));
+const Navbar_1 = tslib_1.__importDefault(require("./Navbar"));
+const left_png_1 = tslib_1.__importDefault(require("./left.png"));
+const RenderCard_1 = tslib_1.__importDefault(require("./RenderCard"));
+const useIconLink_1 = require("./useIconLink");
+const WaterFall_1 = tslib_1.__importDefault(require("./WaterFall"));
+const Nudge_1 = tslib_1.__importDefault(require("./Nudge"));
+const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
+const hooks_1 = require("../../../core/hooks");
+const sessionStore_1 = require("../../../core/utils/sessionStore");
+require("./index.less");
+const useEventReport_1 = require("../../../core/hooks/useEventReport");
+const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
+const localStore_1 = require("../../../core/utils/localStore");
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { schema } = (0, hooks_1.useEditor)();
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const viewImageStartTime = (0, react_1.useRef)(0);
+    const [isInit, setIsInit] = (0, react_1.useState)(false);
+    const [isMuted, setIsMuted] = (0, react_1.useState)(true);
+    const curTime = (0, react_1.useRef)();
+    const viewTime = (0, react_1.useRef)();
+    const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
+    const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
+    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
+    const { productView } = (0, useEventReport_1.useEventReport)();
+    const isShowFingerTip = (0, react_1.useMemo)(() => {
+        return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
+    }, [data, loading]);
+    const handleH5EnterLink = (0, react_1.useCallback)(() => {
+        if (data.length <= 0) {
+            return;
+        }
+        initTime();
+        const queryString = location.search.slice(1);
+        const params = qs_1.default.parse(queryString.replace(/\+/g, '%2B'));
+        for (const key in params) {
+            params[key] = params[key].replace(/%2B/g, '+');
+        }
+        const getVal = (key) => { var _a; return (_a = params[key]) !== null && _a !== void 0 ? _a : ''; };
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'h5LinkEnterFeed',
+                eventDescription: 'User enter h5 link',
+                utmSource: getVal('utm_source'),
+                utmMedium: getVal('utm_medium'),
+                utmCampaign: getVal('utm_campaign'),
+                utmId: getVal('utm_id'),
+                utmContent: getVal('utm_content'),
+                enterTime: `${Date.now()}`,
+                requestId: null
+            }
+        });
+        setIsInit(true);
+    }, [bffEventReport, data.length]);
+    const initTime = () => {
+        curTime.current = new Date();
+        viewTime.current = new Date();
+        (0, sessionStore_1.refreshFeSessionId)();
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isInit)
+            handleH5EnterLink();
+    }, [handleH5EnterLink, isInit]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (ctaType === '多商品CTA') {
+                return ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) && ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c.length) > 0;
+            }
+            else if (ctaType === '商品CTA') {
+                return (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
+            }
+            else {
+                return ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId) === ctaType && (((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) || ((_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) === null || _j === void 0 ? void 0 : _j.length));
+            }
+        })) || 0;
+        (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
+    }, [ctaType, swiperRef]);
+    (0, react_1.useEffect)(() => {
+        const item = data === null || data === void 0 ? void 0 : data[activeIndex];
+        const visibleChange = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if (document.visibilityState === 'hidden') {
+                event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
+                handleReportViewImageEnd(item);
+                handleReportProductView(item);
+                let fromKName = '';
+                if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
+                    fromKName = 'pdpPage';
+                }
+                else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
+                    fromKName = 'formPage';
+                }
+                else if (isFromHashtag) {
+                    fromKName = 'hashTagPage';
+                }
+                else if ((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) {
+                    fromKName = 'videoPage';
+                }
+                else if (((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) && ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.imgUrls) === null || _k === void 0 ? void 0 : _k.length)) {
+                    fromKName = 'imagePage';
+                }
+                else if (item === null || item === void 0 ? void 0 : item.product) {
+                    fromKName = 'productPage';
+                }
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
+                        eventSubject: 'sessionCompleted',
+                        eventDescription: 'Session completed',
+                        relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
+                        relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
+                        position: activeIndex + '',
+                        fromKName,
+                        fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                        relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
+                    }
+                });
+            }
+            else if (document.visibilityState === 'visible') {
+                handleH5EnterLink();
+                handleViewImageStartEvent(activeIndex);
+                event_1.default.emit(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
+            }
+        };
+        document.addEventListener('visibilitychange', visibleChange);
+        return () => {
+            document.removeEventListener('visibilitychange', visibleChange);
+        };
+    }, [activeIndex, bffEventReport, curTime, data, handleH5EnterLink, popupDetailData, isFromHashtag, tempMap]);
+    const height = (0, react_1.useMemo)(() => {
+        return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
+    }, [globalConfig, containerHeight]);
+    const renderLogo = (0, react_1.useMemo)(() => {
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
+                react_1.default.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
+        }
+        return null;
+    }, [globalConfig]);
+    const renderContent = (0, react_1.useCallback)((rec, index) => {
+        var _a, _b, _c, _d;
+        if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
+        }
+        if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
+            return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
+        }
+        if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
+                const Component = (0, withBindDataSource_1.default)(t);
+                const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
+                return (react_1.default.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, viewTime: viewTime.current, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { height: '100%', overflow: 'auto' }), index: index })));
+            });
+        }
+        return null;
+    }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+    const onExpandableChange = (0, react_1.useCallback)((v) => {
+        setIsShowMore(v);
+    }, []);
+    const lineGradStyle = (0, react_1.useMemo)(() => {
+        return !isShowMore
+            ? {
+                padding: '20px 0'
+            }
+            : {
+                background: 'linear-gradient( 180deg, rgba(129,129,129,0) 0%, rgba(121,121,121,0.5) 5%, #616161 100%)',
+                paddingTop: 20,
+                paddingBottom: 20
+            };
+    }, [isShowMore]);
+    const renderBottom = (0, react_1.useCallback)((rec, index) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (rec.video) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
+                    react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
+                    react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign({}, descStyle), onChange: onExpandableChange }),
+                        react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
+        }
+        return null;
+    }, [
+        descStyle,
+        activeIndex,
+        tempMap,
+        resolver,
+        tipText,
+        nudge,
+        hashTagStyle,
+        globalConfig,
+        onExpandableChange,
+        isShowMore,
+        lineGradStyle
+    ]);
+    const renderLikeButton = (0, react_1.useCallback)((rec, index) => {
+        var _a, _b;
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+            return;
+        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
+        if (waterFallData && top < 40) {
+            top += 40;
+        }
+        if (rec.video) {
+            return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
+                    top,
+                    right: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _b !== void 0 ? _b : 0
+                }, position: index }));
+        }
+        return null;
+    }, [globalConfig, waterFallData]);
+    const handleReportViewImageEnd = (item) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
+            const endTime = Date.now();
+            const duration = (endTime - viewImageStartTime.current) / 1000;
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'viewImageCarouselEnd',
+                    eventDescription: 'User end view the image carousel',
+                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                    imageEndTime: `${endTime}`,
+                    playDuration: `${duration}`,
+                    contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                    position: activeIndex + '',
+                    contentFormat: 'image',
+                    traceInfo: item.video.traceInfo
+                }
+            });
+        }
+    };
+    const handleScrollEvent = (swiper) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        viewTime.current = new Date();
+        const item = data[swiper.previousIndex];
+        if (!item)
+            return;
+        if (swiper.previousIndex - swiper.activeIndex < 0) {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'scrollDown',
+                    eventDescription: 'User scroll down',
+                    relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                    relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    requestId: null
+                }
+            });
+            handleReportViewImageEnd(item);
+        }
+        else {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'scrollUp',
+                    eventDescription: 'User scroll up',
+                    relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                    relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    requestId: null
+                }
+            });
+            handleReportViewImageEnd(item);
+        }
+        handleReportProductView(item);
+    };
+    const handleReportProductView = (item) => {
+        var _a, _b, _c;
+        if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
+            productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const item = data[activeIndex];
+        if (openHashtag)
+            handleReportProductView(item);
+    }, [openHashtag, data, activeIndex]);
+    const handleViewImageStartEvent = (activeIndex) => {
+        var _a, _b, _c, _d, _e, _f;
+        const item = data[activeIndex];
+        if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
+            const startTime = Date.now();
+            viewImageStartTime.current = startTime;
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'viewImageCarouselStart',
+                    eventDescription: 'User start view the image carousel',
+                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                    imageStartTime: `${startTime}`,
+                    contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                    position: activeIndex + '',
+                    contentFormat: 'image',
+                    traceInfo: item.video.traceInfo
+                }
+            });
+        }
+    };
+    const visList = (0, react_1.useMemo)(() => {
+        const list = data === null || data === void 0 ? void 0 : data.map((item, index) => {
+            if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                return item;
+            }
+            else {
+                return null;
+            }
+        });
+        return !waterFallData ? list.concat([{ loading: true }]) : list;
+    }, [data, activeIndex, waterFallData]);
+    const renderView = (0, react_1.useMemo)(() => {
+        if (loading) {
+            return (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+                react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
+        }
+        return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
+            return (react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index }, rec && (react_1.default.createElement(react_1.default.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (react_1.default.createElement("div", { style: {
+                    height,
+                    width: containerWidth,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                } },
+                react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                renderContent(rec, index),
+                renderBottom(rec, index),
+                renderLikeButton(rec, index)))))));
+        });
+    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
+    const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
+    const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
+    return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
+        waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+            } })),
+        renderLogo,
+        isShowFingerTip ? react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
+        react_1.default.createElement(react_2.Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
+                setActiveIndex(swiper.activeIndex);
+                if (openHashtag)
+                    return;
+                handleScrollEvent(swiper);
+                if (waterFallData)
+                    return;
+                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                    if (!isLoadMore) {
+                        setIsLoadMore(true);
+                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                            setIsLoadMore(false);
+                        });
+                    }
+                }
+            }, direction: 'vertical', height: height },
+            react_1.default.createElement(ToggleButton_1.default, { style: {
+                    position: 'fixed',
+                    right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
+                    visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
+                    bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
+                    zIndex: 999
+                }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+            renderView),
+        react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
+};
+exports.default = SxpPageRender;

package/lib/core/components/SxpPageRender/typing.d.ts

@@ -0,0 +1,66 @@
+export type TagType = {
+    info: string;
+    link: string;
+    linkTitle: string;
+    linkType: string;
+};
+export type RecItemType = {
+    position: string;
+    cta: CTAInfoType | null;
+    product: ProductInfoType | null;
+    video: VideoInfoType | null;
+    isCollected?: boolean;
+    hashTags: string[];
+    tags: string[];
+};
+export type CTAInfoType = {
+    traceInfo: string;
+    itemId: string;
+    value: number;
+    tags: string[];
+    menuCategoryId: string;
+    title: string;
+    icon: string;
+    weight: number | null;
+    enTitle: string;
+    link: string | null;
+};
+export type ProductInfoType = {
+    traceInfo?: string | null;
+    itemId: string;
+    value: number;
+    tags: string[];
+    weight?: null | number;
+    title: string;
+    homePage: string[];
+    price: number;
+    collection: string;
+    link: string;
+    info: string;
+    currency: string;
+    bindCta?: CTAInfoType;
+    taxInfo?: string;
+};
+export type VideoInfoType = {
+    bindCtaId: string;
+    bindProductId: string;
+    blockCta: number;
+    blockProduct: number;
+    cover: string;
+    imgUrls: string[] | null;
+    itemId: string;
+    tags: string[];
+    title: string;
+    traceInfo: string;
+    url: string;
+    value: number;
+    weight: number | null;
+    bindProducts: Array<ProductInfoType>;
+    bindProduct: ProductInfoType;
+    bindCta: CTAInfoType;
+    hashTags: string[];
+};
+export type RecommendVideoResultType = {
+    recList: Array<RecItemType>;
+    tag: TagType;
+};

package/lib/core/components/SxpPageRender/typing.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/core/components/SxpPageRender/useIconLink.d.ts

@@ -0,0 +1 @@
+export declare function useIconLink(path: string, domain?: string): string;

package/lib/core/components/SxpPageRender/useIconLink.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIconLink = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../../../core/hooks");
+function useIconLink(path, domain) {
+    const { appDomain } = (0, hooks_1.useSxpDataSource)();
+    return (0, react_1.useMemo)(() => {
+        if (domain) {
+            return `https://${domain}${path}`;
+        }
+        else {
+            return appDomain ? `https://${appDomain}${path}` : `${window.location.origin}${path}`;
+        }
+    }, [appDomain, path, domain]);
+}
+exports.useIconLink = useIconLink;

package/lib/core/context/DataSourceProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ISchema } from '../schema';
+export interface IDataSourceContext {
+    $store?: any;
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    configs: ISchema['dataSource'];
+}
+export interface IDataSourceProviderProps {
+    isSsr?: boolean;
+    enable?: boolean;
+}
+export declare const DataSourceContext: React.Context<IDataSourceContext>;
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IDataSourceProviderProps>>;
+export default _default;

package/lib/core/context/DataSourceProvider.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("lodash");
+const hooks_1 = require("../hooks");
+const getDataByDS_1 = tslib_1.__importDefault(require("../utils/getDataByDS"));
+exports.DataSourceContext = (0, react_1.createContext)({ $store: {}, options: [], configs: [] });
+const DataSourceProvider = ({ children, isSsr, enable }) => {
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const { schema } = (0, hooks_1.useEditor)();
+    const [store, setStore] = (0, react_1.useState)(schema.__STORE__ || {});
+    const [configs, setConfigs] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isSsr)
+            return;
+        if (!(0, lodash_1.isEqual)(configs, schema === null || schema === void 0 ? void 0 : schema.dataSource)) {
+            setConfigs((_a = schema === null || schema === void 0 ? void 0 : schema.dataSource) !== null && _a !== void 0 ? _a : []);
+        }
+    }, [schema === null || schema === void 0 ? void 0 : schema.dataSource, isSsr]);
+    const getDataSource = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const { $store, idMapName } = yield (0, getDataByDS_1.default)('', configs);
+        setStore($store);
+        getOptions($store, idMapName);
+    }), [configs]);
+    const getOptions = ($store, idMapName) => {
+        const _options = [];
+        Object.entries($store).forEach(([key, value]) => {
+            Object.keys(value).forEach((childKey) => {
+                const item = { label: `${idMapName[key]} - ${childKey}`, value: `{{ ${key}.${childKey} }}` };
+                _options.push(item);
+            });
+        });
+        setOptions(_options);
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isSsr) {
+            getDataSource();
+        }
+    }, [getDataSource, isSsr, schema]);
+    if (!enable) {
+        return children;
+    }
+    return (react_1.default.createElement(exports.DataSourceContext.Provider, { value: { $store: schema.__STORE__ || store, options, configs } }, children));
+};
+exports.default = (0, react_1.memo)(DataSourceProvider);