Merge branch 'component' of node/npmcomment into master

README.md

@@ -17,13 +17,15 @@ $ yarn add git+https://git.links123.net/npm/comment.git
 然后在代码里面引入 `comment` 组件：
 
 ```jsx
-import Comment from 'comment'
+import Comment, { Editor } from 'comment'
 
 // ...
 
 render() {
   return (
-    <Comment />
+    <Comment>
+      <Editor />
+    </Comment>
   )
 }
 ```
@@ -33,11 +35,43 @@ render() {
 
 ### 作为静态文件引入
 
-首先引入 OSS SDK，用于直传文件到 OSS。
+作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`：
 
-然后分别通过 link 和 script 标签引入打包后的文件。
+```js
+// ...
+const props = {
+  type: 1,
+  businessId: "1",
+  API: "http://api.links123.net/comment/v1",
+  showList: false
+};
+
+const editorProps = {
+  showEmoji: true,
+  placeholder: "说点什么吧",
+  rows: 5,
+};
+
+
+// ...
+<App {...props}>
+    <Editor {...editorProps} />
+</App>
+```
+
+然后再进行打包：
+
+```
+$ yarn build
+```
+
+打包后会得到静态问卷，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
 
-再创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
+
+然后还需要引入 OSS SDK，用于直传文件到 OSS。
+
+
+最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
 
 如下所示：
 
@@ -59,6 +93,32 @@ render() {
 </html>
 ```
 
+## Props
+
+#### Comment
+
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| type  | number |          | true     | 评论的 type  |
+| businessId | string |     | true     | 评论的 business id|
+| API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
+| showList | boolean |   true  | true     | 是否显示评论列表|
+| showEditor | boolean |   true  | true     | 是否显示评论输入框|
+
+
+##### Editor
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| rows  | number |       5   | false     | 编辑器的高度  |
+| placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
+| submitText | string |  发表  | false     | 提交按钮的文字|
+| showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
+| showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
+| onChange | function |     | false     | 编辑器内容改变的回调函数|
+| onSubmit | function |     | false     | TODO... 尚未完成。点击提交按钮的回调函数|
+
 
 ## 开发
 
@@ -76,4 +136,6 @@ $ yarn start
 ## TODO
 
 - [ ] 前后端统一错误码
-- [ ] type 和 businessID 的定义
+- [x] type 和 businessID 的定义
+- [ ] Editor onSubmit 回调
+

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"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [
@@ -17,6 +17,7 @@
     "antd": "^3.6.6",
     "axios": "^0.18.0",
     "dayjs": "^1.7.2",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4",
@@ -30,7 +31,7 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "prettier": "prettier --write src/**/*.{js,jsx,json,css,less}",
+    "prettier": "prettier --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",

src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { message } from "antd";
 import axios from "./axios";
-import { URL, ERROR_DEFAULT, LIMIT } from "./constant";
+import { ERROR_DEFAULT, LIMIT } from "./constant";
 import { CommentContext } from "./Comment";
 import { isFunction } from "./helper";
 import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
-// import * as mock from "./mock";
+import Editor from "./components/Editor";
 import "./App.css";
 
 class App extends Component {
@@ -34,9 +35,7 @@ class App extends Component {
     this.sOssSts = this.sOssSts.bind(this);
   }
 
-  componentDidMount() {
-    this.sGetComment();
-  }
+  componentDidMount() {}
 
   /**
    * 改变 loading 状态
@@ -52,20 +51,12 @@ class App extends Component {
   /**
    * 获取评论列表
    */
-  sGetComment({ type = 1, businessId = 1, page = 1 } = {}) {
+  sGetComment({ page = 1 } = {}) {
     this.handleChangeLoading("sGetComment", true);
-    // 测试数据列表
-    // const { comments } = mock;
-    // this.setState({
-    //   list: comments.list,
-    //   page: 1,
-    //   total: 100
-    // });
-    // this.handleChangeLoading("sGetComment", false);
-    // return;
+    const { API, type, businessId } = this.props;
     axios
       .get(
-        `${URL}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
+        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
       )
       .then(response => {
         const { list, page, total } = response.data;
@@ -106,8 +97,9 @@ class App extends Component {
    */
   sGetReply({ commentId, page = 1 } = {}) {
     this.handleChangeLoading("sGetReply", true);
+    const { API } = this.props;
     axios
-      .get(`${URL}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
+      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
         const { list: replies } = response.data;
         if (!replies) {
@@ -147,14 +139,19 @@ class App extends Component {
 
   /**
    * 添加评论
-   * @param {object} data { type, business_id, content }
+   * @param {string} content comment content
    */
-  sCreateComment(data) {
-    if (!data.content) return message.error("评论内容不能为空 ");
+  sCreateComment(content) {
+    if (!content) return message.error("评论内容不能为空 ");
     this.handleChangeLoading("sCreateComment", true);
-    axios(`${URL}/comments`, {
+    const { API, type, businessId } = this.props;
+    axios(`${API}/comments`, {
       method: "post",
-      data,
+      data: {
+        type,
+        business_id: businessId,
+        content
+      },
       withCredentials: true
     })
       .then(response => {
@@ -189,13 +186,13 @@ class App extends Component {
   sCreateReply(data, cb) {
     if (!data.content) return message.error("回复内容不能为空 ");
     this.handleChangeLoading("sCreateReply", true);
-    axios(`${URL}/replies`, {
+    const { API } = this.props;
+    axios(`${API}/replies`, {
       method: "post",
       data,
       withCredentials: true
     })
       .then(response => {
-        // console.log("response: ", response.data);
         // // 将该条数据插入到 list 中
         // const list = this.state.list.map(item => {
         //   if (item.id === data.comment_id) {
@@ -229,7 +226,8 @@ class App extends Component {
    */
   sCommentFavor(commentId, favored) {
     this.handleChangeLoading("sCommentFavor", true);
-    axios(`${URL}/comments/${commentId}/favor`, {
+    const { API } = this.props;
+    axios(`${API}/comments/${commentId}/favor`, {
       method: favored ? "delete" : "put",
       withCredentials: true
     })
@@ -262,8 +260,9 @@ class App extends Component {
    */
   sOssSts() {
     this.handleChangeLoading("sOssSts", true);
+    const { API } = this.props;
     axios
-      .get(`${URL}/oss/sts`)
+      .get(`${API}/oss/sts`)
       .then(response => {
         this.setState({ oss: { ...response.data } });
       })
@@ -283,6 +282,7 @@ class App extends Component {
     // 添加到 Context 的数据
     const value = {
       ...this.state,
+      ...this.props,
       sCreateComment: this.sCreateComment,
       sGetComment: this.sGetComment,
       sCommentFavor: this.sCommentFavor,
@@ -294,14 +294,34 @@ class App extends Component {
     return (
       <CommentContext.Provider value={value}>
         <div className="comment">
-          <CommentInput />
-          <div style={{ marginTop: 20 }}>
-            <CommentList />
-          </div>
+          {this.props.showEditor && (
+            <CommentInput content={this.props.children} />
+          )}
+          {this.props.showList && (
+            <div style={{ marginTop: 20 }}>
+              <CommentList />
+            </div>
+          )}
         </div>
       </CommentContext.Provider>
     );
   }
 }
 
+App.propTypes = {
+  type: PropTypes.number.isRequired, // 评论的 type
+  businessId: PropTypes.string.isRequired, // 评论的 business_id
+  API: PropTypes.string, // 评论的 API 前缀
+  showList: PropTypes.bool, // 是否显示评论列表
+  showEditor: PropTypes.bool // 是否显示评论输入框
+};
+
+App.defaultProps = {
+  API: "http://api.links123.net/comment/v1",
+  showList: true,
+  showEditor: true
+};
+
+export { Editor };
+
 export default App;

src/CHANGELOG.md

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

src/components/CommentInput/index.js

@@ -2,12 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { OSS_LINK } from "../../constant";
 import Comment from "../../Comment";
-import Editor from "../Editor";
-
-const PLACEHOLDER = {
-  normal: "说点什么吧...",
-  default: "说点什么吧..."
-};
 
 class CommentInput extends Component {
   constructor(props) {
@@ -25,8 +19,8 @@ class CommentInput extends Component {
     this.handleUpload = this.handleUpload.bind(this);
   }
 
-  handleChange(e) {
-    this.setState({ value: e.target.value });
+  handleChange(value) {
+    this.setState({ value });
   }
 
   handleChangeFileList(fileList) {
@@ -37,6 +31,12 @@ class CommentInput extends Component {
     let { value } = this.state;
     value += `[${emojiId}]`;
     this.setState({ value });
+    React.Children.forEach(this.props.content, child => {
+      // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
+      if (child.props.onChange) {
+        child.props.onChange(value);
+      }
+    });
   }
 
   handleUpload({ uid, path }) {
@@ -48,6 +48,7 @@ class CommentInput extends Component {
   handleSubmit() {
     let { value, fileMap, fileList } = this.state;
     if (fileList.length) {
+      value += "<br/>";
       fileList.forEach(item => {
         value += `[${OSS_LINK}${fileMap[item.uid]}]`;
       });
@@ -56,8 +57,6 @@ class CommentInput extends Component {
     const { type, commentId, replyId, handleToggleInput } = this.props;
     if (type === "normal") {
       this.props.app.sCreateComment({
-        type: 1,
-        business_id: "1",
         content: value
       });
     } else if (type === "comment") {
@@ -78,12 +77,33 @@ class CommentInput extends Component {
         () => handleToggleInput()
       );
     }
+
+    React.Children.forEach(this.props.content, child => {
+      // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
+      if (child.props.onSubmit) {
+        child.props.onSubmit(value);
+      }
+    });
   }
 
   render() {
     const { type } = this.props;
     const { value, fileList } = this.state;
 
+    const childrenWithProps = React.Children.map(this.props.content, child => {
+      return React.cloneElement(child, {
+        value: value,
+        fileList: fileList,
+        onChange: this.handleChange,
+        onSubmit: this.handleSubmit,
+        onChangeFileList: this.handleChangeFileList,
+        onChangeEmoji: this.handleChangeEmoji,
+        onUpload: this.handleUpload,
+        loading: this.props.app.loading.sCreateComment,
+        ...child.props
+      });
+    });
+
     return (
       <div>
         {type === "normal" ? (
@@ -105,19 +125,7 @@ class CommentInput extends Component {
             </span>
           </div>
         ) : null}
-        <div style={{ marginTop: 40 }}>
-          <Editor
-            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}
-          />
-        </div>
+        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
       </div>
     );
   }

src/components/CommentList/index.js

@@ -10,6 +10,10 @@ class CommentList extends Component {
     this.state = {};
   }
 
+  componentWillMount() {
+    this.props.app.sGetComment();
+  }
+
   render() {
     const {
       list,

src/components/Editor/Emoji.js

@@ -5,6 +5,8 @@ import "./Emoji.css";
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
 
+// class Emoji
+
 const Emoji = ({ onClick }) => {
   const content = [[], [], []];
 

src/components/Editor/index.js

@@ -1,15 +1,26 @@
-// https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
 import React from "react";
+import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input } from "antd";
 import { MAX_UPLOAD_NUMBER } from "../../constant";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
-// import styles from "./index.less";
 import "./index.css";
 
 const { TextArea } = Input;
+// 设置 Editor 组件的默认值
+// 不能在 Editor.defaultProps 中设置
+// 因为 Editor 在 ComponentInput 中调用
+// 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
+const EditorDefaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧...",
+  showEmoji: true,
+  showUpload: true,
+  submitText: "发表",
+  onChange: () => {}
+};
 
-export default class Editor extends React.Component {
+class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -34,88 +45,98 @@ export default class Editor extends React.Component {
   }
 
   render() {
+    const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
       onChange,
+      onSubmit,
+      loading,
       placeholder,
       fileList,
       onChangeFileList,
-      onUpload
-    } = this.props;
+      rows,
+      onUpload,
+      showEmoji,
+      showUpload,
+      submitText
+    } = props;
+
     return (
       <div className="editor">
         <TextArea
           value={value}
-          onChange={onChange}
-          rows={5}
+          onChange={e => onChange(e.target.value)}
+          rows={rows}
           placeholder={placeholder}
         />
 
         <div className="toolbar">
           <div style={{ float: "left", margin: "8px 11px" }}>
-            <Popover
-              trigger="click"
-              placement="bottomLeft"
-              autoAdjustOverflow={false}
-              content={
-                <div style={{ width: 200 }}>
-                  <Emoji onClick={this.handleClickEmoji} />
-                </div>
-              }
-              overlayClassName="feed"
-            >
-              <Icon type="smile-o" className="icon" />
-            </Popover>
+            {showEmoji && (
+              <Popover
+                trigger="click"
+                placement="bottomLeft"
+                autoAdjustOverflow={false}
+                content={
+                  <div style={{ width: 200 }}>
+                    <Emoji onClick={this.handleClickEmoji} />
+                  </div>
+                }
+                overlayClassName="feed"
+              >
+                <Icon type="smile-o" className="icon" />
+              </Popover>
+            )}
 
-            <Popover
-              visible={this.state.showUpload}
-              overlayStyle={{ zIndex: 999 }}
-              content={
-                <div style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}>
-                  <Upload
-                    onChangeFileList={onChangeFileList}
-                    onUpload={onUpload}
-                    fileList={fileList}
-                  />
-                </div>
-              }
-              placement="bottomLeft"
-              title={
-                <div style={{ margin: "5px auto" }}>
-                  <span>
-                    上传图片
-                    <span style={{ color: "#666", fontWeight: 400 }}>
-                      (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
+            {showUpload && (
+              <Popover
+                visible={this.state.showUpload}
+                overlayStyle={{ zIndex: 999 }}
+                content={
+                  <div
+                    style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
+                  >
+                    <Upload
+                      onChangeFileList={onChangeFileList}
+                      onUpload={onUpload}
+                      fileList={fileList}
+                    />
+                  </div>
+                }
+                placement="bottomLeft"
+                title={
+                  <div style={{ margin: "5px auto" }}>
+                    <span>
+                      上传图片
+                      <span style={{ color: "#666", fontWeight: 400 }}>
+                        (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
+                      </span>
                     </span>
-                  </span>
-                  <Icon
-                    type="close"
-                    onClick={() => this.handleShowUpload(false)}
-                    style={{
-                      float: "right",
-                      cursor: "pointer",
-                      marginTop: 4
-                    }}
-                  />
-                </div>
-              }
-            >
-              <Icon
-                type="picture"
-                className="icon"
-                style={{ marginLeft: 10 }}
-                onClick={() => this.handleShowUpload(true)}
-              />
-            </Popover>
+                    <Icon
+                      type="close"
+                      onClick={() => this.handleShowUpload(false)}
+                      style={{
+                        float: "right",
+                        cursor: "pointer",
+                        marginTop: 4
+                      }}
+                    />
+                  </div>
+                }
+              >
+                <Icon
+                  type="picture"
+                  className="icon"
+                  style={{ marginLeft: 10 }}
+                  onClick={() => this.handleShowUpload(true)}
+                />
+              </Popover>
+            )}
           </div>
 
           <div style={{ float: "right", margin: "5px 11px" }}>
-            <Button
-              onClick={this.props.onSubmit}
-              type="primary"
-              loading={this.props.loading}
-            >
-              发表
+            <Button onClick={onSubmit} type="primary" loading={loading}>
+              {submitText}
             </Button>
           </div>
         </div>
@@ -123,3 +144,14 @@ export default class Editor extends React.Component {
     );
   }
 }
+
+Editor.propTypes = {
+  rows: PropTypes.number,
+  placeholder: PropTypes.string,
+  showEmoji: PropTypes.bool,
+  showUpload: PropTypes.bool,
+  submitText: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default Editor;

src/constant.js

@@ -1,6 +1,3 @@
-// export const URL = "http://121.41.20.11:8082/v1";
-export const URL = "http://api.links123.net/comment/v1";
-
 export const ERROR_DEFAULT = "出错了！";
 
 export const LIMIT = 10; // 默认 limit

src/index.js

@@ -1,7 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root-comment"));
+const props = {
+  type: 1,
+  businessId: "1",
+  API: "http://api.links123.net/comment/v1",
+  showList: false
+};
+
+const editorProps = {
+  showEmoji: true,
+  placeholder: "说点什么吧",
+  rows: 5
+  // onSubmit={v => console.log()} // TODO...
+};
+
+ReactDOM.render(
+  <App {...props}>
+    <Editor {...editorProps} />
+  </App>,
+  document.getElementById("root-comment")
+);
 registerServiceWorker();

src/lang/index.js

@@ -0,0 +1,15 @@
+// 语言包
+// 英文短语和中文提示的对应
+const 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": "获取回复列表失败"
+};
+
+export default data;