pb-sxp-ui 1.0.2 → 1.0.3-alpha.2

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

@@ -9,8 +9,8 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import { useEventReport } from '../../../../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 = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle"]);
     const [spread, setSpread] = useState(true);
     const { sxpParameter } = useSxpDataSource();
     const { popupDetailData, bffEventReport, isPreview, swiperRef, waterFallData } = useSxpDataSource();
@@ -79,14 +79,22 @@ const CommodityDetailDiroNew = (_a) => {
             }
         }
     };
+    const productInfoText = ({ isPost }) => {
+        return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+            React.createElement(ExpandableText, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.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` })));
+    };
     return (React.createElement("div", { className: 'pb-commondityDiroNew' },
         React.createElement("div", Object.assign({ ref: scrollRef, className: 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.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
-                    clickableClass: 'commondityDiroNew-swiper-clickable'
+                    clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
+                        ? 'commondityDiroNew-swiper-clickable-left'
+                        : 'commondityDiroNew-swiper-clickable-center'
                 }, loop: true, autoplay: {
-                    delay: 3000
+                    delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
                 } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
                 return (React.createElement(SwiperSlide, { key: src },
                     React.createElement("div", { style: {
@@ -112,18 +120,13 @@ const CommodityDetailDiroNew = (_a) => {
                     }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
             React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
-                    React.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.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText)),
-                React.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.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.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') }, isPost ? (React.createElement(ExpandableText, { 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.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.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
-            React.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`))));
+                    React.createElement("div", { className: 'pb-commondityDiroNew-content-top-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                    React.createElement("div", { className: '' },
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
+                        React.createElement("div", { className: 'pb-commondityDiroNew-content-top-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
+                React.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) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin'),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
+                productInfoText({ isPost }))),
+        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };
 export default memo(CommodityDetailDiroNew);

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

@@ -1,3 +1,4 @@
+import settingRender from './settingRender';
 import CommodityDetailDiroNewComponent from '.';
 import { createMaterial } from '../../../../core/create';
 const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
@@ -5,8 +6,52 @@ const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
     icon: '',
     category: 'popup',
     type: 'CommodityDetailDiroNew',
+    related: {
+        settingRender
+    },
     defaulSetting: {
-        props: {},
+        props: {
+            swiper: {
+                dotsAlign: 'left',
+                delay: 3
+            },
+            commodityStyles: {
+                price: {
+                    color: '#000',
+                    fontWeight: 'bold',
+                    fontSize: 18
+                },
+                title: {
+                    color: '#000',
+                    fontSize: 13
+                },
+                collection: {
+                    color: '#757575',
+                    fontSize: 13
+                },
+                info: {
+                    color: '#757575',
+                    fontSize: 13
+                },
+                taxInfo: {
+                    color: '#000',
+                    fontWeight: 'bold',
+                    fontSize: 13,
+                    textAlign: 'right'
+                }
+            },
+            buttonStyle: {
+                backgroundColor: '#000',
+                fontSize: 12,
+                height: 52,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                color: '#fff',
+                borderRadius: 25,
+                marginTop: 16,
+                marginBottom: 16
+            }
+        },
         style: {}
     },
     w: 100,

package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts

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

package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js

@@ -0,0 +1,171 @@
+export default [
+    {
+        title: '商品图片',
+        child: [
+            {
+                type: 'Radius',
+                label: '轮播指示器',
+                options: [
+                    {
+                        label: '居左',
+                        value: 'left'
+                    },
+                    {
+                        label: '居中',
+                        value: 'center'
+                    }
+                ],
+                name: ['props', 'swiper', 'dotsAlign']
+            },
+            {
+                type: 'Number',
+                name: ['props', 'swiper', 'delay'],
+                addonAfter: 's'
+            }
+        ]
+    },
+    {
+        title: '商品文本',
+        child: [
+            {
+                name: ['props', 'commodityStyles'],
+                type: 'SelectLinkage',
+                child: [
+                    {
+                        label: '字段',
+                        type: 'Select',
+                        options: [
+                            {
+                                label: '商品名称',
+                                value: 'title'
+                            },
+                            {
+                                label: '系列名称',
+                                value: 'collection'
+                            },
+                            {
+                                label: '价格',
+                                value: 'price'
+                            },
+                            {
+                                label: '税费说明',
+                                value: 'taxInfo'
+                            },
+                            {
+                                label: '商品描述',
+                                value: 'info'
+                            }
+                        ],
+                        name: ['props', 'commodityStyles', 'field'],
+                        initialValue: 'title'
+                    },
+                    {
+                        type: 'Group',
+                        label: '标题字体',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
+                            },
+                            {
+                                type: 'Select',
+                                options: [{ label: '黑体', value: '黑体' }],
+                                name: ['fontFamily']
+                            },
+                            {
+                                type: 'Number',
+                                addonAfter: 'px',
+                                name: ['fontSize']
+                            }
+                        ]
+                    },
+                    {
+                        label: '标题样式',
+                        type: 'TextStyle'
+                    },
+                    {
+                        label: '标题对齐',
+                        type: 'TextAlign'
+                    },
+                    {
+                        label: '默认行数',
+                        type: 'Number',
+                        name: ['lineClamp']
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        title: '购买按钮样式',
+        child: [
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'buttonStyle', 'backgroundColor'],
+                initialValue: '#000'
+            },
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '圆角',
+                child: [
+                    {
+                        type: 'Slider',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        max: 100
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'borderRadius'],
+                        addonAfter: 'px',
+                        max: 100
+                    }
+                ]
+            },
+            {
+                type: 'TextMargin',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'Group',
+                label: '字体',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
+                    },
+                    {
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily'],
+                        options: [{ label: '黑体', value: '黑体' }]
+                    },
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonStyle', 'fontSize'],
+                        addonAfter: 'px'
+                    }
+                ]
+            },
+            {
+                type: 'TextStyle',
+                name: ['props', 'buttonStyle']
+            },
+            {
+                type: 'TextAlign',
+                name: ['props', 'buttonStyle']
+            }
+        ]
+    }
+];

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

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

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

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

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

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

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

@@ -5,26 +5,12 @@ import EventProvider from '../components/EventProvider';
 import { useSxpDataSource } from '../../../../core/hooks';
 const Appoint = (_a) => {
     var _b, _c, _d, _e;
-    var { content, style, bgImg, recData, bottom_image } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
     const { sxpParameter } = useSxpDataSource();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-    return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign(Object.assign({}, style), { maxWidth: '236px', width: '100%' })) }, props),
-        React.createElement("div", { className: css({
-                width: '30px',
-                height: '30px',
-                marginRight: '8px',
-                borderRadius: '3px',
-                overflow: 'hidden',
-                flexShrink: 0,
-                backgroundColor: '#f2f2f2'
-            }) },
+    return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
+        React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
             React.createElement("img", { className: 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.createElement("div", { className: 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')));
+        React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
 };
 export default memo(Appoint);

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

@@ -1,3 +1,4 @@
+import settingRender from '../components/settingRender';
 import interactionRender from './interactionRender';
 import AppointComponent from '.';
 import { createMaterial } from '../../../../core/create';
@@ -8,18 +9,33 @@ const Appoint = createMaterial(AppointComponent, {
     type: 'Appoint',
     related: {
         interactionRender,
+        settingRender: settingRender === null || settingRender === void 0 ? void 0 : settingRender.filter((i) => i.type !== 'commodityTitle'),
         bindableProps: []
     },
     defaulSetting: {
         props: {
-            content: '按钮'
+            ctaTempStyles: {
+                img: {
+                    borderRadius: 3,
+                    width: 30,
+                    height: 30,
+                    marginRight: 8
+                },
+                ctaTitle: {
+                    fontSize: 12,
+                    color: '#fff',
+                    textAlign: 'left',
+                    width: 130,
+                    height: 20
+                }
+            }
         },
         style: {
-            padding: '7px',
-            display: 'flex',
-            alignItems: 'center',
-            background: 'rgba(0,0,0,.3)',
-            borderRadius: '3px'
+            padding: 7,
+            width: 236,
+            height: 44,
+            borderRadius: 3,
+            backgroundColor: 'rgba(0,0,0,.3)'
         }
     },
     w: 100,

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

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

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

@@ -6,20 +6,12 @@ import styles from './index.module.less';
 import { useSxpDataSource } from '../../../../core/hooks';
 const Commodity = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h;
-    var { content, style, bgImg, recData, bottom_image } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles"]);
     const { sxpParameter } = 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.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign(Object.assign({}, style), { maxWidth: '236px', width: '100%' })) }, props),
-        React.createElement("div", { className: css({
-                width: '60px',
-                height: '60px',
-                marginRight: '8px',
-                borderRadius: '3px',
-                overflow: 'hidden',
-                flexShrink: 0,
-                backgroundColor: '#f2f2f2'
-            }) },
+    return (React.createElement(EventProvider, Object.assign({ rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' } }, props),
+        React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
             React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%' }), src: src, hidden: !src, alt: '' })),
         React.createElement("div", { className: css({
                 color: '#fff',
@@ -29,16 +21,7 @@ const Commodity = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles['tow-line-ellipsis'] }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
-            React.createElement("div", { className: 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'))));
+            React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
+            React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_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'))));
 };
 export default memo(Commodity);

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

@@ -1,3 +1,4 @@
+import settingRender from '../components/settingRender';
 import interactionRender from './interactionRender';
 import CommodityComponent from '.';
 import { createMaterial } from '../../../../core/create';
@@ -8,15 +9,39 @@ const Commodity = createMaterial(CommodityComponent, {
     type: 'Commodity',
     related: {
         interactionRender,
-        bindableProps: []
+        bindableProps: [],
+        settingRender
     },
     defaulSetting: {
-        props: {},
+        props: {
+            ctaTempStyles: {
+                img: {
+                    borderRadius: 3,
+                    width: 60,
+                    height: 60,
+                    marginRight: 8
+                },
+                title: {
+                    fontSize: 12,
+                    color: '#fff',
+                    textAlign: 'left'
+                },
+                ctaTitle: {
+                    fontSize: 10,
+                    color: '#fff',
+                    textAlign: 'center',
+                    width: 130,
+                    height: 20,
+                    backgroundColor: 'rgba(0,0,0,.5)'
+                }
+            }
+        },
         style: {
-            padding: '7px',
-            display: 'flex',
-            background: 'rgba(0,0,0,.3)',
-            borderRadius: '3px'
+            padding: 7,
+            width: 236,
+            height: 74,
+            borderRadius: 3,
+            backgroundColor: 'rgba(0,0,0,.3)'
         }
     },
     w: 100,