浏览代码

Merge branch 'master' of node/npmcomment into master

node 6 年前
父节点
当前提交
10f157b08d

+ 77
- 78
README.md 查看文件

@@ -8,10 +8,86 @@
8 8
 import Comment, { Editor, RenderText } from 'comment';
9 9
 ```
10 10
 
11
-- 标记了`deprecated`的配置项表示不推荐使用,并且可能在将来版本中不再受支持。
11
+
12
+## 使用
13
+
14
+
15
+### 作为组件使用
16
+
17
+```
18
+# npm 安装
19
+$ npm install git+https://git.links123.net/npm/comment.git --save
20
+# yarn 安装
21
+$ yarn add git+https://git.links123.net/npm/comment.git
22
+```
23
+
24
+然后在代码里面引入 `comment` 组件:
25
+
26
+```jsx
27
+import Comment, { Editor } from 'comment'
28
+
29
+// ...
30
+
31
+render() {
32
+  return (
33
+    <Comment type={1} businessId="test">
34
+      <Editor />
35
+    </Comment>
36
+  )
37
+}
38
+```
39
+
40
+**注意:最后,还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
41
+
42
+
43
+### 在非 React.js 项目中使用 ~~作为静态文件引入~~
44
+
45
+1. 引入通用评论的 css 和 js 文件。在 `./assets/static` 目录。
46
+2. 调用 `window.renderComment` 方法并传入对应参数来渲染通用评论。参数列表:
47
+  - `id`: string, 必填, 渲染评论的节点的 ID
48
+  - `type`: number, 必填, 评论的 type    
49
+  - `businessId`: string, 必填, 评论的 businessId    
50
+
51
+具体可参考 `./assets/example.html`。
52
+
53
+例子如下:
54
+
55
+```html
56
+<!DOCTYPE html>
57
+<html>
58
+<head>
59
+  <meta charset="utf-8" />
60
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
61
+  <title>通用评论 demo</title>
62
+  <meta name="viewport" content="width=device-width, initial-scale=1">
63
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
64
+</head>
65
+<body>
66
+  <div>
67
+    <h1>在非 React.js 项目中使用通用评论</h1>
68
+    <p>将其渲染到 id 为 `comment` 的节点上</p>
69
+    <div id="comment"></div>
70
+  </div>
71
+  
72
+  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
73
+  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
74
+  <script type="text/javascript">
75
+    // 调用 renderComment 这个方法,渲染通用评论
76
+    window.renderComment({
77
+      id: 'comment', // 渲染通用评论到 comment 这个节点,id 名称可 自定义
78
+      type: 1, // 评论的 type
79
+      businessId: 'test' // 评论的 businessId
80
+    })
81
+  </script>
82
+</body>
83
+</html>
84
+```
85
+
12 86
 
13 87
 ## Comment
14 88
 
89
+- 标记了`deprecated`的配置项表示不推荐使用,并且可能在将来版本中不再受支持。
90
+
15 91
 
16 92
 | props            | type           | default                            | required | description                                                                       |
17 93
 | ---------------- | -------------- | ---------------------------------- | -------- | --------------------------------------------------------------------------------- |
@@ -169,83 +245,6 @@ render() {
169 245
 }
170 246
 ```
171 247
 
172
-
173
-## 使用
174
-
175
-
176
-### 作为组件使用
177
-
178
-```
179
-# npm 安装
180
-$ npm install git+https://git.links123.net/npm/comment.git --save
181
-# yarn 安装
182
-$ yarn add git+https://git.links123.net/npm/comment.git
183
-```
184
-
185
-然后在代码里面引入 `comment` 组件:
186
-
187
-```jsx
188
-import Comment, { Editor } from 'comment'
189
-
190
-// ...
191
-
192
-render() {
193
-  return (
194
-    <Comment type={1} businessId="test">
195
-      <Editor />
196
-    </Comment>
197
-  )
198
-}
199
-```
200
-
201
-**注意:最后,还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
202
-
203
-
204
-### 作为静态文件引入
205
-
206
-作为静态文件使用的话,首先需要在 `index.js` 里面设置好组件的 `props`,主要是 `type` 和 `businessId`:
207
-
208
-```js
209
-// ...
210
-<App type={1} businessId="test">
211
-    <Editor />
212
-</App>
213
-```
214
-
215
-然后再进行打包:
216
-
217
-```
218
-$ yarn build
219
-```
220
-
221
-打包后会得到静态文件,分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
222
-
223
-
224
-接下来还需要引入 OSS SDK,用于直传文件到 OSS。
225
-
226
-
227
-最后创建一个 id 为 `root-comment` 的标签,作为渲染通用评论的跟元素。
228
-
229
-如下所示:
230
-
231
-```html
232
-<!DOCTYPE html>
233
-<html>
234
-<head>
235
-  <meta charset="utf-8" />
236
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
237
-  <title>Page Title</title>
238
-  <meta name="viewport" content="width=device-width, initial-scale=1">
239
-  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
240
-</head>
241
-<body>
242
-  <div id="root-comment" style="width: 700px"></div>
243
-  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
244
-  <script src="./static/js/main.eac872df.js"></script>
245
-</body>
246
-</html>
247
-```
248
-
249 248
 ## 开发
250 249
 
251 250
 ```

+ 25
- 0
assets/example.html 查看文件

@@ -0,0 +1,25 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+  <meta charset="utf-8" />
5
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+  <title>通用评论 demo</title>
7
+  <meta name="viewport" content="width=device-width, initial-scale=1">
8
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/comment.0.5.13.css" />
9
+</head>
10
+<body>
11
+  <div>
12
+    <h1>在非 React.js 项目中使用通用评论</h1>
13
+    <p>将其渲染到 id 为 `comment` 的节点上</p>
14
+    <div id="comment"></div>
15
+  </div>
16
+  <script type="text/javascript" src="./static/js/comment.0.5.13.js"></script>
17
+  <script type="text/javascript">
18
+    window.renderComment({
19
+      id: 'comment',
20
+      type: 1,
21
+      businessId: 'test'
22
+    })
23
+  </script>
24
+</body>
25
+</html>

+ 2
- 0
assets/static/css/comment.0.5.13.css
文件差异内容过多而无法显示
查看文件


+ 1
- 0
assets/static/css/comment.0.5.13.css.map
文件差异内容过多而无法显示
查看文件


+ 2
- 0
assets/static/js/comment.0.5.13.js
文件差异内容过多而无法显示
查看文件


+ 1
- 0
assets/static/js/comment.0.5.13.js.map
文件差异内容过多而无法显示
查看文件


+ 128
- 0
src/index.example.js 查看文件

@@ -0,0 +1,128 @@
1
+import React, { Component } from "react";
2
+import ReactDOM from "react-dom";
3
+// e.g.
4
+// import { Button, Icon } from "antd";
5
+// import App, { Editor, RenderText } from "./App";
6
+import App, { Editor } from "./App";
7
+import registerServiceWorker from "./registerServiceWorker";
8
+
9
+class Index extends Component {
10
+  constructor(props) {
11
+    super(props);
12
+    this.state = {
13
+      page: 1,
14
+      value: ""
15
+    };
16
+    this.onPageChange = this.onPageChange.bind(this);
17
+    this.handleChangeValue = this.handleChangeValue.bind(this);
18
+    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
19
+  }
20
+
21
+  onPageChange(page) {
22
+    this.setState({
23
+      page
24
+    });
25
+  }
26
+
27
+  handleChangeValue(value) {
28
+    this.setState({ value });
29
+    console.log("handleChangeValue value: ", value);
30
+  }
31
+
32
+  handleChangeSubmit({ text, files }) {
33
+    this.setState({ loading: true }, () => {
34
+      setTimeout(() => {
35
+        this.setState({ loading: false });
36
+      }, 2000);
37
+    });
38
+    console.log("submit text: ", text);
39
+    console.log("submit files: ", files);
40
+  }
41
+
42
+  render() {
43
+    // 最简单的用法
44
+    return (
45
+      <App
46
+        type={1}
47
+        businessId="test"
48
+        showAlertComment
49
+        showAlertReply
50
+        showAlertFavor
51
+        showError={false}
52
+        userId={71299}
53
+        page={this.state.page}
54
+        onPageChange={this.onPageChange}
55
+        pageType="more"
56
+        onError={(msg, { response }) => {
57
+          if (response.status === 401) {
58
+            console.log("unlogined");
59
+          }
60
+          console.log(`-----------${msg}`);
61
+        }}
62
+      >
63
+        <Editor
64
+          maxUpload={9}
65
+          autoFocus
66
+          beforeSubmit={() => {
67
+            return new Promise(resolve => {
68
+              resolve(true);
69
+            });
70
+          }}
71
+          onCommentSuccess={() => {
72
+            console.log("succ");
73
+          }}
74
+          showError={false}
75
+          onError={(msg, { response }) => {
76
+            if (response.status === 401) {
77
+              console.log("unlogined");
78
+            }
79
+            console.log(`-----------${msg}`);
80
+          }}
81
+        />
82
+      </App>
83
+    );
84
+
85
+    // e.g.
86
+    // 复杂的用户法
87
+    // const props = {
88
+    //   type: 1,
89
+    //   businessId: "1",
90
+    //   API: "http://api.links123.net/comment/v1",
91
+    //   showList: true
92
+    // };
93
+
94
+    // const editorProps = {
95
+    //   showEmoji: true,
96
+    //   placeholder: "说点什么吧",
97
+    //   rows: 5,
98
+    //   btnLoading: this.state.loading,
99
+    //   btnDisable: this.state.loading,
100
+    //   btnSubmitText: "提交",
101
+    //   value: this.state.value,
102
+    //   onChange: v => this.handleChangeValue(v),
103
+    //   onSubmit: v => this.handleChangeSubmit(v),
104
+    //   button: (
105
+    //     <Button
106
+    //       type="primary"
107
+    //       ghost
108
+    //       // onClick={() => console.log('click btn: ', this.state.value)}
109
+    //     >
110
+    //       自定义按钮
111
+    //     </Button>
112
+    //   ),
113
+    //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
114
+    //   imageToolIcon: (
115
+    //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
116
+    //   )
117
+    // };
118
+
119
+    // return (
120
+    //   <App {...props}>
121
+    //     <Editor {...editorProps} />
122
+    //   </App>
123
+    // );
124
+  }
125
+}
126
+
127
+ReactDOM.render(<Index />, document.getElementById("root-comment"));
128
+registerServiceWorker();

+ 28
- 118
src/index.js 查看文件

@@ -1,128 +1,38 @@
1
-import React, { Component } from "react";
1
+import React from "react";
2 2
 import ReactDOM from "react-dom";
3
-// e.g.
4
-// import { Button, Icon } from "antd";
5
-// import App, { Editor, RenderText } from "./App";
6 3
 import App, { Editor } from "./App";
7 4
 import registerServiceWorker from "./registerServiceWorker";
8 5
 
9
-class Index extends Component {
10
-  constructor(props) {
11
-    super(props);
12
-    this.state = {
13
-      page: 1,
14
-      value: ""
15
-    };
16
-    this.onPageChange = this.onPageChange.bind(this);
17
-    this.handleChangeValue = this.handleChangeValue.bind(this);
18
-    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
6
+const Index = props => (
7
+  <App showAlertComment showAlertReply showAlertFavor showError {...props}>
8
+    <Editor maxUpload={9} autoFocus />
9
+  </App>
10
+);
11
+
12
+/**
13
+ * 渲染评论组件
14
+ * @param {object} config 编辑器配置
15
+ *  - {string} id 渲染评论的DOM的 ID
16
+ *  - {number} type 评论的 type
17
+ *  - {string} businessId 评论的 businessId
18
+ */
19
+function renderComment(config) {
20
+  if (!config.id) {
21
+    throw new Error("id is required");
19 22
   }
20
-
21
-  onPageChange(page) {
22
-    this.setState({
23
-      page
24
-    });
25
-  }
26
-
27
-  handleChangeValue(value) {
28
-    this.setState({ value });
29
-    console.log("handleChangeValue value: ", value);
23
+  if (!config.id) {
24
+    throw new Error("type is required");
30 25
   }
31
-
32
-  handleChangeSubmit({ text, files }) {
33
-    this.setState({ loading: true }, () => {
34
-      setTimeout(() => {
35
-        this.setState({ loading: false });
36
-      }, 2000);
37
-    });
38
-    console.log("submit text: ", text);
39
-    console.log("submit files: ", files);
26
+  if (!config.id) {
27
+    throw new Error("businessId is required");
40 28
   }
29
+  const { id, type = 1, businessId = "test" } = config;
41 30
 
42
-  render() {
43
-    // 最简单的用法
44
-    return (
45
-      <App
46
-        type={1}
47
-        businessId="test"
48
-        showAlertComment
49
-        showAlertReply
50
-        showAlertFavor
51
-        showError={false}
52
-        userId={71299}
53
-        page={this.state.page}
54
-        onPageChange={this.onPageChange}
55
-        pageType="more"
56
-        onError={(msg, { response }) => {
57
-          if (response.status === 401) {
58
-            console.log("unlogined");
59
-          }
60
-          console.log(`-----------${msg}`);
61
-        }}
62
-      >
63
-        <Editor
64
-          maxUpload={9}
65
-          autoFocus
66
-          beforeSubmit={() => {
67
-            return new Promise(resolve => {
68
-              resolve(true);
69
-            });
70
-          }}
71
-          onCommentSuccess={() => {
72
-            console.log("succ");
73
-          }}
74
-          showError={false}
75
-          onError={(msg, { response }) => {
76
-            if (response.status === 401) {
77
-              console.log("unlogined");
78
-            }
79
-            console.log(`-----------${msg}`);
80
-          }}
81
-        />
82
-      </App>
83
-    );
84
-
85
-    // e.g.
86
-    // 复杂的用户法
87
-    // const props = {
88
-    //   type: 1,
89
-    //   businessId: "1",
90
-    //   API: "http://api.links123.net/comment/v1",
91
-    //   showList: true
92
-    // };
93
-
94
-    // const editorProps = {
95
-    //   showEmoji: true,
96
-    //   placeholder: "说点什么吧",
97
-    //   rows: 5,
98
-    //   btnLoading: this.state.loading,
99
-    //   btnDisable: this.state.loading,
100
-    //   btnSubmitText: "提交",
101
-    //   value: this.state.value,
102
-    //   onChange: v => this.handleChangeValue(v),
103
-    //   onSubmit: v => this.handleChangeSubmit(v),
104
-    //   button: (
105
-    //     <Button
106
-    //       type="primary"
107
-    //       ghost
108
-    //       // onClick={() => console.log('click btn: ', this.state.value)}
109
-    //     >
110
-    //       自定义按钮
111
-    //     </Button>
112
-    //   ),
113
-    //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
114
-    //   imageToolIcon: (
115
-    //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
116
-    //   )
117
-    // };
118
-
119
-    // return (
120
-    //   <App {...props}>
121
-    //     <Editor {...editorProps} />
122
-    //   </App>
123
-    // );
124
-  }
31
+  ReactDOM.render(
32
+    <Index type={type} businessId={businessId} />,
33
+    document.getElementById(id)
34
+  );
35
+  // registerServiceWorker();
125 36
 }
126 37
 
127
-ReactDOM.render(<Index />, document.getElementById("root-comment"));
128
-registerServiceWorker();
38
+window.renderComment = renderComment;