comment/src/components/CommentInput/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { OSS_LINK } from "../../constant";
import Comment from "../../Comment";
import Editor from "../Editor";

const PLACEHOLDER = {
  normal: "说点什么吧...",
  default: "说点什么吧..."
};

class CommentInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",

      fileList: [], // 图片列表
      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeFileList = this.handleChangeFileList.bind(this);
    this.handleChangeEmoji = this.handleChangeEmoji.bind(this);
    this.handleUpload = this.handleUpload.bind(this);
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  handleChangeFileList(fileList) {
    this.setState({ fileList });
  }

  handleChangeEmoji(emojiId) {
    let { value } = this.state;
    value += `[${emojiId}]`;
    this.setState({ value });
  }

  handleUpload({ uid, path }) {
    const { fileMap } = this.state;
    fileMap[uid] = path;
    this.setState({ fileMap });
  }

  handleSubmit() {
    let { value, fileMap, fileList } = this.state;
    if (fileList.length) {
      fileList.forEach(item => {
        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
      });
    }

    const { type, commentId, replyId, handleToggleInput } = this.props;
    if (type === "normal") {
      this.props.app.sCreateComment({
        type: 1,
        business_id: "1",
        content: value
      });
    } else if (type === "comment") {
      this.props.app.sCreateReply(
        {
          comment_id: commentId,
          content: value
        },
        () => handleToggleInput()
      );
    } else if (type === "reply") {
      this.props.app.sCreateReply(
        {
          comment_id: commentId,
          content: value,
          reply_id: replyId
        },
        () => handleToggleInput()
      );
    }
  }

  render() {
    const { type } = this.props;
    const { value, fileList } = this.state;

    return (
      <div>
        {type === "normal" ? (
          <div>
            <span
              style={{
                border: "1px solid #CECECE",
                color: "#666",
                padding: "2px 3px"
              }}
            >
              回复
            </span>
            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
              口碑
              <span style={{ marginLeft: "20px", color: "#666666" }}>
                (全站挑出毛病或提出合理建议，奖励10到100元红包)
              </span>
            </span>
          </div>
        ) : null}
        <div style={{ marginTop: 40 }}>
          <Editor
            value={value}
            placeholder={PLACEHOLDER[type] || PLACEHOLDER.default}
            fileList={fileList}
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
            onChangeFileList={this.handleChangeFileList}
            onChangeEmoji={this.handleChangeEmoji}
            onUpload={this.handleUpload}
            loading={this.props.app.loading.sCreateComment}
          />
        </div>
      </div>
    );
  }
}

CommentInput.propTypes = {
  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
  type: PropTypes.oneOf(["normal", "comment", "reply"])
};

CommentInput.defaultProps = {
  type: "normal"
};

export default Comment(CommentInput);