瀏覽代碼

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

node 5 年之前
父節點
當前提交
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
 `version 0.2.0`
5
 `version 0.2.0`
6
 
6
 
7
 ```js
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
 | props      | type    | default                            | required | description                                  |
16
 | props      | type    | default                            | required | description                                  |
22
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
21
 | showList   | boolean | true                               | false    | 是否显示评论列表                             |
23
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
22
 | showEditor | boolean | true                               | false    | 是否显示评论输入框                           |
24
 | showHeader | boolean | true                               | false    | 是否显示评论顶部的提示                       |
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
 | props         | type            | default       | required | description                                                                                       |
30
 | props         | type            | default       | required | description                                                                                       |
32
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
31
 | ------------- | --------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
36
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
35
 | showUpload    | boolean         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
37
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
36
 | value         | string          |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
38
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
37
 | onChange      | function(value) |               | false    | 编辑器内容改变的回调函数                                                                          |
39
-| onSubmit      | function(value) |               | false    | 点击提交按钮的回调函数                                                                            |
38
+| onSubmit      | function({ text, files }) |               | false    | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表                           |
40
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
39
 | btnSubmitText | string          | 发表          | false    | 提交按钮的文字                                                                                    |
41
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
40
 | btnLoading    | boolean         | false         | false    | 按钮是否正在加载中                                                                                |
42
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
41
 | btnDisable    | boolean         | false         | false    | 按钮是否禁用                                                                                      |
131
 }
130
 }
132
 
131
 
133
 
132
 
134
-<App type={1} businessId="test">
133
+<Comment type={1} businessId="test">
135
   <Editor 
134
   <Editor 
136
     // 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
135
     // 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
137
     onRef={ref => this.editor = ref } 
136
     onRef={ref => this.editor = ref } 
138
     onSubmit={() => this.handleChangeSubmit()}
137
     onSubmit={() => this.handleChangeSubmit()}
139
   />
138
   />
140
-</App>
139
+</Comment>
141
 ```
140
 ```
142
 
141
 
143
 **注意上面的 `onRef={ref => this.editor = ref }`**,这是实现父组件调用子组件方法的关键。**
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
 
241
 
231
 - `yarn build` 将项目打包成一个单页应用
242
 - `yarn build` 将项目打包成一个单页应用
232
 - `yarn lib` 将项目打包成一个 es5 组件
243
 - `yarn lib` 将项目打包成一个 es5 组件
233
-- `yarn prettier` 格式化代码
244
+- `yarn prettier` 优化代码格式
234
 
245
 
235
 ## TODO
246
 ## TODO
236
 
247
 

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

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

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

11
 
11
 
12
   /**
12
   /**
13
    * 提交评论
13
    * 提交评论
14
-   * @param {string} value 需要提交的评论的值
14
+   * @param {object} { text<string>, files<array> } 需要提交的评论的文本和图片
15
    * @param {function} cb 提交成功后的回掉
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
     const { action, commentId, replyId, callback } = this.props;
25
     const { action, commentId, replyId, callback } = this.props;
19
     if (action === "comment") {
26
     if (action === "comment") {
20
       this.props.app.sCreateComment(
27
       this.props.app.sCreateComment(

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

97
    */
97
    */
98
   handleSubmit() {
98
   handleSubmit() {
99
     let { value, fileMap, fileList } = this.state;
99
     let { value, fileMap, fileList } = this.state;
100
+    const files = [];
100
     if (fileList.length) {
101
     if (fileList.length) {
101
-      value += "<br/>";
102
       fileList.forEach(item => {
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
       this.resetState();
107
       this.resetState();
108
     });
108
     });
109
   }
109
   }

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

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