pb-sxp-ui 1.0.0

package/es/core/context/EditorContext.js

@@ -0,0 +1,142 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useMemo } from 'react';
+import { cloneDeep } from 'lodash';
+import DataSourceProvider from './DataSourceProvider';
+import { uuid } from '../../core/utils/tool';
+const item = {
+    id: 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
+};
+export const EditorContext = React.createContext({
+    resolver: {},
+    currentNode: null,
+    schema: {
+        pointData: [],
+        dataSource: [],
+        mobilePiontData: [],
+        type: 'PC',
+        pcPiontData: [],
+        pageInfo: {},
+        pcPageConf: {},
+        mobilePageConf: {},
+        __STORE__: {},
+        sxpPageConf: {}
+    },
+    pageInfoData: {},
+    prePiontData: [],
+    undoStack: [item],
+    redoStack: [],
+    popup: '',
+    setPopup: () => { }
+});
+const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSource = true, utmVal }, ref) => {
+    const [currentNode, setCurrentNode] = useState(null);
+    const [_schema, setSchema] = useState(schema || {
+        pointData: [item],
+        dataSource: [],
+        mobilePiontData: [],
+        type: 'PC',
+        pcPiontData: [],
+        pageInfo: {},
+        pcPageConf: {},
+        mobilePageConf: {},
+        sxpPageConf: {}
+    });
+    const [prePiontData, setPrePiontData] = useState([item]);
+    const [undoStack, setUndoStack] = useState([[item]]);
+    const [redoStack, setRedoStack] = useState([]);
+    const [popup, setPopup] = useState('');
+    typeof window !== 'undefined' &&
+        (window.sxpPopup = (type) => {
+            setPopup(type);
+        });
+    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 : '');
+            }
+        });
+    useEffect(() => {
+        setUndoStack([_schema.pointData]);
+        setRedoStack([]);
+    }, [_schema.type]);
+    const saveDataSource = useCallback((dataSource) => {
+        const schema = cloneDeep(_schema);
+        if (!schema)
+            return;
+        schema.dataSource = dataSource;
+        setSchema === null || setSchema === void 0 ? void 0 : setSchema(schema);
+    }, [_schema]);
+    const [_pageInfoData, _setPageInfoData] = useState();
+    useImperativeHandle(ref, () => ({
+        loadSchema(schema) {
+            if (schema) {
+                setUndoStack([schema.pointData]);
+                setSchema(schema);
+            }
+        },
+        exportSchema() {
+            return cloneDeep(_schema);
+        },
+        getPageInfoData() {
+            return _pageInfoData;
+        },
+        initPageInfoData(pageData) {
+            if (pageData) {
+                _setPageInfoData(pageData);
+            }
+        }
+    }));
+    const getCurPageConf = useMemo(() => {
+        if (!_schema)
+            return;
+        if (_schema.type === 'PC') {
+            return _schema.pcPageConf;
+        }
+        else {
+            return _schema.mobilePageConf;
+        }
+    }, [_schema]);
+    return (React.createElement(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.createElement(DataSourceProvider, { isSsr: isSsr, enable: enableDataSource }, children)));
+});
+export { EditorCore };

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

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

package/es/core/context/EditorDataProvider.js

@@ -0,0 +1,20 @@
+import React, { createContext, useContext } from 'react';
+const EditorDataContext = createContext({});
+const EditorDataProvider = ({ children, data }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return (React.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
+        } }, children));
+};
+export function useEditorDataProvider() {
+    return useContext(EditorDataContext);
+}
+export default EditorDataProvider;

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

@@ -0,0 +1,90 @@
+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;
+    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) => 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;
+}
+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;
+}
+declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
+export default _default;

package/es/core/context/SxpDataSourceProvider.js

@@ -0,0 +1,204 @@
+import { __awaiter } from "tslib";
+import React, { createContext, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import qs from 'qs';
+import { storeAndLoadFeSessionId } from '../utils/sessionStore';
+import { storeAndLoadFeUserId } from '../utils/localStore';
+import { useIconLink } from '../components/SxpPageRender/useIconLink';
+export const SxpDataSourceContext = 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 }) => {
+    const [rtcList, setRtcList] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
+    const swiperRef = useRef(null);
+    const isInit = useRef(false);
+    const [popupDetailData, setPopupDetailData] = useState();
+    const [waterFallData, setWaterFallData] = useState();
+    const [openHashtag, setOpenHashtag] = useState(false);
+    const [cacheRtcList, setCacheRtcList] = useState([]);
+    const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
+    const [isFromHashtag, setIsFromHashtag] = useState(false);
+    const bffDataSource = useMemo(() => {
+        return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
+    }, [dataSources]);
+    const bffFetch = useCallback((path, options) => {
+        if (!bffDataSource)
+            return;
+        const url = bffDataSource.url;
+        const fakeUserId = storeAndLoadFeUserId();
+        if (options === null || options === void 0 ? void 0 : options.query) {
+            const queryString = qs.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 = useCallback((query) => __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 = useCallback(() => __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 = useCallback(({ userInfo, eventInfo }) => {
+        if (!enableReportEvent) {
+            return;
+        }
+        if (!userInfo) {
+            userInfo = {};
+        }
+        const sessionID = 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 = useCallback((body) => __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 = useCallback((body) => __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 = useCallback((body) => __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 = useCallback((eventInfo, rec, product) => {
+        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: rec === null || rec === void 0 ? void 0 : rec.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]);
+    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;
+        });
+    }, []);
+    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 = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif');
+    return (React.createElement(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
+        } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
+};
+export default memo(SxpDataSourceProvider);

package/es/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/es/core/create.js

@@ -0,0 +1,4 @@
+export function createMaterial(component, options) {
+    component.extend = options;
+    return component;
+}

package/es/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;

package/es/core/hoc/withBindDataSource.js

@@ -0,0 +1,61 @@
+import { __rest } from "tslib";
+import { get, cloneDeep } from 'lodash';
+import React, { memo, useMemo } from 'react';
+import { useDataSource } from '../hooks';
+function withBindDataSource(Component) {
+    return memo(function (props) {
+        const { $store } = useDataSource();
+        const handleDataSourceByEvent = (value) => {
+            let res = value;
+            const dataArr = value.match(/{{.*?}}/g);
+            if (dataArr === null || dataArr === void 0 ? void 0 : dataArr.length) {
+                dataArr.forEach((item) => {
+                    item.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
+                        if (p) {
+                            const v = get($store, p);
+                            res = res.replace(item, v);
+                            return v;
+                        }
+                    });
+                });
+            }
+            return res;
+        };
+        const clonedProps = useMemo(() => {
+            var _a, _b, _c;
+            const { bindDatas } = props, cloneProps = __rest(props, ["bindDatas"]);
+            (_a = bindDatas === null || bindDatas === void 0 ? void 0 : bindDatas.forEach) === null || _a === void 0 ? void 0 : _a.call(bindDatas, (d) => {
+                if ((d === null || d === void 0 ? void 0 : d.propKey) && (d === null || d === void 0 ? void 0 : d.dataPath)) {
+                    const { propKey, dataPath } = d;
+                    dataPath.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
+                        var _a, _b;
+                        if (p) {
+                            const v = (_b = (_a = get($store, p)) !== null && _a !== void 0 ? _a : props[propKey]) !== null && _b !== void 0 ? _b : '';
+                            cloneProps[propKey] = v;
+                            return v;
+                        }
+                    });
+                }
+            });
+            if (cloneProps) {
+                cloneProps.eventMap = {};
+                const eventObj = cloneDeep(cloneProps.event) || {};
+                for (const key in eventObj) {
+                    if (Object.prototype.hasOwnProperty.call(eventObj, key)) {
+                        try {
+                            eventObj[key].value = handleDataSourceByEvent(eventObj[key].value);
+                            cloneProps.eventMap[key] = new Function(eventObj[key].value);
+                        }
+                        catch (error) { }
+                    }
+                }
+            }
+            if ((_c = (_b = cloneProps === null || cloneProps === void 0 ? void 0 : cloneProps.event) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.linkType) {
+                cloneProps.style.cursor = 'pointer';
+            }
+            return cloneProps;
+        }, [$store, props]);
+        return React.createElement(Component, Object.assign({}, clonedProps, clonedProps.eventMap));
+    });
+}
+export default withBindDataSource;

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

@@ -0,0 +1,4 @@
+export * from './useEditor';
+export * from './useDataSource';
+export * from './useSxpDataSource';
+export * from './useCurrentNode';

package/es/core/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useEditor';
+export * from './useDataSource';
+export * from './useSxpDataSource';
+export * from './useCurrentNode';

package/es/core/hooks/useCurrentNode.d.ts

@@ -0,0 +1,10 @@
+export declare enum DATA_TYPE {
+    STRING = "string",
+    NUMBER = "number",
+    ARRAY = "array",
+    OBJECT = "object",
+    BOOLEAN = "boolean",
+    ARRAY_OBJECT = "array-object",
+    ARRAY_STRING = "array-string",
+    ARRAY_NUMBER = "array-number"
+}

package/es/core/hooks/useCurrentNode.js

@@ -0,0 +1,11 @@
+export var DATA_TYPE;
+(function (DATA_TYPE) {
+    DATA_TYPE["STRING"] = "string";
+    DATA_TYPE["NUMBER"] = "number";
+    DATA_TYPE["ARRAY"] = "array";
+    DATA_TYPE["OBJECT"] = "object";
+    DATA_TYPE["BOOLEAN"] = "boolean";
+    DATA_TYPE["ARRAY_OBJECT"] = "array-object";
+    DATA_TYPE["ARRAY_STRING"] = "array-string";
+    DATA_TYPE["ARRAY_NUMBER"] = "array-number";
+})(DATA_TYPE || (DATA_TYPE = {}));

package/es/core/hooks/useDataSource.d.ts

@@ -0,0 +1,2 @@
+declare function useDataSource(): import("../context/DataSourceProvider").IDataSourceContext;
+export { useDataSource };

package/es/core/hooks/useDataSource.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { DataSourceContext } from '../context/DataSourceProvider';
+function useDataSource() {
+    return useContext(DataSourceContext);
+}
+export { useDataSource };

package/es/core/hooks/useEditor.d.ts

@@ -0,0 +1 @@
+export declare function useEditor(): import("../context/EditorContext").IEditorContext;

package/es/core/hooks/useEditor.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { EditorContext } from '../context/EditorContext';
+export function useEditor() {
+    return useContext(EditorContext);
+}

package/es/core/hooks/useEventReport.d.ts

@@ -0,0 +1,5 @@
+import { RecItemType } from '../components/SxpPageRender/typing';
+export declare function useEventReport(): {
+    jumpToWeb: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta']) => void;
+    productView: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], viewTime?: any) => void;
+};