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 += "
";
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 (