fix:评论样式统一修改;add:评论编辑功能

lib/App.js

@@ -57,6 +57,10 @@ var _RenderText = require("./components/RenderText");
 
 var _RenderText2 = _interopRequireDefault(_RenderText);
 
+var _EditComment = require("./components/EditComment/EditComment");
+
+var _EditComment2 = _interopRequireDefault(_EditComment);
+
 var _lang = require("./lang");
 
 require("./App.css");
@@ -92,10 +96,18 @@ var App = function (_Component) {
       // 是否没有更多评论了
       isNoMoreComment: false,
       initDone: false,
-      locale: "zh-CN"
+      locale: "zh-CN",
+      editModalVisible: false,
+      action: "",
+      replyId: "",
+      commentId: "",
+      userId: "",
+      content: "",
+      replyPage: 1
     };
     _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
     _this.sCreateComment = _this.sCreateComment.bind(_this);
+    _this.sUpdateComment = _this.sUpdateComment.bind(_this);
     _this.sDeleteComment = _this.sDeleteComment.bind(_this);
     _this.sCommentFavor = _this.sCommentFavor.bind(_this);
     _this.sCreateReply = _this.sCreateReply.bind(_this);
@@ -104,7 +116,10 @@ var App = function (_Component) {
     _this.sGetComment = _this.sGetComment.bind(_this);
     _this.sReplyFavor = _this.sReplyFavor.bind(_this);
     _this.sGetReply = _this.sGetReply.bind(_this);
+    _this.sUpdateReply = _this.sUpdateReply.bind(_this);
     _this.sOssSts = _this.sOssSts.bind(_this);
+    _this.handleEdit = _this.handleEdit.bind(_this);
+    _this.handleClose = _this.handleClose.bind(_this);
     return _this;
   }
 
@@ -163,6 +178,32 @@ var App = function (_Component) {
         });
       });
     }
+  }, {
+    key: "handleEdit",
+    value: function handleEdit(_ref) {
+      var replyId = _ref.replyId,
+          commentId = _ref.commentId,
+          userId = _ref.userId,
+          content = _ref.content,
+          replyPage = _ref.replyPage;
+
+      this.setState({
+        editModalVisible: true,
+        action: content.replies ? "comment" : content.reply ? "replyToReply" : "reply",
+        replyId: replyId,
+        commentId: commentId,
+        userId: userId,
+        content: content,
+        replyPage: replyPage
+      });
+    }
+  }, {
+    key: "handleClose",
+    value: function handleClose() {
+      this.setState({
+        editModalVisible: false
+      });
+    }
   }, {
     key: "error",
     value: function error(msg) {
@@ -216,9 +257,9 @@ var App = function (_Component) {
     value: function sGetComment() {
       var _this3 = this;
 
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$page = _ref.page,
-          page = _ref$page === undefined ? 1 : _ref$page;
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$page = _ref2.page,
+          page = _ref2$page === undefined ? 1 : _ref2$page;
 
       var pageType = this.props.pageType;
 
@@ -278,10 +319,10 @@ var App = function (_Component) {
     value: function sGetReply() {
       var _this4 = this;
 
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          commentId = _ref2.commentId,
-          _ref2$page = _ref2.page,
-          page = _ref2$page === undefined ? 1 : _ref2$page;
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          commentId = _ref3.commentId,
+          _ref3$page = _ref3.page,
+          page = _ref3$page === undefined ? 1 : _ref3$page;
 
       this.handleChangeLoading("sGetReply", true);
       var _props2 = this.props,
@@ -330,8 +371,8 @@ var App = function (_Component) {
     value: function sCreateComment() {
       var _this5 = this;
 
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          content = _ref3.content;
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          content = _ref4.content;
 
       var cb = arguments[1];
 
@@ -407,7 +448,45 @@ var App = function (_Component) {
         _this6.handleChangeLoading("sDeleteComment", false);
       });
     }
+    /**
+     * 更新评论
+     * @param {object} {content} comment content
+     */
 
+  }, {
+    key: "sUpdateComment",
+    value: function sUpdateComment(_ref5) {
+      var _this7 = this;
+
+      var commentId = _ref5.commentId,
+          content = _ref5.content;
+
+      this.handleChangeLoading("sUpdateComment", true);
+      var API = this.props.API;
+
+      this.axios(API + "/comments/" + commentId, {
+        method: "post",
+        data: {
+          content: content
+        },
+        withCredentials: true
+      }).then(function () {
+        var list = _this7.state.list;
+
+        list = list.map(function (it) {
+          if (it.id === commentId) {
+            return _extends({}, it, {
+              content: content
+            });
+          }
+          return it;
+        });
+        _this7.props.onUpdateComment("comment");
+        _this7.setState({ list: list });
+      }).catch(this.errorHandler).finally(function () {
+        _this7.handleChangeLoading("sUpdateComment", false);
+      });
+    }
     /**
      * 添加回复
      * 回复评论/回复回复
@@ -417,7 +496,7 @@ var App = function (_Component) {
   }, {
     key: "sCreateReply",
     value: function sCreateReply(data, cb) {
-      var _this7 = this;
+      var _this8 = this;
 
       if (!data.content) return this.error(_reactIntlUniversal2.default.get("message.replyNoNull"));
       this.handleChangeLoading("sCreateReply", true);
@@ -428,14 +507,14 @@ var App = function (_Component) {
         data: data,
         withCredentials: true
       }).then(function (response) {
-        if (_this7.props.showAlertReply) {
+        if (_this8.props.showAlertReply) {
           _message3.default.success(_reactIntlUniversal2.default.get("message.replySuccess"));
         }
         if ((0, _helper.isFunction)(cb)) cb(response.data);
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        var list = _this7.state.list.map(function (item) {
+        var list = _this8.state.list.map(function (item) {
           if (item.id === data.comment_id) {
             if (!item.replies) item.replies = [];
             item.replies.push(_extends({}, response.data, {
@@ -445,9 +524,9 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this7.setState({ list: list });
+        _this8.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this7.handleChangeLoading("sCreateReply", false);
+        _this8.handleChangeLoading("sCreateReply", false);
       });
     }
 
@@ -460,7 +539,7 @@ var App = function (_Component) {
   }, {
     key: "sDeleteReply",
     value: function sDeleteReply(replyId, commentId) {
-      var _this8 = this;
+      var _this9 = this;
 
       this.handleChangeLoading("sDeleteReply", true);
       var API = this.props.API;
@@ -470,7 +549,7 @@ var App = function (_Component) {
         withCredentials: true
       }).then(function () {
         var deletedItem = null;
-        var list = _this8.state.list.map(function (item) {
+        var list = _this9.state.list.map(function (item) {
           if (item.id === commentId) {
             var replies = item.replies.filter(function (item) {
               return item.id !== replyId;
@@ -483,13 +562,47 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this8.setState({ list: list });
-        _this8.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
+        _this9.setState({ list: list });
+        _this9.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
       }).catch(this.errorHandler).finally(function () {
-        _this8.handleChangeLoading("sDeleteReply", false);
+        _this9.handleChangeLoading("sDeleteReply", false);
       });
     }
+    /**
+     * 更新回复
+     * 回复评论/回复回复
+     * @param {object} data { comment_id, content, reply_id }
+     */
+
+  }, {
+    key: "sUpdateReply",
+    value: function sUpdateReply(_ref6) {
+      var _this10 = this;
+
+      var commentId = _ref6.commentId,
+          content = _ref6.content,
+          replyId = _ref6.replyId,
+          replyPage = _ref6.replyPage;
 
+      this.handleChangeLoading("sUpdateReply", true);
+      var API = this.props.API;
+
+      this.axios(API + "/replies/" + replyId, {
+        method: "post",
+        data: {
+          comment_id: commentId,
+          content: content
+        },
+        withCredentials: true
+      }).then(function () {
+        for (var i = 1; i <= replyPage; i++) {
+          _this10.sGetReply({ commentId: commentId, page: i });
+        }
+        _this10.props.onUpdateComment("reply");
+      }).catch(this.errorHandler).finally(function () {
+        _this10.handleChangeLoading("sUpdateReply", false);
+      });
+    }
     /**
      * 评论 点赞/取消点赞
      * @param {string} commentId { commentId }
@@ -499,7 +612,7 @@ var App = function (_Component) {
   }, {
     key: "sCommentFavor",
     value: function sCommentFavor(commentId, favored) {
-      var _this9 = this;
+      var _this11 = this;
 
       this.handleChangeLoading("sCommentFavor", true);
       var API = this.props.API;
@@ -508,20 +621,20 @@ var App = function (_Component) {
         method: favored ? "delete" : "put",
         withCredentials: true
       }).then(function (response) {
-        if (_this9.props.showAlertFavor) {
+        if (_this11.props.showAlertFavor) {
           _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
         }
         // 更新 list 中的该项数据的 favored
-        var list = _this9.state.list.map(function (item) {
+        var list = _this11.state.list.map(function (item) {
           if (item.id === commentId) {
             item.favored = !favored;
             item.favor_count += favored ? -1 : 1;
           }
           return item;
         });
-        _this9.setState({ list: list });
+        _this11.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this9.handleChangeLoading("sCommentFavor", false);
+        _this11.handleChangeLoading("sCommentFavor", false);
       });
     }
 
@@ -535,7 +648,7 @@ var App = function (_Component) {
   }, {
     key: "sReplyFavor",
     value: function sReplyFavor(replyId, commentId, favored) {
-      var _this10 = this;
+      var _this12 = this;
 
       this.handleChangeLoading("sReplyFavor", true);
       var API = this.props.API;
@@ -549,7 +662,7 @@ var App = function (_Component) {
       }).then(function (response) {
         _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
         // 更新 list 中的该项数据的 favored
-        var list = _this10.state.list.map(function (item) {
+        var list = _this12.state.list.map(function (item) {
           if (item.id === commentId) {
             item.replies = item.replies.map(function (r) {
               if (r.id === replyId) {
@@ -564,9 +677,9 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this10.setState({ list: list });
+        _this12.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this10.handleChangeLoading("sReplyFavor", false);
+        _this12.handleChangeLoading("sReplyFavor", false);
       });
     }
 
@@ -577,15 +690,15 @@ var App = function (_Component) {
   }, {
     key: "sOssSts",
     value: function sOssSts() {
-      var _this11 = this;
+      var _this13 = this;
 
       this.handleChangeLoading("sOssSts", true);
       var API = this.props.API;
 
       this.axios.get(API + "/oss/sts").then(function (response) {
-        _this11.setState({ oss: _extends({}, response.data) });
+        _this13.setState({ oss: _extends({}, response.data) });
       }).catch(this.errorHandler).finally(function () {
-        _this11.handleChangeLoading("sOssSts", false);
+        _this13.handleChangeLoading("sOssSts", false);
       });
     }
   }, {
@@ -601,9 +714,11 @@ var App = function (_Component) {
         sGetReply: this.sGetReply,
         sOssSts: this.sOssSts,
         sDeleteComment: this.sDeleteComment,
-        sDeleteReply: this.sDeleteReply
+        sDeleteReply: this.sDeleteReply,
+        sUpdateReply: this.sUpdateReply,
+        sUpdateComment: this.sUpdateComment,
+        handleEdit: this.handleEdit
       });
-
       return this.state.initDone && _react2.default.createElement(
         _Comment.CommentContext.Provider,
         { value: value },
@@ -616,7 +731,17 @@ var App = function (_Component) {
             { style: { marginTop: 20 } },
             _react2.default.createElement(_CommentList2.default, null)
           )
-        )
+        ),
+        this.state.editModalVisible && _react2.default.createElement(_EditComment2.default, {
+          visible: this.state.editModalVisible,
+          action: this.state.action,
+          replyId: this.state.replyId,
+          replyPage: this.state.replyPage,
+          commentId: this.state.commentId,
+          userId: this.state.content.user_id,
+          content: this.state.content,
+          handleClose: this.handleClose
+        })
       );
     }
   }]);
@@ -643,6 +768,7 @@ App.propTypes = {
   onPageChange: _propTypes2.default.func, // 页码变化回调
   onGetMoreBtnClick: _propTypes2.default.func, // 点击查看更多按钮回调
   onDelete: _propTypes2.default.func,
+  onUpdateComment: _propTypes2.default.func,
   locales: _propTypes2.default.string, //  传入的语言环境， en-US/zh-CN
   onCountChange: _propTypes2.default.func // 评论数量变更时的回调
 };
@@ -656,11 +782,14 @@ App.defaultProps = {
   showAlertReply: false,
   showAlertFavor: false,
   showError: true,
+  showEdit: false,
   pageType: "more",
   limit: _constant.LIMIT,
   onGetMoreBtnClick: function onGetMoreBtnClick() {},
   onPageChange: function onPageChange(page) {},
   onDelete: function onDelete() {},
+  onUpdateComment: function onUpdateComment() {},
+  onReforeUpdateComment: function onReforeUpdateComment() {},
   onCountChange: function onCountChange() {}
 };
 

lib/components/CommentBox/index.js

@@ -116,6 +116,7 @@ var CommentBox = function (_Component) {
                 content: item,
                 user_id: item.user_id,
                 action: "replyToReply" // 回复的回复
+                , page: _this2.state.page
               }), _react2.default.createElement(
                 "div",
                 { className: "comment-more-box", key: "show_more_button" },
@@ -147,6 +148,7 @@ var CommentBox = function (_Component) {
               key: item.id,
               content: item,
               action: "replyToReply" // 评论的回复
+              , page: _this2.state.page
             });
           })
         );
@@ -171,6 +173,7 @@ var CommentBox = function (_Component) {
           commentId: content.id,
           user_id: user_id,
           action: "reply" // 评论的回复
+          , page: this.state.page
         }),
         this.renderReplies(content.replies, content.reply_count, content.isNoMoreReply)
       );

lib/components/ContentItem/index.css

@@ -34,7 +34,10 @@
 }
 
 .comment-item-bottom {
+  display: flex;
+  justify-content: flex-end;
   margin: 20px auto;
+  line-height: 18px;
 }
 
 .comment-item-bottom-left {
@@ -43,11 +46,44 @@
 }
 
 .comment-item-bottom-right {
-  float: right;
-  margin-left: 5px;
   cursor: pointer;
 }
-
+.comment-item-divider {
+  width: 2px;
+  height: 24px;
+  background: #c6c6c6;
+  margin-top: -2px;
+}
+.comment-item-delete,
+.comment-item-edit,
+.comment-item-like {
+  display: inline-block;
+  background: url(../../assert/icon_delete.png);
+  width: 18px;
+  height: 18px;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.comment-item-delete {
+  margin-right: 18px;
+}
+.comment-item-edit {
+  background: url(../../assert/icon_answer@2x.png);
+  background-size: 100% 100%;
+  margin-right: 18px;
+  margin-left: 10px;
+}
+.comment-item-like {
+  background: url(../../assert/icon_like@2x.png);
+  background-size: 100% 100%;
+  margin-left: 15px;
+  margin-right: 2px;
+}
+.comment-item-reply {
+  margin-left: 20px;
+  cursor: pointer;
+  color: red;
+}
 .comment-favor {
   font-size: 20px;
 }

lib/components/ContentItem/index.js

@@ -195,10 +195,12 @@ var CommentItem = function (_Component) {
           showReply = _props.showReply,
           onShowReply = _props.onShowReply,
           app = _props.app,
-          user_id = _props.user_id;
+          user_id = _props.user_id,
+          page = _props.page;
       var _props$app = this.props.app,
           locale = _props$app.locale,
-          showHoverCard = _props$app.showHoverCard;
+          showHoverCard = _props$app.showHoverCard,
+          showEdit = _props$app.showEdit;
       var showInput = this.state.showInput;
 
 
@@ -350,6 +352,19 @@ var CommentItem = function (_Component) {
                 showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
               )
             ) : null,
+            showEdit && _react2.default.createElement("i", {
+              className: "comment-item-edit",
+              onClick: function onClick() {
+                return _this2.props.app.handleEdit({
+                  action: action,
+                  replyId: replyId,
+                  commentId: commentId,
+                  userId: content.user_id,
+                  content: content,
+                  replyPage: page
+                });
+              }
+            }),
             app.userId === content.user_id && _react2.default.createElement(
               _popconfirm2.default,
               {
@@ -365,22 +380,9 @@ var CommentItem = function (_Component) {
                 okText: _reactIntlUniversal2.default.get("popConfirm.ok"),
                 cancelText: _reactIntlUniversal2.default.get("popConfirm.cancel")
               },
-              _react2.default.createElement(
-                "a",
-                { className: "comment-item-bottom-right" },
-                "\xA0 ",
-                _reactIntlUniversal2.default.get("popConfirm.delete")
-              )
-            ),
-            _react2.default.createElement(
-              "a",
-              {
-                onClick: this.handleToggleInput,
-                className: "comment-item-bottom-right"
-              },
-              "\xA0 ",
-              _reactIntlUniversal2.default.get("comment.reply")
+              _react2.default.createElement("i", { className: "comment-item-delete" })
             ),
+            _react2.default.createElement("span", { className: "comment-item-divider" }),
             _react2.default.createElement(
               "div",
               {
@@ -395,13 +397,22 @@ var CommentItem = function (_Component) {
                 },
                 style: { color: "" + IconColor }
               },
-              _react2.default.createElement(_icon2.default, {
-                type: "like-o",
-                className: content.favored ? "comment-favor comment-favored" : "comment-favor",
-                style: { color: "" + IconColor }
-              }),
+              _react2.default.createElement("i", { className: "comment-item-like" })
+            ),
+            _react2.default.createElement(
+              "span",
+              null,
               "\xA0",
               content.favor_count
+            ),
+            _react2.default.createElement(
+              "div",
+              {
+                onClick: this.handleToggleInput,
+                className: "comment-item-reply"
+              },
+              "\xA0 ",
+              _reactIntlUniversal2.default.get("comment.reply")
             )
           )
         ),
@@ -426,12 +437,14 @@ CommentItem.propTypes = {
   // reply 评论的回复
   // replyToReply 回复的回复
   action: _propTypes2.default.oneOf(["comment", "reply", "replyToReply"]),
-  onShowReply: _propTypes2.default.func
+  onShowReply: _propTypes2.default.func,
+  showEdit: _propTypes2.default.bool
 };
 
 CommentItem.defaultProps = {
   action: "comment",
-  onShowReply: function onShowReply() {}
+  onShowReply: function onShowReply() {},
+  showEdit: false
 };
 
 exports.default = (0, _Comment2.default)(CommentItem);

lib/components/EditComment/EditComment.css

@@ -0,0 +1,86 @@
+.editCommetModal .ant-modal,
+.editCommetModal .ant-modal-content {
+  width: 608px !important;
+  height: 276px;
+}
+.editCommetModal .ant-modal-body {
+  padding: 0;
+}
+
+.editCommetModal .title {
+  font-size: 18px;
+  color: #4a4a4a;
+  padding: 20px 0 0 28px;
+}
+.editCommetModal .comment-editor {
+  border: none;
+  padding: 16px 24px;
+}
+.editCommetModal .comment-editor-toolbar {
+  display: none;
+}
+.editCommetModal .comment-editor:hover,
+.editCommetModal .comment-editor:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+.editCommetModal textarea.ant-input {
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+  resize: none;
+  height: 132px !important;
+}
+.editCommetModal textarea.ant-input:hover {
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+}
+.editCommetModal textarea.ant-input:hover,
+.editCommetModal textarea.ant-input:focus {
+  border-color: #40a9ff;
+}
+.editCommetModal .comment-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+.editCommetModal .comment-toolbar-left {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin: 0;
+}
+.editCommetModal .comment-toolbar-right {
+  height: 36px;
+  margin: 0;
+  margin-left: 20px;
+}
+.editCommetModal .comment-toolbar-right .ant-btn {
+  height: 36px;
+}
+
+.expression-btn-wrap,
+.picture-btn-wrap {
+  float: left;
+  cursor: pointer;
+}
+.expression-btn-wrap .icon,
+.picture-btn-wrap .icon {
+  float: left;
+  color: #ffa405;
+  font-size: 24px !important;
+  margin: 0 !important;
+}
+.expression-btn-wrap .text,
+.picture-btn-wrap .text {
+  float: left;
+  font-size: 16px;
+  color: #393939;
+  margin-left: 8px;
+}
+.picture-btn-wrap {
+  margin-left: 28px;
+}
+.picture-btn-wrap .icon {
+  color: rgba(113, 193, 53, 1);
+}

lib/components/EditComment/EditComment.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _modal = require("antd/es/modal");
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _icon = require("antd/es/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+require("antd/es/modal/style/css");
+
+require("antd/es/icon/style/css");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactIntlUniversal = require("react-intl-universal");
+
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
+
+var _CommentInput = require("../CommentInput");
+
+var _CommentInput2 = _interopRequireDefault(_CommentInput);
+
+var _Editor = require("../Editor");
+
+var _Editor2 = _interopRequireDefault(_Editor);
+
+var _constant = require("../../constant");
+
+require("./EditComment.css");
+
+var _Comment = require("../../Comment");
+
+var _Comment2 = _interopRequireDefault(_Comment);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var EditComment = function (_React$Component) {
+  _inherits(EditComment, _React$Component);
+
+  function EditComment(props) {
+    _classCallCheck(this, EditComment);
+
+    var _this = _possibleConstructorReturn(this, (EditComment.__proto__ || Object.getPrototypeOf(EditComment)).call(this, props));
+
+    _this.handleSubmit = _this.handleSubmit.bind(_this);
+    _this.state = {
+      value: _this.getInitValue(props).value,
+      fileList: _this.getInitValue(props).fileList
+    };
+    return _this;
+  }
+
+  _createClass(EditComment, [{
+    key: "handleSubmit",
+    value: function handleSubmit(_ref) {
+      var _ref$text = _ref.text,
+          text = _ref$text === undefined ? "" : _ref$text,
+          _ref$files = _ref.files,
+          files = _ref$files === undefined ? [] : _ref$files;
+      var fileList = this.state.fileList;
+      var _props = this.props,
+          app = _props.app,
+          action = _props.action,
+          commentId = _props.commentId,
+          replyId = _props.replyId,
+          replyPage = _props.replyPage;
+
+      var value = text;
+      app.onBeforeUpdateComment();
+      if (fileList && fileList.length) {
+        value += _constant.IMAGE_SPLIT;
+        fileList.forEach(function (file) {
+          value += file.thumbUrl + ",";
+        });
+      }
+      if (value.substr(-1) === ",") {
+        value = value.slice(0, -1);
+      }
+      if (action === "comment") {
+        app.sUpdateComment({ commentId: commentId, content: value });
+      } else {
+        app.sUpdateReply({ commentId: commentId, content: value, replyId: replyId, replyPage: replyPage });
+      }
+      this.props.handleClose();
+    }
+  }, {
+    key: "getInitValue",
+    value: function getInitValue(props) {
+      var content = props.content;
+
+      var newContent = content.content;
+      var images = "";
+      if (newContent.indexOf(_constant.IMAGE_SPLIT) !== -1) {
+        newContent = newContent.split(_constant.IMAGE_SPLIT);
+        images = newContent.pop();
+        newContent = newContent.join("");
+      }
+      var fileList = [];
+      if (images !== "") {
+        fileList = images.split(",");
+        fileList = fileList.map(function (item, index) {
+          return {
+            thumbUrl: item,
+            uid: index
+          };
+        });
+      }
+      var value = this.renderTextWithReply(newContent, content);
+      return { value: value, fileList: fileList };
+    }
+  }, {
+    key: "getEmojiToolIcon",
+    value: function getEmojiToolIcon() {
+      return _react2.default.createElement(
+        "div",
+        { className: "expression-btn-wrap" },
+        _react2.default.createElement(_icon2.default, { type: "smile", className: "icon" }),
+        _react2.default.createElement(
+          "span",
+          { className: "text" },
+          _reactIntlUniversal2.default.get("bilingually.emoji")
+        )
+      );
+    }
+  }, {
+    key: "getImageToolIcon",
+    value: function getImageToolIcon() {
+      return _react2.default.createElement(
+        "div",
+        { className: "picture-btn-wrap" },
+        _react2.default.createElement(_icon2.default, { type: "picture", className: "icon" }),
+        _react2.default.createElement(
+          "span",
+          { className: "text" },
+          _reactIntlUniversal2.default.get("bilingually.pic")
+        )
+      );
+    }
+  }, {
+    key: "renderTextWithReply",
+    value: function renderTextWithReply(text, content) {
+      var newText = text;
+      // const { reply } = content;
+      // if (reply) {
+      //   newText = `${newText} //@${reply.user_name} ${reply.content}`;
+      //   if (reply.reply) {
+      //     return this.renderTextWithReply(newText, reply);
+      //   }
+      // }
+      return newText;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return _react2.default.createElement(
+        _modal2.default,
+        {
+          visible: true,
+          footer: null,
+          wrapClassName: "editCommetModal",
+          onCancel: this.props.handleClose
+        },
+        _react2.default.createElement(
+          "div",
+          { className: "title" },
+          _reactIntlUniversal2.default.get("bilingually.imgtxt.edit_imgtxt")
+        ),
+        _react2.default.createElement(_CommentInput2.default, {
+          content: _react2.default.createElement(_Editor2.default, {
+            maxUpload: 9,
+            autoFocus: true
+            // {...this.props.editorProps}
+            , action: this.props.action,
+            replyId: this.props.replyId,
+            commentId: this.props.commentId,
+            userId: this.props.content.user_id,
+            fileList: this.state.fileList,
+            value: this.state.value,
+            onChange: function onChange(value) {
+              _this2.setState({
+                value: value
+              });
+            },
+            handleChangeFileList: function handleChangeFileList(fileList) {
+              _this2.setState({
+                fileList: fileList
+              });
+            },
+            onSubmit: this.handleSubmit,
+            emojiToolIcon: this.getEmojiToolIcon(),
+            imageToolIcon: this.getImageToolIcon(),
+            emojiPopoverPlacement: "bottom",
+            uploadPopoverPlacement: "bottom",
+            btnSubmitText: _reactIntlUniversal2.default.get("bilingually.imgtxt.update")
+          })
+        })
+      );
+    }
+  }]);
+
+  return EditComment;
+}(_react2.default.Component);
+
+exports.default = (0, _Comment2.default)(EditComment);
+//# sourceMappingURL=EditComment.js.map

lib/components/Editor/Upload.css

@@ -7,7 +7,9 @@
   margin-top: 8px;
   color: #666;
 }
-
+.upload-img-preview {
+  z-index: 10000 !important;
+}
 .upload-img-preview .ant-modal-close {
   top: -10px;
   right: -15px;
@@ -22,6 +24,7 @@
 .ant-upload-list-item-info {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .upload-close-icon {

lib/components/Editor/Upload.js

@@ -237,7 +237,7 @@ var App = function (_React$Component) {
         _react2.default.createElement(
           _modal2.default,
           {
-            className: "upload-img-preview",
+            wrapClassName: "upload-img-preview",
             visible: previewVisible,
             footer: null,
             onCancel: this.handleCancel

lib/components/Editor/index.js

@@ -86,9 +86,9 @@ var Editor = function (_React$Component) {
 
     _this.state = {
       showUpload: false,
-      value: "", // 编辑器里面的值
+      value: props.value, // 编辑器里面的值
 
-      fileList: [], // 图片列表
+      fileList: props.fileList, // 图片列表
       fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
     };
     _this.handleChange = _this.handleChange.bind(_this);
@@ -302,7 +302,7 @@ var Editor = function (_React$Component) {
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
       var handleSubmit = this.handleSubmit;
-      var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.state.fileList.length;
+      var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.props.fileList.length && !this.state.fileList.length;
       var inputValue = value || this.state.value;
       var uploadFileList = fileList || this.state.fileList;
       return _react2.default.createElement(
@@ -484,6 +484,8 @@ Editor.defaultProps = {
   uploadPopoverPlacement: "bottomLeft",
   uploadOverlayClassName: "",
   maxUpload: 1,
+  value: "",
+  fileList: [],
   // btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,

lib/index.js

@@ -35,7 +35,8 @@ var Index = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
 
     _this.state = {
-      fileList: []
+      fileList: [],
+      value: ""
     };
     return _this;
   }
@@ -58,7 +59,14 @@ var Index = function (_React$Component) {
           autoFocus: true
         }, this.props.editorProps, {
           fileList: this.state.fileList,
+          value: this.state.value,
+          onChange: function onChange(value) {
+            _this2.setState({
+              value: value
+            });
+          },
           handleChangeFileList: function handleChangeFileList(fileList) {
+            console.log(fileList);
             _this2.setState({
               fileList: fileList
             });
@@ -136,6 +144,7 @@ if (process.env.NODE_ENV !== "production") {
       }
     },
     showHoverCard: true,
+    showEdit: true,
     userAvaClick: function userAvaClick(id) {
       console.log("userAvaClick", id);
     },
@@ -154,13 +163,18 @@ if (process.env.NODE_ENV !== "production") {
         resolve();
       });
     },
-
     onCountChange: function onCountChange(c) {
       console.log(c);
     },
     onDelete: function onDelete(type, data) {
       console.log(type, data);
     },
+    onUpdateComment: function onUpdateComment(type, data) {
+      console.log("onUpdateComment", type);
+    },
+    onBeforeUpdateComment: function onBeforeUpdateComment() {
+      console.log("onBeforeUpdateComment");
+    },
     editorProps: {
       onCommentSuccess: function onCommentSuccess(data) {
         console.log(data);

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1563590515482,
+    "buildDate":  1564144081929,
     "version":    "1.0.4",
-    "numCommits": 169,
-    "hash":       "d78b943",
+    "numCommits": 172,
+    "hash":       "aef6d87",
     "dirty":      true
 }

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { message } from "antd";
+import { message, Modal, Icon } from "antd";
 import axios from "axios";
 import Cookies from "js-cookie";
 import intl from "react-intl-universal";
@@ -11,6 +11,7 @@ import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
 import Editor from "./components/Editor";
 import RenderText from "./components/RenderText";
+import EditComment from "./components/EditComment/EditComment";
 import { SUPPORT_LOCALES, LOCALES_RESPONSE } from "./lang";
 import "./App.css";
 
@@ -30,10 +31,18 @@ class App extends Component {
       // 是否没有更多评论了
       isNoMoreComment: false,
       initDone: false,
-      locale: "zh-CN"
+      locale: "zh-CN",
+      editModalVisible: false,
+      action: "",
+      replyId: "",
+      commentId: "",
+      userId: "",
+      content: "",
+      replyPage: 1
     };
     this.handleChangeLoading = this.handleChangeLoading.bind(this);
     this.sCreateComment = this.sCreateComment.bind(this);
+    this.sUpdateComment = this.sUpdateComment.bind(this);
     this.sDeleteComment = this.sDeleteComment.bind(this);
     this.sCommentFavor = this.sCommentFavor.bind(this);
     this.sCreateReply = this.sCreateReply.bind(this);
@@ -42,7 +51,10 @@ class App extends Component {
     this.sGetComment = this.sGetComment.bind(this);
     this.sReplyFavor = this.sReplyFavor.bind(this);
     this.sGetReply = this.sGetReply.bind(this);
+    this.sUpdateReply = this.sUpdateReply.bind(this);
     this.sOssSts = this.sOssSts.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
   }
 
   componentWillMount() {
@@ -102,6 +114,28 @@ class App extends Component {
       });
   }
 
+  handleEdit({ replyId, commentId, userId, content, replyPage }) {
+    this.setState({
+      editModalVisible: true,
+      action: content.replies
+        ? "comment"
+        : content.reply
+        ? "replyToReply"
+        : "reply",
+      replyId,
+      commentId,
+      userId,
+      content,
+      replyPage
+    });
+  }
+
+  handleClose() {
+    this.setState({
+      editModalVisible: false
+    });
+  }
+
   error(msg, info = {}) {
     if (this.props.showError) {
       message.error(msg);
@@ -287,7 +321,39 @@ class App extends Component {
         this.handleChangeLoading("sDeleteComment", false);
       });
   }
-
+  /**
+   * 更新评论
+   * @param {object} {content} comment content
+   */
+  sUpdateComment({ commentId, content }) {
+    this.handleChangeLoading("sUpdateComment", true);
+    const { API } = this.props;
+    this.axios(`${API}/comments/${commentId}`, {
+      method: "post",
+      data: {
+        content
+      },
+      withCredentials: true
+    })
+      .then(() => {
+        let { list } = this.state;
+        list = list.map(it => {
+          if (it.id === commentId) {
+            return {
+              ...it,
+              content
+            };
+          }
+          return it;
+        });
+        this.props.onUpdateComment("comment");
+        this.setState({ list });
+      })
+      .catch(this.errorHandler)
+      .finally(() => {
+        this.handleChangeLoading("sUpdateComment", false);
+      });
+  }
   /**
    * 添加回复
    * 回复评论/回复回复
@@ -360,7 +426,33 @@ class App extends Component {
         this.handleChangeLoading("sDeleteReply", false);
       });
   }
-
+  /**
+   * 更新回复
+   * 回复评论/回复回复
+   * @param {object} data { comment_id, content, reply_id }
+   */
+  sUpdateReply({ commentId, content, replyId, replyPage }) {
+    this.handleChangeLoading("sUpdateReply", true);
+    const { API } = this.props;
+    this.axios(`${API}/replies/${replyId}`, {
+      method: "post",
+      data: {
+        comment_id: commentId,
+        content
+      },
+      withCredentials: true
+    })
+      .then(() => {
+        for (let i = 1; i <= replyPage; i++) {
+          this.sGetReply({ commentId, page: i });
+        }
+        this.props.onUpdateComment("reply");
+      })
+      .catch(this.errorHandler)
+      .finally(() => {
+        this.handleChangeLoading("sUpdateReply", false);
+      });
+  }
   /**
    * 评论 点赞/取消点赞
    * @param {string} commentId { commentId }
@@ -473,9 +565,11 @@ class App extends Component {
       sGetReply: this.sGetReply,
       sOssSts: this.sOssSts,
       sDeleteComment: this.sDeleteComment,
-      sDeleteReply: this.sDeleteReply
+      sDeleteReply: this.sDeleteReply,
+      sUpdateReply: this.sUpdateReply,
+      sUpdateComment: this.sUpdateComment,
+      handleEdit: this.handleEdit
     };
-
     return (
       this.state.initDone && (
         <CommentContext.Provider value={value}>
@@ -489,6 +583,18 @@ class App extends Component {
               </div>
             )}
           </div>
+          {this.state.editModalVisible && (
+            <EditComment
+              visible={this.state.editModalVisible}
+              action={this.state.action}
+              replyId={this.state.replyId}
+              replyPage={this.state.replyPage}
+              commentId={this.state.commentId}
+              userId={this.state.content.user_id}
+              content={this.state.content}
+              handleClose={this.handleClose}
+            />
+          )}
         </CommentContext.Provider>
       )
     );
@@ -514,6 +620,7 @@ App.propTypes = {
   onPageChange: PropTypes.func, // 页码变化回调
   onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
   onDelete: PropTypes.func,
+  onUpdateComment: PropTypes.func,
   locales: PropTypes.string, //  传入的语言环境， en-US/zh-CN
   onCountChange: PropTypes.func // 评论数量变更时的回调
 };
@@ -527,11 +634,14 @@ App.defaultProps = {
   showAlertReply: false,
   showAlertFavor: false,
   showError: true,
+  showEdit: false,
   pageType: "more",
   limit: LIMIT,
   onGetMoreBtnClick: () => {},
   onPageChange: page => {},
   onDelete: () => {},
+  onUpdateComment: () => {},
+  onReforeUpdateComment: () => {},
   onCountChange: () => {}
 };
 

src/components/CommentBox/index.js

@@ -60,6 +60,7 @@ class CommentBox extends Component {
                   content={item}
                   user_id={item.user_id}
                   action="replyToReply" // 回复的回复
+                  page={this.state.page}
                 />,
                 <div className="comment-more-box" key="show_more_button">
                   {!isNoMoreReply && replyCount !== len && (
@@ -87,6 +88,7 @@ class CommentBox extends Component {
                 key={item.id}
                 content={item}
                 action="replyToReply" // 评论的回复
+                page={this.state.page}
               />
             );
           })}
@@ -108,6 +110,7 @@ class CommentBox extends Component {
           commentId={content.id}
           user_id={user_id}
           action="reply" // 评论的回复
+          page={this.state.page}
         />
         {this.renderReplies(
           content.replies,

src/components/ContentItem/index.css

@@ -34,7 +34,10 @@
 }
 
 .comment-item-bottom {
+  display: flex;
+  justify-content: flex-end;
   margin: 20px auto;
+  line-height: 18px;
 }
 
 .comment-item-bottom-left {
@@ -43,11 +46,44 @@
 }
 
 .comment-item-bottom-right {
-  float: right;
-  margin-left: 5px;
   cursor: pointer;
 }
-
+.comment-item-divider {
+  width: 2px;
+  height: 24px;
+  background: #c6c6c6;
+  margin-top: -2px;
+}
+.comment-item-delete,
+.comment-item-edit,
+.comment-item-like {
+  display: inline-block;
+  background: url(../../assert/icon_delete.png);
+  width: 18px;
+  height: 18px;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.comment-item-delete {
+  margin-right: 18px;
+}
+.comment-item-edit {
+  background: url(../../assert/icon_answer@2x.png);
+  background-size: 100% 100%;
+  margin-right: 18px;
+  margin-left: 10px;
+}
+.comment-item-like {
+  background: url(../../assert/icon_like@2x.png);
+  background-size: 100% 100%;
+  margin-left: 15px;
+  margin-right: 2px;
+}
+.comment-item-reply {
+  margin-left: 20px;
+  cursor: pointer;
+  color: red;
+}
 .comment-favor {
   font-size: 20px;
 }

src/components/ContentItem/index.js

@@ -100,10 +100,10 @@ class CommentItem extends Component {
       showReply,
       onShowReply,
       app,
-      user_id
+      user_id,
+      page
     } = this.props;
-
-    const { locale, showHoverCard } = this.props.app;
+    const { locale, showHoverCard, showEdit } = this.props.app;
     const { showInput } = this.state;
 
     let newContent = content.content;
@@ -262,6 +262,21 @@ class CommentItem extends Component {
                 </a>
               </div>
             ) : null}
+            {showEdit && (
+              <i
+                className="comment-item-edit"
+                onClick={() =>
+                  this.props.app.handleEdit({
+                    action,
+                    replyId,
+                    commentId,
+                    userId: content.user_id,
+                    content,
+                    replyPage: page
+                  })
+                }
+              />
+            )}
             {app.userId === content.user_id && (
               <Popconfirm
                 // title="确定要删除吗?"
@@ -276,17 +291,13 @@ class CommentItem extends Component {
                 okText={intl.get("popConfirm.ok")}
                 cancelText={intl.get("popConfirm.cancel")}
               >
-                <a className="comment-item-bottom-right">
+                {/* <a className="comment-item-bottom-right">
                   &nbsp; {intl.get("popConfirm.delete")}
-                </a>
+                </a> */}
+                <i className="comment-item-delete" />
               </Popconfirm>
             )}
-            <a
-              onClick={this.handleToggleInput}
-              className="comment-item-bottom-right"
-            >
-              &nbsp; {intl.get("comment.reply")}
-            </a>
+            <span className="comment-item-divider" />
             <div
               className="comment-item-bottom-right"
               onClick={() => {
@@ -299,16 +310,14 @@ class CommentItem extends Component {
               }}
               style={{ color: `${IconColor}` }}
             >
-              <Icon
-                type="like-o"
-                className={
-                  content.favored
-                    ? "comment-favor comment-favored"
-                    : "comment-favor"
-                }
-                style={{ color: `${IconColor}` }}
-              />
-              &nbsp;{content.favor_count}
+              <i className="comment-item-like" />
+            </div>
+            <span>&nbsp;{content.favor_count}</span>
+            <div
+              onClick={this.handleToggleInput}
+              className="comment-item-reply"
+            >
+              &nbsp; {intl.get("comment.reply")}
             </div>
           </div>
         </div>
@@ -334,12 +343,14 @@ CommentItem.propTypes = {
   // reply 评论的回复
   // replyToReply 回复的回复
   action: PropTypes.oneOf(["comment", "reply", "replyToReply"]),
-  onShowReply: PropTypes.func
+  onShowReply: PropTypes.func,
+  showEdit: PropTypes.bool
 };
 
 CommentItem.defaultProps = {
   action: "comment",
-  onShowReply: () => {}
+  onShowReply: () => {},
+  showEdit: false
 };
 
 export default Comment(CommentItem);

src/components/EditComment/EditComment.css

@@ -0,0 +1,86 @@
+.editCommetModal .ant-modal,
+.editCommetModal .ant-modal-content {
+  width: 608px !important;
+  height: 276px;
+}
+.editCommetModal .ant-modal-body {
+  padding: 0;
+}
+
+.editCommetModal .title {
+  font-size: 18px;
+  color: #4a4a4a;
+  padding: 20px 0 0 28px;
+}
+.editCommetModal .comment-editor {
+  border: none;
+  padding: 16px 24px;
+}
+.editCommetModal .comment-editor-toolbar {
+  display: none;
+}
+.editCommetModal .comment-editor:hover,
+.editCommetModal .comment-editor:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+.editCommetModal textarea.ant-input {
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+  resize: none;
+  height: 132px !important;
+}
+.editCommetModal textarea.ant-input:hover {
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+}
+.editCommetModal textarea.ant-input:hover,
+.editCommetModal textarea.ant-input:focus {
+  border-color: #40a9ff;
+}
+.editCommetModal .comment-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+.editCommetModal .comment-toolbar-left {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin: 0;
+}
+.editCommetModal .comment-toolbar-right {
+  height: 36px;
+  margin: 0;
+  margin-left: 20px;
+}
+.editCommetModal .comment-toolbar-right .ant-btn {
+  height: 36px;
+}
+
+.expression-btn-wrap,
+.picture-btn-wrap {
+  float: left;
+  cursor: pointer;
+}
+.expression-btn-wrap .icon,
+.picture-btn-wrap .icon {
+  float: left;
+  color: #ffa405;
+  font-size: 24px !important;
+  margin: 0 !important;
+}
+.expression-btn-wrap .text,
+.picture-btn-wrap .text {
+  float: left;
+  font-size: 16px;
+  color: #393939;
+  margin-left: 8px;
+}
+.picture-btn-wrap {
+  margin-left: 28px;
+}
+.picture-btn-wrap .icon {
+  color: rgba(113, 193, 53, 1);
+}

src/components/EditComment/EditComment.js

@@ -0,0 +1,142 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Modal, Icon } from "antd";
+import intl from "react-intl-universal";
+import CommentInput from "../CommentInput";
+import Editor from "../Editor";
+import { IMAGE_SPLIT } from "../../constant";
+import "./EditComment.css";
+import Comment from "../../Comment";
+class EditComment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.state = {
+      value: this.getInitValue(props).value,
+      fileList: this.getInitValue(props).fileList
+    };
+  }
+
+  handleSubmit({ text = "", files = [] }) {
+    const { fileList } = this.state;
+    const { app, action, commentId, replyId, replyPage } = this.props;
+    let value = text;
+    app.onBeforeUpdateComment();
+    if (fileList && fileList.length) {
+      value += IMAGE_SPLIT;
+      fileList.forEach(file => {
+        value += `${file.thumbUrl},`;
+      });
+    }
+    if (value.substr(-1) === ",") {
+      value = value.slice(0, -1);
+    }
+    if (action === "comment") {
+      app.sUpdateComment({ commentId, content: value });
+    } else {
+      app.sUpdateReply({ commentId, content: value, replyId, replyPage });
+    }
+    this.props.handleClose();
+  }
+
+  getInitValue(props) {
+    const { content } = props;
+    let newContent = content.content;
+    let images = "";
+    if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
+      newContent = newContent.split(IMAGE_SPLIT);
+      images = newContent.pop();
+      newContent = newContent.join("");
+    }
+    let fileList = [];
+    if (images !== "") {
+      fileList = images.split(",");
+      fileList = fileList.map((item, index) => {
+        return {
+          thumbUrl: item,
+          uid: index
+        };
+      });
+    }
+    const value = this.renderTextWithReply(newContent, content);
+    return { value, fileList };
+  }
+
+  getEmojiToolIcon() {
+    return (
+      <div className="expression-btn-wrap">
+        <Icon type="smile" className="icon" />
+        <span className="text">{intl.get("bilingually.emoji")}</span>
+      </div>
+    );
+  }
+
+  getImageToolIcon() {
+    return (
+      <div className="picture-btn-wrap">
+        <Icon type="picture" className="icon" />
+        <span className="text">{intl.get("bilingually.pic")}</span>
+      </div>
+    );
+  }
+
+  renderTextWithReply(text, content) {
+    let newText = text;
+    // const { reply } = content;
+    // if (reply) {
+    //   newText = `${newText} //@${reply.user_name} ${reply.content}`;
+    //   if (reply.reply) {
+    //     return this.renderTextWithReply(newText, reply);
+    //   }
+    // }
+    return newText;
+  }
+
+  render() {
+    return (
+      <Modal
+        visible={true}
+        footer={null}
+        wrapClassName="editCommetModal"
+        onCancel={this.props.handleClose}
+      >
+        <div className="title">
+          {intl.get("bilingually.imgtxt.edit_imgtxt")}
+        </div>
+        <CommentInput
+          content={
+            <Editor
+              maxUpload={9}
+              autoFocus
+              // {...this.props.editorProps}
+              action={this.props.action}
+              replyId={this.props.replyId}
+              commentId={this.props.commentId}
+              userId={this.props.content.user_id}
+              fileList={this.state.fileList}
+              value={this.state.value}
+              onChange={value => {
+                this.setState({
+                  value
+                });
+              }}
+              handleChangeFileList={fileList => {
+                this.setState({
+                  fileList
+                });
+              }}
+              onSubmit={this.handleSubmit}
+              emojiToolIcon={this.getEmojiToolIcon()}
+              imageToolIcon={this.getImageToolIcon()}
+              emojiPopoverPlacement="bottom"
+              uploadPopoverPlacement="bottom"
+              btnSubmitText={intl.get("bilingually.imgtxt.update")}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}
+
+export default Comment(EditComment);

src/components/Editor/Upload.css

@@ -7,7 +7,9 @@
   margin-top: 8px;
   color: #666;
 }
-
+.upload-img-preview {
+  z-index: 10000 !important;
+}
 .upload-img-preview .ant-modal-close {
   top: -10px;
   right: -15px;
@@ -22,6 +24,7 @@
 .ant-upload-list-item-info {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .upload-close-icon {

src/components/Editor/Upload.js

@@ -153,7 +153,7 @@ class App extends React.Component {
           );
         })}
         <Modal
-          className="upload-img-preview"
+          wrapClassName="upload-img-preview"
           visible={previewVisible}
           footer={null}
           onCancel={this.handleCancel}

src/components/Editor/index.js

@@ -16,9 +16,9 @@ class Editor extends React.Component {
     super(props);
     this.state = {
       showUpload: false,
-      value: "", // 编辑器里面的值
+      value: props.value, // 编辑器里面的值
 
-      fileList: [], // 图片列表
+      fileList: props.fileList, // 图片列表
       fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
     };
     this.handleChange = this.handleChange.bind(this);
@@ -204,7 +204,10 @@ class Editor extends React.Component {
     const handleSubmit = this.handleSubmit;
     const disabledSubmit =
       btnDisabled ||
-      (!this.props.value && !this.state.value && !this.state.fileList.length);
+      (!this.props.value &&
+        !this.state.value &&
+        !this.props.fileList.length &&
+        !this.state.fileList.length);
     const inputValue = value || this.state.value;
     const uploadFileList = fileList || this.state.fileList;
     return (
@@ -395,6 +398,8 @@ Editor.defaultProps = {
   uploadPopoverPlacement: "bottomLeft",
   uploadOverlayClassName: "",
   maxUpload: 1,
+  value: "",
+  fileList: [],
   // btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,

src/index.js

@@ -7,7 +7,8 @@ class Index extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      fileList: []
+      fileList: [],
+      value: ""
     };
   }
 
@@ -25,7 +26,14 @@ class Index extends React.Component {
           autoFocus
           {...this.props.editorProps}
           fileList={this.state.fileList}
+          value={this.state.value}
+          onChange={value => {
+            this.setState({
+              value
+            });
+          }}
           handleChangeFileList={fileList => {
+            console.log(fileList);
             this.setState({
               fileList
             });
@@ -101,6 +109,7 @@ if (process.env.NODE_ENV !== "production") {
       }
     },
     showHoverCard: true,
+    showEdit: true,
     userAvaClick: id => {
       console.log("userAvaClick", id);
     },
@@ -119,13 +128,18 @@ if (process.env.NODE_ENV !== "production") {
         resolve();
       });
     },
-
     onCountChange: c => {
       console.log(c);
     },
     onDelete: (type, data) => {
       console.log(type, data);
     },
+    onUpdateComment: (type, data) => {
+      console.log("onUpdateComment", type);
+    },
+    onBeforeUpdateComment: () => {
+      console.log("onBeforeUpdateComment");
+    },
     editorProps: {
       onCommentSuccess: data => {
         console.log(data);