pb-sxp-ui 1.0.0

package/es/core/Pagebuilder/PagebuilderClass.d.ts

@@ -0,0 +1,15 @@
+export default class PagebuilderClass {
+    private appId;
+    private tenantId;
+    private apiUrl;
+    private env?;
+    constructor();
+    setApiUrl(apiUrl: string): void;
+    getApiUrl(): string;
+    getEnv(): 'dev' | 'staging' | 'live' | undefined;
+    setEnv(value: 'dev' | 'staging' | 'live' | undefined): void;
+    setAppId: (appId: string) => void;
+    setTenantId: (tenantId: string) => void;
+    getAppId: () => string | undefined;
+    getTenantId: () => string | undefined;
+}

package/es/core/Pagebuilder/PagebuilderClass.js

@@ -0,0 +1,42 @@
+let _instance = null;
+const API_URL = {
+    dev: 'https://clc-pagebuilder-be-dev.chatlabs.net',
+    staging: 'https://clc-pagebuilder-be-staging.chatlabs.net',
+    live: 'https://clc-pagebuilder-be.chatlabs.net'
+};
+export default class PagebuilderClass {
+    constructor() {
+        this.setAppId = (appId) => {
+            this.appId = appId;
+        };
+        this.setTenantId = (tenantId) => {
+            this.tenantId = tenantId;
+        };
+        this.getAppId = () => {
+            return this.appId;
+        };
+        this.getTenantId = () => {
+            return this.tenantId;
+        };
+        if (_instance) {
+            return _instance;
+        }
+        _instance = this;
+    }
+    setApiUrl(apiUrl) {
+        this.apiUrl = `https://${apiUrl}`;
+    }
+    getApiUrl() {
+        if (this.apiUrl)
+            return this.apiUrl;
+        if (!this.env)
+            return '';
+        return API_URL[this.env];
+    }
+    getEnv() {
+        return this.env;
+    }
+    setEnv(value) {
+        this.env = value;
+    }
+}

package/es/core/Pagebuilder/index.d.ts

@@ -0,0 +1,3 @@
+import type PagebuilderProps from './type';
+declare const Pagebuilder: PagebuilderProps;
+export { Pagebuilder };

package/es/core/Pagebuilder/index.js

@@ -0,0 +1,96 @@
+import { __awaiter } from "tslib";
+import { isEmpty } from 'lodash';
+import getDataByDS from '../utils/getDataByDS';
+import { getSxpTokenInfo } from '../utils/getSxpTokenInfo';
+import { uuid } from '../utils/tool';
+import { unzip } from '../utils/unzip';
+import PagebuilderClass from './PagebuilderClass';
+let builder = null;
+const Pagebuilder = {
+    init: ({ appId, tenantId, env = 'live', apiUrl }) => {
+        if (!builder) {
+            builder = new PagebuilderClass();
+        }
+        if (apiUrl) {
+            builder.setApiUrl(apiUrl);
+        }
+        builder.setAppId(appId);
+        builder.setTenantId(tenantId);
+        builder.setEnv(env);
+    },
+    getDetail: (path) => {
+        if (!builder)
+            return;
+        const tenantId = builder.getTenantId();
+        const appId = builder.getAppId();
+        const apiUrl = builder.getApiUrl();
+        return fetch(`${apiUrl}/storefront/v1/page?path=` + path, {
+            method: 'get',
+            headers: {
+                'x-tenant-id': tenantId || '',
+                'x-app-id': appId || ''
+            }
+        }).then((res) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            const result = yield res.json();
+            const decodeData = unzip((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.data);
+            if (decodeData) {
+                const { $store: __STORE__ } = yield getDataByDS(apiUrl, (_b = decodeData === null || decodeData === void 0 ? void 0 : decodeData.dataSource) !== null && _b !== void 0 ? _b : []);
+                result.data.data = decodeData;
+                Object.assign(result.data.data, { __STORE__ });
+            }
+            return result;
+        }));
+    },
+    getSxpDetailByPageId: (id) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!builder)
+            return;
+        const tenantId = builder.getTenantId();
+        const appId = builder.getAppId();
+        const apiUrl = builder.getApiUrl();
+        return fetch(`${apiUrl}/storefront/v1/page?id=` + id, {
+            method: 'get',
+            headers: {
+                'x-tenant-id': tenantId || '',
+                'x-app-id': appId || ''
+            }
+        }).then((res) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const result = yield res.json();
+            if (!result.success) {
+                return undefined;
+            }
+            const decodeData = unzip((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.data);
+            result.data.data = decodeData;
+            return result.data;
+        }));
+    }),
+    getSxpRecommendVideoData: (dataId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!builder)
+            return;
+        const tokenData = yield getSxpTokenInfo(builder, dataId);
+        const request_id = uuid(0, 0);
+        let fake_session_id = window.localStorage.getItem('SXP_FAKE_SESSION_ID');
+        if (isEmpty(fake_session_id)) {
+            fake_session_id = uuid(36, 62);
+            window.localStorage.setItem('SXP_FAKE_SESSION_ID', fake_session_id);
+        }
+        const recommendVideoRes = yield fetch('https://dev-sxp-be.chatlabs.net/platform/open/rec/v1.2', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                token: tokenData.token,
+                channel: tokenData.channel,
+                userId: tokenData.userId
+            },
+            body: JSON.stringify({
+                productUserId: fake_session_id,
+                channel: tokenData.channel,
+                maxRecs: 10,
+                requestId: request_id
+            })
+        }).then((res) => res.json());
+        return (recommendVideoRes === null || recommendVideoRes === void 0 ? void 0 : recommendVideoRes.data) || null;
+    })
+};
+export { Pagebuilder };

package/es/core/Pagebuilder/type.d.ts

@@ -0,0 +1,55 @@
+interface initParams {
+    appId: string;
+    tenantId: string;
+    apiUrl?: string;
+    env?: 'dev' | 'staging' | 'live';
+}
+export interface PageData {
+    id: string;
+    name: string;
+    data: any;
+    page_type: PageType;
+    seo_parameter: SeoParameter;
+    utm_parameter: UtmParameter;
+    data_sources: Array<DataSource>;
+    sxp_parameter?: {
+        bottom_image: string;
+        default_recommend: number;
+        personalized_recommend: number;
+        placeholder_image: string;
+        hash_tag_size: number;
+        loading_image: string;
+    };
+}
+export interface DataSource {
+    type: number;
+    url: string;
+    headers: Record<string, string>;
+    queries: Record<string, string>;
+}
+export interface PageType {
+    id: string;
+    name: string;
+    path: string;
+    operator_name: string;
+    create_time: string;
+    update_time: string;
+    path_type: number;
+}
+export interface SeoParameter {
+    title: string;
+    description: string;
+    key_word: string;
+}
+export interface UtmParameter {
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+}
+interface PagebuilderProps {
+    init: (e: initParams) => void;
+    getDetail: (path: string) => Promise<any> | any;
+    getSxpRecommendVideoData: (dataId: string) => Promise<any> | any;
+    getSxpDetailByPageId: (id: string) => Promise<PageData | undefined>;
+}
+export default PagebuilderProps;

package/es/core/Pagebuilder/type.js

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageData } from '../../../core/Pagebuilder/type';
+export interface ISxpPageCoreProps {
+    data?: PageData;
+    maxSize?: number;
+    defaultSize?: number;
+    hashTagSize?: number;
+    loadingImage?: string;
+}
+declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
+export default _default;

package/es/core/components/SxpPageCore/index.js

@@ -0,0 +1,26 @@
+import React, { memo, useMemo } from 'react';
+import SxpPageRender from '../SxpPageRender';
+import Popup from '../SxpPageRender/Popup';
+import * as _materials_ from '../../../materials';
+import { EditorCore } from '../../../core';
+import SxpDataSourceProvider from '../../../core/context/SxpDataSourceProvider';
+const RESOLVER = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER[v.extend.type] = v;
+});
+const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const utmVal = useMemo(() => {
+        var _a;
+        const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
+        return searchParams;
+    }, []);
+    return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
+        React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, render: ({ rtcList }) => {
+                var _a;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { data: rtcList, resolver: RESOLVER })),
+                    React.createElement(Popup, null)));
+            } })));
+};
+export default memo(SxpPageCore);

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+interface IExpandableTextProps {
+    maxStr?: number;
+    text: string;
+    style?: CSSProperties;
+    className?: React.HTMLAttributes<HTMLParagraphElement>['className'];
+    onClick?: () => void;
+    foldText?: string;
+    unfoldText?: string;
+}
+declare const _default: React.NamedExoticComponent<IExpandableTextProps>;
+export default _default;

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

@@ -0,0 +1,54 @@
+import React, { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+const limitTextLastWholeWord = (originalText = '', limit) => {
+    const chineseRegex = /[\u4e00-\u9fa5]+/;
+    if (chineseRegex.test(originalText)) {
+        return originalText.slice(0, 54);
+    }
+    const words = originalText.split(' ');
+    const newWords = [];
+    for (let i = 0; i < words.length; i++) {
+        newWords.push(words[i]);
+        const tempText = newWords.join(' ');
+        if (tempText.length >= limit)
+            break;
+    }
+    const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
+    return _words.join(' ') + ' ';
+};
+const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText }) => {
+    const [isShowMore, setIsShowMore] = useState(true);
+    const [isShow, setIsShow] = useState(false);
+    const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
+    const multiRow = useRef(null);
+    const handleClick = useCallback(() => {
+        setIsShowMore(!isShowMore);
+    }, [isShowMore]);
+    const renderText = useMemo(() => {
+        return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
+    }, [text, maxStr, isShowMore]);
+    useEffect(() => {
+        if (multiRow.current) {
+            setIsShowMore(true);
+            setTimeout(() => {
+                setIsShow(false);
+                const height = parseInt(getComputedStyle(multiRow.current).height);
+                const lineHeight = parseInt(getComputedStyle(multiRow === null || multiRow === void 0 ? void 0 : multiRow.current).lineHeight);
+                if (text && height > lineHeight * lineClamp) {
+                    setIsShowMore(false);
+                    setIsShow(true);
+                }
+            }, 100);
+        }
+    }, [multiRow, text, lineClamp, style]);
+    return (React.createElement("div", { className: className, style: Object.assign({}, style) },
+        React.createElement("div", { ref: multiRow, style: {
+                overflow: 'hidden',
+                WebkitLineClamp: !isShowMore ? lineClamp : '',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                wordBreak: 'break-word'
+            } }, text),
+        isShow && text && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
+};
+export default memo(ExpandableText);

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface IProps {
+    imageUrl?: string;
+}
+declare const FingerSwipeTip: FC<IProps>;
+export default FingerSwipeTip;

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

@@ -0,0 +1,19 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useIconLink } from '../useIconLink';
+import { useEditor } from '../../../../core/hooks';
+const FingerSwipeTip = ({ imageUrl }) => {
+    const [show, setShow] = useState(true);
+    const { schema: { sxpPageConf } } = useEditor();
+    useEffect(() => {
+        setTimeout(() => {
+            setShow(false);
+        }, 2000);
+    }, []);
+    const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
+    const animationCls = useMemo(() => {
+        return show ? 'pb-fadeIn' : 'pb-fadeOut';
+    }, [show]);
+    return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
+        React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
+};
+export default FingerSwipeTip;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RecItemType } from '../typing';
+interface IHashtagProps {
+    tags: string[];
+    itemId: string;
+    itemType: 'VIDEO' | 'PRODUCT' | null;
+    index: number;
+    rec: RecItemType;
+}
+declare const _default: React.NamedExoticComponent<IHashtagProps>;
+export default _default;

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

@@ -0,0 +1,40 @@
+import React, { memo, useMemo, useState } from 'react';
+import { SwiperSlide } from 'swiper/react';
+import { useSxpDataSource } from '../../../../core/hooks';
+import Scroll from '../../../../materials/sxp/template/components/Scroll';
+const Hashtag = ({ tags, itemId, itemType, index, rec }) => {
+    const [isShowMore, setIsShowMore] = useState(false);
+    const { setWaterFallData, setOpenHashtag, setCacheRtcList, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
+    const handleClickTag = (data) => {
+        if (!waterFallData) {
+            setCacheActiveIndex === null || setCacheActiveIndex === void 0 ? void 0 : setCacheActiveIndex(index);
+        }
+        else {
+            setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(true);
+        }
+        if (itemType) {
+            setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
+                hashTag: data,
+                itemId,
+                itemType,
+                rec
+            });
+        }
+        else {
+            setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
+                hashTag: data,
+                rec
+            });
+        }
+        setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+    };
+    const renderExpandButton = useMemo(() => {
+        if (tags.length <= 6) {
+            return null;
+        }
+        return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
+    }, [isShowMore, tags]);
+    return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
+        React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', onClick: () => handleClickTag(item) }, `#${item}`))))));
+};
+export default memo(Hashtag);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RecItemType } from '../typing';
+interface ILikeProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    activeIcon?: string;
+    unActicveIcon?: string;
+    active?: boolean;
+    recData: RecItemType;
+}
+declare const _default: React.NamedExoticComponent<ILikeProps>;
+export default _default;

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

@@ -0,0 +1,58 @@
+import { __awaiter, __rest } from "tslib";
+import React, { memo, useState } from 'react';
+import { debounce } from 'lodash';
+import { useIconLink } from '../useIconLink';
+import { useSxpDataSource } from '../../../../core/hooks';
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const LikeButton = (_a) => {
+    var { active, activeIcon, unActicveIcon, recData } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData"]);
+    const { mutateLike, mutateUnlike, bffEventReport } = useSxpDataSource();
+    const [state, setState] = useState(active);
+    const likeIcon = useIconLink(defaultLikeIconPath);
+    const unlikeIcon = useIconLink(defaultUnLikeIconPath);
+    const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        if (state) {
+            setState(false);
+            const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'favoriteContentCanceled',
+                    eventDescription: 'This content was unfavorite by the user',
+                    contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                    contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
+                    contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
+                    position: recData.position,
+                    contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
+                    traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
+                }
+            });
+            if (!result) {
+                setState(true);
+            }
+        }
+        else {
+            setState(true);
+            const result = (_o = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _o !== void 0 ? _o : false;
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'favoriteContent',
+                    eventDescription: 'This content was favorite by the user',
+                    contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
+                    contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
+                    contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
+                    position: recData.position,
+                    contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
+                    traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
+                }
+            });
+            if (!result) {
+                setState(false);
+            }
+        }
+    }), 200);
+    return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
+        React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
+};
+export default memo(LikeButton);

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

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from 'react';
+interface IModalProps {
+    visible?: boolean;
+    padding?: number | string;
+    modalStyle?: CSSProperties;
+    onClose?: () => void;
+}
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
+export default _default;

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

@@ -0,0 +1,44 @@
+import { debounce } from 'lodash';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
+const Modal = ({ visible, onClose, children, modalStyle, padding }) => {
+    const [isShow, setIsShow] = useState(false);
+    const modalEleRef = useRef(null);
+    useEffect(() => {
+        const parentNode = document.getElementById('sxp-render');
+        const node = document.getElementById('pb-modal');
+        if (node) {
+            modalEleRef.current = node;
+        }
+        else {
+            modalEleRef.current = document.createElement('div');
+            modalEleRef.current.setAttribute('id', 'pb-modal');
+            parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(modalEleRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        if (visible) {
+            setIsShow(true);
+        }
+        else {
+            setTimeout(() => {
+                setIsShow(false);
+            }, 1200);
+        }
+    }, [visible]);
+    if (!modalEleRef.current)
+        return null;
+    const handleClose = debounce(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 300);
+    return ReactDOM.createPortal(React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: isShow ? 'flex' : 'none', backgroundColor: visible ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
+        React.createElement("div", { className: `modal-container ${visible ? 'modal-popIn' : 'modal-popOut'}`, style: { padding }, onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            } },
+            React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
+                React.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
+            children)), modalEleRef.current);
+};
+export default memo(Modal);

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

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+interface INavbarProps {
+    icon?: string;
+    styles?: CSSProperties;
+    onClose?: () => void;
+}
+declare const _default: React.NamedExoticComponent<INavbarProps>;
+export default _default;

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

@@ -0,0 +1,9 @@
+import React, { memo } from 'react';
+import { useSxpDataSource } from '../../../core/hooks';
+const Navbar = ({ icon, styles, onClose }) => {
+    const { waterFallData, setOpenHashtag } = useSxpDataSource();
+    return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
+        React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
+        React.createElement("div", { className: 'clc-sxp-nav-title' }, `#${waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag}`)));
+};
+export default memo(Navbar);

package/es/core/components/SxpPageRender/PictureGroup/Picture.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IPictureProps {
+    src: string;
+    height: number;
+    width: number;
+}
+declare const Picture: (props: IPictureProps) => React.JSX.Element;
+export default Picture;

package/es/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -0,0 +1,19 @@
+import React, { useRef } from 'react';
+import { useSxpDataSource } from '../../../../core/hooks';
+const Picture = (props) => {
+    const { src, height, width } = props;
+    const imgDom = useRef(null);
+    const { sxpParameter } = useSxpDataSource();
+    return (React.createElement("div", { style: {
+            overflow: 'hidden',
+            height,
+            width: '100%',
+            position: 'relative'
+        } },
+        React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover'
+            } })));
+};
+export default Picture;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RecItemType } from '../typing';
+interface IPictureGroupProps {
+    imgUrls?: string[];
+    width: number;
+    height: number;
+    rec: RecItemType;
+    index: number;
+    onReportViewImageEnd: (rec: RecItemType) => void;
+    onViewImageStartEvent: (index: number) => void;
+}
+declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
+export default _default;

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

@@ -0,0 +1,27 @@
+import React, { memo, useEffect } from 'react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
+import Picture from './Picture';
+import { useSxpDataSource } from '../../../../core/hooks';
+const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+    const { isActive } = useSwiperSlide();
+    const { sxpParameter, openHashtag } = useSxpDataSource();
+    useEffect(() => {
+        if (!isActive)
+            return;
+        if (openHashtag) {
+            onReportViewImageEnd(rec);
+        }
+        else {
+            onViewImageStartEvent(index);
+        }
+    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent]);
+    if (!isActive) {
+        return React.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
+    }
+    return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+        return (React.createElement(SwiperSlide, { key: url },
+            React.createElement(Picture, { src: url, width: width, height: height })));
+    })));
+};
+export default memo(PictureGroup);

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Popup: () => React.JSX.Element;
+export default Popup;