pb-sxp-ui 1.0.0

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

@@ -0,0 +1,79 @@
+"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 pro_components_1 = require("@ant-design/pro-components");
+const lodash_1 = require("lodash");
+const hooks_1 = require("../../../../core/hooks");
+require("./index.less");
+const AppointForm = (_a) => {
+    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick } = _a, props = tslib_1.__rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick"]);
+    const { setPopup } = (0, hooks_1.useEditor)();
+    const { submitForm } = (0, hooks_1.useSxpDataSource)();
+    const formRef = (0, react_1.useRef)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const defaultColumns = (0, react_1.useMemo)(() => [
+        {
+            title: '',
+            dataIndex: 'field',
+            valueType: 'text',
+            key: '1'
+        },
+        {
+            title: '',
+            dataIndex: 'field',
+            valueType: 'text',
+            key: '2'
+        },
+        {
+            title: '',
+            dataIndex: 'field',
+            valueType: 'text',
+            key: '3'
+        },
+        {
+            title: '',
+            dataIndex: 'field',
+            valueType: 'text',
+            key: '4'
+        }
+    ], []);
+    const columnsData = (0, react_1.useMemo)(() => {
+        if (layoutType === undefined) {
+            const list = (0, lodash_1.cloneDeep)(columns) || defaultColumns;
+            return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
+        }
+        else {
+            return (0, lodash_1.cloneDeep)(columns) || defaultColumns;
+        }
+    }, [layoutType, columns, defaultColumns]);
+    const handleSubmit = (0, lodash_1.debounce)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c, _d;
+        setLoading(true);
+        const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
+        const arr = (_d = (_c = Object.keys(vals)) === null || _c === void 0 ? void 0 : _c.map((key) => ({
+            name: key,
+            value: vals[key]
+        }))) === null || _d === void 0 ? void 0 : _d.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
+            return;
+        const res = yield (submitForm === null || submitForm === void 0 ? void 0 : submitForm({ attributes: arr }));
+        setLoading(false);
+        if (res) {
+            window === null || window === void 0 ? void 0 : window.sxpPopup('');
+            res && (onClick === null || onClick === void 0 ? void 0 : onClick());
+        }
+    }), 1000);
+    return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
+        react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
+        react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
+            react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
+                react_1.default.createElement(pro_components_1.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+        react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
+            react_1.default.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: {
+                    color: submitColor,
+                    background: submitBgColor
+                } }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
+};
+exports.default = (0, react_1.memo)(AppointForm);

package/lib/materials/sxp/popup/AppointForm/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/AppointForm/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/AppointForm/material.d.ts

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

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppointForm = void 0;
+const tslib_1 = require("tslib");
+const interactionRender_1 = tslib_1.__importDefault(require("./interactionRender"));
+const settingRender_1 = tslib_1.__importDefault(require("./settingRender"));
+const _1 = tslib_1.__importDefault(require("."));
+const create_1 = require("../../../../core/create");
+const AppointForm = (0, create_1.createMaterial)(_1.default, {
+    displayName: '预约表单',
+    icon: '',
+    category: 'popup',
+    type: 'AppointForm',
+    related: {
+        settingRender: settingRender_1.default,
+        bindableProps: [],
+        interactionRender: interactionRender_1.default
+    },
+    defaulSetting: {
+        name: '表单',
+        props: {
+            title: 'Appointment Booking',
+            submitColor: '#fff',
+            submitBgColor: '#000',
+            submitText: 'Submit',
+            layoutType: undefined
+        },
+        style: {},
+        textStyle: {
+            fontSize: 14,
+            color: '#000',
+            fontFamily: '黑体',
+            textAlign: 'center'
+        }
+    },
+    w: 100,
+    h: 40,
+    sort: 2
+});
+exports.AppointForm = AppointForm;

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

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

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        type: 'Text',
+        label: '组件名称',
+        name: 'name'
+    },
+    {
+        title: '表单信息',
+        child: [
+            {
+                type: 'Text',
+                label: '标题',
+                name: ['props', 'title']
+            },
+            {
+                type: 'Group',
+                label: '标题字体',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['textStyle', 'color']
+                    },
+                    {
+                        type: 'Select',
+                        name: ['textStyle', 'fontFamily'],
+                        options: [{ label: '黑体', value: '黑体' }]
+                    },
+                    {
+                        type: 'Number',
+                        name: ['textStyle', 'fontSize'],
+                        addonAfter: 'px'
+                    }
+                ]
+            },
+            {
+                label: '标题样式',
+                type: 'TextStyle',
+                name: ['textStyle']
+            },
+            {
+                label: '标题对齐',
+                type: 'TextAlign',
+                name: ['textStyle']
+            },
+            {
+                label: '表单布局',
+                type: 'Radius',
+                options: [
+                    {
+                        label: '左右',
+                        value: 'horizontal'
+                    },
+                    {
+                        label: '上下',
+                        value: 'vertical'
+                    },
+                    {
+                        label: '提示',
+                        value: undefined
+                    }
+                ],
+                name: ['props', 'layoutType']
+            },
+            {
+                label: '提交按钮文本',
+                type: 'Text',
+                name: ['props', 'submitText']
+            },
+            {
+                label: '提交文本颜色',
+                type: 'Color',
+                name: ['props', 'submitColor']
+            },
+            {
+                label: '提交按钮颜色',
+                type: 'Color',
+                name: ['props', 'submitBgColor']
+            }
+        ]
+    },
+    {
+        title: '表单项',
+        child: [
+            {
+                type: 'AddFormItems',
+                name: ['props', 'columns']
+            }
+        ]
+    }
+];

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IEditorContext } from '../../../../core/context/EditorContext';
+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;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailProps>;
+export default _default;

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

@@ -0,0 +1,87 @@
+"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 useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const CommodityDetail = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var { content, style, bgImg, onClick, schema, isDefault, bottom_image } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image"]);
+    const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const { popupDetailData, bffEventReport, isPreview, waterFallData } = (0, hooks_1.useSxpDataSource)();
+    const { jumpToWeb, productView } = (0, useEventReport_1.useEventReport)();
+    const curTimeRef = (0, react_1.useRef)(null);
+    const product = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+    const cta = (_d = (_c = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
+    const handleLink = () => {
+        if (product === null || product === void 0 ? void 0 : product.link) {
+            jumpToWeb(popupDetailData, product, cta);
+            productView(popupDetailData, product, cta, 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 '$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;
+    return (react_1.default.createElement("div", { className: 'pb-commondity' },
+        react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
+            product && ((_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
+                    delay: 3000
+                } }, (_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.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' } }))));
+            }))),
+            !((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.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: (_h = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _h !== void 0 ? _h : bottom_image, alt: '' }))),
+            react_1.default.createElement("div", { className: 'pb-commondity-content' },
+                react_1.default.createElement("div", { className: 'pb-commondity-content-collection' }, (_j = product === null || product === void 0 ? void 0 : product.collection) !== null && _j !== void 0 ? _j : 'Tiffany Lock'),
+                react_1.default.createElement("div", { className: 'pb-commondity-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Pendant in Yellow Gold with Diamonds, Medium'),
+                react_1.default.createElement("div", { className: 'pb-commondity-content-price' }, priceText),
+                react_1.default.createElement("div", { className: 'pb-commondity-content-info' }, (_l = product === null || product === void 0 ? void 0 : product.info) !== null && _l !== void 0 ? _l : `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.`))),
+        (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn' }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Purchase on Website'))));
+};
+exports.default = (0, react_1.memo)(CommodityDetail);

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

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

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

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

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

@@ -0,0 +1,18 @@
+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;
+}
+declare const _default: React.NamedExoticComponent<ICommodityDetailDiroProps>;
+export default _default;

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

@@ -0,0 +1,164 @@
+"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 arrow_png_1 = tslib_1.__importDefault(require("./arrow.png"));
+const useEventReport_1 = require("../../../../core/hooks/useEventReport");
+const CommodityDetailDiro = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { style, isDefault, rec, viewTime, isPost, bottom_image } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image"]);
+    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 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 '$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 handleClickCollapse = () => {
+        setSpread(!spread);
+    };
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        console.log((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight, window.innerHeight);
+        if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) > window.innerHeight) {
+            setStopSlide(true);
+        }
+    }, [scrollRef]);
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+                const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+                const isBottom = scrollTop + clientHeight === scrollHeight;
+                if (isBottom) {
+                    setIsBottom(true);
+                }
+                else {
+                    setIsBottom(false);
+                }
+                if (scrollTop === 0) {
+                    setIsTop(true);
+                }
+                else {
+                    setIsTop(false);
+                }
+            }
+        };
+        if (scrollRef.current) {
+            scrollRef.current.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            if (scrollRef.current) {
+                scrollRef.current.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [scrollRef]);
+    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-commondityDiro' },
+        react_1.default.createElement("div", Object.assign({ ref: scrollRef, className: (0, css_1.css)(Object.assign({}, style)) }, props, { onTouchStart: handleTouchStart, onTouchMove: (e) => {
+                e.stopPropagation();
+                handleTouchMove(e);
+            } }),
+            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: 'swipe-item-active-bullet' }, 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-commondityDiro-content' },
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-content-title' }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'MEDIUM LADY D-LITE BAG'),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-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) || 'Gold-Tone and White Butterfly Zodiac Embroidery'),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-content-scrollRef', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.itemId) }, (product === null || product === void 0 ? void 0 : product.itemId) ? `Reference: ${product === null || product === void 0 ? void 0 : product.itemId}` : 'Reference: M0565OESU_M01E'),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-content-line' }),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-content-price' }, priceText)),
+            react_1.default.createElement("div", { className: 'pb-commondityDiro-desc', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-collapse', onClick: handleClickCollapse },
+                    react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-collapse-title' }, "DESCRIPTION"),
+                    react_1.default.createElement("img", { className: `pb-commondityDiro-desc-collapse-icon ${spread ? 'pb-commondityDiro-desc-collapse-iconActive' : ''}`, src: arrow_png_1.default, alt: '' })),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-desc-info', hidden: !spread }, (product === null || product === void 0 ? void 0 : product.info) ||
+                    'The Lady D-Lite bag combines classic elegance with House modernity. The style is fully embroidered with a gold-tone and white Butterfly Zodiac motif by Pietro Ruffo, showcasing a constellation enhanced by astrological signs and adorned with butterflies. A Christian Dior Paris signature adorns the front, while D.I.O.R. charms in pale gold-finish metal further enhance and highlight the silhouette. Featuring a wide, removable embroidered shoulder strap, the medium Lady D-Lite bag can be carried by hand or worn crossbody.')),
+            (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-h90' }),
+                react_1.default.createElement("div", { className: 'pb-commondityDiro-bottom' },
+                    react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiro-bottom-btn' }, (_l = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _l !== void 0 ? _l : 'SHOP NOW')))))));
+};
+exports.default = (0, react_1.memo)(CommodityDetailDiro);

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

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

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

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