zhangolve
/
comment
forked from npm/comment
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'master' of node/npmcomment into master

node 6 years ago
parent
34a212379b 861de4ba5f
commit
10f157b08d
8 changed files with 264 additions and 196 deletions
Split View Show Diff Stats
  1. 77
    78
      README.md
  2. 25
    0
      assets/example.html
  3. 2
    0
      assets/static/css/comment.0.5.13.css
  4. 1
    0
      assets/static/css/comment.0.5.13.css.map
  5. 2
    0
      assets/static/js/comment.0.5.13.js
  6. 1
    0
      assets/static/js/comment.0.5.13.js.map
  7. 128
    0
      src/index.example.js
  8. 28
    118
      src/index.js

+ 77
- 78
README.md View File 

@@ -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 View File 

@@ -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
File diff suppressed because it is too large
View File


+ 1
- 0
assets/static/css/comment.0.5.13.css.map
File diff suppressed because it is too large
View File


+ 2
- 0
assets/static/js/comment.0.5.13.js
File diff suppressed because it is too large
View File


+ 1
- 0
assets/static/js/comment.0.5.13.js.map
File diff suppressed because it is too large
View File


+ 128
- 0
src/index.example.js View File 

@@ -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 View File 

@@ -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;