通用评论

index.js 3.1KB

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