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