refactor: 优化编辑器

src/App.js

@@ -8,6 +8,7 @@ import { isFunction } from "./helper";
 import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
 import Editor from "./components/Editor";
+import lang from "./lang";
 import "./App.css";
 
 class App extends Component {
@@ -82,10 +83,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sGetComment", false);
@@ -127,10 +128,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sGetReply", false);
@@ -139,9 +140,9 @@ class App extends Component {
 
   /**
    * 添加评论
-   * @param {string} content comment content
+   * @param {object} {content} comment content
    */
-  sCreateComment(content) {
+  sCreateComment({ content } = {}) {
     if (!content) return message.error("评论内容不能为空 ");
     this.handleChangeLoading("sCreateComment", true);
     const { API, type, businessId } = this.props;
@@ -168,10 +169,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCreateComment", false);
@@ -209,10 +210,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCreateReply", false);
@@ -245,10 +246,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sCommentFavor", false);
@@ -268,10 +269,10 @@ class App extends Component {
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
-          message.error(error.response.data.msg || ERROR_DEFAULT);
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
           return;
         }
-        message.error(error.message || ERROR_DEFAULT);
+        message.error(lang[error.message] || ERROR_DEFAULT);
       })
       .finally(() => {
         this.handleChangeLoading("sOssSts", false);

src/components/CommentBox/index.js

@@ -39,9 +39,10 @@ class CommentBox extends Component {
   /**
    * 渲染回复 DOM
    * @param {array} replies 回复列表
+   * @param {number} replies 回复的数量
    * @param {boolean} isNoMoreReply 是否没有更多回复
    */
-  renderReplies(replies, isNoMoreReply) {
+  renderReplies(replies, replyCount, isNoMoreReply) {
     const { commentId } = this.props;
     const { showReply } = this.state;
     if (showReply && replies && replies.length) {
@@ -56,17 +57,18 @@ class CommentBox extends Component {
                   replyId={item.id}
                   key={item.id}
                   content={item}
-                  type="reply"
+                  type="replyToReply" // 回复的回复
                 />,
                 <div className="moreBox" key="show_more_button">
-                  {!isNoMoreReply && (
-                    <span
-                      className="showMore"
-                      onClick={() => this.handleGetMoreReply(commentId)}
-                    >
-                      查看更多回复
-                    </span>
-                  )}
+                  {!isNoMoreReply &&
+                    replyCount !== len && (
+                      <span
+                        className="showMore"
+                        onClick={() => this.handleGetMoreReply(commentId)}
+                      >
+                        查看更多回复
+                      </span>
+                    )}
 
                   <a
                     style={{ float: "right" }}
@@ -83,7 +85,7 @@ class CommentBox extends Component {
                 replyId={item.id}
                 key={item.id}
                 content={item}
-                type="reply"
+                type="reply" // 评论的回复
               />
             );
           })}
@@ -103,9 +105,13 @@ class CommentBox extends Component {
           onShowReply={this.handleToggleReply}
           showReply={showReply}
           commentId={content.id}
-          type="comment"
+          action="comment" // 回复
         />
-        {this.renderReplies(content.replies, content.isNoMoreReply)}
+        {this.renderReplies(
+          content.replies,
+          content.reply_count,
+          content.isNoMoreReply
+        )}
       </div>
     );
   }

src/components/CommentInput.1/index.js

@@ -0,0 +1,143 @@
+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);

src/components/CommentInput/index.js

@@ -1,118 +1,60 @@
 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.state = {};
     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") {
+  handleSubmit(value) {
+    console.log("handleSubmit comment input value: ", value);
+    const { action, commentId, replyId, callback } = this.props;
+    if (action === "comment") {
       this.props.app.sCreateComment({
         content: value
       });
-    } else if (type === "comment") {
+    } else if (action === "reply") {
       this.props.app.sCreateReply(
         {
           comment_id: commentId,
           content: value
         },
-        () => handleToggleInput()
+        () => callback && callback()
       );
-    } else if (type === "reply") {
+    } else if (action === "replyToReply") {
       this.props.app.sCreateReply(
         {
           comment_id: commentId,
           content: value,
           reply_id: replyId
         },
-        () => handleToggleInput()
+        () => callback && callback()
       );
     }
-
-    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,
+        // 默认使用 CommentInput 的 onSubmit 来提交评论
+        // 但也可以使用 Editor 的 props 来覆盖 onSubmit
         onSubmit: this.handleSubmit,
-        onChangeFileList: this.handleChangeFileList,
-        onChangeEmoji: this.handleChangeEmoji,
-        onUpload: this.handleUpload,
-        loading: this.props.app.loading.sCreateComment,
         ...child.props
       });
     });
 
     return (
       <div>
-        {type === "normal" ? (
+        {/* {type === "normal" ? (
           <div>
             <span
               style={{
                 border: "1px solid #CECECE",
                 color: "#666",
-                padding: "2px 3px"
+                padding: "2px 3px",
               }}
             >
               回复
@@ -124,7 +66,7 @@ class CommentInput extends Component {
               </span>
             </span>
           </div>
-        ) : null}
+        ) : null} */}
         <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
       </div>
     );
@@ -132,12 +74,14 @@ class CommentInput extends Component {
 }
 
 CommentInput.propTypes = {
-  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
-  type: PropTypes.oneOf(["normal", "comment", "reply"])
+  // comment 评论
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: PropTypes.oneOf(["comment", "reply", "replyToReply"])
 };
 
 CommentInput.defaultProps = {
-  type: "normal"
+  action: "comment"
 };
 
 export default Comment(CommentInput);

src/components/CommentList/index.js

@@ -17,6 +17,7 @@ class CommentList extends Component {
   render() {
     const {
       list,
+      total,
       page,
       loading,
       isNoMoreComment,
@@ -31,14 +32,15 @@ class CommentList extends Component {
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}
 
-          {!isNoMoreComment && (
-            <div
-              className="showMore"
-              onClick={() => sGetComment({ page: page + 1 })}
-            >
-              <span>查看更多评论</span>
-            </div>
-          )}
+          {!isNoMoreComment &&
+            list.length !== total && (
+              <div
+                className="showMore"
+                onClick={() => sGetComment({ page: page + 1 })}
+              >
+                <span>查看更多评论</span>
+              </div>
+            )}
         </Spin>
       </div>
     );

src/components/ContentItem/index.js

@@ -4,6 +4,7 @@ import { Avatar, Icon } from "antd";
 import dayjs from "dayjs";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
+// import Editor from "../Editor";
 import { renderContent } from "../../helper";
 import "./index.css";
 
@@ -40,13 +41,16 @@ class CommentItem extends Component {
       commentId,
       replyId,
       content,
-      type,
+      action,
       showReply,
       onShowReply,
       app
     } = this.props;
+
     const { isShowInput } = this.state;
-    const isComment = type === "comment";
+    console.log("isShowInput ", isShowInput);
+
+    const isComment = action === "comment";
     return (
       <div className="box">
         <div className="left">
@@ -71,18 +75,19 @@ class CommentItem extends Component {
             }}
           />
           <div className="bottom">
-            {isComment && content.reply_count ? (
-              <div>
-                <a
-                  className="itemLeft"
-                  onClick={onShowReply}
-                  style={{ userSelect: "none" }}
-                >
-                  {content.reply_count} 条回复
-                  {showReply ? <Icon type="up" /> : <Icon type="down" />}
-                </a>
-              </div>
-            ) : null}
+            {isComment &&
+              content.reply_count && (
+                <div>
+                  <a
+                    className="itemLeft"
+                    onClick={onShowReply}
+                    style={{ userSelect: "none" }}
+                  >
+                    {content.reply_count} 条回复
+                    {showReply ? <Icon type="up" /> : <Icon type="down" />}
+                  </a>
+                </div>
+              )}
 
             <a onClick={this.handleToggleInput} className="itemRight">
               &nbsp; 回复
@@ -100,14 +105,15 @@ class CommentItem extends Component {
             </div>
           </div>
 
-          {isShowInput ? (
+          {/* {isShowInput && (
             <CommentInput
-              type={type}
+              action={action}
               replyId={replyId}
               commentId={commentId}
-              handleToggleInput={this.handleToggleInput}
+              callback={this.handleToggleInput}
             />
-          ) : null}
+          )} */}
+          {isShowInput && <CommentInput content={app.children} />}
         </div>
       </div>
     );
@@ -117,13 +123,14 @@ class CommentItem extends Component {
 CommentItem.propTypes = {
   content: PropTypes.object.isRequired,
   // comment 评论
-  // reply 回复
-  type: PropTypes.oneOf(["comment", "reply"]),
+  // reply 评论的回复
+  // replyToReply 回复的回复
+  action: PropTypes.oneOf(["comment", "reply", "replyToReply"]),
   onShowReply: PropTypes.func
 };
 
 CommentItem.defaultProps = {
-  type: "comment",
+  action: "comment",
   onShowReply: () => {}
 };
 

src/components/Editor.1/Emoji.css

@@ -0,0 +1,23 @@
+.item {
+  float: left;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  white-space: nowrap;
+  /* this is required unless you put the helper span closely near the img */
+  text-align: center;
+  margin: 0;
+}
+.item .helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+.item img {
+  margin: 0 auto;
+  vertical-align: middle;
+  padding: 3px;
+}
+.item img:hover {
+  border: 1px solid #40a9ff;
+}

src/components/Editor.1/Emoji.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { Carousel } from "antd";
+import emoji, { prefixUrl, ext } from "../../emoji";
+import "./Emoji.css";
+// 每页 20  5*4
+// 共 20 * 3 = 60 (实际是 54)
+
+// class Emoji
+
+const Emoji = ({ onClick }) => {
+  const content = [[], [], []];
+
+  for (let i = 0; i < emoji.length; i++) {
+    if (i < 20) {
+      content[0].push(emoji[i]);
+    } else if (i < 40) {
+      content[1].push(emoji[i]);
+    } else if (i < emoji.length) {
+      content[2].push(emoji[i]);
+    }
+  }
+  return (
+    <Carousel>
+      <div>
+        {content[0].map((item, index) => (
+          <div className="item" key={item.value}>
+            <span className="helper" />
+            <img
+              src={`${prefixUrl}${item.value}.${ext}`}
+              alt={item.title}
+              style={{ display: "inline-block" }}
+              onClick={() => onClick(item.title)}
+            />
+          </div>
+        ))}
+      </div>
+      <div>
+        {content[1].map((item, index) => (
+          <div className="item" key={item.value}>
+            <span className="helper" />
+            <img
+              src={`${prefixUrl}${item.value}.${ext}`}
+              alt={item.title}
+              style={{ display: "inline-block" }}
+              onClick={() => onClick(item.title)}
+            />
+          </div>
+        ))}
+      </div>
+      <div>
+        {content[2].map(item => (
+          <div className="item" key={item.value}>
+            <span className="helper" />
+            <img
+              src={`${prefixUrl}${item.value}.${ext}`}
+              alt={item.title}
+              style={{ display: "inline-block" }}
+              onClick={() => onClick(item.title)}
+            />
+          </div>
+        ))}
+      </div>
+    </Carousel>
+  );
+};
+
+export default Emoji;

src/components/Editor.1/Upload.css

@@ -0,0 +1,8 @@
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/Editor.1/Upload.js

@@ -0,0 +1,132 @@
+import React from "react";
+import { Upload, Icon, Modal, message } from "antd";
+import dayjs from "dayjs";
+import shortid from "shortid";
+import {
+  OSS_ENDPOINT,
+  OSS_BUCKET,
+  DRIVER_LICENSE_PATH,
+  ERROR_DEFAULT,
+  MAX_UPLOAD_NUMBER
+} from "../../constant";
+import Comment from "../../Comment";
+// import styles from "./Upload.less";
+import "./Upload.css";
+
+const client = oss => {
+  return new window.OSS.Wrapper({
+    accessKeyId: oss.access_key_id,
+    accessKeySecret: oss.access_key_secret,
+    stsToken: oss.security_token,
+    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
+    bucket: OSS_BUCKET
+  });
+};
+
+const uploadPath = (path, file) => {
+  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
+    file.type.split("/")[1]
+  }`;
+};
+
+const UploadToOss = (oss, path, file) => {
+  const url = uploadPath(path, file);
+  return new Promise((resolve, reject) => {
+    client(oss)
+      .multipartUpload(url, file)
+      .then(data => {
+        resolve(data);
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+};
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      previewVisible: false,
+      previewImage: ""
+    };
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handlePreview = this.handlePreview.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.customRequest = this.customRequest.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.app.sOssSts();
+  }
+
+  handleCancel() {
+    this.setState({ previewVisible: false });
+  }
+
+  handlePreview(file) {
+    this.setState({
+      previewImage: file.url || file.thumbUrl,
+      previewVisible: true
+    });
+  }
+
+  handleChange({ fileList }) {
+    this.props.onChangeFileList(fileList);
+  }
+
+  customRequest(info) {
+    const { file } = info;
+    info.onProgress({ percent: 10 });
+    let reader = new FileReader();
+    reader.readAsDataURL(info.file);
+    reader.onloadend = () => {
+      info.onProgress({ percent: 20 });
+      // DRIVER_LICENSE_PATH oss 的存储路径位置
+      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
+        .then(data => {
+          info.onProgress({ percent: 100 });
+          info.onSuccess();
+          this.props.onUpload({ path: data.name, uid: file.uid });
+        })
+        .catch(e => {
+          message.error(e.message || ERROR_DEFAULT);
+          info.onError(e);
+        });
+    };
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const { fileList } = this.props;
+    const uploadButton = (
+      <div>
+        <Icon type="plus" />
+        <div className="ant-upload-text">上传</div>
+      </div>
+    );
+    return (
+      <div>
+        <Upload
+          accept="image/jpg,image/jpeg,image/png,image/bmp"
+          listType="picture-card"
+          fileList={fileList}
+          customRequest={this.customRequest}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+        >
+          {fileList.length >= MAX_UPLOAD_NUMBER ? null : uploadButton}
+        </Upload>
+        <Modal
+          visible={previewVisible}
+          footer={null}
+          onCancel={this.handleCancel}
+        >
+          <img alt="upload" style={{ width: "100%" }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default Comment(App);

src/components/Editor.1/index.css

@@ -0,0 +1,82 @@
+.editor {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  list-style: none;
+  position: relative;
+  display: block;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s, height 0s;
+}
+.editor textarea.ant-input {
+  border: none;
+  border-bottom: 1px solid #eee;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.editor textarea.ant-input:hover {
+  border: none;
+  border-bottom: 1px solid #eee;
+}
+.editor textarea.ant-input:focus {
+  box-shadow: none;
+  border-bottom: 1px solid #eee;
+}
+.editor [contentEditable="true"]:empty:not(:focus):before {
+  content: attr(data-text);
+  color: #bfbfbf;
+}
+.editor:focus,
+.editor:hover {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.content {
+  display: block;
+  box-sizing: border-box;
+  padding: 4px 10px;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 110px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+.content:focus,
+.content:hover {
+  outline: 0;
+}
+.toolbar {
+  display: inline-block;
+  width: 100%;
+  margin: 5px 0 0 0;
+}
+.toolbar .icon {
+  font-size: 23px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.toolbar .icon:hover {
+  color: #40a9ff;
+}
+.feed .ant-popover-inner-content {
+  padding: 12px 16px 20px 16px;
+}
+.feed .ant-carousel .slick-dots {
+  bottom: -10px;
+}
+.feed .ant-carousel .slick-dots li.slick-active button {
+  background-color: #7b868a;
+}
+.feed .ant-carousel .slick-dots li button {
+  background-color: #a2aeb5;
+}

src/components/Editor.1/index.js

@@ -0,0 +1,157 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Icon, Button, Popover, Input } from "antd";
+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
+    };
+    this.handleClickEmoji = this.handleClickEmoji.bind(this);
+    this.handleShowUpload = this.handleShowUpload.bind(this);
+  }
+
+  componentDidMount() {}
+
+  handleClickEmoji(emojiId) {
+    this.props.onChangeEmoji(emojiId);
+  }
+
+  handleShowUpload(showUpload) {
+    if (typeof showUpload === "boolean") {
+      this.setState({ showUpload: showUpload });
+    } else {
+      this.setState({ showUpload: !this.state.showUpload });
+    }
+  }
+
+  render() {
+    const props = { ...EditorDefaultProps, ...this.props };
+    const {
+      value,
+      onChange,
+      onSubmit,
+      loading,
+      placeholder,
+      fileList,
+      onChangeFileList,
+      rows,
+      onUpload,
+      showEmoji,
+      showUpload,
+      submitText
+    } = props;
+
+    return (
+      <div className="editor">
+        <TextArea
+          value={value}
+          onChange={e => onChange(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={onChangeFileList}
+                      onUpload={onUpload}
+                      fileList={fileList}
+                    />
+                  </div>
+                }
+                placement="bottomLeft"
+                title={
+                  <div style={{ margin: "5px auto" }}>
+                    <span>
+                      上传图片
+                      <span style={{ color: "#666", fontWeight: 400 }}>
+                        (您还能上传{MAX_UPLOAD_NUMBER - 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={onSubmit} 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
+};
+
+export default Editor;

src/components/Editor/index.js

@@ -1,6 +1,7 @@
 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";
@@ -24,18 +25,56 @@ class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showUpload: false
+      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() {}
 
-  handleClickEmoji(emojiId) {
-    this.props.onChangeEmoji(emojiId);
+  /**
+   * 编辑器的值改变事件
+   * 将最新的值存储到 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 });
@@ -44,6 +83,56 @@ class Editor extends React.Component {
     }
   }
 
+  /**
+   * 上传文件 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);
+
+    // 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 {
@@ -64,8 +153,8 @@ class Editor extends React.Component {
     return (
       <div className="editor">
         <TextArea
-          value={value}
-          onChange={e => onChange(e.target.value)}
+          value={this.state.value}
+          onChange={e => this.handleChange(e.target.value)}
           rows={rows}
           placeholder={placeholder}
         />
@@ -97,9 +186,9 @@ class Editor extends React.Component {
                     style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
                   >
                     <Upload
-                      onChangeFileList={onChangeFileList}
-                      onUpload={onUpload}
-                      fileList={fileList}
+                      onChangeFileList={this.handleChangeFileList}
+                      onUpload={this.handleUpload}
+                      fileList={this.state.fileList}
                     />
                   </div>
                 }
@@ -109,7 +198,8 @@ class Editor extends React.Component {
                     <span>
                       上传图片
                       <span style={{ color: "#666", fontWeight: 400 }}>
-                        (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
+                        (您还能上传{MAX_UPLOAD_NUMBER -
+                          this.state.fileList.length}张图片)
                       </span>
                     </span>
                     <Icon
@@ -135,7 +225,11 @@ class Editor extends React.Component {
           </div>
 
           <div style={{ float: "right", margin: "5px 11px" }}>
-            <Button onClick={onSubmit} type="primary" loading={loading}>
+            <Button
+              onClick={() => this.handleSubmit()}
+              type="primary"
+              loading={loading}
+            >
               {submitText}
             </Button>
           </div>

src/index.js

@@ -7,7 +7,7 @@ const props = {
   type: 1,
   businessId: "1",
   API: "http://api.links123.net/comment/v1",
-  showList: false
+  showList: true
 };
 
 const editorProps = {