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;
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 });
if (this.props.onChange) {
this.props.onChange(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 += "
";
fileList.forEach(item => {
value += `[${OSS_LINK}${fileMap[item.uid]}]`;
});
}
this.props.onSubmit(value);
}
render() {
const {
value,
placeholder,
rows,
showEmoji,
showUpload,
btnSubmitText,
btnLoading,
btnDisabled,
button,
emojiToolIcon,
imageToolIcon
} = this.props;
const handleSubmit = this.handleSubmit;
return (