# Comment

通用评论系统及编辑器

`version 0.3.0`

```js
import Comment, { Editor, RenderText } from 'comment';
```

- [deprecate] 表示不推荐使用

## Comment


| props      | type    | default                            | required | description                                  |
| ---------- | ------- | ---------------------------------- | -------- | -------------------------------------------- |
| type       | number  |                                    | true     | 评论的 type                                  |
| businessId | string  |                                    | true     | 评论的 business id                           |
| API        | string  | http://api.links123.net/comment/v1 | false    | API 前缀                                     |
| showList   | boolean | true                               | false    | 是否显示评论列表                             |
| showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
| showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
| token      | string  |                                    | false    |  [deprecate] token，用于身份认证，非必须。默认使用 cookie |



## Editor

| props         | type            | default       | required | description                                                                                       |
| ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
| rows          | number          | 5             | false    | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行                     |
| placeholder   | string          | 说点什么吧... | false    | 评论的中的提示文字                                                                                |
| showEmoji     | boolean         | true          | false    | 是否显示 Toolbar 中表情工具                                                                       |
| showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
| value         | string          |               | false    | 编辑器的值。如果设置了该属性，则编辑器变为受控组件，需要父组件来维护 value                        |
| onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                           |
| btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
| btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
| btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
| button        | ReactNode       |               | false    | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮 |
| emojiToolIcon | ReactNode       |               | false    | Toolbar 中表情的图标                                                                              |
| imageToolIcon | ReactNode       |               | false    | Toolbar 中上传文件的图标                                                     |
| onRef      | function |                                   | false    | 传递子组件的引用                       |

### 什么时候不要使用 value/onChange/onSubmit

如果将 `comment` 作为通用评论组件，则不要使用 `value` `onChange` `onSubmit`。因为组件内部，实现了通用评论的业务逻辑。

**可以使用 value/onChange/onSubmit 的情况:**

- 单独使用其中的 `Editor`。即 `import { Editor } from 'comment'`
- 不需要展示评论列表，即设置 `showList: false`

```jsx
// 单独使用 Editor
<Editor value={this.state.value} onChange={(v) => this.setState({ value })} />

// 不需要展示评论列表

<Comment type={1}  showList={false}>
  <Editor value={this.state.value} onChange={(v) => this.setState({ value })} />
</Comment>

```

### button 

如果使用 `button`，则 `btnLoading` `btnDisable` `btnSubmitText` 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。

所以如果要提交编辑器的值，需要自己在 `Button` 组件上实现提交功能。编辑器的值，可以通过 `onChange` 方法获取到。

如果使用了 `button` 属性，并且没有为其设置 `onClick` 方法，则 `onClick` 默认为发布评论，即点击按钮会发表评论:

```jsx
// 如下代码所示
// 点击“自定义按钮”的时候，会发表评论。这是由 Comment 组件内部实现的业务逻辑
<Comment type={1} businessId="test" showList={false}>
  <Editor 
    button={(
      <Button
        type="primary"
        ghost
      >
        自定义按钮
      </Button>
    )}
  />
</Comment>
```

如果使用了 `button` 属性，并且设置了 `onClick` 方法，则会覆盖默认的 `onClick` 方法:

```jsx
// 下面的代码，点击的时候，不会提交评论
// 而是会输出 state 的值（
// 即编辑器的值，因为 onChange 将编辑器输入的值通过回调函数传递给了父组件）
<Comment type={1} businessId="test" showList={false}>
  <Editor 
    button={(
      <Button
        type="primary"
        ghost
        onChange={(value) => this.setState({ value })}
        onClick={() => console.log(this.state.value)}
      >
        自定义按钮
      </Button>
    )}
    value={this.state.value}
  />
</Comment>
```

### onRef

如果你需要在父组件里面调用子组件的方法，就可以使用 `onRef`。主要是用于调用 Editor 组件内部的 `resetState` 方法。

如果你需要在父组件里面，手动清空 Editor 里面的数据，则可以使用 `resetState`。因为即使父组件传入了 `value`， Editor 内部也会保存一份 `value` 的值，用于 `onSubmit` 回调将值传递给父组件。所以可能存在，当子组件值没有清除，而父组件的 `value` 为空的情况，导致编辑器中文字和实际预想的不一致。所以当在父组件里面使用了 `value` 并重置 `value` 的时候，最好清空 Editor 的 state。

具体使用方式如下：


```jsx

handleChangeSubmit() {
  // 点击按钮，调用 onSubmit 的时候，清空 Editor 的数据
  this.editor.resetState();
}


<Comment type={1} businessId="test">
  <Editor 
    // 使用 onRef 方法创建一个 Editor 组件的引用，并添加到 this 上面
    onRef={ref => this.editor = ref } 
    onSubmit={() => this.handleChangeSubmit()}
  />
</Comment>
```

**注意上面的 `onRef={ref => this.editor = ref }`**，这是实现父组件调用子组件方法的关键。**


## RenderText

```jsx

import { RenderText } from 'comment';

render() {
  return RenderText('test [呲牙]')
}
```


## 使用


### 作为组件使用

```
# npm 安装
$ npm install git+https://git.links123.net/npm/comment.git --save
# yarn 安装
$ yarn add git+https://git.links123.net/npm/comment.git
```

然后在代码里面引入 `comment` 组件：

```jsx
import Comment, { Editor } from 'comment'

// ...

render() {
  return (
    <Comment type={1} businessId="test">
      <Editor />
    </Comment>
  )
}
```

**注意：最后，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**


### 作为静态文件引入

作为静态文件使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：

```js
// ...
<App type={1} businessId="test">
    <Editor />
</App>
```

然后再进行打包：

```
$ yarn build
```

打包后会得到静态文件，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。


接下来还需要引入 OSS SDK，用于直传文件到 OSS。


最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。

如下所示：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
</head>
<body>
  <div id="root-comment" style="width: 700px"></div>
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
  <script src="./static/js/main.eac872df.js"></script>
</body>
</html>
```

## 开发

```
$ git clone https://git.links123.net/npm/comment
$ cd comment
$ yarn
$ yarn start
```

- `yarn build` 将项目打包成一个单页应用
- `yarn lib` 将项目打包成一个 es5 组件
- `yarn prettier` 优化代码格式

## TODO

- [x] 前后端统一错误码
- [x] type 和 businessID 的定义
- [x] Editor onSubmit 回调
- [x] 对评论的回复点赞，报错
- [x] oss/sts 接口报错
- [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`
- [ ] 上传图片的时候偶尔会出现InvalidPart