pb-sxp-ui 1.0.0

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+import './index.less';
+export interface ICommodityDetailDiroNewProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    onClick?: () => void;
+    schema?: IEditorContext['schema'];
+    isDefault?: boolean;
+    rec?: RecItemType;
+    viewTime?: any;
+    isPost?: boolean;
+    bottom_image?: string;
+    tipText?: {
+        foldText?: string;
+        unfoldText?: string;
+    };
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailDiroNewProps>;
+export default _default;

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

@@ -0,0 +1,131 @@
+"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");
+require("./index.less");
+const modules_1 = require("swiper/modules");
+const react_2 = require("swiper/react");
+const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/Modal"));
+const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const CommodityDetailDiroNew = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText"]);
+    const [spread, setSpread] = (0, react_1.useState)(true);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = (0, hooks_1.useSxpDataSource)();
+    const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
+    const scrollRef = (0, react_1.useRef)(null);
+    const touchRef = (0, react_1.useRef)(null);
+    const touchMoveRef = (0, react_1.useRef)(null);
+    const [stopSlide, setStopSlide] = (0, react_1.useState)(false);
+    const [isBottom, setIsBottom] = (0, react_1.useState)(false);
+    const [isTop, setIsTop] = (0, react_1.useState)(true);
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const curTimeRef = (0, react_1.useRef)(null);
+    const data = isPost ? rec : popupDetailData;
+    const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(data, product, cta);
+            if (!isPost) {
+                productView(data, product, cta, viewTime || curTimeRef.current);
+            }
+            window.location.href = window.getJointUtmLink(product.link);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    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 '£102,300.00';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const width = isPreview ? 375 : window.innerWidth;
+    const handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    const handleTouchStart = (event) => {
+        event.stopPropagation();
+        touchRef.current = event.touches[0].clientY;
+        touchMoveRef.current = true;
+    };
+    const handleTouchMove = (event) => {
+        var _a, _b, _c, _d;
+        if (touchMoveRef.current) {
+            touchMoveRef.current = false;
+            const currentY = event.touches[0].clientY;
+            const diff = touchRef.current - currentY;
+            if (diff > 0 && (isBottom || !stopSlide)) {
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideNext();
+            }
+            else if (diff < 0 && (isTop || !stopSlide)) {
+                (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slidePrev();
+            }
+        }
+    };
+    return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
+        react_1.default.createElement("div", Object.assign({ ref: scrollRef, className: (0, css_1.css)(Object.assign({}, style)) }, props),
+            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+                    clickable: true,
+                    bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
+                    clickableClass: 'commondityDiroNew-swiper-clickable'
+                }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
+                    react_1.default.createElement("div", { style: {
+                            overflow: 'hidden',
+                            width,
+                            height: width
+                        } },
+                        react_1.default.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+            }))),
+            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
+                    position: 'relative',
+                    height: 0,
+                    width: '100%',
+                    paddingBottom: '100%',
+                    overflow: 'hidden'
+                }) },
+                react_1.default.createElement("img", { className: (0, css_1.css)({
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        objectFit: 'cover',
+                        width: '100%'
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+            react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
+                react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
+                    react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                    react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText)),
+                react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'Shop now')),
+                react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') }, isPost ? (react_1.default.createElement(ExpandableText_1.default, { onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
+                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy` })) : (react_1.default.createElement("div", { className: 'pb-commondityDiroNew-info' }, (product === null || product === void 0 ? void 0 : product.info) ||
+                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy`))))),
+        react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },
+            react_1.default.createElement("div", { className: 'pb-commondityDiroNew-info', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') }, (product === null || product === void 0 ? void 0 : product.info) ||
+                `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+Made in Italy`))));
+};
+exports.default = (0, react_1.memo)(CommodityDetailDiroNew);

package/lib/materials/sxp/popup/CommodityDetailDiroNew/material.d.ts

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommodityDetailDiroNew = void 0;
+const tslib_1 = require("tslib");
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const CommodityDetailDiroNew = (0, create_1.createMaterial)(_1.default, {
+    displayName: '商品详情',
+    icon: '',
+    category: 'popup',
+    type: 'CommodityDetailDiroNew',
+    defaulSetting: {
+        props: {},
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+exports.CommodityDetailDiroNew = CommodityDetailDiroNew;

package/lib/materials/sxp/popup/Prompt/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+export interface IPromptProps {
+    content?: string;
+    btnText?: string;
+    style?: Record<string, any>;
+    icon?: Record<string, any> | string;
+    onClick?: () => void;
+}
+declare const _default: React.NamedExoticComponent<IPromptProps>;
+export default _default;

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

@@ -0,0 +1,24 @@
+"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 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('');
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (react_1.default.createElement("div", Object.assign({ className: `pb-prompt ${(0, css_1.css)(Object.assign({}, style))}` }, props),
+        react_1.default.createElement("div", { className: 'pb-prompt-icon' },
+            react_1.default.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success_png_1.default })),
+        react_1.default.createElement("div", { className: 'pb-prompt-content' }, content),
+        react_1.default.createElement("button", { className: 'pb-prompt-btn', onClick: handleOk }, btnText)));
+};
+exports.default = (0, react_1.memo)(Prompt);

package/lib/materials/sxp/popup/Prompt/interactionRender.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        name: string;
+    }[];
+}[];
+export default _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '点击事件',
+        child: [
+            {
+                type: 'link',
+                name: 'onClick'
+            }
+        ]
+    }
+];

package/lib/materials/sxp/popup/Prompt/material.d.ts

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Prompt = void 0;
+const tslib_1 = require("tslib");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
+const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
+const success_png_1 = tslib_1.__importDefault(require("./success.png"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const Prompt = (0, create_1.createMaterial)(_1.default, {
+    displayName: '提交成功',
+    icon: '',
+    category: 'popup',
+    type: 'Prompt',
+    related: {
+        settingRender: settingRender_1.default,
+        bindableProps: [],
+        interactionRender: interactionRender_1.default
+    },
+    defaulSetting: {
+        props: {
+            icon: success_png_1.default,
+            content: 'You have successfully completed the appointment!',
+            btnText: 'OK'
+        },
+        style: {}
+    },
+    w: 100,
+    h: 40,
+    sort: 3
+});
+exports.Prompt = Prompt;

package/lib/materials/sxp/popup/Prompt/settingRender.d.ts

@@ -0,0 +1,12 @@
+declare const _default: ({
+    type: string;
+    label: string;
+    name: string[];
+    mediaType: string;
+} | {
+    type: string;
+    label: string;
+    name: string[];
+    mediaType?: undefined;
+})[];
+export default _default;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        type: 'Media',
+        label: '图标',
+        name: ['props', 'icon'],
+        mediaType: 'Image'
+    },
+    {
+        type: 'TextArea',
+        label: '内容',
+        name: ['props', 'content']
+    },
+    {
+        type: 'Text',
+        label: '按钮文案',
+        name: ['props', 'btnText']
+    }
+];

package/lib/materials/sxp/popup/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AppointForm/material';
+export * from './CommodityDetail/material';
+export * from './Prompt/material';
+export * from './CommodityDetailDiro/material';
+export * from './CommodityDetailDiroNew/material';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AppointForm/material"), exports);
+tslib_1.__exportStar(require("./CommodityDetail/material"), exports);
+tslib_1.__exportStar(require("./Prompt/material"), exports);
+tslib_1.__exportStar(require("./CommodityDetailDiro/material"), exports);
+tslib_1.__exportStar(require("./CommodityDetailDiroNew/material"), exports);

package/lib/materials/sxp/template/Appoint/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+export interface IAppointProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    recData?: RecItemType;
+    bottom_image?: string;
+}
+declare const _default: React.NamedExoticComponent<IAppointProps>;
+export default _default;

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

@@ -0,0 +1,32 @@
+"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 EventProvider_1 = tslib_1.__importDefault(require("../components/EventProvider"));
+const hooks_1 = require("../../../../core/hooks");
+const Appoint = (_a) => {
+    var _b, _c, _d, _e;
+    var { content, style, bgImg, recData, bottom_image } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image"]);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { maxWidth: '236px', width: '100%' })) }, props),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                width: '30px',
+                height: '30px',
+                marginRight: '8px',
+                borderRadius: '3px',
+                overflow: 'hidden',
+                flexShrink: 0,
+                backgroundColor: '#f2f2f2'
+            }) },
+            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                color: '#fff',
+                width: '100%',
+                overflow: 'hidden',
+                fontSize: '12px',
+                textOverflow: 'ellipsis'
+            }) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
+};
+exports.default = (0, react_1.memo)(Appoint);

package/lib/materials/sxp/template/Appoint/interactionRender.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        name: string;
+    }[];
+}[];
+export default _default;

package/lib/materials/sxp/template/Appoint/interactionRender.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '点击事件',
+        child: [
+            {
+                type: 'link',
+                name: 'onClick'
+            }
+        ]
+    }
+];

package/lib/materials/sxp/template/Appoint/material.d.ts

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

package/lib/materials/sxp/template/Appoint/material.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Appoint = void 0;
+const tslib_1 = require("tslib");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const Appoint = (0, create_1.createMaterial)(_1.default, {
+    displayName: '预约表单',
+    icon: '',
+    category: 'template',
+    type: 'Appoint',
+    related: {
+        interactionRender: interactionRender_1.default,
+        bindableProps: []
+    },
+    defaulSetting: {
+        props: {
+            content: '按钮'
+        },
+        style: {
+            padding: '7px',
+            display: 'flex',
+            alignItems: 'center',
+            background: 'rgba(0,0,0,.3)',
+            borderRadius: '3px'
+        }
+    },
+    w: 100,
+    h: 40,
+    sort: 6
+});
+exports.Appoint = Appoint;

package/lib/materials/sxp/template/Commodity/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+export interface ICommodityProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    recData?: RecItemType;
+    bottom_image?: string;
+}
+declare const _default: React.NamedExoticComponent<ICommodityProps>;
+export default _default;

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

@@ -0,0 +1,46 @@
+"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 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 Commodity = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { content, style, bgImg, recData, bottom_image } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image"]);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { maxWidth: '236px', width: '100%' })) }, props),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                width: '60px',
+                height: '60px',
+                marginRight: '8px',
+                borderRadius: '3px',
+                overflow: 'hidden',
+                flexShrink: 0,
+                backgroundColor: '#f2f2f2'
+            }) },
+            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                color: '#fff',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                width: '100%',
+                overflow: 'hidden'
+            }) },
+            react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'] }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
+            react_1.default.createElement("div", { className: (0, css_1.css)({
+                    background: 'rgba(0,0,0,.5)',
+                    fontSize: '10px',
+                    padding: '2px 7px',
+                    width: 'auto',
+                    textAlign: 'center',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap'
+                }) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
+};
+exports.default = (0, react_1.memo)(Commodity);

package/lib/materials/sxp/template/Commodity/interactionRender.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        name: string;
+    }[];
+}[];
+export default _default;

package/lib/materials/sxp/template/Commodity/interactionRender.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: '点击事件',
+        child: [
+            {
+                type: 'link',
+                name: 'onClick'
+            }
+        ]
+    }
+];

package/lib/materials/sxp/template/Commodity/material.d.ts

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

package/lib/materials/sxp/template/Commodity/material.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Commodity = void 0;
+const tslib_1 = require("tslib");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const Commodity = (0, create_1.createMaterial)(_1.default, {
+    displayName: '推荐单商品-透明底',
+    icon: '',
+    category: 'template',
+    type: 'Commodity',
+    related: {
+        interactionRender: interactionRender_1.default,
+        bindableProps: []
+    },
+    defaulSetting: {
+        props: {},
+        style: {
+            padding: '7px',
+            display: 'flex',
+            background: 'rgba(0,0,0,.3)',
+            borderRadius: '3px'
+        }
+    },
+    w: 100,
+    h: 40,
+    sort: 1
+});
+exports.Commodity = Commodity;

package/lib/materials/sxp/template/CommodityDiro/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
+export interface ICommodityDiroProps {
+    content?: string;
+    style?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    recData?: RecItemType;
+    bottom_image?: string;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDiroProps>;
+export default _default;

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

@@ -0,0 +1,48 @@
+"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 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 CommodityDiro = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { content, style, bgImg, recData, bottom_image } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image"]);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+    return (react_1.default.createElement(EventProvider_1.default, Object.assign({ rec: recData, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { maxWidth: '236px', width: '100%' })) }, props),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                width: '60px',
+                height: '60px',
+                marginRight: '8px',
+                borderRadius: '3px',
+                overflow: 'hidden',
+                flexShrink: 0,
+                backgroundColor: '#f2f2f2'
+            }) },
+            react_1.default.createElement("img", { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
+        react_1.default.createElement("div", { className: (0, css_1.css)({
+                color: '#fff',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                width: '100%',
+                overflow: 'hidden'
+            }) },
+            react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'] }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
+            react_1.default.createElement("div", { className: (0, css_1.css)({
+                    background: 'rgba(0,0,0,1)',
+                    fontSize: '10px',
+                    padding: '2px 7px',
+                    textAlign: 'center',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    borderRadius: '25px',
+                    width: 'fit-content',
+                    maxWidth: '100%',
+                    whiteSpace: 'nowrap'
+                }) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
+};
+exports.default = (0, react_1.memo)(CommodityDiro);

package/lib/materials/sxp/template/CommodityDiro/interactionRender.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    child: {
+        type: string;
+        name: string;
+    }[];
+}[];
+export default _default;