pb-sxp-ui 1.0.0

package/es/core/hooks/useEventReport.js

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { useSxpDataSource } from './useSxpDataSource';
+export function useEventReport() {
+    const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
+    const jumpToWeb = useCallback((data, product, cta) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        let fromKName = '';
+        if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
+            fromKName = 'pdpPage';
+        }
+        else if (isFromHashtag) {
+            fromKName = 'hashTagPage';
+        }
+        else if ((_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.url) {
+            fromKName = 'videoPage';
+        }
+        else if (((_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.imgUrls) && ((_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length)) {
+            fromKName = 'imagePage';
+        }
+        else if (data === null || data === void 0 ? void 0 : data.product) {
+            fromKName = 'productPage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'jumpToWeb',
+                eventDescription: 'User jumped to website',
+                productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
+                productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
+                price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
+                fromKName,
+                fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
+            }
+        });
+    }, [bffEventReport, popupDetailData, isFromHashtag]);
+    const productView = useCallback((data, product, cta, viewTime) => {
+        var _a, _b, _c, _d;
+        let fromKName = '';
+        if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
+            fromKName = 'pdpPage';
+        }
+        else if (data === null || data === void 0 ? void 0 : data.product) {
+            fromKName = 'productPage';
+        }
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                productId: product === null || product === void 0 ? void 0 : product.itemId,
+                productName: product === null || product === void 0 ? void 0 : product.title,
+                price: (product === null || product === void 0 ? void 0 : product.price) + '',
+                productCollection: product === null || product === void 0 ? void 0 : product.collection,
+                fromKName,
+                fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
+                position: (data === null || data === void 0 ? void 0 : data.position) + '',
+                relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
+                timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                eventSubject: 'productView',
+                eventDescription: 'User browsed the product'
+            }
+        });
+    }, [bffEventReport, popupDetailData]);
+    return {
+        jumpToWeb,
+        productView
+    };
+}

package/es/core/hooks/useOnScreen.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useOnScreen(ref: RefObject<HTMLElement>): boolean;

package/es/core/hooks/useOnScreen.js

@@ -0,0 +1,19 @@
+import { useEffect, useState, useRef } from 'react';
+export default function useOnScreen(ref) {
+    const observerRef = useRef(null);
+    const [isOnScreen, setIsOnScreen] = useState(false);
+    useEffect(() => {
+        observerRef.current = new IntersectionObserver(([entry]) => {
+            setIsOnScreen(entry.isIntersecting);
+        });
+    }, []);
+    useEffect(() => {
+        var _a;
+        (ref === null || ref === void 0 ? void 0 : ref.current) && ((_a = observerRef === null || observerRef === void 0 ? void 0 : observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(ref === null || ref === void 0 ? void 0 : ref.current));
+        return () => {
+            var _a;
+            (_a = observerRef === null || observerRef === void 0 ? void 0 : observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, [ref]);
+    return isOnScreen;
+}

package/es/core/hooks/useSxpDataSource.d.ts

@@ -0,0 +1 @@
+export declare function useSxpDataSource(): import("../context/SxpDataSourceProvider").ISxpDataSourceContext;

package/es/core/hooks/useSxpDataSource.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { SxpDataSourceContext } from '../context/SxpDataSourceProvider';
+export function useSxpDataSource() {
+    return useContext(SxpDataSourceContext);
+}

package/es/core/index.d.ts

@@ -0,0 +1,3 @@
+export { EditorCore } from './context/EditorContext';
+export type { IEditorCoreRef } from './context/EditorContext';
+export type { MaterialComponet } from './create';

package/es/core/index.js

@@ -0,0 +1 @@
+export { EditorCore } from './context/EditorContext';

package/es/core/schema.d.ts

@@ -0,0 +1,58 @@
+export interface ISchema {
+    id: string;
+    pageInfo: {
+        baseInfo?: {
+            name: string;
+            type: string;
+            remark?: string;
+        };
+    };
+    dataSource: Array<{
+        id: string;
+        apiId: string;
+        dataId: string;
+        method: string;
+        url: string;
+        urlParams?: Record<string, string>;
+        name: string;
+        queryString?: string;
+        headers?: Record<string, any>;
+        requestType: string;
+        response_parameter: any[];
+        body?: any;
+    }>;
+    schema: Array<{
+        id: string;
+        componentType: string;
+        backgroud: {
+            color?: string;
+            image?: string;
+            video?: string;
+        };
+        style: {
+            width: string | number;
+            height: string | number;
+        };
+        children: Array<{
+            id: string;
+            componentType: string;
+            name: string;
+            style: {
+                offsetX: number;
+                offsetY: number;
+                borderRaduis: number;
+                bgColor: string;
+                bgImage?: string;
+                borderWidth: number;
+                borderStyle: string;
+                borderColor: string;
+                zIndex: number;
+            };
+            bindDatas: Array<{
+                propKey: string;
+                accessPath: string;
+            }>;
+            props: Record<string, any>;
+        }>;
+    }>;
+}

package/es/core/schema.js

@@ -0,0 +1 @@
+export {};

package/es/core/utils/event.d.ts

@@ -0,0 +1,7 @@
+import EventEmitter from 'eventemitter3';
+declare const SXP_EVENT_BUS: EventEmitter<string | symbol, any>;
+export declare enum SXP_EVENT_TYPE {
+    PAGE_DID_SHOW = "pageDidShow",
+    PAGE_DID_HIDE = "pageDidHide"
+}
+export default SXP_EVENT_BUS;

package/es/core/utils/event.js

@@ -0,0 +1,8 @@
+import EventEmitter from 'eventemitter3';
+const SXP_EVENT_BUS = new EventEmitter();
+export var SXP_EVENT_TYPE;
+(function (SXP_EVENT_TYPE) {
+    SXP_EVENT_TYPE["PAGE_DID_SHOW"] = "pageDidShow";
+    SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
+})(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
+export default SXP_EVENT_BUS;

package/es/core/utils/getDataByDS.d.ts

@@ -0,0 +1,6 @@
+import { ISchema } from '../schema';
+declare const _default: (apiAddr: string, configs: ISchema['dataSource']) => Promise<{
+    $store: Record<string, any>;
+    idMapName: Record<string, string>;
+}>;
+export default _default;

package/es/core/utils/getDataByDS.js

@@ -0,0 +1,39 @@
+import { __awaiter } from "tslib";
+const pathParamsReg = /:\w+/g;
+export default (apiAddr, configs) => __awaiter(void 0, void 0, void 0, function* () {
+    const $store = {};
+    const idMapName = {};
+    for (let i = 0; i < (configs === null || configs === void 0 ? void 0 : configs.length); i++) {
+        const { id, method, url, urlParams, name, queryString, headers, body } = configs[i];
+        let apiUrl = url;
+        if (urlParams) {
+            Object.entries(urlParams).forEach(([k, v]) => {
+                apiUrl = apiUrl.replace(pathParamsReg, (p) => {
+                    if (p === k) {
+                        return v;
+                    }
+                    else {
+                        return p;
+                    }
+                });
+            });
+        }
+        if (queryString) {
+            apiUrl += queryString;
+        }
+        idMapName[id] = name;
+        try {
+            const result = yield fetch(apiUrl, {
+                method,
+                headers: Object.assign({ 'Content-Type': 'application/json' }, headers),
+                body: JSON.stringify(body)
+            }).then((res) => res.json());
+            $store[id] = result;
+        }
+        catch (error) {
+            console.error('DataSource request error: ', error);
+            $store[id] = {};
+        }
+    }
+    return { $store, idMapName };
+});

package/es/core/utils/getSxpTokenInfo.d.ts

@@ -0,0 +1,2 @@
+import PagebuilderClass from '../Pagebuilder/PagebuilderClass';
+export declare const getSxpTokenInfo: (builder: PagebuilderClass, dataId: string) => Promise<any>;

package/es/core/utils/getSxpTokenInfo.js

@@ -0,0 +1,26 @@
+import { __awaiter } from "tslib";
+const SXP_TOKEN_INFO_KEY = 'SXP_TOKEN_INFO';
+export const getSxpTokenInfo = (builder, dataId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const tenantId = builder.getTenantId();
+    const appId = builder.getAppId();
+    const apiUrl = builder.getApiUrl();
+    const tokenJson = window.localStorage.getItem(SXP_TOKEN_INFO_KEY);
+    let tokenData = JSON.parse(tokenJson || '{}');
+    const currentTime = Date.now();
+    if (currentTime > ((_a = tokenData === null || tokenData === void 0 ? void 0 : tokenData.expireTime) !== null && _a !== void 0 ? _a : 0)) {
+        const tokenRes = yield fetch(`${apiUrl}/storefront/v1/proxy/token/${dataId}`, {
+            method: 'POST',
+            headers: {
+                'x-tenant-id': tenantId || '',
+                'x-app-id': appId || ''
+            }
+        }).then((res) => res.json());
+        if (tokenRes.success) {
+            const data = tokenRes.data;
+            tokenData = Object.assign(Object.assign({}, data), { expireTime: Date.now() + data.expire * 1000 });
+            window.localStorage.setItem(SXP_TOKEN_INFO_KEY, JSON.stringify(tokenData));
+        }
+    }
+    return tokenData;
+});

package/es/core/utils/localStore.d.ts

@@ -0,0 +1,3 @@
+export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
+export declare const storeAndLoadFeUserId: () => string;
+export declare const removeFeUserId: () => void;

package/es/core/utils/localStore.js

@@ -0,0 +1,14 @@
+import { isEmpty } from 'lodash';
+import { uuid } from './tool';
+export const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
+export const storeAndLoadFeUserId = () => {
+    let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
+    if (isEmpty(fakeUserId)) {
+        fakeUserId = uuid(36, 62);
+        window.localStorage.setItem(FAKE_USER_KEY, fakeUserId);
+    }
+    return fakeUserId;
+};
+export const removeFeUserId = () => {
+    window.localStorage.removeItem(FAKE_USER_KEY);
+};

package/es/core/utils/materials.d.ts

@@ -0,0 +1,11 @@
+export declare const getMediaValueByMode: (obj?: Record<string, any>) => any;
+export declare const getBgStyle: (imgSrc: string) => "" | {
+    backgroundImage: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+};
+export declare const getBgStyleByImg: (data: any) => "" | {
+    backgroundImage: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+};

package/es/core/utils/materials.js

@@ -0,0 +1,31 @@
+export const getMediaValueByMode = (obj) => {
+    var _a;
+    if (!obj || typeof obj !== 'object') {
+        return null;
+    }
+    const { mode, link, file, src } = obj;
+    switch (mode) {
+        case 2:
+            return link || null;
+        case 3:
+            return src || null;
+        default:
+            return file && file.length > 0 ? (_a = file[0]) === null || _a === void 0 ? void 0 : _a.url : null;
+    }
+};
+export const getBgStyle = (imgSrc) => {
+    return imgSrc
+        ? {
+            backgroundImage: `url(${imgSrc})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover'
+        }
+        : '';
+};
+export const getBgStyleByImg = (data) => {
+    var _a;
+    const curPageProps = (_a = data === null || data === void 0 ? void 0 : data.props) !== null && _a !== void 0 ? _a : null;
+    const bgImg = curPageProps === null || curPageProps === void 0 ? void 0 : curPageProps.bgImg;
+    const imgSrc = typeof bgImg === 'string' ? bgImg : getMediaValueByMode(bgImg);
+    return getBgStyle(imgSrc);
+};

package/es/core/utils/sessionStore.d.ts

@@ -0,0 +1,3 @@
+export declare const storeAndLoadFeSessionId: () => string;
+export declare const refreshFeSessionId: () => void;
+export declare const removeFeSessionId: () => void;

package/es/core/utils/sessionStore.js

@@ -0,0 +1,26 @@
+import { getUid } from './tool';
+const feRealSessionIdKey = 'feRealSessionIdKey';
+const generateFeSessionId = () => {
+    const uid = getUid();
+    const timestamp = Date.now();
+    const result = `${timestamp}${uid}`;
+    return result;
+};
+export const storeAndLoadFeSessionId = () => {
+    let result = getFeSessionId();
+    if (!result) {
+        result = generateFeSessionId();
+        window.sessionStorage.setItem(feRealSessionIdKey, result);
+    }
+    return result;
+};
+export const refreshFeSessionId = () => {
+    const result = generateFeSessionId();
+    window.sessionStorage.setItem(feRealSessionIdKey, result);
+};
+const getFeSessionId = () => {
+    return window.sessionStorage.getItem(feRealSessionIdKey);
+};
+export const removeFeSessionId = () => {
+    window.sessionStorage.removeItem(feRealSessionIdKey);
+};

package/es/core/utils/tool.d.ts

@@ -0,0 +1,5 @@
+declare function uuid(len: number, radix: number): string;
+declare const getIndexByblockType: (type: string, index: number) => number | "initial";
+export declare const generateRandomString: (length: number) => string;
+export declare const getUid: () => string;
+export { uuid, getIndexByblockType };

package/es/core/utils/tool.js

@@ -0,0 +1,48 @@
+import { v4 as uuidv4 } from 'uuid';
+function uuid(len, radix) {
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    const uuid = [];
+    let i;
+    radix = radix || chars.length;
+    if (len) {
+        for (i = 0; i < len; i++)
+            uuid[i] = chars[0 | (Math.random() * radix)];
+    }
+    else {
+        let r;
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+        uuid[14] = '4';
+        for (i = 0; i < 36; i++) {
+            if (!uuid[i]) {
+                r = 0 | (Math.random() * 16);
+                uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
+            }
+        }
+    }
+    return uuid.join('');
+}
+const getIndexByblockType = (type, index) => {
+    if (type === 'CommodityCarouselBlock' || type === 'CopyBlock') {
+        return 'initial';
+    }
+    else {
+        return index;
+    }
+};
+export const generateRandomString = (length) => {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        counter += 1;
+    }
+    return result;
+};
+export const getUid = () => {
+    const originalUid = uuidv4();
+    const uid = (originalUid === null || originalUid === void 0 ? void 0 : originalUid.replaceAll) ? originalUid.replaceAll('-', '') : generateRandomString(32);
+    return uid;
+};
+export { uuid, getIndexByblockType };

package/es/core/utils/unzip.d.ts

@@ -0,0 +1 @@
+export declare function unzip(b64Data: string): any;

package/es/core/utils/unzip.js

@@ -0,0 +1,10 @@
+import pako from 'pako';
+export function unzip(b64Data) {
+    const strData = atob(b64Data);
+    const charData = strData.split('').map(function (x) {
+        return x.charCodeAt(0);
+    });
+    const binData = new Uint8Array(charData);
+    const data = pako.inflate(binData, { to: 'string' });
+    return JSON.parse(data);
+}

package/es/index.d.ts

@@ -0,0 +1,10 @@
+import { Pagebuilder } from './core/Pagebuilder';
+export * as core from './core';
+export * as materials from './materials';
+export { default as SxpPageRender } from './core/components/SxpPageRender';
+export { default as Modal } from './core/components/SxpPageRender/Modal';
+export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
+export { default as SxpPageCore } from './core/components/SxpPageCore';
+export { default as EditorDataProvider } from './core/context/EditorDataProvider';
+export { useEditorDataProvider } from './core/context/EditorDataProvider';
+export default Pagebuilder;

package/es/index.js

@@ -0,0 +1,12 @@
+import { Pagebuilder } from './core/Pagebuilder';
+import * as core_1 from './core';
+export { core_1 as core };
+import * as materials_1 from './materials';
+export { materials_1 as materials };
+export { default as SxpPageRender } from './core/components/SxpPageRender';
+export { default as Modal } from './core/components/SxpPageRender/Modal';
+export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
+export { default as SxpPageCore } from './core/components/SxpPageCore';
+export { default as EditorDataProvider } from './core/context/EditorDataProvider';
+export { useEditorDataProvider } from './core/context/EditorDataProvider';
+export default Pagebuilder;

package/es/materials/index.d.ts

@@ -0,0 +1 @@
+export * from './sxp';

package/es/materials/index.js

@@ -0,0 +1 @@
+export * from './sxp';

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

@@ -0,0 +1,2 @@
+export * from './popup';
+export * from './template';

package/es/materials/sxp/index.js

@@ -0,0 +1,2 @@
+export * from './popup';
+export * from './template';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.less';
+export interface IAppointFormProps {
+    columns?: any[];
+    title: string;
+    style?: Record<string, any>;
+    textStyle?: Record<string, any>;
+    bgImg?: Record<string, any> | string;
+    submitBgColor?: string;
+    submitColor?: string;
+    submitText?: string;
+    submitApiUrl?: string;
+    submitEmail?: string;
+    layoutType?: 'horizontal' | 'vertical' | 'inline';
+    onClick?: () => void;
+}
+declare const _default: React.NamedExoticComponent<IAppointFormProps>;
+export default _default;

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

@@ -0,0 +1,77 @@
+import { __awaiter, __rest } from "tslib";
+import { css } from '@emotion/css';
+import React, { memo, useMemo, useRef, useState } from 'react';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { cloneDeep, debounce } from 'lodash';
+import { useEditor, useSxpDataSource } from '../../../../core/hooks';
+import './index.less';
+const AppointForm = (_a) => {
+    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, onClick } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "onClick"]);
+    const { setPopup } = useEditor();
+    const { submitForm } = useSxpDataSource();
+    const formRef = useRef();
+    const [loading, setLoading] = useState(false);
+    const defaultColumns = 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 = useMemo(() => {
+        if (layoutType === undefined) {
+            const list = 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 cloneDeep(columns) || defaultColumns;
+        }
+    }, [layoutType, columns, defaultColumns]);
+    const handleSubmit = debounce(() => __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.createElement("div", { className: 'pb-appoint-form' },
+        React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}` }, title),
+        React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
+            React.createElement("div", { className: 'pb-appoint-form-container' },
+                React.createElement(BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+        React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
+            React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: {
+                    color: submitColor,
+                    background: submitBgColor
+                } }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
+};
+export default memo(AppointForm);

package/es/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/es/materials/sxp/popup/AppointForm/interactionRender.js

@@ -0,0 +1,11 @@
+export default [
+    {
+        title: '点击事件',
+        child: [
+            {
+                type: 'link',
+                name: 'onClick'
+            }
+        ]
+    }
+];

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

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

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

@@ -0,0 +1,36 @@
+import interactionRender from './interactionRender';
+import settingRender from './settingRender';
+import AppointFormComponent from '.';
+import { createMaterial } from '../../../../core/create';
+const AppointForm = createMaterial(AppointFormComponent, {
+    displayName: '预约表单',
+    icon: '',
+    category: 'popup',
+    type: 'AppointForm',
+    related: {
+        settingRender,
+        bindableProps: [],
+        interactionRender
+    },
+    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
+});
+export { AppointForm };