comment/src/components/Editor/index.js

import React from "react";
import PropTypes from "prop-types";
import { Icon, Button, Popover, Input } from "antd";
import { OSS_LINK } from "../../constant";
import { MAX_UPLOAD_NUMBER } from "../../constant";
import Upload from "./Upload";
import Emoji from "./Emoji";
import "./index.css";

const { TextArea } = Input;
// // 设置 Editor 组件的默认值
// // 不能在 Editor.defaultProps 中设置
// // 因为 Editor 在 ComponentInput 中调用
// // 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
// const EditorDefaultProps = {
//   rows: 5,
//   placeholder: "说点什么吧...",
//   showEmoji: true,
//   showUpload: true,
//   submitText: "发表",
//   onChange: () => {},
// };

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showUpload: false,
      value: "", // 编辑器里面的值

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

  componentDidMount() {}

  /**
   * 编辑器的值改变事件
   * 将最新的值存储到 state 中
   * @param {string} value 输入的值
   */
  handleChange(value) {
    this.setState({ value });
  }

  /**
   * 点击 emoji 的事件
   * 点击后，需要将改 emoji 插入到编辑器中
   * 插入的值为 [emoji chinese name]
   * 参数 emoji 即为 emoji chinese name
   * @param {string}} emoji emoji 的中文，如 微笑
   */
  handleClickEmoji(emoji) {
    let { value } = this.state;
    value += `[${emoji}]`;
    this.handleChange(value);
  }

  /**
   * 监听文件列表改变事件
   * @param {Array} fileList 文件列表
   */
  handleChangeFileList(fileList) {
    this.setState({ fileList });
  }

  /**
   * 控制上传 Popover 的显示和隐藏
   * @param {boolean} showUpload 是否显示上传的 Popover
   */
  handleShowUpload(showUpload) {
    if (typeof showUpload === "boolean") {
      this.setState({ showUpload: showUpload });
    } else {
      this.setState({ showUpload: !this.state.showUpload });
    }
  }

  /**
   * 上传文件 TODO:
   * @param {object} param 文件对象
   */
  handleUpload({ uid, path }) {
    const { fileMap } = this.state;
    fileMap[uid] = path;
    this.setState({ fileMap });
  }

  /**
   * 提交编辑器内容
   * 提交功能，交给父组件来实现
   * 需要父组件传入 onSubmit
   */
  handleSubmit() {
    let { value, fileMap, fileList } = this.state;
    if (fileList.length) {
      value += "<br/>";
      fileList.forEach(item => {
        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
      });
    }
    this.props.onSubmit(value);
  }

  render() {
    // const props = { ...EditorDefaultProps, ...this.props };
    const {
      value,
      onChange,
      onSubmit,
      loading,
      placeholder,
      fileList,
      onChangeFileList,
      rows,
      onUpload,
      showEmoji,
      showUpload,
      submitText
    } = this.props;
    // console.log("editor: ", this.props);

    return (
      <div className="editor">
        <TextArea
          value={this.state.value}
          onChange={e => this.handleChange(e.target.value)}
          rows={rows}
          placeholder={placeholder}
        />

        <div className="toolbar">
          <div style={{ float: "left", margin: "8px 11px" }}>
            {showEmoji && (
              <Popover
                trigger="click"
                placement="bottomLeft"
                autoAdjustOverflow={false}
                content={
                  <div style={{ width: 200 }}>
                    <Emoji onClick={this.handleClickEmoji} />
                  </div>
                }
                overlayClassName="feed"
              >
                <Icon type="smile-o" className="icon" />
              </Popover>
            )}

            {showUpload && (
              <Popover
                visible={this.state.showUpload}
                overlayStyle={{ zIndex: 999 }}
                content={
                  <div
                    style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
                  >
                    <Upload
                      onChangeFileList={this.handleChangeFileList}
                      onUpload={this.handleUpload}
                      fileList={this.state.fileList}
                    />
                  </div>
                }
                placement="bottomLeft"
                title={
                  <div style={{ margin: "5px auto" }}>
                    <span>
                      上传图片
                      <span style={{ color: "#666", fontWeight: 400 }}>
                        (您还能上传{MAX_UPLOAD_NUMBER -
                          this.state.fileList.length}张图片)
                      </span>
                    </span>
                    <Icon
                      type="close"
                      onClick={() => this.handleShowUpload(false)}
                      style={{
                        float: "right",
                        cursor: "pointer",
                        marginTop: 4
                      }}
                    />
                  </div>
                }
              >
                <Icon
                  type="picture"
                  className="icon"
                  style={{ marginLeft: 10 }}
                  onClick={() => this.handleShowUpload(true)}
                />
              </Popover>
            )}
          </div>

          <div style={{ float: "right", margin: "5px 11px" }}>
            <Button
              onClick={() => this.handleSubmit()}
              type="primary"
              loading={loading}
            >
              {submitText}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

Editor.propTypes = {
  rows: PropTypes.number,
  placeholder: PropTypes.string,
  showEmoji: PropTypes.bool,
  showUpload: PropTypes.bool,
  submitText: PropTypes.string,
  onChange: PropTypes.func
};

Editor.defaultProps = {
  rows: 5,
  placeholder: "说点什么吧...",
  showEmoji: true,
  showUpload: true,
  submitText: "发表"
};

export default Editor;