v0.5.4

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.5.4
+
+- [x] 暂无昵称 -> 游客
+- [x] 上传图片失败时, 该图片不再出现在onSubmit回调的files中
+- [x] feat: Editor 增加 props: onCommentSuccess
+
 ## 0.5.3
 
 - [x] fix: 修复开启closeUploadWhenBlur后, 上传图片弹框的右上角关闭按钮无效的问题.

README.md

@@ -2,7 +2,7 @@
 
 通用评论系统及编辑器
 
-**`version 0.5.1`**
+**`version 0.5.4`**
 
 ```js
 import Comment, { Editor, RenderText } from 'comment';
@@ -42,6 +42,7 @@ import Comment, { Editor, RenderText } from 'comment';
 | onChange            | function(value)                 |               | false    | 编辑器内容改变的回调函数                                                                          |
 | onSubmit            | function({ text, files })       |               | false    | 点击提交按钮的回调函数，text 为编辑器的文本，files 为上传的文件列表                               |
 | beforeSubmit        | function ({text,files}):Promise |               | false    | 点击提交按钮后的钩子, 若Promise resolve false则不触发onSubmit函数, 主要用于控制默认的submit行为   |
+| onCommentSuccess    | function()                      |               | false    | 提交评论成功后的回调                                                                              |
 | btnSubmitText       | string                          | 发表          | false    | 提交按钮的文字                                                                                    |
 | btnLoading          | boolean                         | false         | false    | 按钮是否正在加载中                                                                                |
 | btnDisable          | boolean                         | false         | false    | 按钮是否禁用                                                                                      |

lib/components/ContentItem/index.js

@@ -154,7 +154,7 @@ var CommentItem = function (_Component) {
             _react2.default.createElement(
               "strong",
               null,
-              content.user_name || "暂无昵称"
+              content.user_name || "游客"
             ),
             _react2.default.createElement(
               "span",

lib/components/Editor/Emoji.css

@@ -1,39 +1,39 @@
 .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;
+  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;
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
 }
 
 .item img {
-    margin: 0 auto;
-    vertical-align: middle;
-    padding: 3px;
+  margin: 0 auto;
+  vertical-align: middle;
+  padding: 3px;
 }
 
 .item img:hover {
-    border: 1px solid #40a9ff;
+  border: 1px solid #40a9ff;
 }
 
 .ant-carousel .slick-dots {
-    height: 5px;
+  height: 5px;
 }
 
 .ant-carousel .slick-dots li button {
-    height: 5px;
-    width: 25px;
+  height: 5px;
+  width: 25px;
 }
 
 .ant-carousel .slick-dots li.slick-active button {
-    width: 32px;
-}
+  width: 32px;
+}

lib/components/Editor/index.js

@@ -195,6 +195,9 @@ var Editor = function (_React$Component) {
       var files = [];
       if (fileList.length) {
         fileList.forEach(function (item) {
+          if (!fileMap[item.uid]) {
+            return;
+          }
           files.push("" + _constant.OSS_LINK + fileMap[item.uid]);
         });
       }
@@ -203,12 +206,18 @@ var Editor = function (_React$Component) {
           if (!(res === false)) {
             _this2.props.onSubmit({ text: value, files: files }, function () {
               _this2.resetState();
+              if (_this2.props.onCommentSuccess) {
+                _this2.props.onCommentSuccess();
+              }
             });
           }
         });
       } else {
         this.props.onSubmit({ text: value, files: files }, function () {
           _this2.resetState();
+          if (_this2.props.onCommentSuccess) {
+            _this2.props.onCommentSuccess();
+          }
         });
       }
     }

lib/index.js

@@ -92,6 +92,9 @@ var Index = function (_Component) {
               resolve(true);
             });
           },
+          onCommentSuccess: function onCommentSuccess() {
+            console.log("succ");
+          },
           showError: false,
           onError: function onError(msg) {
             console.log("-----------" + msg);

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","msg","Promise","resolve","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW,KANb;AAOE,mBAAS,sBAAO;AACdH,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AATH;AAWE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,wBAAc,wBAAM;AAClB,mBAAO,IAAIC,OAAJ,CAAY,mBAAW;AAC5BC,sBAAQ,IAAR;AACD,aAFM,CAAP;AAGD,WANH;AAOE,qBAAW,KAPb;AAQE,mBAAS,sBAAO;AACdR,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AAVH;AAXF,OADF;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EA7FiBG,gB;;AAgGpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n        onError={msg => {\r\n          console.log(`-----------${msg}`);\r\n        }}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          beforeSubmit={() => {\r\n            return new Promise(resolve => {\r\n              resolve(true);\r\n            });\r\n          }}\r\n          showError={false}\r\n          onError={msg => {\r\n            console.log(`-----------${msg}`);\r\n          }}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","msg","Promise","resolve","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW,KANb;AAOE,mBAAS,sBAAO;AACdH,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AATH;AAWE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,wBAAc,wBAAM;AAClB,mBAAO,IAAIC,OAAJ,CAAY,mBAAW;AAC5BC,sBAAQ,IAAR;AACD,aAFM,CAAP;AAGD,WANH;AAOE,4BAAkB,4BAAM;AACtBR,oBAAQC,GAAR,CAAY,MAAZ;AACD,WATH;AAUE,qBAAW,KAVb;AAWE,mBAAS,sBAAO;AACdD,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AAbH;AAXF,OADF;;AA8BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAhGiBG,gB;;AAmGpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n        onError={msg => {\r\n          console.log(`-----------${msg}`);\r\n        }}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          beforeSubmit={() => {\r\n            return new Promise(resolve => {\r\n              resolve(true);\r\n            });\r\n          }}\r\n          onCommentSuccess={() => {\r\n            console.log(\"succ\");\r\n          }}\r\n          showError={false}\r\n          onError={msg => {\r\n            console.log(`-----------${msg}`);\r\n          }}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [

src/components/ContentItem/index.js

@@ -80,7 +80,7 @@ class CommentItem extends Component {
             {/* <a href={`/${content.user_id}`}>
               {content.user_name || "暂无昵称"}
             </a> */}
-            <strong>{content.user_name || "暂无昵称"}</strong>
+            <strong>{content.user_name || "游客"}</strong>
             <span style={{ marginLeft: 10 }}>
               <Tooltip
                 placement="top"

src/components/Editor/index.js

@@ -106,6 +106,9 @@ class Editor extends React.Component {
     const files = [];
     if (fileList.length) {
       fileList.forEach(item => {
+        if (!fileMap[item.uid]) {
+          return;
+        }
         files.push(`${OSS_LINK}${fileMap[item.uid]}`);
       });
     }
@@ -115,6 +118,9 @@ class Editor extends React.Component {
           if (!(res === false)) {
             this.props.onSubmit({ text: value, files }, () => {
               this.resetState();
+              if (this.props.onCommentSuccess) {
+                this.props.onCommentSuccess();
+              }
             });
           }
         }
@@ -122,6 +128,9 @@ class Editor extends React.Component {
     } else {
       this.props.onSubmit({ text: value, files }, () => {
         this.resetState();
+        if (this.props.onCommentSuccess) {
+          this.props.onCommentSuccess();
+        }
       });
     }
   }

src/index.js

@@ -52,6 +52,9 @@ class Index extends Component {
               resolve(true);
             });
           }}
+          onCommentSuccess={() => {
+            console.log("succ");
+          }}
           showError={false}
           onError={msg => {
             console.log(`-----------${msg}`);