# im-sdk

> im-sdk是一个基于React+Mobx的聊天消息显示框架，主要组成部分为消息展示列表。

Latest version **1.0.26** (published 2017-09-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install im-sdk
pnpm add im-sdk
yarn add im-sdk
bun add im-sdk
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.26 |
| Published | 2017-09-19 |
| First published | 2017-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | lvcy |

## Links

- npm: https://www.npmjs.com/package/im-sdk
- npm.io page: https://npm.io/package/im-sdk

## Dependencies (6)

- [mobx](https://npm.io/package/mobx.md) ^3.2.2
- [react](https://npm.io/package/react.md) ^15.6.1
- [swiper](https://npm.io/package/swiper.md) ^4.0.0-beta.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [mobx-react](https://npm.io/package/mobx-react.md) ^4.2.2

## Recent versions

- 1.0.26 (latest) — 2017-09-19
- 1.0.25 — 2017-09-19
- 1.0.24 — 2017-09-19

## README

# im-sdk 一个轻量级的前端消息展示框架

im-sdk是一个基于React+Mobx的聊天消息显示框架，主要组成部分为消息展示列表。

## 界面预览

![im-sdk-example](http://storage.jd.com/jimi/resources/im-sdk-example.png)

## 快速开始

```html
<!-- 页面上声明一个容器用于Mount组件 -->
<div class="root"></div>
```

```javascript
import React from 'react';
import ImSdk from 'im-sdk';
import Product from './components/product';

// 获取sdk实例
const sdk = new ImSdk();
// 将实例渲染到root标签上，然后获取bot实例
const bot = sdk.render('#root');

bot.text('您好，我是Jimi智能机器人', 'robot').new().then(()=> {
    return bot.text('有什么我能帮助您的吗？', 'robot').new();
}).then(()=> {
    return bot.text('我想查询一下我的订单到哪里了', 'human').new();
}).then(()=> {
    return bot.component(Product, {}).new();
}).then(()=> {
    return bot.text('是这个商品吗？','robot').new();
}).then(()=> {
    return bot.text('是的','human').new();
}).then(()=> {
    return bot.text('当前商品正在配送中，预计下午两点中送达，请耐心等待！如有需要，可直接联系配送员,配送员联系电话：13800138000', 'robot').new()
});
```

## 接口预览

### sdk
|函数名|参数|说明|
|-----|---|----|
|sdk.render(root)|string|渲染聊天列表组件，将其挂载到参数中提供的Dom节点上|
|sdk.mountEditor(editor)|React Component|添加聊天编辑框，聊天编辑框位于聊天列表下方|
|sdk.mountHeader(header)|React Component|添加当天对话者信息，该组件位于消息列表的上方|
|sdk.registerScrollEvent(fn)|function|添加下拉刷新时的回调函数，当列表到达顶部后继续下拉，则触发回调函数|

### bot
|函数名|参数|说明|
|-----|---|----|
|bot.text(content, target)|(string, string)|往消息列表中添加文本消息|
|bot.image(url, target)|(string, string)|往消息列表中添加图片消息|
|bot.component(com,data)|(Component, Object)|再消息列表中渲染一个自定义组件消息|
|bot.system(content)|string|渲染一条系统提示消息|
|bot.timeLine(date)|string/number/Date|渲染一条时间消息|

> 若要正确的渲染消息，还需要再以上接口的基础上调用new()或old()方法，new()表示再消息列表底部追加新消息, old()表示在消息列表的最前面插入消息，可用于添加历史消息记录。使用方式如下所示：
 
```javascript
bot.text('Hello world', 'human').new();  // 在消息列表底部渲染一条新信息
bot.text('Hello javascript').old();      // 在消息列表顶部插入一条信息
```

## 自定义组件示例

如果我们想在消息列表中渲染一条自定义组件消息，则需要对组件消息进行定义，下面示例定义了一个商品信息组件

* 自定义组件消息定义(product.js)

```jsx harmony
import React from 'react';

class Product extends React.PureComponent {
    render() {
        return (
            <div className="product">
                <div className="product__title">{this.props.data.name}</div>
                <div className="product__image" style={{backgroundImage: `url('${this.props.data.cover}')`}}/>
                <div className="product__price">&yen;{this.props.data.price}</div>
            </div>
        );
    }
    componentDidMount() {
        this.props.done(this.props.data);
    }
}
export default Product;
```

* 渲染自定义组件消息

```javascript
import Product from './product.js';
const data = {
    name : '商品名称',
    cover: '商品封面',
    price: '商品价格'
};
bot.component(Product, data).new();
```

对于每个自定义组件，父组件会向其传入两个参数：
* data   
* done  

data为渲染组件需要用到的数据，done为组件渲染完成或用户主动操作后必须要调用的回调函数，若往done中添加一个参数，则上层的Promise或获取到返回的值。

```javascript
bot.component(Product, data).then(res=> {
    console.log(res); // res为调用done()方法时返回的值
})
```

---
_Source: https://npm.io/package/im-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._