pb-sxp-ui 1.0.4 → 1.0.6

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

@@ -7,10 +7,10 @@ const hooks_1 = require("../../../../core/hooks");
 const withBindDataSource_1 = tslib_1.__importDefault(require("../../../../core/hoc/withBindDataSource"));
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Popup = () => {
-    const { schema, resolver, popup, popupAni } = (0, hooks_1.useEditor)();
+    const { schema, resolver, popup } = (0, hooks_1.useEditor)();
     const { setPopupDetailData, popupDetailData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
     const { productView } = (0, useEventReport_1.useEventReport)();
-    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [visible, setVisible] = (0, react_1.useState)();
     const curTimeRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const initTime = () => {
@@ -23,33 +23,33 @@ const Popup = () => {
         };
     }, []);
     (0, react_1.useEffect)(() => {
-        if (popup && popup !== '') {
+        if (popup && (popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') {
             curTimeRef.current = new Date();
-            setVisible(true);
+            setVisible(popup);
         }
     }, [popup]);
     const handleClose = () => {
-        var _a, _b, _c;
-        if (!popup || popup === '' || !visible || new Date() - curTimeRef.current < (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
+        var _a, _b, _c, _d;
+        if (!popup || (popup === null || popup === void 0 ? void 0 : popup.id) === '' || !visible || new Date() - curTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
             return;
         }
-        setVisible(false);
+        setVisible(Object.assign(Object.assign({}, popup), { id: '' }));
         const data = popupDetailData;
-        const product = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct;
-        const cta = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.bindCta;
+        const product = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+        const cta = (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
         if (product && cta) {
             productView(data, product, cta, curTimeRef.current);
         }
         setTimeout(() => {
             window === null || window === void 0 ? void 0 : window.sxpPopup('');
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
-        }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
     };
     const renderPopupDetail = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
-            if ((value === null || value === void 0 ? void 0 : value.id) === popup) {
+            if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
                 const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                 const Component = (0, withBindDataSource_1.default)(t);
                 const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
@@ -60,6 +60,6 @@ const Popup = () => {
             }
         });
     }, [schema, popup, resolver]);
-    return (react_1.default.createElement(Modal_1.default, { visible: !!visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
+    return (react_1.default.createElement(Modal_1.default, { popup: visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
 };
 exports.default = Popup;

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -147,7 +147,6 @@ const WaterfallFlowItem = (props) => {
 function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h;
     var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
-    const { popupAni } = (0, hooks_1.useEditor)();
     const { waterFallData, getRecommendVideos, loadingImage } = (0, hooks_1.useSxpDataSource)();
     const scrollParent = (0, react_1.useRef)(null);
     const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
@@ -165,7 +164,7 @@ function WaterfallList(_a) {
     const [frameInfo, setFrameInfoInfo] = (0, react_1.useState)({ width: 0 });
     const rowsNum = (0, react_1.useMemo)(() => {
         const width = frameInfo.width || 0;
-        if (width >= (popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration)) {
+        if (width >= 1200) {
             return 6;
         }
         else if (width >= 768 && width <= 1199) {
@@ -174,7 +173,7 @@ function WaterfallList(_a) {
         else {
             return 2;
         }
-    }, [frameInfo, popupAni]);
+    }, [frameInfo]);
     const unitWidth = (0, react_1.useMemo)(() => {
         return frameInfo.width / rowsNum - 2;
     }, [rowsNum, frameInfo]);

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

@@ -69,7 +69,7 @@ const WaterFall = (props) => {
                 relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                 position: rec === null || rec === void 0 ? void 0 : rec.position,
                 contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
-                traceInfo: JSON.stringify((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo),
+                traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
                 hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
                 fromKName,
                 fromKPage: location === null || location === void 0 ? void 0 : location.href,

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

@@ -16,9 +16,12 @@ export interface IPageParams {
     mp_rul?: string;
 }
 export type IPopupAniType = {
-    name: string;
-    duration: number;
+    name?: string;
+    duration?: number;
 };
+export type IPopupType = {
+    id: string;
+} & IPopupAniType;
 export interface IEditorContext {
     resolver: Record<string, MaterialComponet>;
     currentNode: any | null;
@@ -57,9 +60,8 @@ export interface IEditorContext {
     setUndoStack?: React.Dispatch<React.SetStateAction<any[]>>;
     setRedoStack?: React.Dispatch<React.SetStateAction<any[]>>;
     getCurPageConf?: any;
-    popup: string;
-    setPopup: React.Dispatch<React.SetStateAction<string>>;
-    popupAni: IPopupAniType;
+    popup: IPopupType;
+    setPopup: React.Dispatch<React.SetStateAction<IPopupType>>;
 }
 export interface IEditorCoreProps {
     resolver: Record<string, MaterialComponet>;

package/lib/core/context/EditorContext.js

@@ -29,6 +29,11 @@ const item = {
     pathArr: [0],
     positionY: 0
 };
+const popupInit = {
+    id: '',
+    duration: 0,
+    name: 'none'
+};
 exports.EditorContext = react_1.default.createContext({
     resolver: {},
     currentNode: null,
@@ -48,12 +53,8 @@ exports.EditorContext = react_1.default.createContext({
     prePiontData: [],
     undoStack: [item],
     redoStack: [],
-    popup: '',
-    setPopup: () => { },
-    popupAni: {
-        name: 'none',
-        duration: 0
-    }
+    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);
@@ -71,25 +72,10 @@ const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema,
     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)('');
-    const [popupAni, setPopupAni] = (0, react_1.useState)({
-        name: 'none',
-        duration: 0
-    });
+    const [popup, setPopup] = (0, react_1.useState)(popupInit);
     typeof window !== 'undefined' &&
         (window.sxpPopup = (type, aniType) => {
-            if (aniType && (aniType === null || aniType === void 0 ? void 0 : aniType.name) !== 'none') {
-                setPopupAni(Object.assign(Object.assign({}, popupAni), aniType));
-            }
-            else {
-                setPopupAni({
-                    name: 'none',
-                    duration: 0
-                });
-            }
-            setTimeout(() => {
-                setPopup(type);
-            });
+            setPopup(Object.assign(Object.assign(Object.assign({}, popupInit), { id: type }), aniType));
         });
     typeof window !== 'undefined' &&
         (window.getJointUtmLink = (url) => {
@@ -158,8 +144,7 @@ const EditorCore = (0, react_1.forwardRef)(({ children, resolver, isSsr, schema,
             setUndoStack,
             getCurPageConf,
             popup,
-            setPopup,
-            popupAni
+            setPopup
         } },
         react_1.default.createElement(DataSourceProvider_1.default, { isSsr: isSsr, enable: enableDataSource }, children)));
 });

package/lib/core/hooks/useEventReport.js

@@ -23,23 +23,25 @@ function useEventReport() {
         else if (data === null || data === void 0 ? void 0 : data.product) {
             fromKName = 'productPage';
         }
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'jumpToWeb',
-                eventDescription: 'User jumped to website',
-                productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
-                productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
-                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
-                position: (data === null || data === void 0 ? void 0 : data.position) + '',
-                relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
-                traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
-            }
-        });
+        if (product === null || product === void 0 ? void 0 : product.price) {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'jumpToWeb',
+                    eventDescription: 'User jumped to website',
+                    productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
+                    productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
+                    price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                    productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
+                    fromKName,
+                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                    contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                    position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                    relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                    relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                    traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
+                }
+            });
+        }
     }, [bffEventReport, popupDetailData, isFromHashtag]);
     const productView = (0, react_1.useCallback)((data, product, cta, viewTime) => {
         var _a, _b, _c, _d;
@@ -50,24 +52,26 @@ function useEventReport() {
         else if (data === null || data === void 0 ? void 0 : data.product) {
             fromKName = 'productPage';
         }
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                productId: product === null || product === void 0 ? void 0 : product.itemId,
-                productName: product === null || product === void 0 ? void 0 : product.title,
-                price: (product === null || product === void 0 ? void 0 : product.price) + '',
-                productCollection: product === null || product === void 0 ? void 0 : product.collection,
-                fromKName,
-                fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
-                position: (data === null || data === void 0 ? void 0 : data.position) + '',
-                relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
-                traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
-                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
-                eventSubject: 'productView',
-                eventDescription: 'User browsed the product'
-            }
-        });
+        if (product === null || product === void 0 ? void 0 : product.price) {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    productId: product === null || product === void 0 ? void 0 : product.itemId,
+                    productName: product === null || product === void 0 ? void 0 : product.title,
+                    price: (product === null || product === void 0 ? void 0 : product.price) + '',
+                    productCollection: product === null || product === void 0 ? void 0 : product.collection,
+                    fromKName,
+                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                    contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
+                    position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                    relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                    traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
+                    timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                    eventSubject: 'productView',
+                    eventDescription: 'User browsed the product'
+                }
+            });
+        }
     }, [bffEventReport, popupDetailData]);
     return {
         jumpToWeb,

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -9,7 +9,6 @@ const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const AppointForm = (_a) => {
     var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick"]);
-    const { setPopup } = (0, hooks_1.useEditor)();
     const { submitForm } = (0, hooks_1.useSxpDataSource)();
     const formRef = (0, react_1.useRef)();
     const [loading, setLoading] = (0, react_1.useState)(false);

package/lib/materials/sxp/popup/Prompt/index.js

@@ -5,11 +5,9 @@ const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
 const success_png_1 = tslib_1.__importDefault(require("./success.png"));
 const materials_1 = require("../../../../core/utils/materials");
-const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
 const Prompt = (_a) => {
     var { content, btnText, style, icon, onClick } = _a, props = tslib_1.__rest(_a, ["content", "btnText", "style", "icon", "onClick"]);
-    const { setPopup } = (0, hooks_1.useEditor)();
     const iconSrc = typeof icon === 'string' ? icon : (0, materials_1.getMediaValueByMode)(icon);
     const handleOk = () => {
         window === null || window === void 0 ? void 0 : window.sxpPopup('');

package/lib/materials/sxp/template/MultiCommodity/index.js

@@ -15,26 +15,25 @@ const MultiCommodity = (_a) => {
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
-    const { popupAni } = (0, hooks_1.useEditor)();
+    const { popup } = (0, hooks_1.useEditor)();
     const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const handleClick = (0, lodash_1.throttle)((item) => {
-        var _a;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
         if (isExternalLink) {
-            if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+            if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta);
-                window.location.href = item.bindCta.link;
+                window.location.href = item.link;
             }
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-    }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),

package/lib/materials/sxp/template/MultiCommodityDiro/index.js

@@ -14,26 +14,25 @@ const MultiCommodityDiro = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const { popupAni } = (0, hooks_1.useEditor)();
+    const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     const handleClick = (0, lodash_1.throttle)((item) => {
-        var _a;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
         if (isExternalLink) {
-            if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+            if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta);
-                window.location.href = item.bindCta.link;
+                window.location.href = item.link;
             }
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-    }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),

package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -14,26 +14,25 @@ const MultiCommodityDiroNew = (_a) => {
     var _b, _c;
     var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink"]);
     const { ctaEvent, setPopupDetailData, sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const { popupAni } = (0, hooks_1.useEditor)();
+    const { popup } = (0, hooks_1.useEditor)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const [products, setProducts] = (0, react_1.useState)((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
     const handleClick = (0, lodash_1.throttle)((item) => {
-        var _a;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, recData, item);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }) }));
         if (isExternalLink) {
-            if ((_a = item === null || item === void 0 ? void 0 : item.bindCta) === null || _a === void 0 ? void 0 : _a.link) {
+            if (item === null || item === void 0 ? void 0 : item.link) {
                 jumpToWeb(recData, item, item.bindCta);
-                window.location.href = item.bindCta.link;
+                window.location.href = item.link;
             }
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-    }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement(Scroll_1.default, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),

package/lib/materials/sxp/template/components/EventProvider.js

@@ -10,7 +10,7 @@ const EventProvider = (_a) => {
     var { rec, children, className, onClick, style, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink"]);
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
-    const { popupAni } = (0, hooks_1.useEditor)();
+    const { popup } = (0, hooks_1.useEditor)();
     const { setPopupDetailData, ctaEvent } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
     (0, react_1.useEffect)(() => {
@@ -32,17 +32,17 @@ const EventProvider = (_a) => {
         }, rec, item);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(rec);
         if (isExternalLink) {
-            if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta) === null || _d === void 0 ? void 0 : _d.link) {
+            if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
                 const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
                 const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
                 jumpToWeb(rec, product, cta);
-                window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.link;
+                window.location.href = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link;
             }
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-    }, popupAni === null || popupAni === void 0 ? void 0 : popupAni.duration);
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (react_1.default.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
 };
 exports.default = (0, react_1.memo)(EventProvider);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../typing';
-interface IProductInfoProps {
-    data: RecItemType;
-    height: number;
-    width: number;
-    viewTime: any;
-    tipText?: {
-        foldText?: string;
-        unfoldText?: string;
-    };
-}
-declare const _default: React.NamedExoticComponent<IProductInfoProps>;
-export default _default;

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

@@ -1,55 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { Pagination, Autoplay } from 'swiper/modules';
-import { SwiperSlide, Swiper } from 'swiper/react';
-import ExpandableText from '../ExpandableText';
-import Modal from '../Modal';
-import { useEventReport } from '../../../../core/hooks/useEventReport';
-const ProductInfo = ({ data, height, width, viewTime, tipText }) => {
-    var _a, _b;
-    const product = data === null || data === void 0 ? void 0 : data.product;
-    const cta = (_a = data === null || data === void 0 ? void 0 : data.product) === null || _a === void 0 ? void 0 : _a.bindCta;
-    const [showModal, setShowModal] = useState(false);
-    const { jumpToWeb } = useEventReport();
-    const priceText = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
-        }
-        else {
-            return '$7,000';
-        }
-    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const handleLInk = (link) => {
-        if (link) {
-            jumpToWeb(data, product, cta);
-            window.location.href = window.getJointUtmLink(link);
-        }
-    };
-    return (React.createElement("div", { style: { height, width: '100%' } },
-        React.createElement(Swiper, { height: height * 0.5, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
-                delay: 3000
-            } }, (_b = product === null || product === void 0 ? void 0 : product.homePage) === null || _b === void 0 ? void 0 : _b.map((src) => {
-            return (React.createElement(SwiperSlide, { key: src },
-                React.createElement("div", { style: {
-                        overflow: 'hidden',
-                        width,
-                        height: height * 0.5
-                    } },
-                    React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
-        })),
-        React.createElement("div", { className: 'product-info' },
-            React.createElement("div", { className: 'collection' }, product === null || product === void 0 ? void 0 : product.collection),
-            React.createElement("div", { className: 'title' }, product === null || product === void 0 ? void 0 : product.title),
-            React.createElement("div", { className: 'price' }, priceText),
-            React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), className: 'info', text: (product === null || product === void 0 ? void 0 : product.info) || '', maxStr: 79 }),
-            React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)),
-        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
-            React.createElement("div", { className: 'modal-collection' }, product === null || product === void 0 ? void 0 : product.collection),
-            React.createElement("div", { className: 'modal-title' }, product === null || product === void 0 ? void 0 : product.title),
-            React.createElement("div", { className: 'modal-price' }, priceText),
-            React.createElement("div", { className: 'modal-info' }, product === null || product === void 0 ? void 0 : product.info),
-            (product === null || product === void 0 ? void 0 : product.link) && (React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)))));
-};
-export default React.memo(ProductInfo);

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../typing';
-interface IProductInfoProps {
-    data: RecItemType;
-    height: number;
-    width: number;
-    viewTime: any;
-    tipText?: {
-        foldText?: string;
-        unfoldText?: string;
-    };
-}
-declare const _default: React.NamedExoticComponent<IProductInfoProps>;
-export default _default;

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

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const modules_1 = require("swiper/modules");
-const react_2 = require("swiper/react");
-const ExpandableText_1 = tslib_1.__importDefault(require("../ExpandableText"));
-const Modal_1 = tslib_1.__importDefault(require("../Modal"));
-const useEventReport_1 = require("../../../../core/hooks/useEventReport");
-const ProductInfo = ({ data, height, width, viewTime, tipText }) => {
-    var _a, _b;
-    const product = data === null || data === void 0 ? void 0 : data.product;
-    const cta = (_a = data === null || data === void 0 ? void 0 : data.product) === null || _a === void 0 ? void 0 : _a.bindCta;
-    const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    const priceText = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e;
-        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
-        }
-        else {
-            return '$7,000';
-        }
-    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const handleLInk = (link) => {
-        if (link) {
-            jumpToWeb(data, product, cta);
-            window.location.href = window.getJointUtmLink(link);
-        }
-    };
-    return (react_1.default.createElement("div", { style: { height, width: '100%' } },
-        react_1.default.createElement(react_2.Swiper, { height: height * 0.5, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
-                delay: 3000
-            } }, (_b = product === null || product === void 0 ? void 0 : product.homePage) === null || _b === void 0 ? void 0 : _b.map((src) => {
-            return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
-                react_1.default.createElement("div", { style: {
-                        overflow: 'hidden',
-                        width,
-                        height: height * 0.5
-                    } },
-                    react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
-        })),
-        react_1.default.createElement("div", { className: 'product-info' },
-            react_1.default.createElement("div", { className: 'collection' }, product === null || product === void 0 ? void 0 : product.collection),
-            react_1.default.createElement("div", { className: 'title' }, product === null || product === void 0 ? void 0 : product.title),
-            react_1.default.createElement("div", { className: 'price' }, priceText),
-            react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), className: 'info', text: (product === null || product === void 0 ? void 0 : product.info) || '', maxStr: 79 }),
-            react_1.default.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)),
-        react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
-            react_1.default.createElement("div", { className: 'modal-collection' }, product === null || product === void 0 ? void 0 : product.collection),
-            react_1.default.createElement("div", { className: 'modal-title' }, product === null || product === void 0 ? void 0 : product.title),
-            react_1.default.createElement("div", { className: 'modal-price' }, priceText),
-            react_1.default.createElement("div", { className: 'modal-info' }, product === null || product === void 0 ? void 0 : product.info),
-            (product === null || product === void 0 ? void 0 : product.link) && (react_1.default.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)))));
-};
-exports.default = react_1.default.memo(ProductInfo);