# Comment
通用评论系统及编辑器
`version 0.2.0`
```js
import Comment, { Editor } from 'comment';
```
## Props
#### 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 | 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(value) | | false | 点击提交按钮的回调函数|
| btnSubmitText | string | 发表 | false | 提交按钮的文字|
| btnLoading | boolean | false | false | 按钮是否正在加载中|
| btnDisable | boolean | false | false | 按钮是否禁用|
| button | ReactNode | | false | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求，则可以使用 button 来自定义提交编辑器值的按钮|
| emojiToolIcon | ReactNode | | false | Toolbar 中表情的图标 |
| imageToolIcon | ReactNode | | false | Toolbar 中上传文件的图标 |
### 什么时候不要使用 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
value={this.state.value}
onChange={(value) => this.setState({ value })}
onClick={() => console.log(this.state.value)}
>
自定义按钮
</Button>
)}
/>
</Comment>
```
## 使用
### 作为组件使用
```
# 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 回调
- [ ] 对评论的回复点赞，报错
- [ ] oss/sts 接口报错
- [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`