npm package: @gaoding/ska-sdk
Description: 稿定设计SKA SDK
Author: luyou
Latest version: 0.1.2

# @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

### 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 则会终止关闭弹窗（该方法可用于防止用户误操作关闭） |

#### 类型

```javascript
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 判断逻辑 |

#### 类型

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