pb-sxp-ui 1.1.1 → 1.2.0

package/lib/materials/sxp/cta/AniLink/settingRender.d.ts

@@ -0,0 +1,73 @@
+declare const _default: ({
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            addonAfter: string;
+        }[];
+        name?: undefined;
+        direction?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        name?: undefined;
+        direction?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        child?: undefined;
+        direction?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label: string;
+        direction: string;
+        child?: undefined;
+    })[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            bottomText: string;
+        }[];
+        name?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            addonAfter: string;
+            name: string[];
+        })[];
+        name?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        child?: undefined;
+    })[];
+})[];
+export default _default;

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '主题样式',
+        child: [
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['style', 'width'],
+                        addonAfter: 'W'
+                    },
+                    {
+                        type: 'Number',
+                        name: ['style', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['style', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['style', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['style', 'backgroundColor']
+            },
+            {
+                type: 'TextMargin',
+                name: ['style'],
+                label: '上下边距',
+                direction: 'vertical'
+            },
+            {
+                type: 'TextPadding',
+                name: ['style'],
+                label: '内边距',
+                direction: 'horizontal'
+            }
+        ]
+    },
+    {
+        title: 'CTA标题',
+        child: [
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                    },
+                    {
+                        type: 'Number',
+                        addonAfter: 'px',
+                        name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                    }
+                ]
+            },
+            {
+                label: '样式',
+                type: 'TextStyle',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
+            },
+            {
+                label: '对齐',
+                type: 'TextAlign',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
+            }
+        ]
+    }
+];

package/lib/materials/sxp/cta/AniLinkPopup/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ICtaTempStylesType } from '../../template/components/typing';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+export interface IAniLinkPopupProps {
+    style?: Record<string, any>;
+    recData?: RecItemType;
+    ctaTempStyles?: ICtaTempStylesType;
+    index?: number;
+    event?: any;
+    translateY?: number;
+    bottom_image?: string;
+    isTel?: boolean;
+    onClick?: () => void;
+    isExternalLink?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IAniLinkPopupProps>;
+export default _default;

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const css_1 = require("@emotion/css");
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../../../core/hooks");
+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 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 { 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"]);
+    const { sxpParameter, globalConfig, ctaEvent } = (0, hooks_1.useSxpDataSource)();
+    const { jumpToWeb } = (0, useEventReport_1.useEventReport)();
+    const [visible, setVisible] = (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;
+        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',
+            eventDescription: 'User clicked the CTA'
+        }, recData, item, index);
+        if (isExternalLink) {
+            jumpToWeb(recData, product, cta, index);
+        }
+        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 ani = event === null || event === void 0 ? void 0 : event.animation;
+        if (ani) {
+            const { delay, duration, backgroundColor } = 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'}`
+                }
+            };
+        }
+    }, [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);
+    };
+    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: 'fixed', 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 }),
+        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)
+            } }),
+        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: {
+                __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+            } })))));
+};
+exports.default = (0, react_1.memo)(AniLinkPopup);

package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts

@@ -0,0 +1,42 @@
+declare const _default: ({
+    title: string;
+    child: {
+        type: string;
+        name: string;
+    }[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        name: string[];
+        label: string;
+        options?: undefined;
+        initialValue?: undefined;
+        fieldProps?: undefined;
+        addonAfter?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label: string;
+        options: {
+            label: string;
+            value: number;
+        }[];
+        initialValue: number;
+        fieldProps: {
+            style: {
+                width: string;
+            };
+        };
+        addonAfter?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        addonAfter: string;
+        options?: undefined;
+        initialValue?: undefined;
+        fieldProps?: undefined;
+    })[];
+})[];
+export default _default;

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '点击事件',
+        child: [
+            {
+                type: 'link',
+                name: 'onClick'
+            }
+        ]
+    },
+    {
+        title: '动画效果',
+        child: [
+            {
+                type: 'Color',
+                name: ['animation', 'backgroundColor'],
+                label: '动画颜色'
+            },
+            {
+                type: 'Select',
+                name: ['animation', 'name'],
+                label: '动画',
+                options: [
+                    {
+                        label: '由左向右/中间扩散',
+                        value: 1
+                    }
+                ],
+                initialValue: 1,
+                fieldProps: {
+                    style: {
+                        width: '100%'
+                    }
+                }
+            },
+            {
+                type: 'Number',
+                label: '动画启动时间',
+                name: ['animation', 'delay'],
+                addonAfter: 'ms'
+            },
+            {
+                type: 'Number',
+                label: '动画持续时间',
+                name: ['animation', 'duration'],
+                addonAfter: 'ms'
+            }
+        ]
+    }
+];

package/lib/materials/sxp/cta/AniLinkPopup/material.d.ts

@@ -0,0 +1,2 @@
+declare const AniLinkPopup: import("../../../../core/create").MaterialComponet<import(".").IAniLinkPopupProps>;
+export { AniLinkPopup };

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AniLinkPopup = void 0;
+const tslib_1 = require("tslib");
+const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
+const AniLinkPopup = (0, create_1.createMaterial)(_1.default, {
+    displayName: '竖版弹窗CTA',
+    icon: '',
+    category: 'cta',
+    type: 'AniLinkPopup',
+    related: {
+        settingRender: settingRender_1.default,
+        bindableProps: [],
+        interactionRender: interactionRender_1.default
+    },
+    defaulSetting: {
+        props: {
+            ctaTempStyles: {
+                img: {
+                    borderRadius: 3,
+                    width: 76,
+                    height: 76,
+                    marginBottom: 10
+                },
+                title: {
+                    fontSize: 12,
+                    color: '#000',
+                    textAlign: 'left'
+                },
+                ctaTitle: {
+                    fontSize: 10,
+                    color: '#fff',
+                    textAlign: 'center',
+                    width: 76,
+                    height: 20,
+                    backgroundColor: 'rgba(0,0,0,1)'
+                }
+            }
+        },
+        style: {
+            width: 90,
+            height: 160,
+            borderRadius: 3,
+            backgroundColor: 'rgba(255,255,255,1)',
+            padding: 7,
+            margin: 10
+        }
+    },
+    w: 100,
+    h: 40,
+    sort: 2
+});
+exports.AniLinkPopup = AniLinkPopup;

package/lib/materials/sxp/cta/AniLinkPopup/settingRender.d.ts

@@ -0,0 +1,176 @@
+declare const _default: ({
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            addonAfter: string;
+        }[];
+        name?: undefined;
+        addonAfter?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        name?: undefined;
+        addonAfter?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        child?: undefined;
+        addonAfter?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        addonAfter: string;
+        child?: undefined;
+    })[];
+    type?: undefined;
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            addonAfter: string;
+        }[];
+        addonAfter?: undefined;
+        name?: undefined;
+        min?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        addonAfter?: undefined;
+        name?: undefined;
+        min?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        addonAfter: string;
+        name: string[];
+        child?: undefined;
+        min?: undefined;
+        initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        min: number;
+        addonAfter: string;
+        initialValue: number;
+        child?: undefined;
+    })[];
+    type?: undefined;
+} | {
+    title: string;
+    type: string;
+    child: ({
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            bottomText: string;
+        }[];
+        name?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            addonAfter: string;
+            name: string[];
+        })[];
+        name?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        child?: undefined;
+    })[];
+} | {
+    title: string;
+    child: ({
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            max: number;
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            name: string[];
+            addonAfter: string;
+            max: number;
+        })[];
+        name?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label?: undefined;
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        name: string[];
+        child?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: {
+            type: string;
+            name: string[];
+            bottomText: string;
+        }[];
+        name?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
+            type: string;
+            name: string[];
+            addonAfter?: undefined;
+        } | {
+            type: string;
+            addonAfter: string;
+            name: string[];
+        })[];
+        name?: undefined;
+    })[];
+    type?: undefined;
+})[];
+export default _default;