@gaoding/ska-sdk

稿定设计 SKA 客户对接 SDK。

安装

npm install @gaoding/ska-sdk

或

yarn add @gaoding/ska-sdk

用法

import { createSDK, PageEventTypes } from '@gaoding/ska-sdk';

const gdSDK = createSDK({
    // 指定容器，若为空则以弹窗的方式打开
    container: '#container',
    // ...
});

// 打开编辑器页
const handleOpenEditor = (query)=> {
    gdSDK.open({
        // 页面域名
        origin: 'https://xxx',
        // 页面路径
        path: '/editor/path',
        // 页面参数
        query,
        // 事件映射
        eventMap: {
            [PageEventTypes.EDITOR_SAVE]: async () => {
                console.log(info);
                // 直接关闭编辑器
                gdSDK.close();
                // 如果是新增操作，拿到workId，保存到数据库
                // 其他操作
            },
            [PageEventTypes.EDITOR_DOWNLOAD]: async () => {
                // 编辑器触发下载的回调函数

                // 处理完业务逻辑后，关闭页面
                gdSDK.close();
            }
        }
    })
}

// 打开模板中心页
const handleOpenTemplateList = ()=> {
    gdSDK.open({
        // 页面域名
        origin: 'https://xxx',
        // 页面路径
        path: '/xxx/xxx',
        // 页面参数
        query: {
            code: 'xxx',
            page: 'xxx',
        },
        // 事件映射
        eventMap: {
            [PageEventTypes.TEMPLATE_SELECT]: async (templet) => {
                // 选择模板后的回调
                handleOpenEditor({
                    id: templet.id,
                    // ...其他参数
                })
            },
        }
    })
}

//或者也可以通过事件监听操作回调
gdSDK.on(PageEventTypes.TEMPLATE_SELECT, (templet) => {
    console.log(templet);
    // 选择模板后的回调
    handleOpenEditor({
        id: templet.id,
        // ...其他参数
    })
});

API

createSDK Config

| 参数 | 类型 | 默认值 | 说明 | | ------------ | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | | debug | boolean | false | 打印 log | | container | string \| HTMLElement | null | 指定容器，若为空则以弹窗的方式打开 | | iframeProps | IframeProps | null | 自定义覆盖 iframe 的样式及类名 | | modalProps | IframeModalProps | null | 自定义覆盖 modal 弹窗的样式 | | onCloseModal | (...args: any[]) => Promise<void \| boolean> \| void \| boolean | null | 以弹窗形式打开时，点击关闭按钮时触发关闭弹窗操作，但如果函数返回 false 则会终止关闭弹窗（该方法可用于防止用户误操作关闭） |

类型

interface IframeProps {
    // iframe 样式
    css?: Object | string;
    // iframe 类名
    className?: string;
}

interface IframeModalProps {
  	// 整个弹窗最外层元素的样式
    wrapperStyle?: string;
  	// 关闭按钮外层元素的样式
    btnStyle?: string;
  	// 弹窗的类名
    modalClass?: string;
  	// 弹窗的样式
    modalStyle?: string;
  	// 遮罩层的样式
    maskStyle?: string;
  	// 关闭按钮
    btnIcon?: HTMLElement;
}

createSDK 返回值

| 参数 | 类型 | 说明 | | ----- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | open | (options: PageOptions) => void | 打开具体页面的方法 | | emit | (type: string, payload?: any) => void \| Promise<any> | 触发页面事件的方法，可异步获取返回值 | | on | (type: string, handler: Function) => void | 监听页面内事件的方法 | | once | (type: string, handler: Function) => void | 监听页面内事件的方法，仅触发一次 | | off | (type: string, handler: Function) => void | 取消监听事件的方法 | | close | (triggerOnCloseModal?: boolean, ...args: any[])=> void | 关闭页面的方法。在弹窗模式下，传入 triggerOnCloseModal 为 true，可触发 onCloseModal 判断逻辑 |

类型

interface PageOptions {
    /**
     * 页面域名
     */
    origin?: string;
    /**
     * 页面路径
     */
    path: string;
    /**
     * 页面参数
     */
    query?: Record<string, any>;
    /**
     * 事件映射
     */
    eventMap?: Record<string, any> | null;
}