comment/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App, { Editor } from "./App";
// import registerServiceWorker from "./registerServiceWorker";

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [
        // {
        //   url:
        //     "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190727/YQ-4VC1bL.jpeg",
        //   type: "image/jpeg",
        //   uid: "rc-upload-1564206005248-2"
        // }
      ],
      value: ""
    };
  }

  render() {
    return (
      <App
        showAlertComment
        showAlertReply
        showAlertFavor
        showError
        {...this.props}
      >
        <Editor
          maxUpload={9}
          autoFocus
          {...this.props.editorProps}
          fileList={this.state.fileList}
          value={this.state.value}
          onChange={value => {
            this.setState({ value });
          }}
          handleChangeFileList={fileList => {
            console.log("----", fileList);
            this.setState({
              fileList
            });
          }}
          allowEnter
          onPressEnter={e => alert("enter pressed")}
        />
      </App>
    );
  }
}

/**
 * 渲染评论组件
 * @param {object} config 编辑器配置
 *  - {string} id 渲染评论的DOM的 ID
 *  - {number} type 评论的 type
 *  - {string} businessId 评论的 businessId
 *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
 */
function renderComment(config) {
  if (!config.id) {
    throw new Error("id is required");
  }
  if (!config.type) {
    throw new Error("type is required");
  }
  if (!config.businessId) {
    // throw new Error("businessId is required");
    config.businessId = "test";
    console.warn("没有传入 businessId 参数，默认使用: test");
  }
  if (!config.API) {
    // throw new Error("API is required");
    config.API = "http://api.links123.net/comment/v1";
    console.warn(
      "没有传入 API 参数，默认使用: http://api.links123.net/comment/v1"
    );
  }

  ReactDOM.render(<Index {...config} />, document.getElementById(config.id));
  // registerServiceWorker();
}

window.renderComment = renderComment;

if (process.env.NODE_ENV !== "production") {
  renderComment({
    id: "root-comment",
    type: 1,
    businessId: "test",
    businessUserId: 4,
    userId: 58297,
    currentUser: {
      user_id: 58297
    },
    userAvaHoverData: {
      71763: {
        nickname: "aaa",
        followers: 20,
        fans: 2,
        isFollowed: true
      },
      71748: {
        nickname: "L0",
        followers: 10,
        fans: 11,
        isFollowed: false
      },
      71299: {
        nickname: "narro",
        followers: 10,
        fans: 11,
        isFollowed: false
      },
      58297: {
        nickname: "aaaaa",
        followers: 10,
        fans: 11,
        isFollowed: false
      }
    },
    showHoverCard: true,
    showEdit: true,
    userAvaClick: id => {
      console.log("userAvaClick", id);
    },
    getUserInfo: id => {
      console.log("getinfo:", id);
    },
    focus: id => {
      return new Promise(function(resolve, reject) {
        console.log("focus:", id);
        resolve();
      });
    },
    unFocus: id => {
      return new Promise(function(resolve, reject) {
        console.log("unFocus:", id);
        resolve();
      });
    },
    onCountChange: c => {
      // console.log(c);
    },
    onDelete: (type, data) => {
      console.log(type, data);
    },
    onCommentFail: data => {
      console.log("onCommentFail", data);
    },
    onUpdateComment: (type, data) => {
      console.log("onUpdateComment", type);
    },
    onBeforeUpdateComment: () => {
      console.log("onBeforeUpdateComment");
    },
    sendMessage: id => {
      console.log("sendMessage", id);
    },
    preRenderValue: value => {
      return `${value}`;
    },
    editorProps: {
      onCommentSuccess: data => {
        console.log(data);
      }
    }
  });
}

// renderComment({
//   id: "root-comment",
//   type: 1,
//   businessId: "test",
//   API: 'http://api.links123.net/comment/v1',
// });