#57 add:粘贴上传图片;fix:通用表情修改

已合併
AdamFu 5 年之前 將 1 次代碼提交從 Hepper/comment:master合併至 master

+ 76
- 56
lib/App.js 查看文件

@@ -85,10 +85,8 @@ var App = function (_Component) {
85 85
 
86 86
     _this.state = {
87 87
       loading: {},
88
-
89 88
       // oss 配置
90 89
       oss: {},
91
-
92 90
       // 评论数据
93 91
       list: [],
94 92
       page: 1,
@@ -103,7 +101,8 @@ var App = function (_Component) {
103 101
       commentId: "",
104 102
       userId: "",
105 103
       content: "",
106
-      replyPage: 1
104
+      replyPage: 1,
105
+      emojiList: []
107 106
     };
108 107
     _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
109 108
     _this.sCreateComment = _this.sCreateComment.bind(_this);
@@ -136,6 +135,7 @@ var App = function (_Component) {
136 135
     key: "componentDidMount",
137 136
     value: function componentDidMount() {
138 137
       this.loadLocales();
138
+      this.loadEmoji();
139 139
     }
140 140
 
141 141
     /**
@@ -178,6 +178,25 @@ var App = function (_Component) {
178 178
         });
179 179
       });
180 180
     }
181
+
182
+    /**
183
+     * 加载表情包
184
+     */
185
+
186
+  }, {
187
+    key: "loadEmoji",
188
+    value: function loadEmoji() {
189
+      var _this3 = this;
190
+
191
+      this.axios.get(this.props.emojiAPI + "/emoticons").then(function (response) {
192
+        var emojiMap = {};
193
+        response.data.list.forEach(function (item) {
194
+          emojiMap[item.name] = item.url;
195
+        });
196
+        window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
197
+        _this3.setState({ emojiList: response.data.list });
198
+      }).catch(this.errorHandler);
199
+    }
181 200
   }, {
182 201
     key: "handleEdit",
183 202
     value: function handleEdit(_ref) {
@@ -255,7 +274,7 @@ var App = function (_Component) {
255 274
   }, {
256 275
     key: "sGetComment",
257 276
     value: function sGetComment() {
258
-      var _this3 = this;
277
+      var _this4 = this;
259 278
 
260 279
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
261 280
           _ref2$page = _ref2.page,
@@ -278,7 +297,7 @@ var App = function (_Component) {
278 297
 
279 298
         if (list) {
280 299
           var newList = list;
281
-          var oldList = _this3.state.list;
300
+          var oldList = _this4.state.list;
282 301
 
283 302
           if (pageType === "more") {
284 303
             if (page > 1) {
@@ -293,20 +312,20 @@ var App = function (_Component) {
293 312
             window.scrollTo(0, 0);
294 313
           }
295 314
 
296
-          _this3.setState({
315
+          _this4.setState({
297 316
             list: newList,
298 317
             page: page,
299 318
             total: total
300 319
           });
301
-          _this3.props.onCountChange(total);
320
+          _this4.props.onCountChange(total);
302 321
         } else {
303 322
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
304
-          _this3.setState({
323
+          _this4.setState({
305 324
             isNoMoreComment: true
306 325
           });
307 326
         }
308 327
       }).catch(this.errorHandler).finally(function () {
309
-        _this3.handleChangeLoading("sGetComment", false);
328
+        _this4.handleChangeLoading("sGetComment", false);
310 329
       });
311 330
     }
312 331
 
@@ -317,7 +336,7 @@ var App = function (_Component) {
317 336
   }, {
318 337
     key: "sGetReply",
319 338
     value: function sGetReply() {
320
-      var _this4 = this;
339
+      var _this5 = this;
321 340
 
322 341
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
323 342
           commentId = _ref3.commentId,
@@ -333,7 +352,7 @@ var App = function (_Component) {
333 352
         if (!response.data.list) {
334 353
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreData"));
335 354
         }
336
-        var list = _this4.state.list.map(function (item) {
355
+        var list = _this5.state.list.map(function (item) {
337 356
           if (item.id === commentId) {
338 357
             if (!item.replies) item.replies = [];
339 358
             if (response.data.list) {
@@ -355,9 +374,9 @@ var App = function (_Component) {
355 374
           }
356 375
           return item;
357 376
         });
358
-        _this4.setState({ list: list });
377
+        _this5.setState({ list: list });
359 378
       }).catch(this.errorHandler).finally(function () {
360
-        _this4.handleChangeLoading("sGetReply", false);
379
+        _this5.handleChangeLoading("sGetReply", false);
361 380
       });
362 381
     }
363 382
 
@@ -369,7 +388,7 @@ var App = function (_Component) {
369 388
   }, {
370 389
     key: "sCreateComment",
371 390
     value: function sCreateComment() {
372
-      var _this5 = this;
391
+      var _this6 = this;
373 392
 
374 393
       var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
375 394
           content = _ref4.content;
@@ -394,14 +413,14 @@ var App = function (_Component) {
394 413
         },
395 414
         withCredentials: true
396 415
       }).then(function (response) {
397
-        if (_this5.props.showAlertComment) {
416
+        if (_this6.props.showAlertComment) {
398 417
           _message3.default.success(_reactIntlUniversal2.default.get("message.success"));
399 418
         }
400 419
         if ((0, _helper.isFunction)(cb)) cb(response.data);
401 420
         // 将数据写入到 list 中
402 421
         // 临时插入
403 422
         // 等到获取数据之后,删除临时数据
404
-        var _state = _this5.state,
423
+        var _state = _this6.state,
405 424
             list = _state.list,
406 425
             total = _state.total;
407 426
 
@@ -409,10 +428,10 @@ var App = function (_Component) {
409 428
           replies: [],
410 429
           isTemporary: true // 临时的数据
411 430
         }));
412
-        _this5.setState({ list: list, total: total + 1 });
413
-        _this5.props.onCountChange(total + 1);
431
+        _this6.setState({ list: list, total: total + 1 });
432
+        _this6.props.onCountChange(total + 1);
414 433
       }).catch(this.errorHandler).finally(function () {
415
-        _this5.handleChangeLoading("sCreateComment", false);
434
+        _this6.handleChangeLoading("sCreateComment", false);
416 435
       });
417 436
     }
418 437
 
@@ -423,7 +442,7 @@ var App = function (_Component) {
423 442
   }, {
424 443
     key: "sDeleteComment",
425 444
     value: function sDeleteComment(commentId) {
426
-      var _this6 = this;
445
+      var _this7 = this;
427 446
 
428 447
       this.handleChangeLoading("sDeleteComment", true);
429 448
       var API = this.props.API;
@@ -432,7 +451,7 @@ var App = function (_Component) {
432 451
         method: "delete",
433 452
         withCredentials: true
434 453
       }).then(function () {
435
-        var _state2 = _this6.state,
454
+        var _state2 = _this7.state,
436 455
             list = _state2.list,
437 456
             total = _state2.total;
438 457
 
@@ -442,11 +461,11 @@ var App = function (_Component) {
442 461
         var deletedItem = list.find(function (item) {
443 462
           return item.id === commentId;
444 463
         });
445
-        _this6.setState({ list: res, total: total - 1 });
446
-        _this6.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
447
-        _this6.props.onCountChange(total - 1);
464
+        _this7.setState({ list: res, total: total - 1 });
465
+        _this7.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
466
+        _this7.props.onCountChange(total - 1);
448 467
       }).catch(this.errorHandler).finally(function () {
449
-        _this6.handleChangeLoading("sDeleteComment", false);
468
+        _this7.handleChangeLoading("sDeleteComment", false);
450 469
       });
451 470
     }
452 471
     /**
@@ -457,7 +476,7 @@ var App = function (_Component) {
457 476
   }, {
458 477
     key: "sUpdateComment",
459 478
     value: function sUpdateComment(_ref5) {
460
-      var _this7 = this;
479
+      var _this8 = this;
461 480
 
462 481
       var commentId = _ref5.commentId,
463 482
           content = _ref5.content;
@@ -472,7 +491,7 @@ var App = function (_Component) {
472 491
         },
473 492
         withCredentials: true
474 493
       }).then(function () {
475
-        var list = _this7.state.list;
494
+        var list = _this8.state.list;
476 495
 
477 496
         list = list.map(function (it) {
478 497
           if (it.id === commentId) {
@@ -482,10 +501,10 @@ var App = function (_Component) {
482 501
           }
483 502
           return it;
484 503
         });
485
-        _this7.props.onUpdateComment("comment");
486
-        _this7.setState({ list: list });
504
+        _this8.props.onUpdateComment("comment");
505
+        _this8.setState({ list: list });
487 506
       }).catch(this.errorHandler).finally(function () {
488
-        _this7.handleChangeLoading("sUpdateComment", false);
507
+        _this8.handleChangeLoading("sUpdateComment", false);
489 508
       });
490 509
     }
491 510
     /**
@@ -497,7 +516,7 @@ var App = function (_Component) {
497 516
   }, {
498 517
     key: "sCreateReply",
499 518
     value: function sCreateReply(data, cb) {
500
-      var _this8 = this;
519
+      var _this9 = this;
501 520
 
502 521
       if (!data.content) return this.error(_reactIntlUniversal2.default.get("message.replyNoNull"));
503 522
       this.handleChangeLoading("sCreateReply", true);
@@ -508,14 +527,14 @@ var App = function (_Component) {
508 527
         data: data,
509 528
         withCredentials: true
510 529
       }).then(function (response) {
511
-        if (_this8.props.showAlertReply) {
530
+        if (_this9.props.showAlertReply) {
512 531
           _message3.default.success(_reactIntlUniversal2.default.get("message.replySuccess"));
513 532
         }
514 533
         if ((0, _helper.isFunction)(cb)) cb(response.data);
515 534
         // 将数据写入到 list 中
516 535
         // 临时插入
517 536
         // 等到获取数据之后,删除临时数据
518
-        var list = _this8.state.list.map(function (item) {
537
+        var list = _this9.state.list.map(function (item) {
519 538
           if (item.id === data.comment_id) {
520 539
             if (!item.replies) item.replies = [];
521 540
             item.replies.push(_extends({}, response.data, {
@@ -525,9 +544,9 @@ var App = function (_Component) {
525 544
           }
526 545
           return item;
527 546
         });
528
-        _this8.setState({ list: list });
547
+        _this9.setState({ list: list });
529 548
       }).catch(this.errorHandler).finally(function () {
530
-        _this8.handleChangeLoading("sCreateReply", false);
549
+        _this9.handleChangeLoading("sCreateReply", false);
531 550
       });
532 551
     }
533 552
 
@@ -540,7 +559,7 @@ var App = function (_Component) {
540 559
   }, {
541 560
     key: "sDeleteReply",
542 561
     value: function sDeleteReply(replyId, commentId) {
543
-      var _this9 = this;
562
+      var _this10 = this;
544 563
 
545 564
       this.handleChangeLoading("sDeleteReply", true);
546 565
       var API = this.props.API;
@@ -550,7 +569,7 @@ var App = function (_Component) {
550 569
         withCredentials: true
551 570
       }).then(function () {
552 571
         var deletedItem = null;
553
-        var list = _this9.state.list.map(function (item) {
572
+        var list = _this10.state.list.map(function (item) {
554 573
           if (item.id === commentId) {
555 574
             var replies = item.replies.filter(function (item) {
556 575
               return item.id !== replyId;
@@ -563,10 +582,10 @@ var App = function (_Component) {
563 582
           }
564 583
           return item;
565 584
         });
566
-        _this9.setState({ list: list });
567
-        _this9.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
585
+        _this10.setState({ list: list });
586
+        _this10.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
568 587
       }).catch(this.errorHandler).finally(function () {
569
-        _this9.handleChangeLoading("sDeleteReply", false);
588
+        _this10.handleChangeLoading("sDeleteReply", false);
570 589
       });
571 590
     }
572 591
     /**
@@ -578,7 +597,7 @@ var App = function (_Component) {
578 597
   }, {
579 598
     key: "sUpdateReply",
580 599
     value: function sUpdateReply(_ref6) {
581
-      var _this10 = this;
600
+      var _this11 = this;
582 601
 
583 602
       var commentId = _ref6.commentId,
584 603
           content = _ref6.content,
@@ -597,11 +616,11 @@ var App = function (_Component) {
597 616
         withCredentials: true
598 617
       }).then(function () {
599 618
         for (var i = 1; i <= replyPage; i++) {
600
-          _this10.sGetReply({ commentId: commentId, page: i });
619
+          _this11.sGetReply({ commentId: commentId, page: i });
601 620
         }
602
-        _this10.props.onUpdateComment("reply");
621
+        _this11.props.onUpdateComment("reply");
603 622
       }).catch(this.errorHandler).finally(function () {
604
-        _this10.handleChangeLoading("sUpdateReply", false);
623
+        _this11.handleChangeLoading("sUpdateReply", false);
605 624
       });
606 625
     }
607 626
     /**
@@ -613,7 +632,7 @@ var App = function (_Component) {
613 632
   }, {
614 633
     key: "sCommentFavor",
615 634
     value: function sCommentFavor(commentId, favored) {
616
-      var _this11 = this;
635
+      var _this12 = this;
617 636
 
618 637
       this.handleChangeLoading("sCommentFavor", true);
619 638
       var API = this.props.API;
@@ -622,20 +641,20 @@ var App = function (_Component) {
622 641
         method: favored ? "delete" : "put",
623 642
         withCredentials: true
624 643
       }).then(function (response) {
625
-        if (_this11.props.showAlertFavor) {
644
+        if (_this12.props.showAlertFavor) {
626 645
           _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
627 646
         }
628 647
         // 更新 list 中的该项数据的 favored
629
-        var list = _this11.state.list.map(function (item) {
648
+        var list = _this12.state.list.map(function (item) {
630 649
           if (item.id === commentId) {
631 650
             item.favored = !favored;
632 651
             item.favor_count += favored ? -1 : 1;
633 652
           }
634 653
           return item;
635 654
         });
636
-        _this11.setState({ list: list });
655
+        _this12.setState({ list: list });
637 656
       }).catch(this.errorHandler).finally(function () {
638
-        _this11.handleChangeLoading("sCommentFavor", false);
657
+        _this12.handleChangeLoading("sCommentFavor", false);
639 658
       });
640 659
     }
641 660
 
@@ -649,7 +668,7 @@ var App = function (_Component) {
649 668
   }, {
650 669
     key: "sReplyFavor",
651 670
     value: function sReplyFavor(replyId, commentId, favored) {
652
-      var _this12 = this;
671
+      var _this13 = this;
653 672
 
654 673
       this.handleChangeLoading("sReplyFavor", true);
655 674
       var API = this.props.API;
@@ -663,7 +682,7 @@ var App = function (_Component) {
663 682
       }).then(function (response) {
664 683
         _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
665 684
         // 更新 list 中的该项数据的 favored
666
-        var list = _this12.state.list.map(function (item) {
685
+        var list = _this13.state.list.map(function (item) {
667 686
           if (item.id === commentId) {
668 687
             item.replies = item.replies.map(function (r) {
669 688
               if (r.id === replyId) {
@@ -678,9 +697,9 @@ var App = function (_Component) {
678 697
           }
679 698
           return item;
680 699
         });
681
-        _this12.setState({ list: list });
700
+        _this13.setState({ list: list });
682 701
       }).catch(this.errorHandler).finally(function () {
683
-        _this12.handleChangeLoading("sReplyFavor", false);
702
+        _this13.handleChangeLoading("sReplyFavor", false);
684 703
       });
685 704
     }
686 705
 
@@ -691,15 +710,15 @@ var App = function (_Component) {
691 710
   }, {
692 711
     key: "sOssSts",
693 712
     value: function sOssSts() {
694
-      var _this13 = this;
713
+      var _this14 = this;
695 714
 
696 715
       this.handleChangeLoading("sOssSts", true);
697 716
       var API = this.props.API;
698 717
 
699 718
       this.axios.get(API + "/oss/sts").then(function (response) {
700
-        _this13.setState({ oss: _extends({}, response.data) });
719
+        _this14.setState({ oss: _extends({}, response.data) });
701 720
       }).catch(this.errorHandler).finally(function () {
702
-        _this13.handleChangeLoading("sOssSts", false);
721
+        _this14.handleChangeLoading("sOssSts", false);
703 722
       });
704 723
     }
705 724
   }, {
@@ -777,6 +796,7 @@ App.propTypes = {
777 796
 App.defaultProps = {
778 797
   businessUserId: 0,
779 798
   API: "//api.links123.net/comment/v1",
799
+  emojiAPI: "//api.links123.net/link/v1",
780 800
   showList: true,
781 801
   showEditor: true,
782 802
   showAlertComment: false,

+ 1
- 1
lib/App.js.map
文件差異過大導致無法顯示
查看文件


+ 3
- 1
lib/components/ContentItem/index.js 查看文件

@@ -396,7 +396,9 @@ var CommentItem = function (_Component) {
396 396
                 },
397 397
                 style: { color: "" + IconColor }
398 398
               },
399
-              _react2.default.createElement("i", { className: content.favored ? "comment-item-like" : "comment-item-unlike" })
399
+              _react2.default.createElement("i", {
400
+                className: content.favored ? "comment-item-like" : "comment-item-unlike"
401
+              })
400 402
             ),
401 403
             _react2.default.createElement(
402 404
               "span",

+ 1
- 1
lib/components/ContentItem/index.js.map
文件差異過大導致無法顯示
查看文件


+ 0
- 4
lib/components/EditComment/EditComment.js 查看文件

@@ -22,10 +22,6 @@ var _react = require("react");
22 22
 
23 23
 var _react2 = _interopRequireDefault(_react);
24 24
 
25
-var _propTypes = require("prop-types");
26
-
27
-var _propTypes2 = _interopRequireDefault(_propTypes);
28
-
29 25
 var _reactIntlUniversal = require("react-intl-universal");
30 26
 
31 27
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);

+ 1
- 1
lib/components/EditComment/EditComment.js.map
文件差異過大導致無法顯示
查看文件


+ 24
- 20
lib/components/Editor/Emoji.js 查看文件

@@ -16,10 +16,6 @@ var _react = require("react");
16 16
 
17 17
 var _react2 = _interopRequireDefault(_react);
18 18
 
19
-var _emoji = require("../../emoji");
20
-
21
-var _emoji2 = _interopRequireDefault(_emoji);
22
-
23 19
 require("./Emoji.css");
24 20
 
25 21
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,6 +25,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
29 25
 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; }
30 26
 
31 27
 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; }
28
+// import emoji, { prefixUrl } from "../../emoji";
29
+
32 30
 
33 31
 // 每页 20  5*4
34 32
 // 共 20 * 3 = 60 (实际是 54)
@@ -63,21 +61,27 @@ var Emoji = function (_React$Component) {
63 61
     value: function render() {
64 62
       var _this2 = this;
65 63
 
66
-      var _onClick = this.props.onClick;
64
+      var _props = this.props,
65
+          _onClick = _props.onClick,
66
+          emojiList = _props.emojiList;
67 67
 
68 68
       var content = [];
69
-      var curPage = [];
70
-      for (var i = 0; i < 115; i++) {
71
-        if (curPage.length < 30) {
72
-          curPage.push(_emoji2.default[i]);
73
-        } else {
74
-          content.push(curPage);
75
-          curPage = [];
76
-        }
77
-      }
78
-      if (curPage.length > 0) {
79
-        content.push(curPage);
69
+      // let curPage = [];
70
+      // for (let i = 0; i < 115; i++) {
71
+      //   if (curPage.length < 30) {
72
+      //     curPage.push(emoji[i]);
73
+      //   } else {
74
+      //     content.push(curPage);
75
+      //     curPage = [];
76
+      //   }
77
+      // }
78
+      // if (curPage.length > 0) {
79
+      //   content.push(curPage);
80
+      // }
81
+      for (var i = 0; i < emojiList.length; i += 30) {
82
+        content.push(emojiList.slice(i, i + 30));
80 83
       }
84
+
81 85
       return _react2.default.createElement(
82 86
         _carousel2.default,
83 87
         {
@@ -92,14 +96,14 @@ var Emoji = function (_React$Component) {
92 96
             page.map(function (item, index) {
93 97
               return _react2.default.createElement(
94 98
                 "div",
95
-                { className: "item", key: item.value },
99
+                { className: "item", key: item.id },
96 100
                 _react2.default.createElement("span", { className: "helper" }),
97 101
                 _react2.default.createElement("img", {
98
-                  src: "" + _emoji.prefixUrl + item.value + "." + item.ext,
99
-                  alt: item.title,
102
+                  src: item.url,
103
+                  alt: item.name,
100 104
                   style: { display: "inline-block" },
101 105
                   onClick: function onClick() {
102
-                    return _onClick(item.title);
106
+                    return _onClick(item.name);
103 107
                   }
104 108
                 })
105 109
               );

+ 1
- 1
lib/components/Editor/Emoji.js.map 查看文件

@@ -1 +1 @@
1
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","onClick","props","content","curPage","i","length","push","emoji","node","map","page","index","item","value","prefixUrl","ext","title","display","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;;;;;;;AACA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,UACCC,QADD,GACa,KAAKC,KADlB,CACCD,OADD;;AAEP,UAAME,UAAU,EAAhB;AACA,UAAIC,UAAU,EAAd;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAI,GAApB,EAAyBA,GAAzB,EAA8B;AAC5B,YAAID,QAAQE,MAAR,GAAiB,EAArB,EAAyB;AACvBF,kBAAQG,IAAR,CAAaC,gBAAMH,CAAN,CAAb;AACD,SAFD,MAEO;AACLF,kBAAQI,IAAR,CAAaH,OAAb;AACAA,oBAAU,EAAV;AACD;AACF;AACD,UAAIA,QAAQE,MAAR,GAAiB,CAArB,EAAwB;AACtBH,gBAAQI,IAAR,CAAaH,OAAb;AACD;AACD,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKN,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGN,gBAAQO,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,KAAhC;AACE,wDAAM,WAAU,QAAhB,GADF;AAEE;AACE,4BAAQC,gBAAR,GAAoBF,KAAKC,KAAzB,SAAkCD,KAAKG,GADzC;AAEE,uBAAKH,KAAKI,KAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,2BAAS;AAAA,2BAAMjB,SAAQY,KAAKI,KAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAnDiBE,gBAAMC,S;;kBAsDXvB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\nimport emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick } = this.props;\n    const content = [];\n    let curPage = [];\n    for (let i = 0; i < 115; i++) {\n      if (curPage.length < 30) {\n        curPage.push(emoji[i]);\n      } else {\n        content.push(curPage);\n        curPage = [];\n      }\n    }\n    if (curPage.length > 0) {\n      content.push(curPage);\n    }\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.value}>\n                <span className=\"helper\" />\n                <img\n                  src={`${prefixUrl}${item.value}.${item.ext}`}\n                  alt={item.title}\n                  style={{ display: \"inline-block\" }}\n                  onClick={() => onClick(item.title)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}
1
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","props","onClick","emojiList","content","i","length","push","slice","node","map","page","index","item","id","url","name","display","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAGA;;;;;;;;;AADA;;;AAEA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,mBACwB,KAAKC,KAD7B;AAAA,UACCC,QADD,UACCA,OADD;AAAA,UACUC,SADV,UACUA,SADV;;AAEP,UAAMC,UAAU,EAAhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIF,UAAUG,MAA9B,EAAsCD,KAAK,EAA3C,EAA+C;AAC7CD,gBAAQG,IAAR,CAAaJ,UAAUK,KAAV,CAAgBH,CAAhB,EAAmBA,IAAI,EAAvB,CAAb;AACD;;AAED,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKP,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGL,gBAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,EAAhC;AACE,wDAAM,WAAU,QAAhB,GADF;AAEE;AACE,uBAAKD,KAAKE,GADZ;AAEE,uBAAKF,KAAKG,IAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,2BAAS;AAAA,2BAAMf,SAAQW,KAAKG,IAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAvDiBE,gBAAMC,S;;kBA0DXtB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\n// import emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick, emojiList } = this.props;\n    const content = [];\n    // let curPage = [];\n    // for (let i = 0; i < 115; i++) {\n    //   if (curPage.length < 30) {\n    //     curPage.push(emoji[i]);\n    //   } else {\n    //     content.push(curPage);\n    //     curPage = [];\n    //   }\n    // }\n    // if (curPage.length > 0) {\n    //   content.push(curPage);\n    // }\n    for (let i = 0; i < emojiList.length; i += 30) {\n      content.push(emojiList.slice(i, i + 30));\n    }\n\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.id}>\n                <span className=\"helper\" />\n                <img\n                  src={item.url}\n                  alt={item.name}\n                  style={{ display: \"inline-block\" }}\n                  onClick={() => onClick(item.name)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}

+ 5
- 1
lib/components/Editor/Upload.js 查看文件

@@ -119,6 +119,9 @@ var App = function (_React$Component) {
119 119
     key: "componentDidMount",
120 120
     value: function componentDidMount() {
121 121
       this.props.app.sOssSts();
122
+      if (this.props.onRef) {
123
+        this.props.onRef(this);
124
+      }
122 125
     }
123 126
   }, {
124 127
     key: "onImgLoad",
@@ -154,6 +157,7 @@ var App = function (_React$Component) {
154 157
 
155 158
       var file = info.file;
156 159
 
160
+      console.log(file);
157 161
       info.onProgress({ percent: 10 });
158 162
       var reader = new FileReader();
159 163
       reader.readAsDataURL(info.file);
@@ -162,7 +166,7 @@ var App = function (_React$Component) {
162 166
         // DRIVER_LICENSE_PATH oss 的存储路径位置
163 167
         UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
164 168
           info.onProgress({ percent: 100 });
165
-          info.onSuccess();
169
+          info.onSuccess(data);
166 170
           _this2.props.onUpload({ path: data.name, uid: file.uid });
167 171
         }).catch(function (e) {
168 172
           var msg = e.message || _constant.ERROR_DEFAULT;

+ 1
- 1
lib/components/Editor/Upload.js.map
文件差異過大導致無法顯示
查看文件


+ 171
- 50
lib/components/Editor/index.js 查看文件

@@ -52,6 +52,14 @@ var _reactIntlUniversal = require("react-intl-universal");
52 52
 
53 53
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
54 54
 
55
+var _dayjs = require("dayjs");
56
+
57
+var _dayjs2 = _interopRequireDefault(_dayjs);
58
+
59
+var _shortid = require("shortid");
60
+
61
+var _shortid2 = _interopRequireDefault(_shortid);
62
+
55 63
 var _constant = require("../../constant");
56 64
 
57 65
 var _helper = require("../../helper");
@@ -64,6 +72,10 @@ var _Emoji = require("./Emoji");
64 72
 
65 73
 var _Emoji2 = _interopRequireDefault(_Emoji);
66 74
 
75
+var _Comment = require("../../Comment");
76
+
77
+var _Comment2 = _interopRequireDefault(_Comment);
78
+
67 79
 require("./index.css");
68 80
 
69 81
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,6 +88,32 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
76 88
 
77 89
 var TextArea = _input2.default.TextArea;
78 90
 
91
+
92
+var client = function client(oss) {
93
+  return new window.OSS.Wrapper({
94
+    accessKeyId: oss.access_key_id,
95
+    accessKeySecret: oss.access_key_secret,
96
+    stsToken: oss.security_token,
97
+    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
98
+    bucket: _constant.OSS_BUCKET
99
+  });
100
+};
101
+
102
+var uploadPath = function uploadPath(path, file) {
103
+  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
104
+};
105
+
106
+var UploadToOss = function UploadToOss(oss, path, file) {
107
+  var url = uploadPath(path, file);
108
+  return new Promise(function (resolve, reject) {
109
+    client(oss).multipartUpload(url, file).then(function (data) {
110
+      resolve(data);
111
+    }).catch(function (error) {
112
+      reject(error);
113
+    });
114
+  });
115
+};
116
+
79 117
 var Editor = function (_React$Component) {
80 118
   _inherits(Editor, _React$Component);
81 119
 
@@ -86,10 +124,10 @@ var Editor = function (_React$Component) {
86 124
 
87 125
     _this.state = {
88 126
       showUpload: false,
89
-      value: props.value, // 编辑器里面的值
90
-
91
-      fileList: props.fileList, // 图片列表
92
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
127
+      value: props.value || "", // 编辑器里面的值
128
+      fileList: props.fileList || [], // 图片列表
129
+      fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
130
+      uploadVisible: false
93 131
     };
94 132
     _this.handleChange = _this.handleChange.bind(_this);
95 133
     _this.handleClickEmoji = _this.handleClickEmoji.bind(_this);
@@ -97,6 +135,7 @@ var Editor = function (_React$Component) {
97 135
     _this.handleShowUpload = _this.handleShowUpload.bind(_this);
98 136
     _this.handleUpload = _this.handleUpload.bind(_this);
99 137
     _this.handleSubmit = _this.handleSubmit.bind(_this);
138
+    _this.handlePaste = _this.handlePaste.bind(_this);
100 139
     _this.resetState = _this.resetState.bind(_this);
101 140
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
102 141
     return _this;
@@ -105,6 +144,7 @@ var Editor = function (_React$Component) {
105 144
   _createClass(Editor, [{
106 145
     key: "componentDidMount",
107 146
     value: function componentDidMount() {
147
+      this.props.app.sOssSts();
108 148
       if ((0, _helper.isFunction)(this.props.onRef)) {
109 149
         this.props.onRef(this);
110 150
       }
@@ -209,6 +249,58 @@ var Editor = function (_React$Component) {
209 249
       this.setState({ fileMap: fileMap, fileList: fileList });
210 250
     }
211 251
 
252
+    /**
253
+     * 粘贴回调
254
+     */
255
+
256
+  }, {
257
+    key: "handlePaste",
258
+    value: function handlePaste(e) {
259
+      var _this2 = this;
260
+
261
+      if (this.state.fileList.length >= this.props.maxUpload) {
262
+        return;
263
+      }
264
+      var items = e.clipboardData && e.clipboardData.items;
265
+      var file = null;
266
+      if (items && items.length) {
267
+        for (var i = 0; i < items.length; i++) {
268
+          if (items[i].type.indexOf("image") !== -1) {
269
+            file = items[i].getAsFile();
270
+            break;
271
+          }
272
+        }
273
+      }
274
+      this.setState({
275
+        uploadVisible: true
276
+      });
277
+      var reader = new FileReader();
278
+      reader.readAsDataURL(file);
279
+      reader.onloadend = function () {
280
+        // DRIVER_LICENSE_PATH oss 的存储路径位置
281
+        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
282
+          var fileList = _this2.state.fileList.concat({
283
+            url: _constant.OSS_LINK + data.name,
284
+            thumbUrl: _constant.OSS_LINK + data.name,
285
+            type: file.type,
286
+            uid: new Date().valueOf()
287
+          });
288
+          _this2.props.handleChangeFileList(fileList);
289
+          _this2.setState({
290
+            fileList: fileList
291
+          });
292
+        }).catch(function (e) {
293
+          var msg = e.message || _constant.ERROR_DEFAULT;
294
+          if (_this2.props.showError) {
295
+            _message3.default.error(msg);
296
+          }
297
+          if (_this2.props.onError) {
298
+            _this2.props.onError(msg, { response: e.response });
299
+          }
300
+        });
301
+      };
302
+    }
303
+
212 304
     /**
213 305
      * 提交编辑器内容
214 306
      * 提交功能,交给父组件来实现
@@ -218,7 +310,7 @@ var Editor = function (_React$Component) {
218 310
   }, {
219 311
     key: "handleSubmit",
220 312
     value: function handleSubmit() {
221
-      var _this2 = this;
313
+      var _this3 = this;
222 314
 
223 315
       var maxLength = this.props.maxLength;
224 316
       var _state = this.state,
@@ -247,19 +339,19 @@ var Editor = function (_React$Component) {
247 339
       if (this.props.beforeSubmit) {
248 340
         Promise.resolve(this.props.beforeSubmit({ text: value, files: files })).then(function (res) {
249 341
           if (!(res === false)) {
250
-            _this2.props.onSubmit({ text: value, files: files }, function (res, action) {
251
-              _this2.resetState();
252
-              if (action === "comment" && _this2.props.onCommentSuccess) {
253
-                _this2.props.onCommentSuccess(res);
342
+            _this3.props.onSubmit({ text: value, files: files }, function (res, action) {
343
+              _this3.resetState();
344
+              if (action === "comment" && _this3.props.onCommentSuccess) {
345
+                _this3.props.onCommentSuccess(res);
254 346
               }
255 347
             });
256 348
           }
257 349
         });
258 350
       } else {
259 351
         this.props.onSubmit({ text: value, files: files }, function (res, action) {
260
-          _this2.resetState();
261
-          if (action === "comment" && _this2.props.onCommentSuccess) {
262
-            _this2.props.onCommentSuccess(res);
352
+          _this3.resetState();
353
+          if (action === "comment" && _this3.props.onCommentSuccess) {
354
+            _this3.props.onCommentSuccess(res);
263 355
           }
264 356
         });
265 357
       }
@@ -268,6 +360,7 @@ var Editor = function (_React$Component) {
268 360
     key: "resetState",
269 361
     value: function resetState() {
270 362
       this.handleChange("");
363
+      this.handleChangeFileList([]);
271 364
       this.setState({
272 365
         showUpload: false,
273 366
         value: "",
@@ -276,39 +369,62 @@ var Editor = function (_React$Component) {
276 369
       });
277 370
     }
278 371
   }, {
279
-    key: "render",
280
-    value: function render() {
281
-      var _this3 = this;
282
-
372
+    key: "checkDisabledSubmit",
373
+    value: function checkDisabledSubmit() {
283 374
       var _props = this.props,
284
-          value = _props.value,
285
-          rows = _props.rows,
286
-          showEmoji = _props.showEmoji,
287
-          showUpload = _props.showUpload,
288
-          multiple = _props.multiple,
289
-          emojiPopoverPlacement = _props.emojiPopoverPlacement,
290
-          uploadPopoverPlacement = _props.uploadPopoverPlacement,
291
-          uploadOverlayClassName = _props.uploadOverlayClassName,
292
-          fileList = _props.fileList,
293
-          closeUploadWhenBlur = _props.closeUploadWhenBlur,
294
-          maxUpload = _props.maxUpload,
295
-          btnLoading = _props.btnLoading,
296 375
           btnDisabled = _props.btnDisabled,
297
-          button = _props.button,
298
-          emojiToolIcon = _props.emojiToolIcon,
299
-          imageToolIcon = _props.imageToolIcon,
300
-          maxLength = _props.maxLength,
301
-          autoFocus = _props.autoFocus;
376
+          value = _props.value,
377
+          fileList = _props.fileList;
378
+
379
+      if (btnDisabled) {
380
+        return true;
381
+      }
382
+      if (value && value !== "") {
383
+        return false;
384
+      }
385
+      if (this.state.value && this.state.value !== "") {
386
+        return false;
387
+      }
388
+      if (fileList && fileList.length > 0) {
389
+        return false;
390
+      }
391
+      if (this.state.fileList.length > 0) {
392
+        return false;
393
+      }
394
+      return true;
395
+    }
396
+  }, {
397
+    key: "render",
398
+    value: function render() {
399
+      var _this4 = this;
400
+
401
+      var _props2 = this.props,
402
+          value = _props2.value,
403
+          rows = _props2.rows,
404
+          showEmoji = _props2.showEmoji,
405
+          showUpload = _props2.showUpload,
406
+          multiple = _props2.multiple,
407
+          emojiPopoverPlacement = _props2.emojiPopoverPlacement,
408
+          uploadPopoverPlacement = _props2.uploadPopoverPlacement,
409
+          uploadOverlayClassName = _props2.uploadOverlayClassName,
410
+          fileList = _props2.fileList,
411
+          maxUpload = _props2.maxUpload,
412
+          btnLoading = _props2.btnLoading,
413
+          button = _props2.button,
414
+          emojiToolIcon = _props2.emojiToolIcon,
415
+          imageToolIcon = _props2.imageToolIcon,
416
+          maxLength = _props2.maxLength,
417
+          autoFocus = _props2.autoFocus;
302 418
 
303 419
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
304 420
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
305 421
       var handleSubmit = this.handleSubmit;
306
-      var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.props.fileList.length && !this.state.fileList.length;
422
+      var disabledSubmit = this.checkDisabledSubmit();
307 423
       var inputValue = value || this.state.value;
308 424
       var uploadFileList = fileList || this.state.fileList;
309 425
       return _react2.default.createElement(
310 426
         "div",
311
-        { className: "comment-editor-container" },
427
+        { className: "comment-editor-container", onPaste: this.handlePaste },
312 428
         _react2.default.createElement("div", {
313 429
           className: (0, _classnames2.default)({
314 430
             "comment-editor-toolbar": true,
@@ -321,7 +437,7 @@ var Editor = function (_React$Component) {
321 437
           _react2.default.createElement(TextArea, {
322 438
             value: inputValue,
323 439
             onChange: function onChange(e) {
324
-              return _this3.handleChange(e.target.value);
440
+              return _this4.handleChange(e.target.value);
325 441
             },
326 442
             rows: rows,
327 443
             placeholder: placeholder,
@@ -349,8 +465,9 @@ var Editor = function (_React$Component) {
349 465
                     _react2.default.createElement(_Emoji2.default, {
350 466
                       onClick: this.handleClickEmoji,
351 467
                       ref: function ref(node) {
352
-                        _this3.emoji = node;
353
-                      }
468
+                        _this4.emoji = node;
469
+                      },
470
+                      emojiList: this.props.app.emojiList
354 471
                     })
355 472
                   ),
356 473
                   overlayClassName: "comment-emoji-popover"
@@ -362,14 +479,16 @@ var Editor = function (_React$Component) {
362 479
                 {
363 480
                   trigger: "click"
364 481
                   // TODO: 针对非 react.js,直接使用 click 事件来控制展开或关闭
365
-                  // visible={this.state.showUpload}
366
-                  , placement: uploadPopoverPlacement,
482
+                  , visible: this.state.uploadVisible,
483
+                  placement: uploadPopoverPlacement,
367 484
                   overlayClassName: uploadOverlayClassName,
368 485
                   autoAdjustOverflow: false,
369 486
                   overlayStyle: { zIndex: 9999 },
370
-                  onVisibleChange: closeUploadWhenBlur ? function (visible) {
371
-                    _this3.handleShowUpload(visible);
372
-                  } : null,
487
+                  onVisibleChange: function onVisibleChange(visible) {
488
+                    _this4.setState({
489
+                      uploadVisible: visible
490
+                    });
491
+                  },
373 492
                   content: _react2.default.createElement(
374 493
                     "div",
375 494
                     {
@@ -380,6 +499,9 @@ var Editor = function (_React$Component) {
380 499
                       }
381 500
                     },
382 501
                     _react2.default.createElement(_Upload2.default, {
502
+                      onRef: function onRef(node) {
503
+                        return _this4.uploadRef = node;
504
+                      },
383 505
                       multiple: multiple,
384 506
                       onChangeFileList: this.handleChangeFileList,
385 507
                       onUpload: this.handleUpload,
@@ -409,14 +531,14 @@ var Editor = function (_React$Component) {
409 531
                 },
410 532
                 imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
411 533
                   onClick: function onClick() {
412
-                    return _this3.handleShowUpload(true);
534
+                    return _this4.handleShowUpload(true);
413 535
                   }
414 536
                 }) : _react2.default.createElement(_icon2.default, {
415 537
                   type: "picture",
416 538
                   className: "comment-toolbar-icon",
417 539
                   style: { marginLeft: 20 },
418 540
                   onClick: function onClick() {
419
-                    return _this3.handleShowUpload(true);
541
+                    return _this4.handleShowUpload(true);
420 542
                   }
421 543
                 })
422 544
               ) : null
@@ -430,7 +552,7 @@ var Editor = function (_React$Component) {
430 552
                 _button2.default,
431 553
                 {
432 554
                   onClick: function onClick() {
433
-                    return _this3.handleSubmit();
555
+                    return _this4.handleSubmit();
434 556
                   },
435 557
                   type: "primary",
436 558
                   loading: btnLoading,
@@ -485,14 +607,13 @@ Editor.defaultProps = {
485 607
   uploadPopoverPlacement: "bottomLeft",
486 608
   uploadOverlayClassName: "",
487 609
   maxUpload: 1,
488
-  value: "",
489
-  fileList: [],
490 610
   // btnSubmitText: "发表",
491 611
   btnLoading: false,
492 612
   btnDisabled: false,
493 613
   showError: true,
494
-  maxLength: 5000
614
+  maxLength: 5000,
615
+  handleChangeFileList: function handleChangeFileList() {}
495 616
 };
496 617
 
497
-exports.default = Editor;
618
+exports.default = (0, _Comment2.default)(Editor);
498 619
 //# sourceMappingURL=index.js.map

+ 1
- 1
lib/components/Editor/index.js.map
文件差異過大導致無法顯示
查看文件


+ 6
- 8
lib/helper.js 查看文件

@@ -12,13 +12,9 @@ exports.addImageProcess = addImageProcess;
12 12
 
13 13
 var _constant = require("./constant");
14 14
 
15
-var _emoji = require("./emoji");
15
+// import emoji, { prefixUrl } from "./emoji";
16 16
 
17
-var _emoji2 = _interopRequireDefault(_emoji);
18
-
19
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
-
21
-var emojiObejct = arrayToObject(_emoji2.default, "title");
17
+// const emojiObejct = arrayToObject(emoji, "title");
22 18
 
23 19
 function isFunction(functionToCheck) {
24 20
   return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
@@ -78,9 +74,11 @@ function renderContent(content, onClick) {
78 74
       return "<a href=\"" + src + "\" rel=\"noopener noreferrer\" target=\"_blank\"><img class=\"comment-img\" src=\"" + src + "\" alt=\"" + src + "\" /></a>";
79 75
     }
80 76
     // 如果不存在对应的表情, 则返回原文
81
-    var emoji = emojiObejct[src];
77
+    // const emoji = emojiObejct[src];
78
+    console.log(src);
79
+    var emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
82 80
     if (emoji) {
83
-      return "<img class=\"comment-emoji\" src=\"" + _emoji.prefixUrl + emoji.value + "." + emoji.ext + "\" alt=\"" + emoji.title + "\" />";
81
+      return "<img class=\"comment-emoji\" src=\"" + emoji + "\" alt=\"" + emoji.title + "\" />";
84 82
     }
85 83
     return "[" + src + "]";
86 84
   }).replace(innerUrl, function (a, b) {

+ 1
- 1
lib/helper.js.map
文件差異過大導致無法顯示
查看文件


+ 3
- 3
lib/index.js 查看文件

@@ -73,7 +73,7 @@ var Index = function (_React$Component) {
73 73
             });
74 74
           },
75 75
           handleChangeFileList: function handleChangeFileList(fileList) {
76
-            console.log(fileList);
76
+            console.log("----", fileList);
77 77
             _this2.setState({
78 78
               fileList: fileList
79 79
             });
@@ -126,9 +126,9 @@ if (process.env.NODE_ENV !== "production") {
126 126
     type: 1,
127 127
     businessId: "test",
128 128
     businessUserId: 4,
129
-    userId: 71748,
129
+    userId: 58297,
130 130
     currentUser: {
131
-      user_id: 71748
131
+      user_id: 58297
132 132
     },
133 133
     userAvaHoverData: {
134 134
       71763: {

+ 1
- 1
lib/index.js.map
文件差異過大導致無法顯示
查看文件


+ 3
- 3
lib/version.json 查看文件

@@ -1,8 +1,8 @@
1 1
 {
2 2
     "name":       "comment",
3
-    "buildDate":  1564281547826,
3
+    "buildDate":  1564888264706,
4 4
     "version":    "1.0.4",
5
-    "numCommits": 174,
6
-    "hash":       "5200566",
5
+    "numCommits": 178,
6
+    "hash":       "088923c",
7 7
     "dirty":      false
8 8
 }

+ 22
- 4
src/App.js 查看文件

@@ -1,6 +1,6 @@
1 1
 import React, { Component } from "react";
2 2
 import PropTypes from "prop-types";
3
-import { message, Modal, Icon } from "antd";
3
+import { message } from "antd";
4 4
 import axios from "axios";
5 5
 import Cookies from "js-cookie";
6 6
 import intl from "react-intl-universal";
@@ -20,10 +20,8 @@ class App extends Component {
20 20
     super(props);
21 21
     this.state = {
22 22
       loading: {},
23
-
24 23
       // oss 配置
25 24
       oss: {},
26
-
27 25
       // 评论数据
28 26
       list: [],
29 27
       page: 1,
@@ -38,7 +36,8 @@ class App extends Component {
38 36
       commentId: "",
39 37
       userId: "",
40 38
       content: "",
41
-      replyPage: 1
39
+      replyPage: 1,
40
+      emojiList: []
42 41
     };
43 42
     this.handleChangeLoading = this.handleChangeLoading.bind(this);
44 43
     this.sCreateComment = this.sCreateComment.bind(this);
@@ -69,6 +68,7 @@ class App extends Component {
69 68
 
70 69
   componentDidMount() {
71 70
     this.loadLocales();
71
+    this.loadEmoji();
72 72
   }
73 73
 
74 74
   /**
@@ -114,6 +114,23 @@ class App extends Component {
114 114
       });
115 115
   }
116 116
 
117
+  /**
118
+   * 加载表情包
119
+   */
120
+  loadEmoji() {
121
+    this.axios
122
+      .get(`${this.props.emojiAPI}/emoticons`)
123
+      .then(response => {
124
+        const emojiMap = {};
125
+        response.data.list.forEach(item => {
126
+          emojiMap[item.name] = item.url;
127
+        });
128
+        window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
129
+        this.setState({ emojiList: response.data.list });
130
+      })
131
+      .catch(this.errorHandler);
132
+  }
133
+
117 134
   handleEdit({ replyId, commentId, userId, content, replyPage }) {
118 135
     this.setState({
119 136
       editModalVisible: true,
@@ -629,6 +646,7 @@ App.propTypes = {
629 646
 App.defaultProps = {
630 647
   businessUserId: 0,
631 648
   API: "//api.links123.net/comment/v1",
649
+  emojiAPI: "//api.links123.net/link/v1",
632 650
   showList: true,
633 651
   showEditor: true,
634 652
   showAlertComment: false,

+ 0
- 1
src/components/EditComment/EditComment.js 查看文件

@@ -1,5 +1,4 @@
1 1
 import React from "react";
2
-import PropTypes from "prop-types";
3 2
 import { Modal, Icon } from "antd";
4 3
 import intl from "react-intl-universal";
5 4
 import CommentInput from "../CommentInput";

+ 21
- 17
src/components/Editor/Emoji.js 查看文件

@@ -1,6 +1,6 @@
1 1
 import React from "react";
2 2
 import { Carousel } from "antd";
3
-import emoji, { prefixUrl } from "../../emoji";
3
+// import emoji, { prefixUrl } from "../../emoji";
4 4
 import "./Emoji.css";
5 5
 // 每页 20  5*4
6 6
 // 共 20 * 3 = 60 (实际是 54)
@@ -21,20 +21,24 @@ class Emoji extends React.Component {
21 21
   }
22 22
 
23 23
   render() {
24
-    const { onClick } = this.props;
24
+    const { onClick, emojiList } = this.props;
25 25
     const content = [];
26
-    let curPage = [];
27
-    for (let i = 0; i < 115; i++) {
28
-      if (curPage.length < 30) {
29
-        curPage.push(emoji[i]);
30
-      } else {
31
-        content.push(curPage);
32
-        curPage = [];
33
-      }
34
-    }
35
-    if (curPage.length > 0) {
36
-      content.push(curPage);
26
+    // let curPage = [];
27
+    // for (let i = 0; i < 115; i++) {
28
+    //   if (curPage.length < 30) {
29
+    //     curPage.push(emoji[i]);
30
+    //   } else {
31
+    //     content.push(curPage);
32
+    //     curPage = [];
33
+    //   }
34
+    // }
35
+    // if (curPage.length > 0) {
36
+    //   content.push(curPage);
37
+    // }
38
+    for (let i = 0; i < emojiList.length; i += 30) {
39
+      content.push(emojiList.slice(i, i + 30));
37 40
     }
41
+
38 42
     return (
39 43
       <Carousel
40 44
         ref={node => {
@@ -44,13 +48,13 @@ class Emoji extends React.Component {
44 48
         {content.map((page, index) => (
45 49
           <div key={index} className="emoji">
46 50
             {page.map((item, index) => (
47
-              <div className="item" key={item.value}>
51
+              <div className="item" key={item.id}>
48 52
                 <span className="helper" />
49 53
                 <img
50
-                  src={`${prefixUrl}${item.value}.${item.ext}`}
51
-                  alt={item.title}
54
+                  src={item.url}
55
+                  alt={item.name}
52 56
                   style={{ display: "inline-block" }}
53
-                  onClick={() => onClick(item.title)}
57
+                  onClick={() => onClick(item.name)}
54 58
                 />
55 59
               </div>
56 60
             ))}

+ 5
- 1
src/components/Editor/Upload.js 查看文件

@@ -60,6 +60,9 @@ class App extends React.Component {
60 60
 
61 61
   componentDidMount() {
62 62
     this.props.app.sOssSts();
63
+    if (this.props.onRef) {
64
+      this.props.onRef(this);
65
+    }
63 66
   }
64 67
 
65 68
   onImgLoad() {
@@ -85,6 +88,7 @@ class App extends React.Component {
85 88
 
86 89
   customRequest(info) {
87 90
     const { file } = info;
91
+    console.log(file);
88 92
     info.onProgress({ percent: 10 });
89 93
     let reader = new FileReader();
90 94
     reader.readAsDataURL(info.file);
@@ -94,7 +98,7 @@ class App extends React.Component {
94 98
       UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
95 99
         .then(data => {
96 100
           info.onProgress({ percent: 100 });
97
-          info.onSuccess();
101
+          info.onSuccess(data);
98 102
           this.props.onUpload({ path: data.name, uid: file.uid });
99 103
         })
100 104
         .catch(e => {

+ 129
- 41
src/components/Editor/index.js 查看文件

@@ -3,23 +3,62 @@ import PropTypes from "prop-types";
3 3
 import { Icon, Button, Popover, Input, message } from "antd";
4 4
 import classnames from "classnames";
5 5
 import intl from "react-intl-universal";
6
+import dayjs from "dayjs";
7
+import shortid from "shortid";
6 8
 import { OSS_LINK } from "../../constant";
7 9
 import { isFunction } from "../../helper";
8 10
 import Upload from "./Upload";
9 11
 import Emoji from "./Emoji";
12
+import Comment from "../../Comment";
13
+import {
14
+  OSS_ENDPOINT,
15
+  OSS_BUCKET,
16
+  DRIVER_LICENSE_PATH,
17
+  ERROR_DEFAULT
18
+} from "../../constant";
10 19
 import "./index.css";
11 20
 
12 21
 const { TextArea } = Input;
13 22
 
23
+const client = oss => {
24
+  return new window.OSS.Wrapper({
25
+    accessKeyId: oss.access_key_id,
26
+    accessKeySecret: oss.access_key_secret,
27
+    stsToken: oss.security_token,
28
+    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
29
+    bucket: OSS_BUCKET
30
+  });
31
+};
32
+
33
+const uploadPath = (path, file) => {
34
+  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
35
+    file.type.split("/")[1]
36
+  }`;
37
+};
38
+
39
+const UploadToOss = (oss, path, file) => {
40
+  const url = uploadPath(path, file);
41
+  return new Promise((resolve, reject) => {
42
+    client(oss)
43
+      .multipartUpload(url, file)
44
+      .then(data => {
45
+        resolve(data);
46
+      })
47
+      .catch(error => {
48
+        reject(error);
49
+      });
50
+  });
51
+};
52
+
14 53
 class Editor extends React.Component {
15 54
   constructor(props) {
16 55
     super(props);
17 56
     this.state = {
18 57
       showUpload: false,
19
-      value: props.value, // 编辑器里面的值
20
-
21
-      fileList: props.fileList, // 图片列表
22
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
58
+      value: props.value || "", // 编辑器里面的值
59
+      fileList: props.fileList || [], // 图片列表
60
+      fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
61
+      uploadVisible: false
23 62
     };
24 63
     this.handleChange = this.handleChange.bind(this);
25 64
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
@@ -27,11 +66,13 @@ class Editor extends React.Component {
27 66
     this.handleShowUpload = this.handleShowUpload.bind(this);
28 67
     this.handleUpload = this.handleUpload.bind(this);
29 68
     this.handleSubmit = this.handleSubmit.bind(this);
69
+    this.handlePaste = this.handlePaste.bind(this);
30 70
     this.resetState = this.resetState.bind(this);
31 71
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
32 72
   }
33 73
 
34 74
   componentDidMount() {
75
+    this.props.app.sOssSts();
35 76
     if (isFunction(this.props.onRef)) {
36 77
       this.props.onRef(this);
37 78
     }
@@ -117,6 +158,55 @@ class Editor extends React.Component {
117 158
     this.setState({ fileMap, fileList });
118 159
   }
119 160
 
161
+  /**
162
+   * 粘贴回调
163
+   */
164
+  handlePaste(e) {
165
+    if (this.state.fileList.length >= this.props.maxUpload) {
166
+      return;
167
+    }
168
+    const items = e.clipboardData && e.clipboardData.items;
169
+    let file = null;
170
+    if (items && items.length) {
171
+      for (let i = 0; i < items.length; i++) {
172
+        if (items[i].type.indexOf("image") !== -1) {
173
+          file = items[i].getAsFile();
174
+          break;
175
+        }
176
+      }
177
+    }
178
+    this.setState({
179
+      uploadVisible: true
180
+    });
181
+    let reader = new FileReader();
182
+    reader.readAsDataURL(file);
183
+    reader.onloadend = () => {
184
+      // DRIVER_LICENSE_PATH oss 的存储路径位置
185
+      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
186
+        .then(data => {
187
+          const fileList = this.state.fileList.concat({
188
+            url: OSS_LINK + data.name,
189
+            thumbUrl: OSS_LINK + data.name,
190
+            type: file.type,
191
+            uid: new Date().valueOf()
192
+          });
193
+          this.props.handleChangeFileList(fileList);
194
+          this.setState({
195
+            fileList
196
+          });
197
+        })
198
+        .catch(e => {
199
+          const msg = e.message || ERROR_DEFAULT;
200
+          if (this.props.showError) {
201
+            message.error(msg);
202
+          }
203
+          if (this.props.onError) {
204
+            this.props.onError(msg, { response: e.response });
205
+          }
206
+        });
207
+    };
208
+  }
209
+
120 210
   /**
121 211
    * 提交编辑器内容
122 212
    * 提交功能,交给父组件来实现
@@ -168,6 +258,7 @@ class Editor extends React.Component {
168 258
 
169 259
   resetState() {
170 260
     this.handleChange("");
261
+    this.handleChangeFileList([]);
171 262
     this.setState({
172 263
       showUpload: false,
173 264
       value: "",
@@ -176,6 +267,26 @@ class Editor extends React.Component {
176 267
     });
177 268
   }
178 269
 
270
+  checkDisabledSubmit() {
271
+    const { btnDisabled, value, fileList } = this.props;
272
+    if (btnDisabled) {
273
+      return true;
274
+    }
275
+    if (value && value !== "") {
276
+      return false;
277
+    }
278
+    if (this.state.value && this.state.value !== "") {
279
+      return false;
280
+    }
281
+    if (fileList && fileList.length > 0) {
282
+      return false;
283
+    }
284
+    if (this.state.fileList.length > 0) {
285
+      return false;
286
+    }
287
+    return true;
288
+  }
289
+
179 290
   render() {
180 291
     const {
181 292
       value,
@@ -188,11 +299,9 @@ class Editor extends React.Component {
188 299
       uploadPopoverPlacement,
189 300
       uploadOverlayClassName,
190 301
       fileList,
191
-      closeUploadWhenBlur,
192 302
       maxUpload,
193 303
       // btnSubmitText,
194 304
       btnLoading,
195
-      btnDisabled,
196 305
       button,
197 306
       emojiToolIcon,
198 307
       imageToolIcon,
@@ -203,27 +312,17 @@ class Editor extends React.Component {
203 312
     let btnSubmitText =
204 313
       this.props.btnSubmitText || intl.get("editor.SubmitBtn");
205 314
     const handleSubmit = this.handleSubmit;
206
-    const disabledSubmit =
207
-      btnDisabled ||
208
-      (!this.props.value &&
209
-        !this.state.value &&
210
-        !this.props.fileList.length &&
211
-        !this.state.fileList.length);
315
+    const disabledSubmit = this.checkDisabledSubmit();
212 316
     const inputValue = value || this.state.value;
213 317
     const uploadFileList = fileList || this.state.fileList;
214 318
     return (
215
-      <div className="comment-editor-container">
319
+      <div className="comment-editor-container" onPaste={this.handlePaste}>
216 320
         <div
217 321
           className={classnames({
218 322
             "comment-editor-toolbar": true,
219 323
             "comment-editor-toolbar-error": inputValue.length > maxLength
220 324
           })}
221
-        >
222
-          {/* {intl.get("editor.alreadyEntered", {
223
-            count: inputValue.length,
224
-            maxLength
225
-          })} */}
226
-        </div>
325
+        ></div>
227 326
         <div className="comment-editor">
228 327
           <TextArea
229 328
             value={inputValue}
@@ -251,6 +350,7 @@ class Editor extends React.Component {
251 350
                         ref={node => {
252 351
                           this.emoji = node;
253 352
                         }}
353
+                        emojiList={this.props.app.emojiList}
254 354
                       />
255 355
                     </div>
256 356
                   }
@@ -266,18 +366,16 @@ class Editor extends React.Component {
266 366
                 <Popover
267 367
                   trigger="click"
268 368
                   // TODO: 针对非 react.js,直接使用 click 事件来控制展开或关闭
269
-                  // visible={this.state.showUpload}
369
+                  visible={this.state.uploadVisible}
270 370
                   placement={uploadPopoverPlacement}
271 371
                   overlayClassName={uploadOverlayClassName}
272 372
                   autoAdjustOverflow={false}
273 373
                   overlayStyle={{ zIndex: 9999 }}
274
-                  onVisibleChange={
275
-                    closeUploadWhenBlur
276
-                      ? visible => {
277
-                          this.handleShowUpload(visible);
278
-                        }
279
-                      : null
280
-                  }
374
+                  onVisibleChange={visible => {
375
+                    this.setState({
376
+                      uploadVisible: visible
377
+                    });
378
+                  }}
281 379
                   content={
282 380
                     <div
283 381
                       style={{
@@ -287,6 +385,7 @@ class Editor extends React.Component {
287 385
                       }}
288 386
                     >
289 387
                       <Upload
388
+                        onRef={node => (this.uploadRef = node)}
290 389
                         multiple={multiple}
291 390
                         onChangeFileList={this.handleChangeFileList}
292 391
                         onUpload={this.handleUpload}
@@ -310,16 +409,6 @@ class Editor extends React.Component {
310 409
                           </span>
311 410
                         ) : null}
312 411
                       </span>
313
-                      {/* 因为是点击别的区域关闭,所以不用右上角的 Icon */}
314
-                      {/* <Icon
315
-                        type="close"
316
-                        onClick={() => this.handleShowUpload(false)}
317
-                        style={{
318
-                          float: "right",
319
-                          cursor: "pointer",
320
-                          marginTop: 4
321
-                        }}
322
-                      /> */}
323 412
                     </div>
324 413
                   }
325 414
                 >
@@ -399,13 +488,12 @@ Editor.defaultProps = {
399 488
   uploadPopoverPlacement: "bottomLeft",
400 489
   uploadOverlayClassName: "",
401 490
   maxUpload: 1,
402
-  value: "",
403
-  fileList: [],
404 491
   // btnSubmitText: "发表",
405 492
   btnLoading: false,
406 493
   btnDisabled: false,
407 494
   showError: true,
408
-  maxLength: 5000
495
+  maxLength: 5000,
496
+  handleChangeFileList: () => {}
409 497
 };
410 498
 
411
-export default Editor;
499
+export default Comment(Editor);

+ 6
- 6
src/helper.js 查看文件

@@ -5,9 +5,9 @@ import {
5 5
   IMAGE_PROCESS_LARGE,
6 6
   IMAGE_PROCESS
7 7
 } from "./constant";
8
-import emoji, { prefixUrl } from "./emoji";
8
+// import emoji, { prefixUrl } from "./emoji";
9 9
 
10
-const emojiObejct = arrayToObject(emoji, "title");
10
+// const emojiObejct = arrayToObject(emoji, "title");
11 11
 
12 12
 export function isFunction(functionToCheck) {
13 13
   return (
@@ -71,11 +71,11 @@ export function renderContent(content, onClick) {
71 71
         return `<a href="${src}" rel="noopener noreferrer" target="_blank"><img class="comment-img" src="${src}" alt="${src}" /></a>`;
72 72
       }
73 73
       // 如果不存在对应的表情, 则返回原文
74
-      const emoji = emojiObejct[src];
74
+      // const emoji = emojiObejct[src];
75
+      console.log(src);
76
+      const emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
75 77
       if (emoji) {
76
-        return `<img class="comment-emoji" src="${prefixUrl}${emoji.value}.${
77
-          emoji.ext
78
-        }" alt="${emoji.title}" />`;
78
+        return `<img class="comment-emoji" src="${emoji}" alt="${emoji.title}" />`;
79 79
       }
80 80
       return `[${src}]`;
81 81
     })

+ 3
- 3
src/index.js 查看文件

@@ -40,7 +40,7 @@ class Index extends React.Component {
40 40
             });
41 41
           }}
42 42
           handleChangeFileList={fileList => {
43
-            console.log(fileList);
43
+            console.log("----", fileList);
44 44
             this.setState({
45 45
               fileList
46 46
             });
@@ -91,9 +91,9 @@ if (process.env.NODE_ENV !== "production") {
91 91
     type: 1,
92 92
     businessId: "test",
93 93
     businessUserId: 4,
94
-    userId: 71748,
94
+    userId: 58297,
95 95
     currentUser: {
96
-      user_id: 71748
96
+      user_id: 58297
97 97
     },
98 98
     userAvaHoverData: {
99 99
       71763: {