narro 6 years ago
parent
commit
49c2a381d3

+ 6
- 0
CHANGELOG.md View File

@@ -1,5 +1,11 @@
1 1
 # CHANGELOG
2 2
 
3
+## 0.5.3
4
+
5
+- [x] fix: 修复开启closeUploadWhenBlur后, 上传图片弹框的右上角关闭按钮无效的问题.
6
+- [x] fix: 修复上传大图时, 使用blob导致浏览器很卡的问题.
7
+- [x] fix: 增大表情翻页的触发区域.
8
+
3 9
 ## 0.5.2
4 10
 
5 11
 - [x] feat: Editor 增加 props: showError、onError、beforeSubmit

+ 1
- 1
lib/Comment.js.map View File

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}
1
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\r\n\r\nconst CommentContext = React.createContext();\r\n\r\n// This function takes a component...\r\nexport function Comment(Component) {\r\n  // ...and returns another component...\r\n  return function(props) {\r\n    // ... and renders the wrapped component with the context theme!\r\n    // Notice that we pass through any additional props as well\r\n    return (\r\n      <CommentContext.Consumer>\r\n        {app => <Component {...props} app={app} />}\r\n      </CommentContext.Consumer>\r\n    );\r\n  };\r\n}\r\n\r\nexport { CommentContext };\r\n\r\nexport default Comment;\r\n"]}

+ 31
- 15
lib/components/Editor/Emoji.css View File

@@ -1,23 +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
 .item .helper {
12
-  display: inline-block;
13
-  height: 100%;
14
-  vertical-align: middle;
13
+    display: inline-block;
14
+    height: 100%;
15
+    vertical-align: middle;
15 16
 }
17
+
16 18
 .item img {
17
-  margin: 0 auto;
18
-  vertical-align: middle;
19
-  padding: 3px;
19
+    margin: 0 auto;
20
+    vertical-align: middle;
21
+    padding: 3px;
20 22
 }
23
+
21 24
 .item img:hover {
22
-  border: 1px solid #40a9ff;
25
+    border: 1px solid #40a9ff;
23 26
 }
27
+
28
+.ant-carousel .slick-dots {
29
+    height: 5px;
30
+}
31
+
32
+.ant-carousel .slick-dots li button {
33
+    height: 5px;
34
+    width: 25px;
35
+}
36
+
37
+.ant-carousel .slick-dots li.slick-active button {
38
+    width: 32px;
39
+}

+ 12
- 63
lib/components/Editor/index.js View File

@@ -164,9 +164,16 @@ var Editor = function (_React$Component) {
164 164
       var uid = _ref.uid,
165 165
           path = _ref.path;
166 166
       var fileMap = this.state.fileMap;
167
+      var fileList = this.state.fileList;
167 168
 
168 169
       fileMap[uid] = path;
169
-      this.setState({ fileMap: fileMap });
170
+      fileList = fileList.map(function (item) {
171
+        if (item.uid === uid) {
172
+          item.thumbUrl = _constant.OSS_LINK + path;
173
+        }
174
+        return item;
175
+      });
176
+      this.setState({ fileMap: fileMap, fileList: fileList });
170 177
     }
171 178
 
172 179
     /**
@@ -269,73 +276,15 @@ var Editor = function (_React$Component) {
269 276
               },
270 277
               emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
271 278
             ),
272
-            showUpload ? closeUploadWhenBlur ? _react2.default.createElement(
279
+            showUpload ? _react2.default.createElement(
273 280
               _popover2.default,
274 281
               {
275 282
                 trigger: "click",
276
-                overlayStyle: { zIndex: 999 },
277
-                content: _react2.default.createElement(
278
-                  "div",
279
-                  {
280
-                    style: {
281
-                      width: 112 * maxUpload,
282
-                      minHeight: 100,
283
-                      margin: "0 auto"
284
-                    }
285
-                  },
286
-                  _react2.default.createElement(_Upload2.default, {
287
-                    onChangeFileList: this.handleChangeFileList,
288
-                    onUpload: this.handleUpload,
289
-                    maxUpload: maxUpload,
290
-                    fileList: this.state.fileList
291
-                  })
292
-                ),
293
-                placement: "bottomLeft",
294
-                title: _react2.default.createElement(
295
-                  "div",
296
-                  { style: { margin: "5px auto" } },
297
-                  _react2.default.createElement(
298
-                    "span",
299
-                    null,
300
-                    "\u4E0A\u4F20\u56FE\u7247",
301
-                    maxUpload >= 2 ? _react2.default.createElement(
302
-                      "span",
303
-                      { style: { color: "#666", fontWeight: 400 } },
304
-                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
305
-                      maxUpload - this.state.fileList.length,
306
-                      "\u5F20\u56FE\u7247)"
307
-                    ) : null
308
-                  ),
309
-                  _react2.default.createElement(_icon2.default, {
310
-                    type: "close",
311
-                    onClick: function onClick() {
312
-                      return _this3.handleShowUpload(false);
313
-                    },
314
-                    style: {
315
-                      float: "right",
316
-                      cursor: "pointer",
317
-                      marginTop: 4
318
-                    }
319
-                  })
320
-                )
321
-              },
322
-              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
323
-                onClick: function onClick() {
324
-                  return _this3.handleShowUpload(true);
325
-                }
326
-              }) : _react2.default.createElement(_icon2.default, {
327
-                type: "picture",
328
-                className: "comment-toolbar-icon",
329
-                style: { marginLeft: 10 },
330
-                onClick: function onClick() {
331
-                  return _this3.handleShowUpload(true);
332
-                }
333
-              })
334
-            ) : _react2.default.createElement(
335
-              _popover2.default,
336
-              {
337 283
                 visible: this.state.showUpload,
338 284
                 overlayStyle: { zIndex: 999 },
285
+                onVisibleChange: closeUploadWhenBlur ? function (visible) {
286
+                  _this3.handleShowUpload(visible);
287
+                } : null,
339 288
                 content: _react2.default.createElement(
340 289
                   "div",
341 290
                   {

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
lib/index.js.map View File

@@ -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,mBAAQ,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC/BA,sBAAQ,IAAR;AACD,aAFO,CAAR;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,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
- 1
lib/registerServiceWorker.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
package.json View File

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

+ 16
- 0
src/components/Editor/Emoji.css View File

@@ -8,16 +8,32 @@
8 8
   text-align: center;
9 9
   margin: 0;
10 10
 }
11
+
11 12
 .item .helper {
12 13
   display: inline-block;
13 14
   height: 100%;
14 15
   vertical-align: middle;
15 16
 }
17
+
16 18
 .item img {
17 19
   margin: 0 auto;
18 20
   vertical-align: middle;
19 21
   padding: 3px;
20 22
 }
23
+
21 24
 .item img:hover {
22 25
   border: 1px solid #40a9ff;
23 26
 }
27
+
28
+.ant-carousel .slick-dots {
29
+  height: 5px;
30
+}
31
+
32
+.ant-carousel .slick-dots li button {
33
+  height: 5px;
34
+  width: 25px;
35
+}
36
+
37
+.ant-carousel .slick-dots li.slick-active button {
38
+  width: 32px;
39
+}