pb-sxp-ui 1.0.15 → 1.0.17

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

@@ -1,57 +0,0 @@
-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/es/core/components/SxpPageRender/index.js

@@ -1,378 +0,0 @@
-import React, { useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import qs from 'qs';
-import ExpandableText from './ExpandableText';
-import LikeButton from './LikeButton';
-import VideoWidget from './VideoWidget';
-import ToggleButton from './ToggleButton';
-import FingerSwipeTip from './FingerSwipeTip';
-import PictureGroup from './PictureGroup';
-import Hashtag from './Hashtag';
-import Navbar from './Navbar';
-import left from './left.png';
-import RenderCard from './RenderCard';
-import { useIconLink } from './useIconLink';
-import WaterFall from './WaterFall';
-import Nudge from './Nudge';
-import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
-import { useEditor, useSxpDataSource } from '../../../core/hooks';
-import { refreshFeSessionId } from '../../../core/utils/sessionStore';
-import './index.less';
-import { useEventReport } from '../../../core/hooks/useEventReport';
-import withBindDataSource from '../../../core/hoc/withBindDataSource';
-import { getFeUserId } from '../../../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 } = useEditor();
-    const [activeIndex, setActiveIndex] = useState(0);
-    const viewImageStartTime = useRef(0);
-    const [isInit, setIsInit] = useState(false);
-    const [isMuted, setIsMuted] = useState(true);
-    const curTime = useRef();
-    const viewTime = useRef();
-    const [isLoadMore, setIsLoadMore] = useState(false);
-    const [isShowMore, setIsShowMore] = useState(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
-    const { productView } = useEventReport();
-    const isShowFingerTip = useMemo(() => {
-        return data.length > 0 && !loading && getFeUserId();
-    }, [data, loading]);
-    const handleH5EnterLink = useCallback(() => {
-        if (data.length <= 0) {
-            return;
-        }
-        initTime();
-        const queryString = location.search.slice(1);
-        const params = qs.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();
-        refreshFeSessionId();
-    };
-    useEffect(() => {
-        if (!isInit)
-            handleH5EnterLink();
-    }, [handleH5EnterLink, isInit]);
-    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]);
-    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') {
-                SXP_EVENT_BUS.emit(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);
-                SXP_EVENT_BUS.emit(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 = 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 = useMemo(() => {
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-            return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
-                React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
-        }
-        return null;
-    }, [globalConfig]);
-    const renderContent = useCallback((rec, index) => {
-        var _a, _b, _c, _d;
-        if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (React.createElement(VideoWidget, { 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.createElement(PictureGroup, { 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 = withBindDataSource(t);
-                const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
-                return (React.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 = useCallback((v) => {
-        setIsShowMore(v);
-    }, []);
-    const lineGradStyle = 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 = useCallback((rec, index) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (rec.video) {
-            return (React.createElement(React.Fragment, null,
-                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                React.createElement("div", { className: 'clc-sxp-bottom' },
-                    React.createElement(Nudge, { nudge: nudge }),
-                    React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
-                    React.createElement("div", { style: lineGradStyle },
-                        React.createElement(ExpandableText, { 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(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
-                        React.createElement(Hashtag, { 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 = 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.createElement(LikeButton, { 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);
-        }
-    };
-    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 = 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 = useMemo(() => {
-        if (loading) {
-            return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-                React.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.createElement(SwiperSlide, { key: index, virtualIndex: index }, rec && (React.createElement(React.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (React.createElement("div", { style: {
-                    height,
-                    width: containerWidth,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                } },
-                React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
-                renderContent(rec, index),
-                renderBottom(rec, index),
-                renderLikeButton(rec, index)))))));
-        });
-    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
-    const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
-    const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
-    return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-        waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-            } })),
-        renderLogo,
-        isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
-        React.createElement(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.createElement(ToggleButton, { 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.createElement(WaterFall, 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))));
-};
-export default SxpPageRender;

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

@@ -1,66 +0,0 @@
-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/es/core/components/SxpPageRender/typing.js

@@ -1 +0,0 @@
-export {};

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

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

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

@@ -1,13 +0,0 @@
-import { useMemo } from 'react';
-import { useSxpDataSource } from '../../../core/hooks';
-export function useIconLink(path, domain) {
-    const { appDomain } = useSxpDataSource();
-    return useMemo(() => {
-        if (domain) {
-            return `https://${domain}${path}`;
-        }
-        else {
-            return appDomain ? `https://${appDomain}${path}` : `${window.location.origin}${path}`;
-        }
-    }, [appDomain, path, domain]);
-}

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

@@ -1,17 +0,0 @@
-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/es/core/context/DataSourceProvider.js

@@ -1,45 +0,0 @@
-import { __awaiter } from "tslib";
-import React, { createContext, memo, useCallback, useEffect, useState } from 'react';
-import { isEqual } from 'lodash';
-import { useEditor } from '../hooks';
-import getDataByDS from '../utils/getDataByDS';
-export const DataSourceContext = createContext({ $store: {}, options: [], configs: [] });
-const DataSourceProvider = ({ children, isSsr, enable }) => {
-    const [options, setOptions] = useState([]);
-    const { schema } = useEditor();
-    const [store, setStore] = useState(schema.__STORE__ || {});
-    const [configs, setConfigs] = useState([]);
-    useEffect(() => {
-        var _a;
-        if (isSsr)
-            return;
-        if (!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 = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const { $store, idMapName } = yield getDataByDS('', 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);
-    };
-    useEffect(() => {
-        if (!isSsr) {
-            getDataSource();
-        }
-    }, [getDataSource, isSsr, schema]);
-    if (!enable) {
-        return children;
-    }
-    return (React.createElement(DataSourceContext.Provider, { value: { $store: schema.__STORE__ || store, options, configs } }, children));
-};
-export default memo(DataSourceProvider);