通用评论

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import App, { Editor } from "./App";
  4. // import registerServiceWorker from "./registerServiceWorker";
  5. class Index extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. fileList: [
  10. // {
  11. // url:
  12. // "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190727/YQ-4VC1bL.jpeg",
  13. // type: "image/jpeg",
  14. // uid: "rc-upload-1564206005248-2"
  15. // }
  16. ],
  17. value: ""
  18. };
  19. }
  20. render() {
  21. return (
  22. <App
  23. showAlertComment
  24. showAlertReply
  25. showAlertFavor
  26. showError
  27. {...this.props}
  28. >
  29. <Editor
  30. maxUpload={9}
  31. autoFocus
  32. {...this.props.editorProps}
  33. fileList={this.state.fileList}
  34. value={this.state.value}
  35. onChange={value => {
  36. this.setState({ value });
  37. }}
  38. handleChangeFileList={fileList => {
  39. this.setState({
  40. fileList
  41. });
  42. }}
  43. allowEnterSubmit
  44. limitOne
  45. />
  46. </App>
  47. );
  48. }
  49. }
  50. /**
  51. * 渲染评论组件
  52. * @param {object} config 编辑器配置
  53. * - {string} id 渲染评论的DOM的 ID
  54. * - {number} type 评论的 type
  55. * - {string} businessId 评论的 businessId
  56. * - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
  57. */
  58. function renderComment(config) {
  59. if (!config.id) {
  60. throw new Error("id is required");
  61. }
  62. if (!config.type) {
  63. throw new Error("type is required");
  64. }
  65. if (!config.businessId) {
  66. // throw new Error("businessId is required");
  67. config.businessId = "test";
  68. console.warn("没有传入 businessId 参数,默认使用: test");
  69. }
  70. if (!config.API) {
  71. // throw new Error("API is required");
  72. config.API = "http://api.links123.net/comment/v1";
  73. console.warn(
  74. "没有传入 API 参数,默认使用: http://api.links123.net/comment/v1"
  75. );
  76. }
  77. ReactDOM.render(<Index {...config} />, document.getElementById(config.id));
  78. // registerServiceWorker();
  79. }
  80. window.renderComment = renderComment;
  81. if (process.env.NODE_ENV !== "production") {
  82. renderComment({
  83. id: "root-comment",
  84. type: 3,
  85. businessId: "5ea8320dedd68200018e733d",
  86. businessUserId: 4,
  87. userId: 58297,
  88. currentUser: {
  89. user_id: 58297
  90. },
  91. userAvaHoverData: {
  92. 71763: {
  93. nickname: "aaa",
  94. followers: 20,
  95. fans: 2,
  96. isFollowed: true
  97. },
  98. 71748: {
  99. nickname: "L0",
  100. followers: 10,
  101. fans: 11,
  102. isFollowed: false
  103. },
  104. 71299: {
  105. nickname: "narro",
  106. followers: 10,
  107. fans: 11,
  108. isFollowed: false
  109. },
  110. 58297: {
  111. nickname: "aaaaa",
  112. followers: 10,
  113. fans: 11,
  114. isFollowed: false
  115. }
  116. },
  117. showHoverCard: true,
  118. showEdit: true,
  119. userAvaClick: id => {
  120. console.log("userAvaClick", id);
  121. },
  122. getUserInfo: id => {
  123. console.log("getinfo:", id);
  124. },
  125. focus: id => {
  126. return new Promise(function(resolve, reject) {
  127. console.log("focus:", id);
  128. resolve();
  129. });
  130. },
  131. unFocus: id => {
  132. return new Promise(function(resolve, reject) {
  133. console.log("unFocus:", id);
  134. resolve();
  135. });
  136. },
  137. onCountChange: c => {
  138. // console.log(c);
  139. },
  140. onDelete: (type, data) => {
  141. console.log(type, data);
  142. },
  143. onCommentFail: data => {
  144. console.log("onCommentFail", data);
  145. },
  146. onUpdateComment: (type, data) => {
  147. console.log("onUpdateComment", type);
  148. },
  149. onBeforeUpdateComment: () => {
  150. console.log("onBeforeUpdateComment");
  151. },
  152. sendMessage: id => {
  153. console.log("sendMessage", id);
  154. },
  155. preRenderValue: value => {
  156. return `${value}`;
  157. },
  158. editorProps: {
  159. onCommentSuccess: data => {
  160. console.log(data);
  161. }
  162. }
  163. });
  164. }
  165. // renderComment({
  166. // id: "root-comment",
  167. // type: 1,
  168. // businessId: "test",
  169. // API: 'http://api.links123.net/comment/v1',
  170. // });