narro 6 лет назад
Родитель
Сommit
8fcb5b0faa

+ 6
- 0
CHANGELOG.md Просмотреть файл

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

+ 2
- 1
README.md Просмотреть файл

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

+ 1
- 1
lib/components/ContentItem/index.js Просмотреть файл

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

+ 1
- 1
lib/components/ContentItem/index.js.map
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 20
- 20
lib/components/Editor/Emoji.css Просмотреть файл

@@ -1,39 +1,39 @@
1 1
 .item {
2
-    float: left;
3
-    width: 40px;
4
-    height: 40px;
5
-    cursor: pointer;
6
-    white-space: nowrap;
7
-    /* this is required unless you put the helper span closely near the img */
8
-    text-align: center;
9
-    margin: 0;
2
+  float: left;
3
+  width: 40px;
4
+  height: 40px;
5
+  cursor: pointer;
6
+  white-space: nowrap;
7
+  /* this is required unless you put the helper span closely near the img */
8
+  text-align: center;
9
+  margin: 0;
10 10
 }
11 11
 
12 12
 .item .helper {
13
-    display: inline-block;
14
-    height: 100%;
15
-    vertical-align: middle;
13
+  display: inline-block;
14
+  height: 100%;
15
+  vertical-align: middle;
16 16
 }
17 17
 
18 18
 .item img {
19
-    margin: 0 auto;
20
-    vertical-align: middle;
21
-    padding: 3px;
19
+  margin: 0 auto;
20
+  vertical-align: middle;
21
+  padding: 3px;
22 22
 }
23 23
 
24 24
 .item img:hover {
25
-    border: 1px solid #40a9ff;
25
+  border: 1px solid #40a9ff;
26 26
 }
27 27
 
28 28
 .ant-carousel .slick-dots {
29
-    height: 5px;
29
+  height: 5px;
30 30
 }
31 31
 
32 32
 .ant-carousel .slick-dots li button {
33
-    height: 5px;
34
-    width: 25px;
33
+  height: 5px;
34
+  width: 25px;
35 35
 }
36 36
 
37 37
 .ant-carousel .slick-dots li.slick-active button {
38
-    width: 32px;
39
-}
38
+  width: 32px;
39
+}

+ 9
- 0
lib/components/Editor/index.js Просмотреть файл

@@ -195,6 +195,9 @@ var Editor = function (_React$Component) {
195 195
       var files = [];
196 196
       if (fileList.length) {
197 197
         fileList.forEach(function (item) {
198
+          if (!fileMap[item.uid]) {
199
+            return;
200
+          }
198 201
           files.push("" + _constant.OSS_LINK + fileMap[item.uid]);
199 202
         });
200 203
       }
@@ -203,12 +206,18 @@ var Editor = function (_React$Component) {
203 206
           if (!(res === false)) {
204 207
             _this2.props.onSubmit({ text: value, files: files }, function () {
205 208
               _this2.resetState();
209
+              if (_this2.props.onCommentSuccess) {
210
+                _this2.props.onCommentSuccess();
211
+              }
206 212
             });
207 213
           }
208 214
         });
209 215
       } else {
210 216
         this.props.onSubmit({ text: value, files: files }, function () {
211 217
           _this2.resetState();
218
+          if (_this2.props.onCommentSuccess) {
219
+            _this2.props.onCommentSuccess();
220
+          }
212 221
         });
213 222
       }
214 223
     }

+ 1
- 1
lib/components/Editor/index.js.map
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 3
- 0
lib/index.js Просмотреть файл

@@ -92,6 +92,9 @@ var Index = function (_Component) {
92 92
               resolve(true);
93 93
             });
94 94
           },
95
+          onCommentSuccess: function onCommentSuccess() {
96
+            console.log("succ");
97
+          },
95 98
           showError: false,
96 99
           onError: function onError(msg) {
97 100
             console.log("-----------" + msg);

+ 1
- 1
lib/index.js.map Просмотреть файл

@@ -1 +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"]}
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,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"]}

+ 1
- 1
package.json Просмотреть файл

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

+ 1
- 1
src/components/ContentItem/index.js Просмотреть файл

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

+ 9
- 0
src/components/Editor/index.js Просмотреть файл

@@ -106,6 +106,9 @@ class Editor extends React.Component {
106 106
     const files = [];
107 107
     if (fileList.length) {
108 108
       fileList.forEach(item => {
109
+        if (!fileMap[item.uid]) {
110
+          return;
111
+        }
109 112
         files.push(`${OSS_LINK}${fileMap[item.uid]}`);
110 113
       });
111 114
     }
@@ -115,6 +118,9 @@ class Editor extends React.Component {
115 118
           if (!(res === false)) {
116 119
             this.props.onSubmit({ text: value, files }, () => {
117 120
               this.resetState();
121
+              if (this.props.onCommentSuccess) {
122
+                this.props.onCommentSuccess();
123
+              }
118 124
             });
119 125
           }
120 126
         }
@@ -122,6 +128,9 @@ class Editor extends React.Component {
122 128
     } else {
123 129
       this.props.onSubmit({ text: value, files }, () => {
124 130
         this.resetState();
131
+        if (this.props.onCommentSuccess) {
132
+          this.props.onCommentSuccess();
133
+        }
125 134
       });
126 135
     }
127 136
   }

+ 3
- 0
src/index.js Просмотреть файл

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