123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- 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);
|