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";

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(value) {
    this.setState({ value });
  }

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

  handleChangeEmoji(emojiId) {
    let { value } = this.state;
    value += `[${emojiId}]`;
    this.setState({ value });
    React.Children.forEach(this.props.content, child => {
      // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
      if (child.props.onChange) {
        child.props.onChange(value);
      }
    });
  }

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

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

    const { type, commentId, replyId, handleToggleInput } = this.props;
    if (type === "normal") {
      this.props.app.sCreateComment({
        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()
      );
    }

    React.Children.forEach(this.props.content, child => {
      // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
      if (child.props.onSubmit) {
        child.props.onSubmit(value);
      }
    });
  }

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

    const childrenWithProps = React.Children.map(this.props.content, child => {
      return React.cloneElement(child, {
        value: value,
        fileList: fileList,
        onChange: this.handleChange,
        onSubmit: this.handleSubmit,
        onChangeFileList: this.handleChangeFileList,
        onChangeEmoji: this.handleChangeEmoji,
        onUpload: this.handleUpload,
        loading: this.props.app.loading.sCreateComment,
        ...child.props
      });
    });

    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 }}>{childrenWithProps}</div>
      </div>
    );
  }
}

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

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

export default Comment(CommentInput);