fix:编辑相关调整

lib/App.css

@@ -28,3 +28,7 @@
 .comment-img {
   max-width: 100%;
 }
+
+.ant-upload-picture-card-wrapper {
+  width: 100%;
+}

lib/App.js

@@ -406,6 +406,7 @@ var App = function (_Component) {
             total = _state.total;
 
         list.unshift(_extends({}, response.data, {
+          replies: [],
           isTemporary: true // 临时的数据
         }));
         _this5.setState({ list: list, total: total + 1 });
@@ -789,7 +790,7 @@ App.defaultProps = {
   onPageChange: function onPageChange(page) {},
   onDelete: function onDelete() {},
   onUpdateComment: function onUpdateComment() {},
-  onReforeUpdateComment: function onReforeUpdateComment() {},
+  onBeforeUpdateComment: function onBeforeUpdateComment() {},
   onCountChange: function onCountChange() {}
 };
 

lib/components/CommentInput/index.js

@@ -77,14 +77,17 @@ var CommentInput = function (_Component) {
       if (action === "comment") {
         this.props.app.sCreateComment({
           content: value
-        }, cb);
+        }, function (data) {
+          return cb(data, action);
+        });
       } else if (action === "reply") {
         this.props.app.sCreateReply({
           comment_id: commentId,
           content: value,
           business_user_id: userId
         }, function (data) {
-          return callback && callback(data);
+          callback && callback(data);
+          cb(data, action);
         });
       } else if (action === "replyToReply") {
         this.props.app.sCreateReply({
@@ -93,7 +96,8 @@ var CommentInput = function (_Component) {
           reply_id: replyId,
           business_user_id: userId
         }, function (data) {
-          return callback && callback(data);
+          callback && callback(data);
+          cb(data, action);
         });
       }
     }

lib/components/ContentItem/index.css

@@ -71,7 +71,7 @@
   background: url(../../assert/icon_answer@2x.png);
   background-size: 100% 100%;
   margin-right: 18px;
-  margin-left: 10px;
+  /* margin-left: 10px; */
 }
 .comment-item-like {
   background: url(../../assert/icon_like@2x.png);
@@ -83,6 +83,10 @@
   margin-left: 20px;
   cursor: pointer;
   color: red;
+} 
+.comment-item-bottom-left {
+  color: #71c135;
+  margin-right: 20px;
 }
 .comment-favor {
   font-size: 20px;

lib/components/ContentItem/index.js

@@ -203,7 +203,6 @@ var CommentItem = function (_Component) {
           showEdit = _props$app.showEdit;
       var showInput = this.state.showInput;
 
-
       var newContent = content.content;
       var images = "";
       if (newContent.indexOf(_constant.IMAGE_SPLIT) !== -1) {

lib/components/EditComment/EditComment.css

@@ -58,7 +58,6 @@
 .editCommetModal .comment-toolbar-right .ant-btn {
   height: 36px;
 }
-
 .expression-btn-wrap,
 .picture-btn-wrap {
   float: left;
@@ -71,8 +70,8 @@
   font-size: 24px !important;
   margin: 0 !important;
 }
-.expression-btn-wrap .text,
-.picture-btn-wrap .text {
+.expression-btn-wrap .icon-tool-text,
+.picture-btn-wrap .icon-tool-text {
   float: left;
   font-size: 16px;
   color: #393939;
@@ -84,3 +83,17 @@
 .picture-btn-wrap .icon {
   color: rgba(113, 193, 53, 1);
 }
+
+@media (max-width: 575px) {
+  .editCommetModal .ant-modal,
+  .editCommetModal .ant-modal-content {
+    width: 100% !important;
+    height: 286px;
+  }
+  .editCommetModal .icon-tool-text {
+    display: none;
+  }
+  .editCommetModal .picture-btn-wrap {
+    margin-left: 18px;
+  }
+}

lib/components/EditComment/EditComment.js

@@ -137,7 +137,7 @@ var EditComment = function (_React$Component) {
         _react2.default.createElement(_icon2.default, { type: "smile", className: "icon" }),
         _react2.default.createElement(
           "span",
-          { className: "text" },
+          { className: "icon-tool-text" },
           _reactIntlUniversal2.default.get("bilingually.emoji")
         )
       );
@@ -151,7 +151,7 @@ var EditComment = function (_React$Component) {
         _react2.default.createElement(_icon2.default, { type: "picture", className: "icon" }),
         _react2.default.createElement(
           "span",
-          { className: "text" },
+          { className: "icon-tool-text" },
           _reactIntlUniversal2.default.get("bilingually.pic")
         )
       );
@@ -185,7 +185,7 @@ var EditComment = function (_React$Component) {
         _react2.default.createElement(
           "div",
           { className: "title" },
-          _reactIntlUniversal2.default.get("bilingually.imgtxt.edit_imgtxt")
+          _reactIntlUniversal2.default.get("comment.edit")
         ),
         _react2.default.createElement(_CommentInput2.default, {
           content: _react2.default.createElement(_Editor2.default, {
@@ -213,7 +213,7 @@ var EditComment = function (_React$Component) {
             imageToolIcon: this.getImageToolIcon(),
             emojiPopoverPlacement: "bottom",
             uploadPopoverPlacement: "bottom",
-            btnSubmitText: _reactIntlUniversal2.default.get("bilingually.imgtxt.update")
+            btnSubmitText: _reactIntlUniversal2.default.get("comment.update")
           })
         })
       );

lib/components/Editor/index.js

@@ -247,18 +247,18 @@ var Editor = function (_React$Component) {
       if (this.props.beforeSubmit) {
         Promise.resolve(this.props.beforeSubmit({ text: value, files: files })).then(function (res) {
           if (!(res === false)) {
-            _this2.props.onSubmit({ text: value, files: files }, function (res) {
+            _this2.props.onSubmit({ text: value, files: files }, function (res, action) {
               _this2.resetState();
-              if (_this2.props.onCommentSuccess) {
+              if (action === "comment" && _this2.props.onCommentSuccess) {
                 _this2.props.onCommentSuccess(res);
               }
             });
           }
         });
       } else {
-        this.props.onSubmit({ text: value, files: files }, function (res) {
+        this.props.onSubmit({ text: value, files: files }, function (res, action) {
           _this2.resetState();
-          if (_this2.props.onCommentSuccess) {
+          if (action === "comment" && _this2.props.onCommentSuccess) {
             _this2.props.onCommentSuccess(res);
           }
         });
@@ -267,6 +267,7 @@ var Editor = function (_React$Component) {
   }, {
     key: "resetState",
     value: function resetState() {
+      this.handleChange("");
       this.setState({
         showUpload: false,
         value: "",

lib/index.js

@@ -35,8 +35,15 @@ var Index = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
 
     _this.state = {
-      fileList: [],
-      value: ""
+      fileList: [
+        // {
+        //   url:
+        //     "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190727/YQ-4VC1bL.jpeg",
+        //   type: "image/jpeg",
+        //   uid: "rc-upload-1564206005248-2"
+        // }
+      ],
+      value: "2"
     };
     return _this;
   }

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1564144081929,
+    "buildDate":  1564190100286,
     "version":    "1.0.4",
-    "numCommits": 172,
-    "hash":       "aef6d87",
+    "numCommits": 173,
+    "hash":       "b9eeb6a",
     "dirty":      true
 }

src/App.css

@@ -28,3 +28,7 @@
 .comment-img {
   max-width: 100%;
 }
+
+.ant-upload-picture-card-wrapper {
+  width: 100%;
+}

src/App.js

@@ -61,9 +61,9 @@ class App extends Component {
     this.axios = axios;
     this.axios.defaults.withCredentials = true;
     if (this.props.token) {
-      this.axios.defaults.headers.common["Authorization"] = `Bearer ${
-        this.props.token
-      }`;
+      this.axios.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${this.props.token}`;
     }
   }
 
@@ -287,6 +287,7 @@ class App extends Component {
         const { list, total } = this.state;
         list.unshift({
           ...response.data,
+          replies: [],
           isTemporary: true // 临时的数据
         });
         this.setState({ list, total: total + 1 });
@@ -641,7 +642,7 @@ App.defaultProps = {
   onPageChange: page => {},
   onDelete: () => {},
   onUpdateComment: () => {},
-  onReforeUpdateComment: () => {},
+  onBeforeUpdateComment: () => {},
   onCountChange: () => {}
 };
 

src/components/CommentInput/index.js

@@ -33,7 +33,7 @@ class CommentInput extends Component {
         {
           content: value
         },
-        cb
+        data => cb(data, action)
       );
     } else if (action === "reply") {
       this.props.app.sCreateReply(
@@ -42,7 +42,10 @@ class CommentInput extends Component {
           content: value,
           business_user_id: userId
         },
-        data => callback && callback(data)
+        data => {
+          callback && callback(data);
+          cb(data, action);
+        }
       );
     } else if (action === "replyToReply") {
       this.props.app.sCreateReply(
@@ -52,7 +55,10 @@ class CommentInput extends Component {
           reply_id: replyId,
           business_user_id: userId
         },
-        data => callback && callback(data)
+        data => {
+          callback && callback(data);
+          cb(data, action);
+        }
       );
     }
   }

src/components/ContentItem/index.css

@@ -71,7 +71,7 @@
   background: url(../../assert/icon_answer@2x.png);
   background-size: 100% 100%;
   margin-right: 18px;
-  margin-left: 10px;
+  /* margin-left: 10px; */
 }
 .comment-item-like {
   background: url(../../assert/icon_like@2x.png);
@@ -84,6 +84,10 @@
   cursor: pointer;
   color: red;
 }
+.comment-item-bottom-left {
+  color: #71c135;
+  margin-right: 20px;
+}
 .comment-favor {
   font-size: 20px;
 }

src/components/ContentItem/index.js

@@ -105,7 +105,6 @@ class CommentItem extends Component {
     } = this.props;
     const { locale, showHoverCard, showEdit } = this.props.app;
     const { showInput } = this.state;
-
     let newContent = content.content;
     let images = "";
     if (newContent.indexOf(IMAGE_SPLIT) !== -1) {

src/components/EditComment/EditComment.css

@@ -58,7 +58,6 @@
 .editCommetModal .comment-toolbar-right .ant-btn {
   height: 36px;
 }
-
 .expression-btn-wrap,
 .picture-btn-wrap {
   float: left;
@@ -71,8 +70,8 @@
   font-size: 24px !important;
   margin: 0 !important;
 }
-.expression-btn-wrap .text,
-.picture-btn-wrap .text {
+.expression-btn-wrap .icon-tool-text,
+.picture-btn-wrap .icon-tool-text {
   float: left;
   font-size: 16px;
   color: #393939;
@@ -84,3 +83,17 @@
 .picture-btn-wrap .icon {
   color: rgba(113, 193, 53, 1);
 }
+
+@media (max-width: 575px) {
+  .editCommetModal .ant-modal,
+  .editCommetModal .ant-modal-content {
+    width: 100% !important;
+    height: 286px;
+  }
+  .editCommetModal .icon-tool-text {
+    display: none;
+  }
+  .editCommetModal .picture-btn-wrap {
+    margin-left: 18px;
+  }
+}

src/components/EditComment/EditComment.js

@@ -66,7 +66,7 @@ class EditComment extends React.Component {
     return (
       <div className="expression-btn-wrap">
         <Icon type="smile" className="icon" />
-        <span className="text">{intl.get("bilingually.emoji")}</span>
+        <span className="icon-tool-text">{intl.get("bilingually.emoji")}</span>
       </div>
     );
   }
@@ -75,7 +75,7 @@ class EditComment extends React.Component {
     return (
       <div className="picture-btn-wrap">
         <Icon type="picture" className="icon" />
-        <span className="text">{intl.get("bilingually.pic")}</span>
+        <span className="icon-tool-text">{intl.get("bilingually.pic")}</span>
       </div>
     );
   }
@@ -100,9 +100,7 @@ class EditComment extends React.Component {
         wrapClassName="editCommetModal"
         onCancel={this.props.handleClose}
       >
-        <div className="title">
-          {intl.get("bilingually.imgtxt.edit_imgtxt")}
-        </div>
+        <div className="title">{intl.get("comment.edit")}</div>
         <CommentInput
           content={
             <Editor
@@ -130,7 +128,7 @@ class EditComment extends React.Component {
               imageToolIcon={this.getImageToolIcon()}
               emojiPopoverPlacement="bottom"
               uploadPopoverPlacement="bottom"
-              btnSubmitText={intl.get("bilingually.imgtxt.update")}
+              btnSubmitText={intl.get("comment.update")}
             />
           }
         />

src/components/Editor/index.js

@@ -147,9 +147,9 @@ class Editor extends React.Component {
       Promise.resolve(this.props.beforeSubmit({ text: value, files })).then(
         res => {
           if (!(res === false)) {
-            this.props.onSubmit({ text: value, files }, res => {
+            this.props.onSubmit({ text: value, files }, (res, action) => {
               this.resetState();
-              if (this.props.onCommentSuccess) {
+              if (action === "comment" && this.props.onCommentSuccess) {
                 this.props.onCommentSuccess(res);
               }
             });
@@ -157,9 +157,9 @@ class Editor extends React.Component {
         }
       );
     } else {
-      this.props.onSubmit({ text: value, files }, res => {
+      this.props.onSubmit({ text: value, files }, (res, action) => {
         this.resetState();
-        if (this.props.onCommentSuccess) {
+        if (action === "comment" && this.props.onCommentSuccess) {
           this.props.onCommentSuccess(res);
         }
       });
@@ -167,6 +167,7 @@ class Editor extends React.Component {
   }
 
   resetState() {
+    this.handleChange("");
     this.setState({
       showUpload: false,
       value: "",

src/index.js

@@ -7,8 +7,15 @@ class Index extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      fileList: [],
-      value: ""
+      fileList: [
+        // {
+        //   url:
+        //     "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190727/YQ-4VC1bL.jpeg",
+        //   type: "image/jpeg",
+        //   uid: "rc-upload-1564206005248-2"
+        // }
+      ],
+      value: "2"
     };
   }