pb-sxp-ui 1.0.17 → 1.0.19

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { MaterialComponet } from '../create';
+import { ISchema } from '../schema';
+export interface IPageParams {
+    state: string;
+    name: string;
+    type: string;
+    title?: string;
+    description?: string;
+    data: object;
+    app_id: string;
+    key_word?: string;
+    share_title?: string;
+    share_description?: string;
+    h5_url?: string;
+    mp_rul?: string;
+}
+export type IPopupAniType = {
+    name?: string;
+    duration?: number;
+};
+export type IPopupType = {
+    id: string;
+} & IPopupAniType;
+export interface IEditorContext {
+    resolver: Record<string, MaterialComponet>;
+    currentNode: any | null;
+    schema: {
+        pointData: any[];
+        dataSource: ISchema['dataSource'];
+        mobilePiontData: any[];
+        pcPiontData: any[];
+        type: 'PC' | 'mobile';
+        pageInfo: ISchema['pageInfo'];
+        pcPageConf: any;
+        mobilePageConf: any;
+        __STORE__?: Record<string, any>;
+        sxpPageConf: Record<string, any>;
+    };
+    setSchema?: React.Dispatch<React.SetStateAction<{
+        pointData: any[];
+        dataSource: ISchema['dataSource'];
+        mobilePiontData: any[];
+        pcPiontData: any[];
+        type: 'PC' | 'mobile';
+        pageInfo: ISchema['pageInfo'];
+        pcPageConf: any;
+        mobilePageConf: any;
+        __STORE__?: Record<string, any>;
+        sxpPageConf: Record<string, any>;
+    }>>;
+    pageInfoData: any;
+    setPageInfoData?: (pageData: IPageParams) => void;
+    setCurrentNode?: React.Dispatch<React.SetStateAction<any | null>>;
+    saveDataSource?: (dataSource: any[]) => void;
+    prePiontData: any[];
+    setPrePiontData?: React.Dispatch<React.SetStateAction<any[]>>;
+    undoStack: any[];
+    redoStack: any[];
+    setUndoStack?: React.Dispatch<React.SetStateAction<any[]>>;
+    setRedoStack?: React.Dispatch<React.SetStateAction<any[]>>;
+    getCurPageConf?: any;
+    popup: IPopupType;
+    setPopup: React.Dispatch<React.SetStateAction<IPopupType>>;
+}
+export interface IEditorCoreProps {
+    resolver: Record<string, MaterialComponet>;
+    isSsr?: boolean;
+    schema?: any;
+    enableDataSource?: boolean;
+    utmVal?: string;
+}
+export interface IEditorCoreRef {
+    loadSchema: (schema: any) => void;
+    exportSchema: () => any;
+    getPageInfoData: () => any;
+    initPageInfoData: (pageData: IPageParams) => void;
+}
+export declare const EditorContext: React.Context<IEditorContext>;
+declare const EditorCore: React.ForwardRefExoticComponent<IEditorCoreProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<IEditorCoreRef>>;
+export { EditorCore };

package/lib/core/context/EditorContext.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorCore = exports.EditorContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("lodash");
+const DataSourceProvider_1 = tslib_1.__importDefault(require("./DataSourceProvider"));
+const tool_1 = require("../../core/utils/tool");
+const item = {
+    id: (0, tool_1.uuid)(6, 10),
+    item: {
+        type: 'common',
+        h: 300,
+        category: 'block',
+        displayName: 'block',
+        isFirstLayout: true,
+        w: 1000
+    },
+    point: {
+        i: 'x-0',
+        x: -38.34375,
+        y: 0,
+        w: 1000,
+        h: 300,
+        isBounded: true,
+        actualX: 0,
+        actualY: 0
+    },
+    pathArr: [0],
+    positionY: 0
+};
+const popupInit = {
+    id: '',
+    duration: 0,
+    name: 'none'
+};
+exports.EditorContext = react_1.default.createContext({
+    resolver: {},
+    currentNode: null,
+    schema: {
+        pointData: [],
+        dataSource: [],
+        mobilePiontData: [],
+        type: 'PC',
+        pcPiontData: [],
+        pageInfo: {},
+        pcPageConf: {},
+        mobilePageConf: {},
+        __STORE__: {},
+        sxpPageConf: {}
+    },
+    pageInfoData: {},
+    prePiontData: [],
+    undoStack: [item],
+    redoStack: [],
+    popup: popupInit,
+    setPopup: () => { }
+});
+const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema, enableDataSource = true, utmVal }, ref) => {
+    const [currentNode, setCurrentNode] = (0, react_1.useState)(null);
+    const [_schema, setSchema] = (0, react_1.useState)(schema || {
+        pointData: [item],
+        dataSource: [],
+        mobilePiontData: [],
+        type: 'PC',
+        pcPiontData: [],
+        pageInfo: {},
+        pcPageConf: {},
+        mobilePageConf: {},
+        sxpPageConf: {}
+    });
+    const [prePiontData, setPrePiontData] = (0, react_1.useState)([item]);
+    const [undoStack, setUndoStack] = (0, react_1.useState)([[item]]);
+    const [redoStack, setRedoStack] = (0, react_1.useState)([]);
+    const [popup, setPopup] = (0, react_1.useState)(popupInit);
+    typeof window !== 'undefined' &&
+        (window.sxpPopup = (type, aniType) => {
+            setPopup(Object.assign(Object.assign(Object.assign({}, popupInit), { id: type }), aniType));
+        });
+    typeof window !== 'undefined' &&
+        (window.getJointUtmLink = (url) => {
+            if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
+                return url + (utmVal ? '&' + utmVal : '');
+            }
+            else {
+                return url + (utmVal ? '?' + utmVal : '');
+            }
+        });
+    (0, react_1.useEffect)(() => {
+        setUndoStack([_schema.pointData]);
+        setRedoStack([]);
+    }, [_schema.type]);
+    const saveDataSource = (0, react_1.useCallback)((dataSource) => {
+        const schema = (0, lodash_1.cloneDeep)(_schema);
+        if (!schema)
+            return;
+        schema.dataSource = dataSource;
+        setSchema === null || setSchema === void 0 ? void 0 : setSchema(schema);
+    }, [_schema]);
+    const [_pageInfoData, _setPageInfoData] = (0, react_1.useState)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        loadSchema(schema) {
+            if (schema) {
+                setUndoStack([schema.pointData]);
+                setSchema(schema);
+            }
+        },
+        exportSchema() {
+            return (0, lodash_1.cloneDeep)(_schema);
+        },
+        getPageInfoData() {
+            return _pageInfoData;
+        },
+        initPageInfoData(pageData) {
+            if (pageData) {
+                _setPageInfoData(pageData);
+            }
+        }
+    }));
+    const getCurPageConf = (0, react_1.useMemo)(() => {
+        if (!_schema)
+            return;
+        if (_schema.type === 'PC') {
+            return _schema.pcPageConf;
+        }
+        else {
+            return _schema.mobilePageConf;
+        }
+    }, [_schema]);
+    return (react_1.default.createElement(exports.EditorContext.Provider, { value: {
+            resolver,
+            currentNode,
+            schema: _schema,
+            setCurrentNode,
+            setSchema,
+            saveDataSource,
+            prePiontData,
+            setPrePiontData,
+            pageInfoData: _pageInfoData,
+            setPageInfoData: (params) => _setPageInfoData(Object.assign(Object.assign({}, _pageInfoData), params)),
+            undoStack,
+            redoStack,
+            setRedoStack,
+            setUndoStack,
+            getCurPageConf,
+            popup,
+            setPopup
+        } },
+        react_1.default.createElement(DataSourceProvider_1.default, { isSsr: isSsr, enable: enableDataSource }, children)));
+});
+exports.EditorCore = EditorCore;

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

@@ -0,0 +1,20 @@
+import React, { FC, PropsWithChildren } from 'react';
+interface IEditorDataContext {
+    sxpPrameter?: {
+        bottomImage: string;
+        defaultRecommend: number;
+        personalizedRecommend: number;
+        placeholderImage: string;
+        hashTagSize: number;
+        loadingImage: string;
+    };
+    appDomain?: string;
+    openHashtag?: boolean;
+    setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface IEditorProviderProps {
+    data?: any;
+}
+declare const EditorDataProvider: FC<PropsWithChildren<IEditorProviderProps>>;
+export declare function useEditorDataProvider(): IEditorDataContext;
+export default EditorDataProvider;

package/lib/core/context/EditorDataProvider.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorDataProvider = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const EditorDataContext = (0, react_1.createContext)({});
+const EditorDataProvider = ({ children, data }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const [openHashtag, setOpenHashtag] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(EditorDataContext.Provider, { value: {
+            sxpPrameter: {
+                bottomImage: (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.bottom_image,
+                defaultRecommend: (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.default_recommend,
+                personalizedRecommend: (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.personalized_recommend,
+                placeholderImage: (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.placeholder_image,
+                hashTagSize: (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size,
+                loadingImage: (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.loading_image
+            },
+            appDomain: data === null || data === void 0 ? void 0 : data.appDomain,
+            openHashtag,
+            setOpenHashtag
+        } }, children));
+};
+function useEditorDataProvider() {
+    return (0, react_1.useContext)(EditorDataContext);
+}
+exports.useEditorDataProvider = useEditorDataProvider;
+exports.default = EditorDataProvider;

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

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { DataSource, PageData } from '../Pagebuilder/type';
+import { ProductInfoType, RecItemType, RecommendVideoResultType, VideoInfoType } from '../components/SxpPageRender/typing';
+export interface IWaterFallDataType {
+    hashTag: string;
+    itemId?: string;
+    itemType?: 'VIDEO' | 'PRODUCT' | null;
+    rec: RecItemType;
+}
+export interface ISxpDataSourceContext {
+    rtcList: RecItemType[];
+    setRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;
+    submitForm?: (body: {
+        attributes: Array<{
+            name: string;
+            value: string;
+        }>;
+    }) => Promise<boolean | undefined>;
+    mutateUnlike?: (body: {
+        videoItemId: string;
+    }) => Promise<boolean>;
+    mutateLike?: (body: {
+        content: string;
+    }) => Promise<boolean>;
+    popupDetailData?: RecItemType & {
+        index: number;
+    };
+    setPopupDetailData?: React.Dispatch<React.SetStateAction<any | null>>;
+    loadVideos?: (page: number) => Promise<void>;
+    getRecommendVideos?: (query?: {
+        maxSize?: number;
+        defaultSize?: number;
+        channel?: string;
+        hashTag?: string;
+        'itemFilter.itemId'?: string;
+        'itemFilter.itemType'?: 'VIDEO' | 'PRODUCT' | null | undefined;
+        traceInfo?: string;
+    }) => Promise<RecommendVideoResultType | undefined>;
+    utmVal?: string;
+    bffEventReport?: (body: {
+        userInfo?: object;
+        eventInfo: object;
+    }) => Promise<any> | undefined | boolean;
+    isPreview?: boolean;
+    loading?: boolean;
+    sxpParameter?: PageData['sxp_parameter'];
+    waterFallData?: IWaterFallDataType;
+    setWaterFallData?: React.Dispatch<React.SetStateAction<IWaterFallDataType | undefined>>;
+    ctaEvent?: (eventInfo: any, rec?: RecItemType, product?: ProductInfoType | VideoInfoType | null, number?: number) => void;
+    swiperRef?: any;
+    openHashtag?: boolean;
+    setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
+    cacheRtcList?: RecItemType[];
+    setCacheRtcList?: React.Dispatch<React.SetStateAction<RecItemType[]>>;
+    cacheActiveIndex?: number;
+    setCacheActiveIndex?: React.Dispatch<React.SetStateAction<number>>;
+    isFromHashtag?: boolean;
+    setIsFromHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
+    appDomain?: string;
+    hashTagSize?: number;
+    loadingImage?: string;
+    isOpenHashTag?: boolean;
+}
+export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
+export interface SxpDataSourceProviderProps {
+    dataSources?: DataSource[];
+    render: (data: {
+        rtcList: RecItemType[];
+        submitForm: (body: {
+            attributes: Array<{
+                name: string;
+                value: string;
+            }>;
+        }) => Promise<boolean | undefined>;
+        mutateUnlike: (body: {
+            videoItemId: string;
+        }) => Promise<boolean>;
+        mutateLike: (body: {
+            content: string;
+        }) => Promise<boolean>;
+    }) => ReactNode;
+    utmVal?: string;
+    enableReportEvent?: boolean;
+    maxSize?: number;
+    defaultSize?: number;
+    hashTagSize?: number;
+    isPreview?: boolean;
+    sxpParameter?: PageData['sxp_parameter'];
+    appDomain?: string;
+    loadingImage?: string;
+    isOpenHashTag?: boolean;
+}
+declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
+export default _default;

package/lib/core/context/SxpDataSourceProvider.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SxpDataSourceContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const qs_1 = tslib_1.__importDefault(require("qs"));
+const sessionStore_1 = require("../utils/sessionStore");
+const localStore_1 = require("../utils/localStore");
+const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
+exports.SxpDataSourceContext = (0, react_1.createContext)({
+    rtcList: []
+});
+var DataSourceType;
+(function (DataSourceType) {
+    DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
+})(DataSourceType || (DataSourceType = {}));
+const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
+const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false }) => {
+    const [rtcList, setRtcList] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [curReqInfo, setCurReqInfo] = (0, react_1.useState)({ rtc: '', requestId: '' });
+    const swiperRef = (0, react_1.useRef)(null);
+    const isInit = (0, react_1.useRef)(false);
+    const [popupDetailData, setPopupDetailData] = (0, react_1.useState)();
+    const [waterFallData, setWaterFallData] = (0, react_1.useState)();
+    const [openHashtag, setOpenHashtag] = (0, react_1.useState)(isOpenHashTag);
+    const [cacheRtcList, setCacheRtcList] = (0, react_1.useState)([]);
+    const [cacheActiveIndex, setCacheActiveIndex] = (0, react_1.useState)(0);
+    const [isFromHashtag, setIsFromHashtag] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setOpenHashtag(isOpenHashTag);
+    }, [isOpenHashTag]);
+    const bffDataSource = (0, react_1.useMemo)(() => {
+        return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
+    }, [dataSources]);
+    const bffFetch = (0, react_1.useCallback)((path, options) => {
+        if (!bffDataSource)
+            return;
+        const url = bffDataSource.url;
+        const fakeUserId = (0, localStore_1.storeAndLoadFeUserId)();
+        if (options === null || options === void 0 ? void 0 : options.query) {
+            const queryString = qs_1.default.stringify(options.query);
+            path = `${path}?${queryString}`;
+        }
+        if (options.type === 'beacon' && navigator.sendBeacon) {
+            return navigator.sendBeacon(`${url}/api/v1${path}`, new Blob([
+                JSON.stringify(Object.assign(Object.assign(Object.assign({}, bffDataSource.headers), { 'x-user-id': fakeUserId }), options.body))
+            ], { type: 'application/json;charset=UTF-8' }));
+        }
+        return window
+            .fetch(`${url}/api/v1${path}`, {
+            headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
+            method: options.method,
+            body: JSON.stringify(options.body)
+        })
+            .then((res) => res.json())
+            .catch((err) => Promise.reject(err));
+    }, [bffDataSource]);
+    const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d;
+        query = {
+            maxSize,
+            defaultSize: (_a = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _a !== void 0 ? _a : defaultSize,
+            'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
+            'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
+            hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
+            traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo
+        };
+        if (utmVal) {
+            const val = (_d = (_c = (_b = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _b === void 0 ? void 0 : _b.filter((val) => {
+                const key = val.split('=')[0];
+                return UTM_KEYS.includes(key);
+            })) === null || _c === void 0 ? void 0 : _c.join('&')) !== null && _d !== void 0 ? _d : '';
+            query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
+        }
+        const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
+        if (!(result === null || result === void 0 ? void 0 : result.success)) {
+            return undefined;
+        }
+        if (!(query === null || query === void 0 ? void 0 : query.hashTag))
+            setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
+        return result === null || result === void 0 ? void 0 : result.data;
+    }), [bffFetch, utmVal, maxSize, defaultSize]);
+    const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f;
+        if (rtcList.length <= 0) {
+            return;
+        }
+        const data = yield getRecommendVideos({
+            hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+            'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+            'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
+        });
+        setRtcList(rtcList.concat((_e = data === null || data === void 0 ? void 0 : data.recList) !== null && _e !== void 0 ? _e : []));
+        setCacheRtcList(cacheRtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
+    }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
+    const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
+        if (!enableReportEvent) {
+            return;
+        }
+        if (!userInfo) {
+            userInfo = {};
+        }
+        const sessionID = (0, sessionStore_1.storeAndLoadFeSessionId)();
+        const ef = Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo);
+        const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
+        const realEventInfo = Object.entries(ef)
+            .map(([k, v]) => v && { name: k, value: v })
+            .filter(Boolean);
+        console.log('======== 事件上报 ========');
+        console.log('userInfo:', userInfo);
+        console.log('eventInfo:', ef);
+        console.log('========= 结束 =========');
+        return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/event/report', {
+            method: 'POST',
+            body: { userInfo: realUserInfo, eventInfo: realEventInfo },
+            type: 'beacon'
+        });
+    }, [bffFetch, curReqInfo, enableReportEvent]);
+    const bffMutateLike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
+        return res === null || res === void 0 ? void 0 : res.success;
+    }), [bffFetch]);
+    const bffMutateUnlike = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/unlike', { method: 'POST', body }));
+        return res === null || res === void 0 ? void 0 : res.success;
+    }), [bffFetch]);
+    const bffSubmitForm = (0, react_1.useCallback)((body) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
+        return res === null || res === void 0 ? void 0 : res.success;
+    }), [bffFetch]);
+    const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const cta = product === null || product === void 0 ? void 0 : product.bindCta;
+        const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
+        let fromKName = '';
+        if (isFromHashtag) {
+            fromKName = 'hashTagPage';
+        }
+        else if ((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.url) {
+            fromKName = 'videoPage';
+        }
+        else if ((_g = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length) {
+            fromKName = 'imagePage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
+        });
+    }, [bffEventReport, isFromHashtag]);
+    (0, react_1.useEffect)(() => {
+        setLoading(true);
+        getRecommendVideos()
+            .then((data) => {
+            var _a, _b;
+            setRtcList((_a = data === null || data === void 0 ? void 0 : data.recList) !== null && _a !== void 0 ? _a : []);
+            setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
+        })
+            .finally(() => {
+            setLoading(false);
+            isInit.current = true;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!isInit.current)
+            return;
+        setLoading(true);
+        getRecommendVideos()
+            .then((data) => {
+            var _a, _b;
+            setRtcList((_a = data === null || data === void 0 ? void 0 : data.recList) !== null && _a !== void 0 ? _a : []);
+            setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
+        })
+            .finally(() => {
+            setLoading(false);
+        });
+    }, [getRecommendVideos]);
+    const defaultLoadingImage = (0, useIconLink_1.useIconLink)('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
+    return (react_1.default.createElement(exports.SxpDataSourceContext.Provider, { value: {
+            rtcList,
+            setRtcList,
+            mutateLike: bffMutateLike,
+            mutateUnlike: bffMutateUnlike,
+            submitForm: bffSubmitForm,
+            popupDetailData,
+            loadVideos,
+            setPopupDetailData,
+            getRecommendVideos,
+            bffEventReport,
+            utmVal,
+            isPreview,
+            loading,
+            sxpParameter,
+            waterFallData,
+            setWaterFallData,
+            ctaEvent,
+            swiperRef,
+            openHashtag,
+            setOpenHashtag,
+            cacheRtcList,
+            setCacheRtcList,
+            cacheActiveIndex,
+            setCacheActiveIndex,
+            isFromHashtag,
+            setIsFromHashtag,
+            appDomain,
+            hashTagSize,
+            loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
+            isOpenHashTag
+        } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
+};
+exports.default = (0, react_1.memo)(SxpDataSourceProvider);

package/lib/core/create.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { DATA_TYPE } from './hooks';
+export interface IMaterialOptions<T> {
+    displayName: string;
+    icon: React.ReactNode;
+    category: string;
+    type: string;
+    related?: {
+        settingRender?: Record<string, any>;
+        bindableProps?: Array<{
+            label: string;
+            value: keyof T;
+            dataType: Array<DATA_TYPE>;
+        }>;
+        [key: string]: any;
+    };
+    h?: number;
+    w?: number;
+    disableDragging?: boolean;
+    isFirstLayout?: boolean;
+    defaulSetting?: defaulSettingProps<T>;
+    defaulMobileSetting?: defaulSettingProps<T>;
+    mobileH?: number;
+    mobileW?: number;
+    sort: number;
+}
+type defaulSettingProps<T> = {
+    style?: React.CSSProperties;
+    props?: T;
+    textStyle?: React.CSSProperties;
+    name?: string;
+};
+export type MaterialComponet<T = any> = React.ComponentType<T> & {
+    extend?: IMaterialOptions<T>;
+};
+export declare function createMaterial<T>(component: MaterialComponet<T>, options: IMaterialOptions<T>): MaterialComponet<T>;
+export {};

package/lib/core/create.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMaterial = void 0;
+function createMaterial(component, options) {
+    component.extend = options;
+    return component;
+}
+exports.createMaterial = createMaterial;

package/lib/core/hoc/withBindDataSource.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IMaterialOptions } from '../create';
+declare function withBindDataSource(Component: any): React.NamedExoticComponent<any> & {
+    extend?: IMaterialOptions<any>;
+};
+export default withBindDataSource;