通用评论

index.js 3.5KB

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