浏览代码

Merge branch 'feature/render' of node/npmcomment into master

node 6 年前
父节点
当前提交
641ea719d0
共有 6 个文件被更改,包括 52 次插入19 次删除
  1. 21
    10
      README.md
  2. 2
    1
      src/App.js
  3. 9
    2
      src/components/CommentInput/index.js
  4. 3
    3
      src/components/Editor/index.js
  5. 13
    0
      src/components/RenderText/index.js
  6. 4
    3
      src/index.js

+ 21
- 10
README.md 查看文件

@@ -5,13 +5,12 @@
5 5
 `version 0.2.0`
6 6
 
7 7
 ```js
8
-import Comment, { Editor } from 'comment';
8
+import Comment, { Editor, RenderText } from 'comment';
9 9
 ```
10 10
 
11
+- [deprecate] 表示不推荐使用
11 12
 
12
-## Props
13
-
14
-#### Comment
13
+## Comment
15 14
 
16 15
 
17 16
 | props      | type    | default                            | required | description                                  |
@@ -22,11 +21,11 @@ import Comment, { Editor } from 'comment';
22 21
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
23 22
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
24 23
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
25
-| token      | string  |                                    | false    | token,用于身份认证,非必须。默认使用 cookie |
24
+| token      | string  |                                    | false    |  [deprecate] token,用于身份认证,非必须。默认使用 cookie |
26 25
 
27 26
 
28 27
 
29
-##### Editor
28
+## Editor
30 29
 
31 30
 | props         | type            | default       | required | description                                                                                       |
32 31
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
@@ -36,7 +35,7 @@ import Comment, { Editor } from 'comment';
36 35
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
37 36
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
38 37
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
39
-| onSubmit      | function(value) |               | false    | 点击提交按钮的回调函数                                                                            |
38
+| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表                           |
40 39
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
41 40
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
42 41
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
@@ -131,18 +130,30 @@ handleChangeSubmit() {
131 130
 }
132 131
 
133 132
 
134
-<App type={1} businessId="test">
133
+<Comment type={1} businessId="test">
135 134
   <Editor 
136 135
     // 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
137 136
     onRef={ref => this.editor = ref } 
138 137
     onSubmit={() => this.handleChangeSubmit()}
139 138
   />
140
-</App>
139
+</Comment>
141 140
 ```
142 141
 
143 142
 **注意上面的 `onRef={ref => this.editor = ref }`**,这是实现父组件调用子组件方法的关键。**
144 143
 
145 144
 
145
+## RenderText
146
+
147
+```jsx
148
+
149
+import { RenderText } from 'comment';
150
+
151
+render() {
152
+  return RenderText('test [呲牙]')
153
+}
154
+```
155
+
156
+
146 157
 ## 使用
147 158
 
148 159
 
@@ -230,7 +241,7 @@ $ yarn start
230 241
 
231 242
 - `yarn build` 将项目打包成一个单页应用
232 243
 - `yarn lib` 将项目打包成一个 es5 组件
233
-- `yarn prettier` 格式化代码
244
+- `yarn prettier` 优化代码格式
234 245
 
235 246
 ## TODO
236 247
 

+ 2
- 1
src/App.js 查看文件

@@ -8,6 +8,7 @@ import { isFunction } from "./helper";
8 8
 import CommentInput from "./components/CommentInput";
9 9
 import CommentList from "./components/CommentList";
10 10
 import Editor from "./components/Editor";
11
+import RenderText from "./components/RenderText";
11 12
 import lang from "./lang";
12 13
 import "./App.css";
13 14
 
@@ -402,6 +403,6 @@ App.defaultProps = {
402 403
   showHeader: true
403 404
 };
404 405
 
405
-export { Editor };
406
+export { Editor, RenderText };
406 407
 
407 408
 export default App;

+ 9
- 2
src/components/CommentInput/index.js 查看文件

@@ -11,10 +11,17 @@ class CommentInput extends Component {
11 11
 
12 12
   /**
13 13
    * 提交评论
14
-   * @param {string} value 需要提交的评论的值
14
+   * @param {object} { text<string>, files<array> } 需要提交的评论的文本和图片
15 15
    * @param {function} cb 提交成功后的回掉
16 16
    */
17
-  handleSubmit(value, cb) {
17
+  handleSubmit({ text, files }, cb) {
18
+    let value = text;
19
+    if (files && files.length) {
20
+      value += "<br /><br />";
21
+      files.forEach(file => {
22
+        value += `[${file}]`;
23
+      });
24
+    }
18 25
     const { action, commentId, replyId, callback } = this.props;
19 26
     if (action === "comment") {
20 27
       this.props.app.sCreateComment(

+ 3
- 3
src/components/Editor/index.js 查看文件

@@ -97,13 +97,13 @@ class Editor extends React.Component {
97 97
    */
98 98
   handleSubmit() {
99 99
     let { value, fileMap, fileList } = this.state;
100
+    const files = [];
100 101
     if (fileList.length) {
101
-      value += "<br/>";
102 102
       fileList.forEach(item => {
103
-        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
103
+        files.push(`${OSS_LINK}${fileMap[item.uid]}`);
104 104
       });
105 105
     }
106
-    this.props.onSubmit(value, () => {
106
+    this.props.onSubmit({ text: value, files }, () => {
107 107
       this.resetState();
108 108
     });
109 109
   }

+ 13
- 0
src/components/RenderText/index.js 查看文件

@@ -0,0 +1,13 @@
1
+import React from "react";
2
+import { renderContent } from "../../helper";
3
+
4
+const App = text => (
5
+  <div
6
+    className="comment-item-content"
7
+    dangerouslySetInnerHTML={{
8
+      __html: renderContent(text)
9
+    }}
10
+  />
11
+);
12
+
13
+export default App;

+ 4
- 3
src/index.js 查看文件

@@ -2,7 +2,7 @@ import React, { Component } from "react";
2 2
 import ReactDOM from "react-dom";
3 3
 // e.g.
4 4
 // import { Button, Icon } from "antd";
5
-import App, { Editor } from "./App";
5
+import App, { Editor, RenderText } from "./App";
6 6
 import registerServiceWorker from "./registerServiceWorker";
7 7
 
8 8
 class Index extends Component {
@@ -20,13 +20,14 @@ class Index extends Component {
20 20
     console.log("handleChangeValue value: ", value);
21 21
   }
22 22
 
23
-  handleChangeSubmit(value) {
23
+  handleChangeSubmit({ text, files }) {
24 24
     this.setState({ loading: true }, () => {
25 25
       setTimeout(() => {
26 26
         this.setState({ loading: false });
27 27
       }, 2000);
28 28
     });
29
-    console.log("submit value: ", value);
29
+    console.log("submit text: ", text);
30
+    console.log("submit files: ", files);
30 31
   }
31 32
 
32 33
   render() {