Browse Source

feat: 在非react项目中使用通用评论

node 6 years ago
parent
commit
6e9b001d5f

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