pb-sxp-ui 1.0.17 → 1.0.19

package/lib/core/Pagebuilder/index.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagebuilder = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const getDataByDS_1 = tslib_1.__importDefault(require("../utils/getDataByDS"));
+const getSxpTokenInfo_1 = require("../utils/getSxpTokenInfo");
+const tool_1 = require("../utils/tool");
+const unzip_1 = require("../utils/unzip");
+const PagebuilderClass_1 = tslib_1.__importDefault(require("./PagebuilderClass"));
+let builder = null;
+const Pagebuilder = {
+    init: ({ appId, tenantId, env = 'live', apiUrl }) => {
+        if (!builder) {
+            builder = new PagebuilderClass_1.default();
+        }
+        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) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            const result = yield res.json();
+            const decodeData = (0, unzip_1.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 (0, getDataByDS_1.default)(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) => tslib_1.__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) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const result = yield res.json();
+            if (!result.success) {
+                return undefined;
+            }
+            const decodeData = (0, unzip_1.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) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (!builder)
+            return;
+        const tokenData = yield (0, getSxpTokenInfo_1.getSxpTokenInfo)(builder, dataId);
+        const request_id = (0, tool_1.uuid)(0, 0);
+        let fake_session_id = window.localStorage.getItem('SXP_FAKE_SESSION_ID');
+        if ((0, lodash_1.isEmpty)(fake_session_id)) {
+            fake_session_id = (0, tool_1.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;
+    })
+};
+exports.Pagebuilder = Pagebuilder;

package/lib/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/lib/core/Pagebuilder/type.js

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

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const SxpPageRender_1 = tslib_1.__importDefault(require("../SxpPageRender"));
+const Popup_1 = tslib_1.__importDefault(require("../SxpPageRender/Popup"));
+const _materials_ = tslib_1.__importStar(require("../../../materials"));
+const core_1 = require("../../../core");
+const SxpDataSourceProvider_1 = tslib_1.__importDefault(require("../../../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, appDomain }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const utmVal = (0, react_1.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_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
+        react_1.default.createElement(SxpDataSourceProvider_1.default, { 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, appDomain: appDomain, render: ({ rtcList }) => {
+                var _a;
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SxpPageRender_1.default, 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_1.default.createElement(Popup_1.default, null)));
+            } })));
+};
+exports.default = (0, react_1.memo)(SxpPageCore);

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("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, isPost, onChange }) => {
+    const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
+    const [isShow, setIsShow] = (0, react_1.useState)(false);
+    const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
+    const multiRow = (0, react_1.useRef)(null);
+    const multiRowCopy = (0, react_1.useRef)(null);
+    const handleClick = (0, react_1.useCallback)(() => {
+        setIsShowMore(!isShowMore);
+    }, [isShowMore, onChange]);
+    const renderText = (0, react_1.useMemo)(() => {
+        return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
+    }, [text, maxStr, isShowMore]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
+            setIsShow(true);
+        }
+        else {
+            setIsShow(false);
+        }
+        multiRowCopy.current.style.display = 'none';
+    }, [isPost]);
+    return (react_1.default.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
+        react_1.default.createElement("div", { ref: multiRow, style: {
+                overflow: 'hidden',
+                WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                wordBreak: 'break-word'
+            }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
+        react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
+        text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
+};
+exports.default = (0, react_1.memo)(ExpandableText);

package/lib/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/lib/core/components/SxpPageRender/FingerSwipeTip/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useIconLink_1 = require("../useIconLink");
+const hooks_1 = require("../../../../core/hooks");
+const FingerSwipeTip = ({ imageUrl }) => {
+    const [show, setShow] = (0, react_1.useState)(true);
+    const { schema: { sxpPageConf } } = (0, hooks_1.useEditor)();
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            setShow(false);
+        }, 2000);
+    }, []);
+    const FINGER_SWIPE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
+    const animationCls = (0, react_1.useMemo)(() => {
+        return show ? 'pb-fadeIn' : 'pb-fadeOut';
+    }, [show]);
+    return (react_1.default.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
+        react_1.default.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
+};
+exports.default = FingerSwipeTip;

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

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

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

@@ -0,0 +1,43 @@
+"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 hooks_1 = require("../../../../core/hooks");
+const Scroll_1 = tslib_1.__importDefault(require("../../../../materials/sxp/template/components/Scroll"));
+const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
+    const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
+    const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = (0, hooks_1.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 = (0, react_1.useMemo)(() => {
+        if (tags.length <= 6) {
+            return null;
+        }
+        return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
+    }, [isShowMore, tags]);
+    return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
+        react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) }, `#${item}`))))));
+};
+exports.default = (0, react_1.memo)(Hashtag);

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

@@ -0,0 +1,11 @@
+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;
+    position: number;
+}
+declare const _default: React.NamedExoticComponent<ILikeProps>;
+export default _default;

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("lodash");
+const useIconLink_1 = require("../useIconLink");
+const hooks_1 = require("../../../../core/hooks");
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const LikeButton = (_a) => {
+    var { active, activeIcon, unActicveIcon, recData, position } = _a, props = tslib_1.__rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
+    const { mutateLike, mutateUnlike, bffEventReport } = (0, hooks_1.useSxpDataSource)();
+    const [state, setState] = (0, react_1.useState)(active);
+    const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath);
+    const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath);
+    const handleClick = (0, lodash_1.debounce)(() => tslib_1.__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: 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: 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_1.default.createElement("button", Object.assign({}, props, { onClick: handleClick }),
+        react_1.default.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
+};
+exports.default = (0, react_1.memo)(LikeButton);

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

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

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const react_1 = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("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, popup }) => {
+    var _a;
+    const [isShow, setIsShow] = (0, react_1.useState)(false);
+    const modalEleRef = (0, react_1.useRef)(null);
+    (0, react_1.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);
+        }
+    }, []);
+    const isOpen = (0, react_1.useMemo)(() => {
+        return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
+    }, [visible, popup]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setIsShow(true);
+        }
+        else {
+            setTimeout(() => {
+                setIsShow(false);
+            }, popup === null || popup === void 0 ? void 0 : popup.duration);
+        }
+    }, [isOpen, popup]);
+    if (!modalEleRef.current)
+        return null;
+    const handleClose = (0, lodash_1.debounce)(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 300);
+    return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null, isShow && (react_1.default.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
+        react_1.default.createElement("div", { className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            } },
+            react_1.default.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
+                react_1.default.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
+            children)))), modalEleRef.current);
+};
+exports.default = (0, react_1.memo)(Modal);

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../../core/hooks");
+const Navbar = ({ icon, styles, textStyle, onClose }) => {
+    var _a;
+    const { waterFallData, setOpenHashtag } = (0, hooks_1.useSxpDataSource)();
+    return (react_1.default.createElement("div", { className: 'clc-sxp-nav', style: styles },
+        react_1.default.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
+        react_1.default.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
+};
+exports.default = (0, react_1.memo)(Navbar);

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+interface IProps {
+    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;
+        };
+    };
+}
+declare const Nudge: FC<IProps>;
+export default Nudge;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Nudge = ({ nudge }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, (nudge === null || nudge === void 0 ? void 0 : nudge.isOpen) && (react_1.default.createElement("div", { className: 'clc-sxp-bottom-nudge', style: {
+            marginBottom: nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom,
+            width: nudge === null || nudge === void 0 ? void 0 : nudge.size.width,
+            height: nudge === null || nudge === void 0 ? void 0 : nudge.size.height,
+            backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
+            borderRadius: nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius
+        } },
+        (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? react_1.default.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
+        react_1.default.createElement("p", { style: Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle) }, nudge === null || nudge === void 0 ? void 0 : nudge.content)))));
+};
+exports.default = Nudge;

package/lib/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/lib/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../../../core/hooks");
+const Picture = (props) => {
+    const { src, height, width } = props;
+    const [blur, setBlur] = (0, react_1.useState)(false);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    (0, react_1.useEffect)(() => {
+        if (src === '' || !src)
+            return;
+        const img = new Image();
+        img.src = `${src}?imageMogr2/format/jpg`;
+        img.onload = () => {
+            const aspectRatio = img.height / img.width;
+            const targetAspectRatio = 16 / 9;
+            const tolerance = 0.05;
+            if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
+                setBlur(true);
+            }
+        };
+    }, [src]);
+    const getImg = (0, react_1.useCallback)((src, style) => {
+        if (src === '' || !src)
+            return;
+        return (react_1.default.createElement("picture", null,
+            react_1.default.createElement("source", { type: 'image/avif', srcSet: `${src}?imageMogr2/format/avif` }),
+            react_1.default.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
+            react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
+            react_1.default.createElement("img", { loading: 'lazy', src: src, style: style })));
+    }, []);
+    return (react_1.default.createElement("div", { style: {
+            overflow: 'hidden',
+            height,
+            width: '100%',
+            position: 'relative'
+        } },
+        getImg(src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, {
+            height: '100%',
+            width: '100%',
+            objectFit: 'cover',
+            filter: blur ? 'blur(10px)' : 'none',
+            transform: blur ? 'scale(1.2)' : 'none'
+        }),
+        blur &&
+            getImg(src, {
+                width: '100%',
+                objectFit: 'contain',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                left: 0,
+                right: 0
+            })));
+};
+exports.default = Picture;