@gaoding/ska-sdk

稿定设计 SKA 客户对接 SDK。

安装

``bash
npm install @gaoding/ska-sdk
`

或

`bash
yarn add @gaoding/ska-sdk
`

用法

`javascript
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

$3

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

#### 类型

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

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

$3

| 参数 | 类型 | 说明 |
| ----- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| open | (options: PageOptions) => void | 打开具体页面的方法 |
| emit | (type: string, payload?: any) => void \| Promise | 触发页面事件的方法，可异步获取返回值 |
| 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 判断逻辑 |

#### 类型

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