pb-sxp-ui 1.0.16 → 1.0.17

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

@@ -1,34 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { IEditorContext } from '../../../../core/context/EditorContext';
-import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
-import './index.less';
-export interface ICommodityDetailProps {
-    content?: string;
-    style?: Record<string, any>;
-    bgImg?: Record<string, any> | string;
-    onClick?: () => void;
-    schema?: IEditorContext['schema'];
-    isDefault?: boolean;
-    bottom_image?: string;
-    tipText?: {
-        foldText?: string;
-        unfoldText?: string;
-    };
-    isPost?: boolean;
-    viewTime?: any;
-    rec?: RecItemType;
-    swiper: {
-        dotsAlign: 'left' | 'center';
-        delay: number;
-    };
-    commodityStyles?: {
-        title: CSSProperties;
-        collection: CSSProperties;
-        price: CSSProperties;
-        info: CSSProperties;
-    };
-    buttonStyle?: CSSProperties;
-    index?: number;
-}
-declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
-export default _default;

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

@@ -1,110 +0,0 @@
-import { __rest } from "tslib";
-import { css } from '@emotion/css';
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { useSxpDataSource } from '../../../../core/hooks';
-import './index.less';
-import { Autoplay, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { useEventReport } from '../../../../core/hooks/useEventReport';
-import Modal from '../../../../core/components/SxpPageRender/Modal';
-import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
-const CommodityDetail = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
-    const { sxpParameter } = useSxpDataSource();
-    const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
-    const { jumpToWeb, productView } = useEventReport();
-    const curTimeRef = useRef(null);
-    const [showModal, setShowModal] = useState(false);
-    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 position = isPost ? index : popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
-    const handleLink = () => {
-        if (product === null || product === void 0 ? void 0 : product.link) {
-            jumpToWeb(popupDetailData, product, cta, position);
-            if (!isPost) {
-                productView(data, product, cta, viewTime || curTimeRef.current, position);
-            }
-            window.location.href = window.getJointUtmLink(product.link);
-        }
-    };
-    useEffect(() => {
-        const initTime = () => {
-            curTimeRef.current = new Date();
-        };
-        initTime();
-        window.addEventListener('pageshow', initTime);
-        return () => {
-            window.removeEventListener('pageshow', initTime);
-        };
-    }, []);
-    const priceText = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
-        }
-        else {
-            return '$7,000';
-        }
-    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const width = isPreview ? 375 : window.innerWidth;
-    const renderContent = ({ isPost }) => {
-        var _a, _b, _c;
-        return (React.createElement("div", null,
-            React.createElement("div", { className: 'pb-commondity-content-collection', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === '') }, (_a = product === null || product === void 0 ? void 0 : product.collection) !== null && _a !== void 0 ? _a : 'Tiffany Lock'),
-            React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
-            React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
-            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, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
-            18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
-    };
-    const renderBtn = () => {
-        var _a;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
-    };
-    return (React.createElement("div", { className: 'pb-commondity' },
-        React.createElement("div", Object.assign({ 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: 'swipe-item-active-bullet',
-                    clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
-                        ? 'commondityDetail-swiper-clickable-left'
-                        : 'commondityDetail-swiper-clickable-center'
-                }, loop: true, autoplay: {
-                    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: {
-                            overflow: 'hidden',
-                            width,
-                            height: width
-                        } },
-                        React.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.createElement("div", { className: css({
-                    position: 'relative',
-                    height: 0,
-                    width: '100%',
-                    paddingBottom: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("img", { className: 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.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
-        renderBtn(),
-        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
-            React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
-            renderBtn())));
-};
-export default memo(CommodityDetail);

package/es/materials/sxp/popup/CommodityDetail/material.d.ts

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

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

@@ -1,51 +0,0 @@
-import settingRender from './settingRender';
-import CommodityDetailComponent from '.';
-import { createMaterial } from '../../../../core/create';
-const CommodityDetail = createMaterial(CommodityDetailComponent, {
-    displayName: '商品详情',
-    icon: '',
-    category: 'popup',
-    type: 'CommodityDetail',
-    related: {
-        settingRender
-    },
-    defaulSetting: {
-        props: {
-            swiper: {
-                dotsAlign: 'center',
-                delay: 3
-            },
-            commodityStyles: {
-                price: {
-                    color: '#000',
-                    fontSize: 18
-                },
-                title: {
-                    color: '#000',
-                    fontSize: 23
-                },
-                collection: {
-                    fontSize: 12,
-                    color: '#000'
-                },
-                info: {
-                    color: 'gray',
-                    fontSize: 12
-                }
-            },
-            buttonStyle: {
-                backgroundColor: '#000',
-                fontSize: 12,
-                height: 45,
-                fontWeight: 'bold',
-                textAlign: 'center',
-                color: 'rgba(255, 255, 255, 0.9)'
-            }
-        },
-        style: {}
-    },
-    w: 100,
-    h: 40,
-    sort: 1
-});
-export { CommodityDetail };

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

@@ -1,137 +0,0 @@
-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;
-                initialValue?: undefined;
-                addonAfter?: undefined;
-            } | {
-                type: string;
-                options: {
-                    label: string;
-                    value: string;
-                }[];
-                name: string[];
-                initialValue: string;
-                addonAfter?: undefined;
-            } | {
-                type: string;
-                addonAfter: string;
-                name: string[];
-                options?: undefined;
-                initialValue?: 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: string;
-            addonAfter?: undefined;
-        } | {
-            type: string;
-            name: string[];
-            addonAfter: string;
-            initialValue?: undefined;
-            options?: undefined;
-        })[];
-        name?: undefined;
-        initialValue?: undefined;
-    })[];
-})[];
-export default _default;

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

@@ -1,171 +0,0 @@
-var _a, _b;
-import { fontOptions } from '../../defaultSetting';
-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: 'info'
-                            }
-                        ],
-                        name: ['props', 'commodityStyles', 'field'],
-                        initialValue: 'title'
-                    },
-                    {
-                        type: 'Group',
-                        label: '标题字体',
-                        child: [
-                            {
-                                type: 'Color',
-                                name: ['color']
-                            },
-                            {
-                                type: 'Select',
-                                options: fontOptions,
-                                name: ['fontFamily'],
-                                initialValue: (_a = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
-                            },
-                            {
-                                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: fontOptions,
-                        initialValue: (_b = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _b === void 0 ? void 0 : _b.value
-                    },
-                    {
-                        type: 'Number',
-                        name: ['props', 'buttonStyle', 'fontSize'],
-                        addonAfter: 'px'
-                    }
-                ]
-            },
-            {
-                type: 'TextStyle',
-                name: ['props', 'buttonStyle']
-            },
-            {
-                type: 'TextAlign',
-                name: ['props', 'buttonStyle']
-            }
-        ]
-    }
-];

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { IEditorContext } from '../../../../core/context/EditorContext';
-import { RecItemType } from '../../../../core/components/SxpPageRender/typing';
-import './index.less';
-export interface ICommodityDetailDiroProps {
-    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;
-    index?: number;
-}
-declare const _default: React.NamedExoticComponent<ICommodityDetailDiroProps>;
-export default _default;