emoji增加到每页30个, 增加鼠标滑动功能

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.5.13
+- [x] emoji增加到每页30个
+- [x] emoji增加鼠标滑动功能
+- [x] 增加图片预览器
+- [x] 上传图片每行显示3张
+
 ## 0.5.12
 - [x] 支持两种模式的分页器
 - [x] 分页器支持受控模式

README.md

@@ -2,7 +2,7 @@
 
 通用评论系统及编辑器
 
-**`version 0.5.12`**
+**`version 0.5.13`**
 
 ```js
 import Comment, { Editor, RenderText } from 'comment';

lib/components/ContentItem/index.css

@@ -1,105 +1,106 @@
 .comment-item-box {
-    margin: 10px 0 0 0;
-    padding: 15px 5px 0 5px;
-    border-top: 1px solid #eee;
+  margin: 10px 0 0 0;
+  padding: 15px 5px 0 5px;
+  border-top: 1px solid #eee;
 }
 
 .comment-item-left {
-    display: inline-block;
-    vertical-align: top;
-    width: 40px;
+  display: inline-block;
+  vertical-align: top;
+  width: 40px;
 }
 
 .comment-item-right {
-    display: inline-block;
-    width: 90%;
-    margin-left: 10px;
-    margin-bottom: 20px;
+  display: inline-block;
+  width: 90%;
+  margin-left: 10px;
+  margin-bottom: 20px;
 }
 
 .comment-item-content {
-    margin: 10px 0;
-    word-break: break-all;
+  margin: 10px 0;
+  word-break: break-all;
 }
 
 .comment-item-bottom {
-    margin: 20px auto;
+  margin: 20px auto;
 }
 
 .comment-item-bottom-left {
-    float: left;
-    user-select: none;
+  float: left;
+  user-select: none;
 }
 
 .comment-item-bottom-right {
-    float: right;
-    margin-left: 5px;
-    cursor: pointer;
+  float: right;
+  margin-left: 5px;
+  cursor: pointer;
 }
 
 .comment-favor {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 .comment-favored {
-    color: #4a90e2;
+  color: #4a90e2;
 }
 
 .comment-item-image {
-    width: 400px;
-    max-width: 100%;
+  width: 400px;
+  max-width: 100%;
 }
 
 .comment-item-image .comment-item-image-wrapper {
-    float: left;
-    width: 25%;
-    box-sizing: border-box;
-    padding: 5px;
+  float: left;
+  width: 25%;
+  box-sizing: border-box;
+  padding: 5px;
 }
 
 .comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
-    background-position: center;
-    background-size: cover;
-    display: inline-block;
-    width: 100%;
-    height: 0;
-    padding-bottom: 100%;
-    border-radius: 5px;
-    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined'), auto;
+  background-position: center;
+  background-size: cover;
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  border-radius: 5px;
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
+    auto;
 }
 
 .comment-item-image .comment-item-image-wrapper .comment-img-divider {
-    display: inline-block;
-    width: 100%;
-    height: 0;
-    padding-bottom: 100%;
-    border-radius: 5px;
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  border-radius: 5px;
 }
 
 .comment-item-image .comment-img {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 @media screen and (max-width: 616px) and (min-width: 449px) {
-    .comment-item-right {
-        display: inline-block;
-        width: 85%;
-        margin-left: 10px;
-    }
+  .comment-item-right {
+    display: inline-block;
+    width: 85%;
+    margin-left: 10px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
-    .comment-item-right {
-        display: inline-block;
-        width: 80%;
-        margin-left: 10px;
-    }
+  .comment-item-right {
+    display: inline-block;
+    width: 80%;
+    margin-left: 10px;
+  }
 }
 
 @media screen and (max-width: 365px) {
-    .comment-item-right {
-        display: inline-block;
-        width: 75%;
-        margin-left: 10px;
-    }
-}
+  .comment-item-right {
+    display: inline-block;
+    width: 75%;
+    margin-left: 10px;
+  }
+}

lib/components/ContentItem/index.js

@@ -177,10 +177,10 @@ var CommentItem = function (_Component) {
       var imgs = [].concat(_toConsumableArray(imageList));
       if (needClear) {
         if (imgs.length > 6) {
-          imgs.splice(3, 0, { type: 'divider' });
-          imgs.splice(7, 0, { type: 'divider' });
+          imgs.splice(3, 0, { type: "divider" });
+          imgs.splice(7, 0, { type: "divider" });
         } else {
-          imgs.splice(3, 0, { type: 'divider' });
+          imgs.splice(3, 0, { type: "divider" });
         }
       }
 
@@ -227,13 +227,10 @@ var CommentItem = function (_Component) {
             "div",
             { className: "comment-item-image" },
             !this.state.showPreviewer && imgs.map(function (item, index) {
-              if (item.type === 'divider') {
+              if (item.type === "divider") {
                 return _react2.default.createElement(
                   "div",
-                  {
-                    className: "comment-item-image-wrapper",
-                    key: index
-                  },
+                  { className: "comment-item-image-wrapper", key: index },
                   _react2.default.createElement("div", { className: "comment-img-divider" })
                 );
               }
@@ -255,7 +252,10 @@ var CommentItem = function (_Component) {
                     _this2.showPreviewer(i);
                   }
                 },
-                _react2.default.createElement("div", { style: { backgroundImage: "url(" + item + ")" }, className: "comment-img-thumbnail" })
+                _react2.default.createElement("div", {
+                  style: { backgroundImage: "url(" + item + ")" },
+                  className: "comment-img-thumbnail"
+                })
               );
             }),
             this.state.showPreviewer && _react2.default.createElement(_ImagePreviewer2.default, {

lib/components/Editor/Emoji.js

@@ -8,6 +8,8 @@ var _carousel = require("antd/es/carousel");
 
 var _carousel2 = _interopRequireDefault(_carousel);
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 require("antd/es/carousel/style/css");
 
 var _react = require("react");
@@ -22,53 +24,92 @@ require("./Emoji.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+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; }
+
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
 
 // class Emoji
 
-var Emoji = function Emoji(_ref) {
-  var _onClick = _ref.onClick;
-
-  var content = [];
-  var curPage = [];
-  for (var i = 0; i < 115; i++) {
-    if (curPage.length < 20) {
-      curPage.push(_emoji2.default[i]);
-    } else {
-      content.push(curPage);
-      curPage = [];
-    }
-  }
-  if (curPage.length > 0) {
-    content.push(curPage);
+var Emoji = function (_React$Component) {
+  _inherits(Emoji, _React$Component);
+
+  function Emoji() {
+    _classCallCheck(this, Emoji);
+
+    return _possibleConstructorReturn(this, (Emoji.__proto__ || Object.getPrototypeOf(Emoji)).apply(this, arguments));
   }
-  return _react2.default.createElement(
-    _carousel2.default,
-    null,
-    content.map(function (page, index) {
+
+  _createClass(Emoji, [{
+    key: "next",
+    value: function next() {
+      if (this.carousel) {
+        this.carousel.next();
+      }
+    }
+  }, {
+    key: "prev",
+    value: function prev() {
+      if (this.carousel) {
+        this.carousel.prev();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _onClick = this.props.onClick;
+
+      var content = [];
+      var curPage = [];
+      for (var i = 0; i < 115; i++) {
+        if (curPage.length < 30) {
+          curPage.push(_emoji2.default[i]);
+        } else {
+          content.push(curPage);
+          curPage = [];
+        }
+      }
+      if (curPage.length > 0) {
+        content.push(curPage);
+      }
       return _react2.default.createElement(
-        "div",
-        { key: index, className: "emoji" },
-        page.map(function (item, index) {
+        _carousel2.default,
+        { ref: function ref(node) {
+            _this2.carousel = node;
+          } },
+        content.map(function (page, index) {
           return _react2.default.createElement(
             "div",
-            { className: "item", key: item.value },
-            _react2.default.createElement("span", { className: "helper" }),
-            _react2.default.createElement("img", {
-              src: "" + _emoji.prefixUrl + item.value + "." + item.ext,
-              alt: item.title,
-              style: { display: "inline-block" },
-              onClick: function onClick() {
-                return _onClick(item.title);
-              }
+            { key: index, className: "emoji" },
+            page.map(function (item, index) {
+              return _react2.default.createElement(
+                "div",
+                { className: "item", key: item.value },
+                _react2.default.createElement("span", { className: "helper" }),
+                _react2.default.createElement("img", {
+                  src: "" + _emoji.prefixUrl + item.value + "." + item.ext,
+                  alt: item.title,
+                  style: { display: "inline-block" },
+                  onClick: function onClick() {
+                    return _onClick(item.title);
+                  }
+                })
+              );
             })
           );
         })
       );
-    })
-  );
-};
+    }
+  }]);
+
+  return Emoji;
+}(_react2.default.Component);
 
 exports.default = Emoji;
 //# sourceMappingURL=Emoji.js.map

lib/components/Editor/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","curPage","i","length","push","emoji","map","page","index","item","value","prefixUrl","ext","title","display"],"mappings":";;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;AACA;;AAEA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OAAiB;AAAA,MAAdC,QAAc,QAAdA,OAAc;;AAC7B,MAAMC,UAAU,EAAhB;AACA,MAAIC,UAAU,EAAd;AACA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAI,GAApB,EAAyBA,GAAzB,EAA8B;AAC5B,QAAID,QAAQE,MAAR,GAAiB,EAArB,EAAyB;AACvBF,cAAQG,IAAR,CAAaC,gBAAMH,CAAN,CAAb;AACD,KAFD,MAEO;AACLF,cAAQI,IAAR,CAAaH,OAAb;AACAA,gBAAU,EAAV;AACD;AACF;AACD,MAAIA,QAAQE,MAAR,GAAiB,CAArB,EAAwB;AACtBH,YAAQI,IAAR,CAAaH,OAAb;AACD;AACD,SACE;AAAA;AAAA;AACGD,YAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,aACX;AAAA;AAAA,UAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,aAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,iBACR;AAAA;AAAA,cAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,KAAhC;AACE,oDAAM,WAAU,QAAhB,GADF;AAEE;AACE,wBAAQC,gBAAR,GAAoBF,KAAKC,KAAzB,SAAkCD,KAAKG,GADzC;AAEE,mBAAKH,KAAKI,KAFZ;AAGE,qBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,uBAAS;AAAA,uBAAMf,SAAQU,KAAKI,KAAb,CAAN;AAAA;AAJX;AAFF,WADQ;AAAA,SAAT;AADH,OADW;AAAA,KAAZ;AADH,GADF;AAmBD,CAjCD;;kBAmCef,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\r\nimport { Carousel } from \"antd\";\r\nimport emoji, { prefixUrl } from \"../../emoji\";\r\nimport \"./Emoji.css\";\r\n// 每页 20  5*4\r\n// 共 20 * 3 = 60 (实际是 54)\r\n\r\n// class Emoji\r\n\r\nconst Emoji = ({ onClick }) => {\r\n  const content = [];\r\n  let curPage = [];\r\n  for (let i = 0; i < 115; i++) {\r\n    if (curPage.length < 20) {\r\n      curPage.push(emoji[i]);\r\n    } else {\r\n      content.push(curPage);\r\n      curPage = [];\r\n    }\r\n  }\r\n  if (curPage.length > 0) {\r\n    content.push(curPage);\r\n  }\r\n  return (\r\n    <Carousel>\r\n      {content.map((page, index) => (\r\n        <div key={index} className=\"emoji\">\r\n          {page.map((item, index) => (\r\n            <div className=\"item\" key={item.value}>\r\n              <span className=\"helper\" />\r\n              <img\r\n                src={`${prefixUrl}${item.value}.${item.ext}`}\r\n                alt={item.title}\r\n                style={{ display: \"inline-block\" }}\r\n                onClick={() => onClick(item.title)}\r\n              />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      ))}\r\n    </Carousel>\r\n  );\r\n};\r\n\r\nexport default Emoji;\r\n"]}
+{"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;;;;;;;;;;;2BAEG;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,UAAU,KAAK,aAACK,IAAD,EAAU;AAAE,mBAAKX,QAAL,GAAgBW,IAAhB;AAAuB,WAAlD;AACGN,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;AADH,OADF;AAmBD;;;;EAhDiBE,gBAAMC,S;;kBAmDXvB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\r\nimport { Carousel } from \"antd\";\r\nimport emoji, { prefixUrl } from \"../../emoji\";\r\nimport \"./Emoji.css\";\r\n// 每页 20  5*4\r\n// 共 20 * 3 = 60 (实际是 54)\r\n\r\n// class Emoji\r\n\r\nclass Emoji extends React.Component {\r\n\r\n  next() {\r\n    if (this.carousel) {\r\n      this.carousel.next();\r\n    }\r\n  }\r\n\r\n  prev() {\r\n    if (this.carousel) {\r\n      this.carousel.prev();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const { onClick } = this.props;\r\n    const content = [];\r\n    let curPage = [];\r\n    for (let i = 0; i < 115; i++) {\r\n      if (curPage.length < 30) {\r\n        curPage.push(emoji[i]);\r\n      } else {\r\n        content.push(curPage);\r\n        curPage = [];\r\n      }\r\n    }\r\n    if (curPage.length > 0) {\r\n      content.push(curPage);\r\n    }\r\n    return (\r\n      <Carousel ref={(node) => { this.carousel = node; }}>\r\n        {content.map((page, index) => (\r\n          <div key={index} className=\"emoji\">\r\n            {page.map((item, index) => (\r\n              <div className=\"item\" key={item.value}>\r\n                <span className=\"helper\" />\r\n                <img\r\n                  src={`${prefixUrl}${item.value}.${item.ext}`}\r\n                  alt={item.title}\r\n                  style={{ display: \"inline-block\" }}\r\n                  onClick={() => onClick(item.title)}\r\n                />\r\n              </div>\r\n            ))}\r\n          </div>\r\n        ))}\r\n      </Carousel>\r\n    );\r\n  };\r\n}\r\n\r\nexport default Emoji;\r\n"]}

lib/components/Editor/index.js

@@ -94,6 +94,7 @@ var Editor = function (_React$Component) {
     _this.handleUpload = _this.handleUpload.bind(_this);
     _this.handleSubmit = _this.handleSubmit.bind(_this);
     _this.resetState = _this.resetState.bind(_this);
+    _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
     return _this;
   }
 
@@ -104,6 +105,19 @@ var Editor = function (_React$Component) {
         this.props.onRef(this);
       }
     }
+  }, {
+    key: "handleEmojiScroll",
+    value: function handleEmojiScroll(e) {
+      if (!this.emoji) {
+        return;
+      }
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        this.emoji.next();
+      } else if (e.deltaY < 0) {
+        this.emoji.prev();
+      }
+    }
 
     /**
      * 编辑器的值改变事件
@@ -314,8 +328,10 @@ var Editor = function (_React$Component) {
                   autoAdjustOverflow: false,
                   content: _react2.default.createElement(
                     "div",
-                    { style: { width: 200 } },
-                    _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
+                    { style: { width: 240 }, onWheel: this.handleEmojiScroll },
+                    _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji, ref: function ref(node) {
+                        _this3.emoji = node;
+                      } })
                   ),
                   overlayClassName: "comment-emoji-popover"
                 },

lib/components/ImagePreviewer/ImagePreviewer.css

@@ -29,13 +29,16 @@
   height: 100%;
 }
 .container .pictureWrapper .tools .item.left {
-  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined'), auto;
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+    auto;
 }
 .container .pictureWrapper .tools .item.shrink {
-  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined'), auto;
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+    auto;
 }
 .container .pictureWrapper .tools .item.right {
-  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined'), auto;
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+    auto;
 }
 .container .pictureWrapper .picture {
   max-width: 100%;

lib/components/ImagePreviewer/ImagePreviewer.js

@@ -1,34 +1,34 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
-var _spin = require('antd/es/spin');
+var _spin = require("antd/es/spin");
 
 var _spin2 = _interopRequireDefault(_spin);
 
-var _icon = require('antd/es/icon');
+var _icon = require("antd/es/icon");
 
 var _icon2 = _interopRequireDefault(_icon);
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-require('antd/es/spin/style/css');
+require("antd/es/spin/style/css");
 
-require('antd/es/icon/style/css');
+require("antd/es/icon/style/css");
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _classnames = require('classnames');
+var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-require('./ImagePreviewer.css');
+require("./ImagePreviewer.css");
 
-var _helper = require('../../helper');
+var _helper = require("../../helper");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,204 +39,204 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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; }
 
 var ImagePreviewer = function (_React$Component) {
-    _inherits(ImagePreviewer, _React$Component);
-
-    function ImagePreviewer(props) {
-        _classCallCheck(this, ImagePreviewer);
-
-        var _this = _possibleConstructorReturn(this, (ImagePreviewer.__proto__ || Object.getPrototypeOf(ImagePreviewer)).call(this, props));
-
-        _this.setIndex = _this.setIndex.bind(_this);
-        _this.onPrev = _this.onPrev.bind(_this);
-        _this.onNext = _this.onNext.bind(_this);
-        _this.onOrigin = _this.onOrigin.bind(_this);
-        _this.rotateLeft = _this.rotateLeft.bind(_this);
-        _this.rotateRight = _this.rotateRight.bind(_this);
-        _this.onImgLoad = _this.onImgLoad.bind(_this);
-        _this.onImageError = _this.onImageError.bind(_this);
-        _this.state = {
-            cIndex: props.index,
-            direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
-            loading: false
-        };
-        return _this;
+  _inherits(ImagePreviewer, _React$Component);
+
+  function ImagePreviewer(props) {
+    _classCallCheck(this, ImagePreviewer);
+
+    var _this = _possibleConstructorReturn(this, (ImagePreviewer.__proto__ || Object.getPrototypeOf(ImagePreviewer)).call(this, props));
+
+    _this.setIndex = _this.setIndex.bind(_this);
+    _this.onPrev = _this.onPrev.bind(_this);
+    _this.onNext = _this.onNext.bind(_this);
+    _this.onOrigin = _this.onOrigin.bind(_this);
+    _this.rotateLeft = _this.rotateLeft.bind(_this);
+    _this.rotateRight = _this.rotateRight.bind(_this);
+    _this.onImgLoad = _this.onImgLoad.bind(_this);
+    _this.onImageError = _this.onImageError.bind(_this);
+    _this.state = {
+      cIndex: props.index,
+      direction: 0, // 0- 0deg 1- 90deg 2- 180deg 3- 270deg
+      loading: false
+    };
+    return _this;
+  }
+
+  _createClass(ImagePreviewer, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.index !== this.props.index) {
+        this.setIndex(nextProps.index);
+      }
+    }
+  }, {
+    key: "onPrev",
+    value: function onPrev() {
+      var prev = this.state.cIndex === 0 ? this.props.list.length - 1 : this.state.cIndex - 1;
+      this.setIndex(prev);
+    }
+  }, {
+    key: "onNext",
+    value: function onNext() {
+      var next = this.state.cIndex === this.props.list.length - 1 ? 0 : this.state.cIndex + 1;
+      this.setIndex(next);
+    }
+  }, {
+    key: "onOrigin",
+    value: function onOrigin() {
+      window.open(this.props.list[this.state.cIndex]);
+    }
+  }, {
+    key: "onImgLoad",
+    value: function onImgLoad() {
+      this.setState({
+        loading: false
+      });
+    }
+  }, {
+    key: "onImageError",
+    value: function onImageError() {
+      this.setState({
+        loading: false
+      });
+    }
+  }, {
+    key: "setIndex",
+    value: function setIndex(index) {
+      this.setState({
+        cIndex: index,
+        direction: 0,
+        loading: true
+      });
+    }
+  }, {
+    key: "rotateLeft",
+    value: function rotateLeft() {
+      var direction = this.state.direction - 1;
+      if (direction === -1) {
+        direction = 3;
+      }
+      this.setState({
+        direction: direction
+      });
+    }
+  }, {
+    key: "rotateRight",
+    value: function rotateRight() {
+      var direction = this.state.direction + 1;
+      if (direction === 4) {
+        direction = 0;
+      }
+      this.setState({
+        direction: direction
+      });
     }
 
-    _createClass(ImagePreviewer, [{
-        key: 'componentWillReceiveProps',
-        value: function componentWillReceiveProps(nextProps) {
-            if (nextProps.index !== this.props.index) {
-                this.setIndex(nextProps.index);
-            }
-        }
-    }, {
-        key: 'onPrev',
-        value: function onPrev() {
-            var prev = this.state.cIndex === 0 ? this.props.list.length - 1 : this.state.cIndex - 1;
-            this.setIndex(prev);
-        }
-    }, {
-        key: 'onNext',
-        value: function onNext() {
-            var next = this.state.cIndex === this.props.list.length - 1 ? 0 : this.state.cIndex + 1;
-            this.setIndex(next);
-        }
-    }, {
-        key: 'onOrigin',
-        value: function onOrigin() {
-            window.open(this.props.list[this.state.cIndex]);
-        }
-    }, {
-        key: 'onImgLoad',
-        value: function onImgLoad() {
-            this.setState({
-                loading: false
-            });
-        }
-    }, {
-        key: 'onImageError',
-        value: function onImageError() {
-            this.setState({
-                loading: false
-            });
-        }
-    }, {
-        key: 'setIndex',
-        value: function setIndex(index) {
-            this.setState({
-                cIndex: index,
-                direction: 0,
-                loading: true
-            });
-        }
-    }, {
-        key: 'rotateLeft',
-        value: function rotateLeft() {
-            var direction = this.state.direction - 1;
-            if (direction === -1) {
-                direction = 3;
-            }
-            this.setState({
-                direction: direction
-            });
-        }
-    }, {
-        key: 'rotateRight',
-        value: function rotateRight() {
-            var direction = this.state.direction + 1;
-            if (direction === 4) {
-                direction = 0;
-            }
-            this.setState({
-                direction: direction
-            });
-        }
-
-        // calcHeight(node) {
-        //     const { naturalHeight, naturalWidth } = node;
-        // }
-
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
-
-            var _props = this.props,
-                list = _props.list,
-                onFold = _props.onFold;
-            var cIndex = this.state.cIndex;
-
+    // calcHeight(node) {
+    //     const { naturalHeight, naturalWidth } = node;
+    // }
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          list = _props.list,
+          onFold = _props.onFold;
+      var cIndex = this.state.cIndex;
+
+      return _react2.default.createElement(
+        "div",
+        { className: "container" },
+        _react2.default.createElement(
+          "div",
+          { className: "toolbar" },
+          _react2.default.createElement(
+            "span",
+            { className: "button", onClick: onFold },
+            _react2.default.createElement(_icon2.default, { type: "to-top" }),
+            "\u6536\u8D77"
+          ),
+          _react2.default.createElement(
+            "span",
+            { className: "button", onClick: this.onOrigin },
+            _react2.default.createElement(_icon2.default, { type: "search" }),
+            " \u67E5\u770B\u539F\u56FE"
+          )
+        ),
+        _react2.default.createElement(
+          "div",
+          { className: "pictureWrapper" },
+          _react2.default.createElement(
+            _spin2.default,
+            { spinning: this.state.loading },
+            _react2.default.createElement("img", {
+              // ref={node => {
+              //     if (node) {
+              //         this.calcHeight(node);
+              //     }
+              // }}
+              className: "picture",
+              src: (0, _helper.addImageProcess)(list[cIndex], { large: true }),
+              alt: list[cIndex],
+              style: {
+                transform: "rotate(" + this.state.direction * 90 + "deg)",
+                opacity: this.state.loading ? 0 : 1,
+                transition: "0.3s opacity"
+              },
+              onLoad: this.onImgLoad,
+              onError: this.onImageError
+            })
+          ),
+          _react2.default.createElement(
+            "div",
+            { className: "tools" },
+            list.length > 1 && _react2.default.createElement("div", {
+              onClick: this.onPrev,
+              className: (0, _classnames2.default)("item", "left")
+            }),
+            _react2.default.createElement("div", { onClick: onFold, className: (0, _classnames2.default)("item", "shrink") }),
+            list.length > 1 && _react2.default.createElement("div", {
+              onClick: this.onNext,
+              className: (0, _classnames2.default)("item", "right")
+            })
+          )
+        ),
+        list.length > 1 && _react2.default.createElement(
+          "div",
+          { className: "list" },
+          list.map(function (item, index) {
             return _react2.default.createElement(
-                'div',
-                { className: 'container' },
-                _react2.default.createElement(
-                    'div',
-                    { className: 'toolbar' },
-                    _react2.default.createElement(
-                        'span',
-                        { className: 'button', onClick: onFold },
-                        _react2.default.createElement(_icon2.default, { type: 'to-top' }),
-                        '\u6536\u8D77'
-                    ),
-                    _react2.default.createElement(
-                        'span',
-                        { className: 'button', onClick: this.onOrigin },
-                        _react2.default.createElement(_icon2.default, { type: 'search' }),
-                        ' \u67E5\u770B\u539F\u56FE'
-                    )
-                ),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'pictureWrapper' },
-                    _react2.default.createElement(
-                        _spin2.default,
-                        { spinning: this.state.loading },
-                        _react2.default.createElement('img', {
-                            // ref={node => {
-                            //     if (node) {
-                            //         this.calcHeight(node);
-                            //     }
-                            // }}
-                            className: 'picture',
-                            src: (0, _helper.addImageProcess)(list[cIndex], { large: true }),
-                            alt: list[cIndex],
-                            style: {
-                                transform: 'rotate(' + this.state.direction * 90 + 'deg)',
-                                opacity: this.state.loading ? 0 : 1,
-                                transition: '0.3s opacity'
-                            },
-                            onLoad: this.onImgLoad,
-                            onError: this.onImageError
-                        })
-                    ),
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'tools' },
-                        list.length > 1 && _react2.default.createElement('div', {
-                            onClick: this.onPrev,
-                            className: (0, _classnames2.default)("item", "left")
-                        }),
-                        _react2.default.createElement('div', { onClick: onFold, className: (0, _classnames2.default)("item", "shrink") }),
-                        list.length > 1 && _react2.default.createElement('div', {
-                            onClick: this.onNext,
-                            className: (0, _classnames2.default)("item", "right")
-                        })
-                    )
-                ),
-                list.length > 1 && _react2.default.createElement(
-                    'div',
-                    { className: 'list' },
-                    list.map(function (item, index) {
-                        return _react2.default.createElement(
-                            'div',
-                            {
-                                className: (0, _classnames2.default)({
-                                    "wrapper": true,
-                                    "active": index === cIndex
-                                }),
-                                key: item
-                            },
-                            _react2.default.createElement('div', {
-                                className: (0, _classnames2.default)({
-                                    "thumbnail": true
-                                }),
-                                style: {
-                                    backgroundImage: 'url(' + (0, _helper.addImageProcess)(item, {
-                                        small: true
-                                    }) + ')'
-                                },
-                                onClick: function onClick() {
-                                    _this2.setIndex(index);
-                                }
-                            })
-                        );
-                    })
-                )
+              "div",
+              {
+                className: (0, _classnames2.default)({
+                  wrapper: true,
+                  active: index === cIndex
+                }),
+                key: item
+              },
+              _react2.default.createElement("div", {
+                className: (0, _classnames2.default)({
+                  thumbnail: true
+                }),
+                style: {
+                  backgroundImage: "url(" + (0, _helper.addImageProcess)(item, {
+                    small: true
+                  }) + ")"
+                },
+                onClick: function onClick() {
+                  _this2.setIndex(index);
+                }
+              })
             );
-        }
-    }]);
+          })
+        )
+      );
+    }
+  }]);
 
-    return ImagePreviewer;
+  return ImagePreviewer;
 }(_react2.default.Component);
 
 exports.default = ImagePreviewer;

lib/components/ImagePreviewer/ImagePreviewer.less

@@ -1,114 +1,117 @@
 .container {
-    .toolbar {
-        border-bottom: 1px solid #f2f2f2;
-        margin: 0 5px;
-        padding-bottom: 10px;
-        .button {
-            padding: 5px 10px;
-            cursor: pointer;
-            &.reversal i {
-                transform: rotate3d(0, 1, 0, 180deg);
-            }
-        }
+  .toolbar {
+    border-bottom: 1px solid #f2f2f2;
+    margin: 0 5px;
+    padding-bottom: 10px;
+    .button {
+      padding: 5px 10px;
+      cursor: pointer;
+      &.reversal i {
+        transform: rotate3d(0, 1, 0, 180deg);
+      }
     }
-    .pictureWrapper {
-        position: relative; // width: 100%;
-        // padding-bottom: 68%;
-        // height: 0;
-        text-align: center;
-        margin-top: 15px;
-        padding: 0 5px;
-        .tools {
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            .item {
-                width: 33%;
-                display: inline-block;
-                height: 100%;
-                &.left {
-                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined'), auto;
-                }
-                &.shrink {
-                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined'), auto;
-                }
-                &.right {
-                    cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined'), auto;
-                }
-            }
-        }
-        .picture {
-            max-width: 100%;
-            max-height: 400px;
+  }
+  .pictureWrapper {
+    position: relative; // width: 100%;
+    // padding-bottom: 68%;
+    // height: 0;
+    text-align: center;
+    margin-top: 15px;
+    padding: 0 5px;
+    .tools {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      .item {
+        width: 33%;
+        display: inline-block;
+        height: 100%;
+        &.left {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+            auto;
         }
-        .tool() {
-            position: absolute;
-            width: 50px;
-            background-color: transparent;
-            z-index: 100;
-            opacity: 0.5;
-            font-size: 50px;
-            text-align: left;
-            cursor: pointer;
-            &:hover {
-                background-color: #fff;
-            }
+        &.shrink {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+            auto;
         }
-        .prev {
-            .tool();
-            left: 5px;
-            top: 0;
-            bottom: 0;
+        &.right {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+            auto;
         }
-        .next {
-            .tool();
-            right: 5px;
-            top: 0;
-            bottom: 0;
-        }
-        .middle {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-        } // .picture {
-        //     position: absolute;
-        //     bottom: 0;
-        //     top: 0;
-        //     left: 5px;
-        //     right: 5px;
-        //     background-size: contain;
-        //     background-position: center;
-        // }
+      }
     }
-    .list {
-        font-size: 0;
-        margin-top: 25px;
-        .wrapper {
-            width: 11.1%;
-            height: 0;
-            padding-bottom: 11.1%;
-            position: relative;
-            display: inline-block;
-            border-radius: 5px;
-            border: 1px solid transparent;
-            opacity: 0.5;
-            &.active {
-                border: 1px solid #fc4747;
-                opacity: 1;
-            }
-            .thumbnail {
-                position: absolute;
-                top: 5px;
-                bottom: 5px;
-                left: 5px;
-                right: 5px;
-                background-size: cover;
-                background-position: center;
-                border-radius: 5px;
-                cursor: pointer;
-            }
-        }
+    .picture {
+      max-width: 100%;
+      max-height: 400px;
+    }
+    .tool() {
+      position: absolute;
+      width: 50px;
+      background-color: transparent;
+      z-index: 100;
+      opacity: 0.5;
+      font-size: 50px;
+      text-align: left;
+      cursor: pointer;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .prev {
+      .tool();
+      left: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .next {
+      .tool();
+      right: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .middle {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    } // .picture {
+    //     position: absolute;
+    //     bottom: 0;
+    //     top: 0;
+    //     left: 5px;
+    //     right: 5px;
+    //     background-size: contain;
+    //     background-position: center;
+    // }
+  }
+  .list {
+    font-size: 0;
+    margin-top: 25px;
+    .wrapper {
+      width: 11.1%;
+      height: 0;
+      padding-bottom: 11.1%;
+      position: relative;
+      display: inline-block;
+      border-radius: 5px;
+      border: 1px solid transparent;
+      opacity: 0.5;
+      &.active {
+        border: 1px solid #fc4747;
+        opacity: 1;
+      }
+      .thumbnail {
+        position: absolute;
+        top: 5px;
+        bottom: 5px;
+        left: 5px;
+        right: 5px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 5px;
+        cursor: pointer;
+      }
     }
+  }
 }

lib/constant.js

@@ -23,7 +23,7 @@ var AVATAR = exports.AVATAR = "";
 
 var IMAGE_SPLIT = exports.IMAGE_SPLIT = "IMAGE_SPLIT";
 
-var IMAGE_PROCESS = exports.IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';
-var IMAGE_PROCESS_SMALL = exports.IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';
-var IMAGE_PROCESS_LARGE = exports.IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';
+var IMAGE_PROCESS = exports.IMAGE_PROCESS = "?x-oss-process=image/resize,h_350";
+var IMAGE_PROCESS_SMALL = exports.IMAGE_PROCESS_SMALL = "?x-oss-process=image/resize,h_100";
+var IMAGE_PROCESS_LARGE = exports.IMAGE_PROCESS_LARGE = "?x-oss-process=image/resize,h_500";
 //# sourceMappingURL=constant.js.map

lib/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT","IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB;;AAEA,IAAMC,wCAAgB,mCAAtB;AACA,IAAMC,oDAAsB,mCAA5B;AACA,IAAMC,oDAAsB,mCAA5B","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n\r\nexport const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';\r\nexport const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';\r\nexport const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';\r\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","URL_REGEXP","REGEXP","AVATAR","IMAGE_SPLIT","IMAGE_PROCESS","IMAGE_PROCESS_SMALL","IMAGE_PROCESS_LARGE"],"mappings":";;;;;AAAO,IAAMA,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,6CAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,kCAAa,oGAAnB;;AAEA,IAAMC,0BAAS,eAAf;;AAEA,IAAMC,0BAAS,EAAf;;AAEA,IAAMC,oCAAc,aAApB;;AAEA,IAAMC,wCAAgB,mCAAtB;AACA,IAAMC,oDAAsB,mCAA5B;AACA,IAAMC,oDAAsB,mCAA5B","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\r\n\r\nexport const LIMIT = 10; // 默认 limit\r\n\r\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\r\nexport const OSS_BUCKET = \"links-comment\";\r\nexport const DRIVER_LICENSE_PATH = \"/comment\";\r\n\r\nexport const OSS_LINK = \"//links-comment.oss-cn-beijing.aliyuncs.com\";\r\n\r\nexport const MAX_UPLOAD_NUMBER = 4;\r\n\r\nexport const URL_REGEXP = /((http(s)?:)?\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\r\n\r\nexport const REGEXP = /\\[[^[\\]]+?\\]/g;\r\n\r\nexport const AVATAR = \"\";\r\n\r\nexport const IMAGE_SPLIT = \"IMAGE_SPLIT\";\r\n\r\nexport const IMAGE_PROCESS = \"?x-oss-process=image/resize,h_350\";\r\nexport const IMAGE_PROCESS_SMALL = \"?x-oss-process=image/resize,h_100\";\r\nexport const IMAGE_PROCESS_LARGE = \"?x-oss-process=image/resize,h_500\";\r\n"]}

package.json

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

src/components/Editor/Emoji.js

@@ -7,39 +7,58 @@ import "./Emoji.css";
 
 // class Emoji
 
-const Emoji = ({ onClick }) => {
-  const content = [];
-  let curPage = [];
-  for (let i = 0; i < 115; i++) {
-    if (curPage.length < 20) {
-      curPage.push(emoji[i]);
-    } else {
-      content.push(curPage);
-      curPage = [];
+class Emoji extends React.Component {
+  next() {
+    if (this.carousel) {
+      this.carousel.next();
+    }
+  }
+
+  prev() {
+    if (this.carousel) {
+      this.carousel.prev();
     }
   }
-  if (curPage.length > 0) {
-    content.push(curPage);
+
+  render() {
+    const { onClick } = this.props;
+    const content = [];
+    let curPage = [];
+    for (let i = 0; i < 115; i++) {
+      if (curPage.length < 30) {
+        curPage.push(emoji[i]);
+      } else {
+        content.push(curPage);
+        curPage = [];
+      }
+    }
+    if (curPage.length > 0) {
+      content.push(curPage);
+    }
+    return (
+      <Carousel
+        ref={node => {
+          this.carousel = node;
+        }}
+      >
+        {content.map((page, index) => (
+          <div key={index} className="emoji">
+            {page.map((item, index) => (
+              <div className="item" key={item.value}>
+                <span className="helper" />
+                <img
+                  src={`${prefixUrl}${item.value}.${item.ext}`}
+                  alt={item.title}
+                  style={{ display: "inline-block" }}
+                  onClick={() => onClick(item.title)}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </Carousel>
+    );
   }
-  return (
-    <Carousel>
-      {content.map((page, index) => (
-        <div key={index} className="emoji">
-          {page.map((item, index) => (
-            <div className="item" key={item.value}>
-              <span className="helper" />
-              <img
-                src={`${prefixUrl}${item.value}.${item.ext}`}
-                alt={item.title}
-                style={{ display: "inline-block" }}
-                onClick={() => onClick(item.title)}
-              />
-            </div>
-          ))}
-        </div>
-      ))}
-    </Carousel>
-  );
-};
+}
 
 export default Emoji;

src/components/Editor/index.js

@@ -27,6 +27,7 @@ class Editor extends React.Component {
     this.handleUpload = this.handleUpload.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.resetState = this.resetState.bind(this);
+    this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
   }
 
   componentDidMount() {
@@ -35,6 +36,18 @@ class Editor extends React.Component {
     }
   }
 
+  handleEmojiScroll(e) {
+    if (!this.emoji) {
+      return;
+    }
+    e.preventDefault();
+    if (e.deltaY > 0) {
+      this.emoji.next();
+    } else if (e.deltaY < 0) {
+      this.emoji.prev();
+    }
+  }
+
   /**
    * 编辑器的值改变事件
    * 将最新的值存储到 state 中
@@ -200,8 +213,16 @@ class Editor extends React.Component {
                   placement="bottomLeft"
                   autoAdjustOverflow={false}
                   content={
-                    <div style={{ width: 200 }}>
-                      <Emoji onClick={this.handleClickEmoji} />
+                    <div
+                      style={{ width: 240 }}
+                      onWheel={this.handleEmojiScroll}
+                    >
+                      <Emoji
+                        onClick={this.handleClickEmoji}
+                        ref={node => {
+                          this.emoji = node;
+                        }}
+                      />
                     </div>
                   }
                   overlayClassName="comment-emoji-popover"