publish version 0.1.0

lib/App.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Editor = undefined;
 
 var _message2 = require("antd/es/message");
 
@@ -18,6 +19,10 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _axios = require("./axios");
 
 var _axios2 = _interopRequireDefault(_axios);
@@ -36,6 +41,10 @@ var _CommentList = require("./components/CommentList");
 
 var _CommentList2 = _interopRequireDefault(_CommentList);
 
+var _Editor = require("./components/Editor");
+
+var _Editor2 = _interopRequireDefault(_Editor);
+
 require("./App.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,8 +54,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 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; }
-// import * as mock from "./mock";
-
 
 var App = function (_Component) {
   _inherits(App, _Component);
@@ -81,9 +88,7 @@ var App = function (_Component) {
 
   _createClass(App, [{
     key: "componentDidMount",
-    value: function componentDidMount() {
-      this.sGetComment();
-    }
+    value: function componentDidMount() {}
 
     /**
      * 改变 loading 状态
@@ -110,24 +115,16 @@ var App = function (_Component) {
       var _this2 = this;
 
       var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$type = _ref.type,
-          type = _ref$type === undefined ? 1 : _ref$type,
-          _ref$businessId = _ref.businessId,
-          businessId = _ref$businessId === undefined ? 1 : _ref$businessId,
           _ref$page = _ref.page,
           page = _ref$page === undefined ? 1 : _ref$page;
 
       this.handleChangeLoading("sGetComment", true);
-      // 测试数据列表
-      // const { comments } = mock;
-      // this.setState({
-      //   list: comments.list,
-      //   page: 1,
-      //   total: 100
-      // });
-      // this.handleChangeLoading("sGetComment", false);
-      // return;
-      _axios2.default.get(_constant.URL + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
+      var _props = this.props,
+          API = _props.API,
+          type = _props.type,
+          businessId = _props.businessId;
+
+      _axios2.default.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
         var _response$data = response.data,
             list = _response$data.list,
             page = _response$data.page,
@@ -181,7 +178,9 @@ var App = function (_Component) {
           page = _ref2$page === undefined ? 1 : _ref2$page;
 
       this.handleChangeLoading("sGetReply", true);
-      _axios2.default.get(_constant.URL + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
+      var API = this.props.API;
+
+      _axios2.default.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
         var replies = response.data.list;
 
         if (!replies) {
@@ -219,19 +218,28 @@ var App = function (_Component) {
 
     /**
      * 添加评论
-     * @param {object} data { type, business_id, content }
+     * @param {string} content comment content
      */
 
   }, {
     key: "sCreateComment",
-    value: function sCreateComment(data) {
+    value: function sCreateComment(content) {
       var _this4 = this;
 
-      if (!data.content) return _message3.default.error("评论内容不能为空 ");
+      if (!content) return _message3.default.error("评论内容不能为空 ");
       this.handleChangeLoading("sCreateComment", true);
-      (0, _axios2.default)(_constant.URL + "/comments", {
+      var _props2 = this.props,
+          API = _props2.API,
+          type = _props2.type,
+          businessId = _props2.businessId;
+
+      (0, _axios2.default)(API + "/comments", {
         method: "post",
-        data: data,
+        data: {
+          type: type,
+          business_id: businessId,
+          content: content
+        },
         withCredentials: true
       }).then(function (response) {
         _message3.default.success("评论成功！");
@@ -268,12 +276,13 @@ var App = function (_Component) {
 
       if (!data.content) return _message3.default.error("回复内容不能为空 ");
       this.handleChangeLoading("sCreateReply", true);
-      (0, _axios2.default)(_constant.URL + "/replies", {
+      var API = this.props.API;
+
+      (0, _axios2.default)(API + "/replies", {
         method: "post",
         data: data,
         withCredentials: true
       }).then(function (response) {
-        // console.log("response: ", response.data);
         // // 将该条数据插入到 list 中
         // const list = this.state.list.map(item => {
         //   if (item.id === data.comment_id) {
@@ -310,7 +319,9 @@ var App = function (_Component) {
       var _this6 = this;
 
       this.handleChangeLoading("sCommentFavor", true);
-      (0, _axios2.default)(_constant.URL + "/comments/" + commentId + "/favor", {
+      var API = this.props.API;
+
+      (0, _axios2.default)(API + "/comments/" + commentId + "/favor", {
         method: favored ? "delete" : "put",
         withCredentials: true
       }).then(function (response) {
@@ -345,7 +356,9 @@ var App = function (_Component) {
       var _this7 = this;
 
       this.handleChangeLoading("sOssSts", true);
-      _axios2.default.get(_constant.URL + "/oss/sts").then(function (response) {
+      var API = this.props.API;
+
+      _axios2.default.get(API + "/oss/sts").then(function (response) {
         _this7.setState({ oss: _extends({}, response.data) });
       }).catch(function (error) {
         if (error.response && error.response.data && error.response.data.msg) {
@@ -361,7 +374,7 @@ var App = function (_Component) {
     key: "render",
     value: function render() {
       // 添加到 Context 的数据
-      var value = _extends({}, this.state, {
+      var value = _extends({}, this.state, this.props, {
         sCreateComment: this.sCreateComment,
         sGetComment: this.sGetComment,
         sCommentFavor: this.sCommentFavor,
@@ -376,8 +389,8 @@ var App = function (_Component) {
         _react2.default.createElement(
           "div",
           { className: "comment" },
-          _react2.default.createElement(_CommentInput2.default, null),
-          _react2.default.createElement(
+          this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
+          this.props.showList && _react2.default.createElement(
             "div",
             { style: { marginTop: 20 } },
             _react2.default.createElement(_CommentList2.default, null)
@@ -390,5 +403,20 @@ var App = function (_Component) {
   return App;
 }(_react.Component);
 
+App.propTypes = {
+  type: _propTypes2.default.number.isRequired, // 评论的 type
+  businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
+  API: _propTypes2.default.string, // 评论的 API 前缀
+  showList: _propTypes2.default.bool, // 是否显示评论列表
+  showEditor: _propTypes2.default.bool // 是否显示评论输入框
+};
+
+App.defaultProps = {
+  API: "http://api.links123.net/comment/v1",
+  showList: true,
+  showEditor: true
+};
+
+exports.Editor = _Editor2.default;
 exports.default = App;
 //# sourceMappingURL=App.js.map

lib/CHANGELOG.md

@@ -0,0 +1,12 @@
+# CHANGELOG
+
+
+## 0.1.0
+
+- [x] 不兼容更新。
+- [x] 添加了很多 `Props`
+- [x] 组件导出为 `Comment` 和 `Editor`
+
+
+
+

lib/components/CommentInput/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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; }; }();
 
 var _react = require("react");
@@ -20,10 +22,6 @@ var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
 
-var _Editor = require("../Editor");
-
-var _Editor2 = _interopRequireDefault(_Editor);
-
 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"); } }
@@ -32,11 +30,6 @@ 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 PLACEHOLDER = {
-  normal: "说点什么吧...",
-  default: "说点什么吧..."
-};
-
 var CommentInput = function (_Component) {
   _inherits(CommentInput, _Component);
 
@@ -61,8 +54,8 @@ var CommentInput = function (_Component) {
 
   _createClass(CommentInput, [{
     key: "handleChange",
-    value: function handleChange(e) {
-      this.setState({ value: e.target.value });
+    value: function handleChange(value) {
+      this.setState({ value: value });
     }
   }, {
     key: "handleChangeFileList",
@@ -76,6 +69,12 @@ var CommentInput = function (_Component) {
 
       value += "[" + emojiId + "]";
       this.setState({ value: value });
+      _react2.default.Children.forEach(this.props.content, function (child) {
+        // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
+        if (child.props.onChange) {
+          child.props.onChange(value);
+        }
+      });
     }
   }, {
     key: "handleUpload",
@@ -96,6 +95,7 @@ var CommentInput = function (_Component) {
           fileList = _state.fileList;
 
       if (fileList.length) {
+        value += "<br/>";
         fileList.forEach(function (item) {
           value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
         });
@@ -109,8 +109,6 @@ var CommentInput = function (_Component) {
 
       if (type === "normal") {
         this.props.app.sCreateComment({
-          type: 1,
-          business_id: "1",
           content: value
         });
       } else if (type === "comment") {
@@ -129,16 +127,38 @@ var CommentInput = function (_Component) {
           return handleToggleInput();
         });
       }
+
+      _react2.default.Children.forEach(this.props.content, function (child) {
+        // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
+        if (child.props.onSubmit) {
+          child.props.onSubmit(value);
+        }
+      });
     }
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var type = this.props.type;
       var _state2 = this.state,
           value = _state2.value,
           fileList = _state2.fileList;
 
 
+      var childrenWithProps = _react2.default.Children.map(this.props.content, function (child) {
+        return _react2.default.cloneElement(child, _extends({
+          value: value,
+          fileList: fileList,
+          onChange: _this2.handleChange,
+          onSubmit: _this2.handleSubmit,
+          onChangeFileList: _this2.handleChangeFileList,
+          onChangeEmoji: _this2.handleChangeEmoji,
+          onUpload: _this2.handleUpload,
+          loading: _this2.props.app.loading.sCreateComment
+        }, child.props));
+      });
+
       return _react2.default.createElement(
         "div",
         null,
@@ -170,17 +190,7 @@ var CommentInput = function (_Component) {
         _react2.default.createElement(
           "div",
           { style: { marginTop: 40 } },
-          _react2.default.createElement(_Editor2.default, {
-            value: value,
-            placeholder: PLACEHOLDER[type] || PLACEHOLDER.default,
-            fileList: fileList,
-            onChange: this.handleChange,
-            onSubmit: this.handleSubmit,
-            onChangeFileList: this.handleChangeFileList,
-            onChangeEmoji: this.handleChangeEmoji,
-            onUpload: this.handleUpload,
-            loading: this.props.app.loading.sCreateComment
-          })
+          childrenWithProps
         )
       );
     }

lib/components/CommentList/index.js

@@ -47,6 +47,11 @@ var CommentList = function (_Component) {
   }
 
   _createClass(CommentList, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.props.app.sGetComment();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _props$app = this.props.app,

lib/components/CommentList/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","list","page","loading","isNoMoreComment","sGetComment","spinning","Boolean","sCommentFavor","map","item","id","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;6BAEQ;AAAA,uBAOH,KAAKD,KAAL,CAAWE,GAPR;AAAA,UAELC,IAFK,cAELA,IAFK;AAAA,UAGLC,IAHK,cAGLA,IAHK;AAAA,UAILC,OAJK,cAILA,OAJK;AAAA,UAKLC,eALK,cAKLA,eALK;AAAA,UAMLC,WANK,cAMLA,WANK;;;AASP,UAAMC,WAAWC,QAAQJ,QAAQE,WAAR,IAAuBF,QAAQK,aAAvC,CAAjB;AACA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUF,QAAhB;AACGL,eAAKQ,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CADH;AAKG,WAACP,eAAD,IACC;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMC,YAAY,EAAEH,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AANJ;AADF,OADF;AAkBD;;;;EAlCuBU,gB;;AAqC1Bf,YAAYgB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQhB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin } from \"antd\";\nimport Comment from \"../../Comment\";\nimport CommentBox from \"../CommentBox\";\nimport \"./index.css\";\n\nclass CommentList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  render() {\n    const {\n      list,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment\n    } = this.props.app;\n\n    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment && (\n            <div\n              className=\"showMore\"\n              onClick={() => sGetComment({ page: page + 1 })}\n            >\n              <span>查看更多评论</span>\n            </div>\n          )}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","page","loading","isNoMoreComment","spinning","Boolean","sCommentFavor","map","item","id","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAOH,KAAKH,KAAL,CAAWE,GAPR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,IAHK,cAGLA,IAHK;AAAA,UAILC,OAJK,cAILA,OAJK;AAAA,UAKLC,eALK,cAKLA,eALK;AAAA,UAMLJ,WANK,cAMLA,WANK;;;AASP,UAAMK,WAAWC,QAAQH,QAAQH,WAAR,IAAuBG,QAAQI,aAAvC,CAAjB;AACA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUF,QAAhB;AACGJ,eAAKO,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CADH;AAKG,WAACN,eAAD,IACC;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMJ,YAAY,EAAEE,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AANJ;AADF,OADF;AAkBD;;;;EAtCuBS,gB;;AAyC1Bf,YAAYgB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQhB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin } from \"antd\";\nimport Comment from \"../../Comment\";\nimport CommentBox from \"../CommentBox\";\nimport \"./index.css\";\n\nclass CommentList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  componentWillMount() {\n    this.props.app.sGetComment();\n  }\n\n  render() {\n    const {\n      list,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment\n    } = this.props.app;\n\n    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment && (\n            <div\n              className=\"showMore\"\n              onClick={() => sGetComment({ page: page + 1 })}\n            >\n              <span>查看更多评论</span>\n            </div>\n          )}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}

lib/components/Editor/Emoji.js

@@ -25,6 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
 
+// class Emoji
+
 var Emoji = function Emoji(_ref) {
   var _onClick = _ref.onClick;
 

lib/components/Editor/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","i","emoji","length","push","map","item","index","value","prefixUrl","ext","title","display"],"mappings":";;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OAAiB;AAAA,MAAdC,QAAc,QAAdA,OAAc;;AAC7B,MAAMC,UAAU,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT,CAAhB;;AAEA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIC,gBAAMC,MAA1B,EAAkCF,GAAlC,EAAuC;AACrC,QAAIA,IAAI,EAAR,EAAY;AACVD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFD,MAEO,IAAIA,IAAI,EAAR,EAAY;AACjBD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFM,MAEA,IAAIA,IAAIC,gBAAMC,MAAd,EAAsB;AAC3BH,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD;AACF;AACD,SACE;AAAA;AAAA;AACE;AAAA;AAAA;AACGD,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KADF;AAcE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KAdF;AA2BE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH;AA3BF,GADF;AA2CD,CAvDD;;kBAyDeb,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\nimport emoji, { prefixUrl, ext } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\nconst Emoji = ({ onClick }) => {\n  const content = [[], [], []];\n\n  for (let i = 0; i < emoji.length; i++) {\n    if (i < 20) {\n      content[0].push(emoji[i]);\n    } else if (i < 40) {\n      content[1].push(emoji[i]);\n    } else if (i < emoji.length) {\n      content[2].push(emoji[i]);\n    }\n  }\n  return (\n    <Carousel>\n      <div>\n        {content[0].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[1].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[2].map(item => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n    </Carousel>\n  );\n};\n\nexport default Emoji;\n"]}
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","i","emoji","length","push","map","item","index","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,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT,CAAhB;;AAEA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIC,gBAAMC,MAA1B,EAAkCF,GAAlC,EAAuC;AACrC,QAAIA,IAAI,EAAR,EAAY;AACVD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFD,MAEO,IAAIA,IAAI,EAAR,EAAY;AACjBD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFM,MAEA,IAAIA,IAAIC,gBAAMC,MAAd,EAAsB;AAC3BH,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD;AACF;AACD,SACE;AAAA;AAAA;AACE;AAAA;AAAA;AACGD,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KADF;AAcE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KAdF;AA2BE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH;AA3BF,GADF;AA2CD,CAvDD;;kBAyDeb,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\nimport emoji, { prefixUrl, ext } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nconst Emoji = ({ onClick }) => {\n  const content = [[], [], []];\n\n  for (let i = 0; i < emoji.length; i++) {\n    if (i < 20) {\n      content[0].push(emoji[i]);\n    } else if (i < 40) {\n      content[1].push(emoji[i]);\n    } else if (i < emoji.length) {\n      content[2].push(emoji[i]);\n    }\n  }\n  return (\n    <Carousel>\n      <div>\n        {content[0].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[1].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[2].map(item => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n    </Carousel>\n  );\n};\n\nexport default Emoji;\n"]}

lib/components/Editor/index.js

@@ -20,6 +20,8 @@ var _input = require("antd/es/input");
 
 var _input2 = _interopRequireDefault(_input);
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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/button/style/css");
@@ -34,6 +36,10 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _constant = require("../../constant");
 
 var _Upload = require("./Upload");
@@ -52,12 +58,22 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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; } // https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
-
-// import styles from "./index.less";
-
+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 TextArea = _input2.default.TextArea;
+// 设置 Editor 组件的默认值
+// 不能在 Editor.defaultProps 中设置
+// 因为 Editor 在 ComponentInput 中调用
+// 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
+
+var EditorDefaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧...",
+  showEmoji: true,
+  showUpload: true,
+  submitText: "发表",
+  onChange: function onChange() {}
+};
 
 var Editor = function (_React$Component) {
   _inherits(Editor, _React$Component);
@@ -97,21 +113,30 @@ var Editor = function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          value = _props.value,
-          onChange = _props.onChange,
-          placeholder = _props.placeholder,
-          fileList = _props.fileList,
-          onChangeFileList = _props.onChangeFileList,
-          onUpload = _props.onUpload;
+      var props = _extends({}, EditorDefaultProps, this.props);
+      var value = props.value,
+          _onChange = props.onChange,
+          onSubmit = props.onSubmit,
+          loading = props.loading,
+          placeholder = props.placeholder,
+          fileList = props.fileList,
+          onChangeFileList = props.onChangeFileList,
+          rows = props.rows,
+          onUpload = props.onUpload,
+          showEmoji = props.showEmoji,
+          showUpload = props.showUpload,
+          submitText = props.submitText;
+
 
       return _react2.default.createElement(
         "div",
         { className: "editor" },
         _react2.default.createElement(TextArea, {
           value: value,
-          onChange: onChange,
-          rows: 5,
+          onChange: function onChange(e) {
+            return _onChange(e.target.value);
+          },
+          rows: rows,
           placeholder: placeholder
         }),
         _react2.default.createElement(
@@ -120,7 +145,7 @@ var Editor = function (_React$Component) {
           _react2.default.createElement(
             "div",
             { style: { float: "left", margin: "8px 11px" } },
-            _react2.default.createElement(
+            showEmoji && _react2.default.createElement(
               _popover2.default,
               {
                 trigger: "click",
@@ -135,14 +160,16 @@ var Editor = function (_React$Component) {
               },
               _react2.default.createElement(_icon2.default, { type: "smile-o", className: "icon" })
             ),
-            _react2.default.createElement(
+            showUpload && _react2.default.createElement(
               _popover2.default,
               {
                 visible: this.state.showUpload,
                 overlayStyle: { zIndex: 999 },
                 content: _react2.default.createElement(
                   "div",
-                  { style: { width: 112 * _constant.MAX_UPLOAD_NUMBER, minHeight: 100 } },
+                  {
+                    style: { width: 112 * _constant.MAX_UPLOAD_NUMBER, minHeight: 100 }
+                  },
                   _react2.default.createElement(_Upload2.default, {
                     onChangeFileList: onChangeFileList,
                     onUpload: onUpload,
@@ -193,12 +220,8 @@ var Editor = function (_React$Component) {
             { style: { float: "right", margin: "5px 11px" } },
             _react2.default.createElement(
               _button2.default,
-              {
-                onClick: this.props.onSubmit,
-                type: "primary",
-                loading: this.props.loading
-              },
-              "\u53D1\u8868"
+              { onClick: onSubmit, type: "primary", loading: loading },
+              submitText
             )
           )
         )
@@ -209,5 +232,14 @@ var Editor = function (_React$Component) {
   return Editor;
 }(_react2.default.Component);
 
+Editor.propTypes = {
+  rows: _propTypes2.default.number,
+  placeholder: _propTypes2.default.string,
+  showEmoji: _propTypes2.default.bool,
+  showUpload: _propTypes2.default.bool,
+  submitText: _propTypes2.default.string,
+  onChange: _propTypes2.default.func
+};
+
 exports.default = Editor;
 //# sourceMappingURL=index.js.map

lib/constant.js

@@ -3,9 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-// export const URL = "http://121.41.20.11:8082/v1";
-var URL = exports.URL = "http://api.links123.net/comment/v1";
-
 var ERROR_DEFAULT = exports.ERROR_DEFAULT = "出错了！";
 
 var LIMIT = exports.LIMIT = 10; // 默认 limit

lib/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constant.js"],"names":["URL","ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP"],"mappings":";;;;;AAAA;AACO,IAAMA,oBAAM,oCAAZ;;AAEA,IAAMC,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,kDAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,UAAf","file":"constant.js","sourcesContent":["// export const URL = \"http://121.41.20.11:8082/v1\";\nexport const URL = \"http://api.links123.net/comment/v1\";\n\nexport const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"http://links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const REGEXP = /\\[.+?\\]/g;\n"]}
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP"],"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,kDAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,UAAf","file":"constant.js","sourcesContent":["export const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"http://links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const REGEXP = /\\[.+?\\]/g;\n"]}

lib/index.js

@@ -18,6 +18,24 @@ var _registerServiceWorker2 = _interopRequireDefault(_registerServiceWorker);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-_reactDom2.default.render(_react2.default.createElement(_App2.default, null), document.getElementById("root-comment"));
+var props = {
+  type: 1,
+  businessId: "1",
+  API: "http://api.links123.net/comment/v1",
+  showList: false
+};
+
+var editorProps = {
+  showEmoji: true,
+  placeholder: "说点什么吧",
+  rows: 5
+  // onSubmit={v => console.log()} // TODO...
+};
+
+_reactDom2.default.render(_react2.default.createElement(
+  _App2.default,
+  props,
+  _react2.default.createElement(_App.Editor, editorProps)
+), document.getElementById("root-comment"));
 (0, _registerServiceWorker2.default)();
 //# sourceMappingURL=index.js.map

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["ReactDOM","render","document","getElementById"],"mappings":";;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEAA,mBAASC,MAAT,CAAgB,8BAAC,aAAD,OAAhB,EAAyBC,SAASC,cAAT,CAAwB,cAAxB,CAAzB;AACA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nReactDOM.render(<App />, document.getElementById(\"root-comment\"));\nregisterServiceWorker();\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["props","type","businessId","API","showList","editorProps","showEmoji","placeholder","rows","ReactDOM","render","document","getElementById"],"mappings":";;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,QAAQ;AACZC,QAAM,CADM;AAEZC,cAAY,GAFA;AAGZC,OAAK,oCAHO;AAIZC,YAAU;AAJE,CAAd;;AAOA,IAAMC,cAAc;AAClBC,aAAW,IADO;AAElBC,eAAa,OAFK;AAGlBC,QAAM;AACN;AAJkB,CAApB;;AAOAC,mBAASC,MAAT,CACE;AAAC,eAAD;AAASV,OAAT;AACE,gCAAC,WAAD,EAAYK,WAAZ;AADF,CADF,EAIEM,SAASC,cAAT,CAAwB,cAAxB,CAJF;AAMA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nconst props = {\n  type: 1,\n  businessId: \"1\",\n  API: \"http://api.links123.net/comment/v1\",\n  showList: false\n};\n\nconst editorProps = {\n  showEmoji: true,\n  placeholder: \"说点什么吧\",\n  rows: 5\n  // onSubmit={v => console.log()} // TODO...\n};\n\nReactDOM.render(\n  <App {...props}>\n    <Editor {...editorProps} />\n  </App>,\n  document.getElementById(\"root-comment\")\n);\nregisterServiceWorker();\n"]}

lib/lang/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+// 语言包
+// 英文短语和中文提示的对应
+var data = {
+  "auth failed": "请先登录",
+  "create comment failed": "创建评论失败",
+  "comment favor failed": "评论点赞失败",
+  "delete comment favor failed": "评论取消点赞失败",
+  "get comments failed": "获取评论列表失败",
+  "create reply failed": "创建回复失败",
+  "reply favor failed": "回复点赞失败",
+  "delete reply favor failed": "删除回复点赞失败",
+  "get replies failed": "获取回复列表失败"
+};
+
+exports.default = data;
+//# sourceMappingURL=index.js.map

lib/lang/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lang/index.js"],"names":["data"],"mappings":";;;;;AAAA;AACA;AACA,IAAMA,OAAO;AACX,iBAAe,MADJ;AAEX,2BAAyB,QAFd;AAGX,0BAAwB,QAHb;AAIX,iCAA+B,UAJpB;AAKX,yBAAuB,UALZ;AAMX,yBAAuB,QANZ;AAOX,wBAAsB,QAPX;AAQX,+BAA6B,UARlB;AASX,wBAAsB;AATX,CAAb;;kBAYeA,I","file":"index.js","sourcesContent":["// 语言包\n// 英文短语和中文提示的对应\nconst data = {\n  \"auth failed\": \"请先登录\",\n  \"create comment failed\": \"创建评论失败\",\n  \"comment favor failed\": \"评论点赞失败\",\n  \"delete comment favor failed\": \"评论取消点赞失败\",\n  \"get comments failed\": \"获取评论列表失败\",\n  \"create reply failed\": \"创建回复失败\",\n  \"reply favor failed\": \"回复点赞失败\",\n  \"delete reply favor failed\": \"删除回复点赞失败\",\n  \"get replies failed\": \"获取回复列表失败\"\n};\n\nexport default data;\n"]}