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 += "
";
fileList.forEach(item => {
value += `[${OSS_LINK}${fileMap[item.uid]}]`;
});
}
this.props.onSubmit(value);
// 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()
// );
// }
}
render() {
const props = { ...EditorDefaultProps, ...this.props };
const {
value,
onChange,
onSubmit,
loading,
placeholder,
fileList,
onChangeFileList,
rows,
onUpload,
showEmoji,
showUpload,
submitText
} = props;
return (