pb-sxp-ui 1.2.1 → 1.2.2

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

@@ -37,6 +37,9 @@ export interface ISxpPageRenderProps {
         swipeTipOffset?: number;
         consent?: any[];
         videoPlayIcon?: string;
+        isShowMute?: boolean;
+        bottomInfoDist?: number;
+        swiperTipAniDur?: number;
         popupCloseIcon?: string;
         openSlideSkip?: boolean;
         slideSkipStartTime?: number;

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

@@ -223,18 +223,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             };
     }, [isShowMore]);
     const renderBottom = (0, react_1.useCallback)((rec, index) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
+                react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
                     react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
                     (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
                         react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
+                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
                         react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
-                        react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
+                        react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
                 react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
         }
         return null;
@@ -412,7 +412,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } })));
         }
         return visList === null || visList === void 0 ? void 0 : visList.map((rec, index) => {
-            return (react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index }, rec && (react_1.default.createElement(react_1.default.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (react_1.default.createElement("div", { style: {
+            return (react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden' } }, rec && (react_1.default.createElement(react_1.default.Fragment, null, (rec === null || rec === void 0 ? void 0 : rec.loading) ? (react_1.default.createElement("div", { style: {
                     height,
                     width: containerWidth,
                     display: 'flex',
@@ -435,7 +435,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                 top: minusHeight
             } }),
-        isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
+        isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
         react_1.default.createElement(react_2.Swiper, { style: {
                 marginTop: tagHeight
             }, ref: swiperRef, onSlideChange: () => {
@@ -459,13 +459,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 }
             }, direction: 'vertical', height: height },
-            react_1.default.createElement(ToggleButton_1.default, { style: {
+            ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
                     position: 'fixed',
                     visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
                     zIndex: 999,
                     [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
                     [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+                }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })),
             renderView),
         react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
 };

package/lib/materials/sxp/HashTag/material.js

@@ -21,7 +21,8 @@ const HashTag = (0, create_1.createMaterial)(_1.default, {
             textStyles: {
                 hashTagTitle: {
                     fontSize: 16,
-                    color: '#000'
+                    color: '#000',
+                    textAlign: 'center'
                 },
                 hashTagDesc: {
                     fontSize: 12,

package/lib/materials/sxp/cta/AniLink/index.js

@@ -9,16 +9,17 @@ const tool_1 = require("../../../../core/utils/tool");
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const AniLink = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
     const { ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
+    const [visible, setVisible] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const isOnScreen = (0, useOnScreen_1.default)(ref);
     const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
     const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
     const handleTo = () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
@@ -26,12 +27,18 @@ const AniLink = (_a) => {
         }, recData, item, index);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            jumpToWeb(recData, product, cta, index);
+            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
+            if (link) {
+                jumpToWeb(recData, product, cta, index);
+                window.location.href = window.getJointUtmLink(link);
+            }
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
-    const aniStyle = (0, react_1.useMemo)(() => {
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const aniTimStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
         const ani = event === null || event === void 0 ? void 0 : event.animation;
         if (ani) {
@@ -53,9 +60,18 @@ const AniLink = (_a) => {
             }, recData, product, index);
         }
     }, [isOnScreen]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { display: 'flex', alignItems: 'center' }) }, props, { className: `${index_module_less_1.default['animated-button']} ${(0, css_1.css)(aniStyle)}`, onClick: handleTo }),
-        react_1.default.createElement("div", { className: 'one-line-ellipsis', style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
-                __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-            } })));
+    (0, react_1.useEffect)(() => {
+        if (isOnScreen) {
+            setVisible(true);
+        }
+    }, [isOnScreen]);
+    const aniNamStyle = (0, react_1.useMemo)(() => {
+        if (!visible)
+            return null;
+        return index_module_less_1.default['animated-button'];
+    }, [visible]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign(Object.assign({}, style), ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: `${(_l = style === null || style === void 0 ? void 0 : style.height) !== null && _l !== void 0 ? _l : 0}px` }) }, props, { className: `${aniNamStyle} ${(0, css_1.css)(aniTimStyle)} one-line-ellipsis`, onClick: handleTo, dangerouslySetInnerHTML: {
+            __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+        } })));
 };
 exports.default = (0, react_1.memo)(AniLink);

package/lib/materials/sxp/cta/AniLinkPopup/index.js

@@ -8,17 +8,22 @@ const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Img_1 = tslib_1.__importDefault(require("../../template/components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
 const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
+const useOnScreen_1 = tslib_1.__importDefault(require("../../../../core/hooks/useOnScreen"));
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const AniLinkPopup = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
+    style === null || style === void 0 ? true : delete style.transform;
     const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    const [visible, setVisible] = (0, react_1.useState)(true);
+    const ref = (0, react_1.useRef)(null);
+    const isOnScreen = (0, useOnScreen_1.default)(ref);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [startAni, setStartAni] = (0, react_1.useState)(true);
     const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
     const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
     const handleTo = () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
@@ -26,42 +31,54 @@ const AniLinkPopup = (_a) => {
         }, recData, item, index);
         setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
         if (isExternalLink) {
-            jumpToWeb(recData, product, cta, index);
+            const link = (product === null || product === void 0 ? void 0 : product.link) || ((_d = item === null || item === void 0 ? void 0 : item.bindCta) === null || _d === void 0 ? void 0 : _d.link);
+            if (link) {
+                jumpToWeb(recData, product, cta, index);
+                window.location.href = window.getJointUtmLink(link);
+            }
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
         }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
-    const aniStyle = (0, react_1.useMemo)(() => {
-        var _a, _b;
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const aniTimStyle = (0, react_1.useMemo)(() => {
         const ani = event === null || event === void 0 ? void 0 : event.animation;
         if (ani) {
-            const { delay, duration, backgroundColor } = ani;
+            const { delay, duration } = ani;
             return {
-                ':after': {
-                    animationDelay: `${(_a = delay / 1000) !== null && _a !== void 0 ? _a : 0}s`,
-                    animationDuration: `${(_b = duration / 1000) !== null && _b !== void 0 ? _b : 0}s`,
-                    backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent'}`
-                }
+                animationDelay: `${delay ? delay / 1000 : 0}s`,
+                animationDuration: `${duration ? duration / 1000 : 0}s`
             };
         }
     }, [event === null || event === void 0 ? void 0 : event.animation]);
     const src = (_q = (_p = (_o = (_l = product === null || product === void 0 ? void 0 : product.cover) !== null && _l !== void 0 ? _l : (_m = product === null || product === void 0 ? void 0 : product.homePage) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _p !== void 0 ? _p : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _q !== void 0 ? _q : bottom_image;
     const onClose = (event) => {
         event.stopPropagation();
-        setVisible(false);
+        setStartAni(false);
     };
+    (0, react_1.useEffect)(() => {
+        if (isOnScreen) {
+            setVisible(true);
+        }
+    }, [isOnScreen]);
+    const aniNamStyle = (0, react_1.useMemo)(() => {
+        if (!visible)
+            return null;
+        return startAni ? index_module_less_1.default['animated-fadeIn'] : index_module_less_1.default['animated-fadeOut'];
+    }, [visible, startAni]);
     return (react_1.default.createElement(react_1.default.Fragment, null, isTel ? (react_1.default.createElement("div", { style: {
             height: '40px',
             lineHeight: '40px',
             paddingLeft: '6px'
-        } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: 'absolute', right: 0, bottom: 0, zIndex: 1000, display: visible ? 'block' : 'none' }) }, props, { className: `${index_module_less_1.default['animated-button']} ${(0, css_1.css)(aniStyle)}`, onClick: handleTo }),
-        react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_r = style === null || style === void 0 ? void 0 : style['padding']) !== null && _r !== void 0 ? _r : 0 } },
-            react_1.default.createElement("img", { src: (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _s !== void 0 ? _s : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
-        react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({ ref: ref }, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle}  ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
+        react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
+            react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
+        react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         react_1.default.createElement("div", { hidden: !!recData && !(product === null || product === void 0 ? void 0 : product.title), className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                __html: (0, tool_1.setFontForText)((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
             } }),
-        react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
+        react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
             } })))));
 };

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

@@ -126,7 +126,7 @@ const CommodityDetail = (_a) => {
                                         width: '100%',
                                         objectFit: 'cover',
                                         display: 'block',
-                                        objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                        objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                     }, src: src }))));
                     }))))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({

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

@@ -110,7 +110,7 @@ Made in Italy` })));
                                 width: '100%',
                                 objectFit: 'cover',
                                 display: 'block',
-                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                             }, src: src }))));
             }))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({

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

@@ -4,11 +4,11 @@ const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
 const EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
-const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const hooks_1 = require("../../../../core/hooks");
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const Img_1 = tslib_1.__importDefault(require("../components/Img"));
 const tool_1 = require("../../../../core/utils/tool");
+const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
 const Link = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
@@ -32,7 +32,7 @@ const Link = (_a) => {
                 overflow: 'hidden'
             }) },
             react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) ? index_module_less_1.default['one-line-ellipsis'] : index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
                         __html: (0, tool_1.setFontForText)((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                     } }),
                 (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: index_module_less_1.default['one-line-ellipsis'], dangerouslySetInnerHTML: {

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

@@ -23,6 +23,6 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     }, [src]);
     return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
         react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
-            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: src }))));
+            react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? translateY + 50 : 50}%` }, style)), src: src }))));
 };
 exports.default = (0, react_1.memo)(Img);

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

@@ -241,6 +241,11 @@ exports.default = [
                 label: '对齐',
                 type: 'TextAlign',
                 name: ['props', 'ctaTempStyles', 'ctaTitle']
+            },
+            {
+                label: '间距',
+                type: 'TextSpace',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
             }
         ]
     }

package/package.json

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