Merge branch 'master' of Hepper/comment into master

lib/components/Editor/index.js

@@ -167,6 +167,7 @@ var Editor = function (_React$Component) {
       if (fileList.length > this.props.maxUpload) {
         list = fileList.slice(0, this.props.maxUpload);
       }
+      this.props.handleChangeFileList(list);
       this.setState({ fileList: list });
     }
 
@@ -233,6 +234,10 @@ var Editor = function (_React$Component) {
       var files = [];
       if (fileList.length) {
         fileList.forEach(function (item) {
+          if (item.url) {
+            files.push(item.url);
+            return;
+          }
           if (!fileMap[item.uid]) {
             return;
           }
@@ -283,6 +288,7 @@ var Editor = function (_React$Component) {
           emojiPopoverPlacement = _props.emojiPopoverPlacement,
           uploadPopoverPlacement = _props.uploadPopoverPlacement,
           uploadOverlayClassName = _props.uploadOverlayClassName,
+          fileList = _props.fileList,
           closeUploadWhenBlur = _props.closeUploadWhenBlur,
           maxUpload = _props.maxUpload,
           btnLoading = _props.btnLoading,
@@ -298,6 +304,7 @@ var Editor = function (_React$Component) {
       var handleSubmit = this.handleSubmit;
       var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.state.fileList.length;
       var inputValue = value || this.state.value;
+      var uploadFileList = fileList || this.state.fileList;
       return _react2.default.createElement(
         "div",
         { className: "comment-editor-container" },
@@ -376,7 +383,7 @@ var Editor = function (_React$Component) {
                       onChangeFileList: this.handleChangeFileList,
                       onUpload: this.handleUpload,
                       maxUpload: maxUpload,
-                      fileList: this.state.fileList,
+                      fileList: uploadFileList,
                       showError: this.props.showError,
                       onError: this.props.onError
                     }),
@@ -393,7 +400,7 @@ var Editor = function (_React$Component) {
                         "span",
                         { style: { color: "#666", fontWeight: 400 } },
                         _reactIntlUniversal2.default.get("editor.uploadCount", {
-                          count: maxUpload - this.state.fileList.length
+                          count: maxUpload - uploadFileList.length
                         })
                       ) : null
                     )

lib/index.js

@@ -2,6 +2,8 @@
 
 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");
 
 var _react2 = _interopRequireDefault(_react);
@@ -16,15 +18,64 @@ var _App2 = _interopRequireDefault(_App);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 // import registerServiceWorker from "./registerServiceWorker";
 
-var Index = function Index(props) {
-  return _react2.default.createElement(
-    _App2.default,
-    _extends({ showAlertComment: true, showAlertReply: true, showAlertFavor: true, showError: true }, props),
-    _react2.default.createElement(_App.Editor, _extends({ maxUpload: 9, autoFocus: true }, props.editorProps))
-  );
-};
+var Index = function (_React$Component) {
+  _inherits(Index, _React$Component);
+
+  function Index(props) {
+    _classCallCheck(this, Index);
+
+    var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
+
+    _this.state = {
+      fileList: [{
+        uid: "1",
+        name: "xxx.png",
+        status: "done",
+        response: "success", // custom error message to show
+        url: "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg"
+      }]
+    };
+    return _this;
+  }
+
+  _createClass(Index, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return _react2.default.createElement(
+        _App2.default,
+        _extends({
+          showAlertComment: true,
+          showAlertReply: true,
+          showAlertFavor: true,
+          showError: true
+        }, this.props),
+        _react2.default.createElement(_App.Editor, _extends({
+          maxUpload: 9,
+          autoFocus: true
+        }, this.props.editorProps, {
+          fileList: this.state.fileList,
+          handleChangeFileList: function handleChangeFileList(fileList) {
+            _this2.setState({
+              fileList: fileList
+            });
+          }
+        }))
+      );
+    }
+  }]);
+
+  return Index;
+}(_react2.default.Component);
 
 /**
  * 渲染评论组件
@@ -34,6 +85,8 @@ var Index = function Index(props) {
  *  - {string} businessId 评论的 businessId
  *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
  */
+
+
 function renderComment(config) {
   if (!config.id) {
     throw new Error("id is required");

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","editorProps","renderComment","config","id","Error","type","businessId","console","warn","API","ReactDOM","render","document","getElementById","window","process","env","NODE_ENV","businessUserId","userId","onCountChange","log","c"],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;;;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ;AAAA,SACZ;AAAC,iBAAD;AAAA,eAAK,sBAAL,EAAsB,oBAAtB,EAAqC,oBAArC,EAAoD,eAApD,IAAkEC,KAAlE;AACE,kCAAC,WAAD,aAAQ,WAAW,CAAnB,EAAsB,eAAtB,IAAoCA,MAAMC,WAA1C;AADF,GADY;AAAA,CAAd;;AAMA;;;;;;;;AAQA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOG,IAAZ,EAAkB;AAChB,UAAM,IAAID,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOI,UAAZ,EAAwB;AACtB;AACAJ,WAAOI,UAAP,GAAoB,MAApB;AACAC,YAAQC,IAAR,CAAa,+BAAb;AACD;AACD,MAAI,CAACN,OAAOO,GAAZ,EAAiB;AACf;AACAP,WAAOO,GAAP,GAAa,oCAAb;AACAF,YAAQC,IAAR,CACE,sDADF;AAGD;;AAEDE,qBAASC,MAAT,CAAgB,8BAAC,KAAD,EAAWT,MAAX,CAAhB,EAAuCU,SAASC,cAAT,CAAwBX,OAAOC,EAA/B,CAAvC;AACA;AACD;;AAEDW,OAAOb,aAAP,GAAuBA,aAAvB;;AAEA,IAAIc,QAAQC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzChB,gBAAc;AACZE,QAAI,cADQ;AAEZE,UAAM,CAFM;AAGZC,gBAAY,MAHA;AAIZY,oBAAgB,CAJJ;AAKZC,YAAQ,KALI;AAMZC,mBAAe,0BAAK;AAClBb,cAAQc,GAAR,CAAYC,CAAZ;AACD,KARW;AASZtB,iBAAa;AACX;AACA;AAFW;AATD,GAAd;AAcD;;AAED;AACA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App, { Editor } from \"./App\";\n// import registerServiceWorker from \"./registerServiceWorker\";\n\nconst Index = props => (\n  <App showAlertComment showAlertReply showAlertFavor showError {...props}>\n    <Editor maxUpload={9} autoFocus {...props.editorProps} />\n  </App>\n);\n\n/**\n * 渲染评论组件\n * @param {object} config 编辑器配置\n *  - {string} id 渲染评论的DOM的 ID\n *  - {number} type 评论的 type\n *  - {string} businessId 评论的 businessId\n *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1\n */\nfunction renderComment(config) {\n  if (!config.id) {\n    throw new Error(\"id is required\");\n  }\n  if (!config.type) {\n    throw new Error(\"type is required\");\n  }\n  if (!config.businessId) {\n    // throw new Error(\"businessId is required\");\n    config.businessId = \"test\";\n    console.warn(\"没有传入 businessId 参数，默认使用: test\");\n  }\n  if (!config.API) {\n    // throw new Error(\"API is required\");\n    config.API = \"http://api.links123.net/comment/v1\";\n    console.warn(\n      \"没有传入 API 参数，默认使用: http://api.links123.net/comment/v1\"\n    );\n  }\n\n  ReactDOM.render(<Index {...config} />, document.getElementById(config.id));\n  // registerServiceWorker();\n}\n\nwindow.renderComment = renderComment;\n\nif (process.env.NODE_ENV !== \"production\") {\n  renderComment({\n    id: \"root-comment\",\n    type: 1,\n    businessId: \"test\",\n    businessUserId: 4,\n    userId: 71299,\n    onCountChange: c => {\n      console.log(c);\n    },\n    editorProps: {\n      // emojiPopoverPlacement: \"bottom\",\n      // uploadPopoverPlacement: \"top\"\n    }\n  });\n}\n\n// renderComment({\n//   id: \"root-comment\",\n//   type: 1,\n//   businessId: \"test\",\n//   API: 'http://api.links123.net/comment/v1',\n// });\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","fileList","uid","name","status","response","url","editorProps","setState","React","Component","renderComment","config","id","Error","type","businessId","console","warn","API","ReactDOM","render","document","getElementById","window","process","env","NODE_ENV","businessUserId","userId","onCountChange","log","c"],"mappings":";;;;;;AAAA;;;;AACA;;;;AACA;;;;;;;;;;;;AACA;;IAEMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,gBAAU,CACR;AACEC,aAAK,GADP;AAEEC,cAAM,SAFR;AAGEC,gBAAQ,MAHV;AAIEC,kBAAU,SAJZ,EAIuB;AACrBC,aACE;AANJ,OADQ;AADC,KAAb;AAFiB;AAclB;;;;6BAEQ;AAAA;;AACP,aACE;AAAC,qBAAD;AAAA;AACE,gCADF;AAEE,8BAFF;AAGE,8BAHF;AAIE;AAJF,WAKM,KAAKP,KALX;AAOE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE;AAFF,WAGM,KAAKA,KAAL,CAAWQ,WAHjB;AAIE,oBAAU,KAAKP,KAAL,CAAWC,QAJvB;AAKE,gCAAsB,wCAAY;AAChC,mBAAKO,QAAL,CAAc;AACZP;AADY,aAAd;AAGD;AATH;AAPF,OADF;AAqBD;;;;EAvCiBQ,gBAAMC,S;;AA0C1B;;;;;;;;;;AAQA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOG,IAAZ,EAAkB;AAChB,UAAM,IAAID,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOI,UAAZ,EAAwB;AACtB;AACAJ,WAAOI,UAAP,GAAoB,MAApB;AACAC,YAAQC,IAAR,CAAa,+BAAb;AACD;AACD,MAAI,CAACN,OAAOO,GAAZ,EAAiB;AACf;AACAP,WAAOO,GAAP,GAAa,oCAAb;AACAF,YAAQC,IAAR,CACE,sDADF;AAGD;;AAEDE,qBAASC,MAAT,CAAgB,8BAAC,KAAD,EAAWT,MAAX,CAAhB,EAAuCU,SAASC,cAAT,CAAwBX,OAAOC,EAA/B,CAAvC;AACA;AACD;;AAEDW,OAAOb,aAAP,GAAuBA,aAAvB;;AAEA,IAAIc,QAAQC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzChB,gBAAc;AACZE,QAAI,cADQ;AAEZE,UAAM,CAFM;AAGZC,gBAAY,MAHA;AAIZY,oBAAgB,CAJJ;AAKZC,YAAQ,KALI;AAMZC,mBAAe,0BAAK;AAClBb,cAAQc,GAAR,CAAYC,CAAZ;AACD,KARW;AASZzB,iBAAa;AACX;AACA;AAFW;AATD,GAAd;AAcD;;AAED;AACA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App, { Editor } from \"./App\";\n// import registerServiceWorker from \"./registerServiceWorker\";\n\nclass Index extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      fileList: [\n        {\n          uid: \"1\",\n          name: \"xxx.png\",\n          status: \"done\",\n          response: \"success\", // custom error message to show\n          url:\n            \"//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg\"\n        }\n      ]\n    };\n  }\n\n  render() {\n    return (\n      <App\n        showAlertComment\n        showAlertReply\n        showAlertFavor\n        showError\n        {...this.props}\n      >\n        <Editor\n          maxUpload={9}\n          autoFocus\n          {...this.props.editorProps}\n          fileList={this.state.fileList}\n          handleChangeFileList={fileList => {\n            this.setState({\n              fileList\n            });\n          }}\n        />\n      </App>\n    );\n  }\n}\n\n/**\n * 渲染评论组件\n * @param {object} config 编辑器配置\n *  - {string} id 渲染评论的DOM的 ID\n *  - {number} type 评论的 type\n *  - {string} businessId 评论的 businessId\n *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1\n */\nfunction renderComment(config) {\n  if (!config.id) {\n    throw new Error(\"id is required\");\n  }\n  if (!config.type) {\n    throw new Error(\"type is required\");\n  }\n  if (!config.businessId) {\n    // throw new Error(\"businessId is required\");\n    config.businessId = \"test\";\n    console.warn(\"没有传入 businessId 参数，默认使用: test\");\n  }\n  if (!config.API) {\n    // throw new Error(\"API is required\");\n    config.API = \"http://api.links123.net/comment/v1\";\n    console.warn(\n      \"没有传入 API 参数，默认使用: http://api.links123.net/comment/v1\"\n    );\n  }\n\n  ReactDOM.render(<Index {...config} />, document.getElementById(config.id));\n  // registerServiceWorker();\n}\n\nwindow.renderComment = renderComment;\n\nif (process.env.NODE_ENV !== \"production\") {\n  renderComment({\n    id: \"root-comment\",\n    type: 1,\n    businessId: \"test\",\n    businessUserId: 4,\n    userId: 71299,\n    onCountChange: c => {\n      console.log(c);\n    },\n    editorProps: {\n      // emojiPopoverPlacement: \"bottom\",\n      // uploadPopoverPlacement: \"top\"\n    }\n  });\n}\n\n// renderComment({\n//   id: \"root-comment\",\n//   type: 1,\n//   businessId: \"test\",\n//   API: 'http://api.links123.net/comment/v1',\n// });\n"]}

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1560766889583,
+    "buildDate":  1561033676404,
     "version":    "1.0.4",
-    "numCommits": 144,
-    "hash":       "39cb870",
-    "dirty":      false
+    "numCommits": 149,
+    "hash":       "955d349",
+    "dirty":      true
 }

src/components/Editor/index.js

@@ -83,6 +83,7 @@ class Editor extends React.Component {
     if (fileList.length > this.props.maxUpload) {
       list = fileList.slice(0, this.props.maxUpload);
     }
+    this.props.handleChangeFileList(list);
     this.setState({ fileList: list });
   }
 
@@ -131,6 +132,10 @@ class Editor extends React.Component {
     const files = [];
     if (fileList.length) {
       fileList.forEach(item => {
+        if (item.url) {
+          files.push(item.url);
+          return;
+        }
         if (!fileMap[item.uid]) {
           return;
         }
@@ -180,6 +185,7 @@ class Editor extends React.Component {
       emojiPopoverPlacement,
       uploadPopoverPlacement,
       uploadOverlayClassName,
+      fileList,
       closeUploadWhenBlur,
       maxUpload,
       // btnSubmitText,
@@ -199,6 +205,7 @@ class Editor extends React.Component {
       btnDisabled ||
       (!this.props.value && !this.state.value && !this.state.fileList.length);
     const inputValue = value || this.state.value;
+    const uploadFileList = fileList || this.state.fileList;
     return (
       <div className="comment-editor-container">
         <div
@@ -279,7 +286,7 @@ class Editor extends React.Component {
                         onChangeFileList={this.handleChangeFileList}
                         onUpload={this.handleUpload}
                         maxUpload={maxUpload}
-                        fileList={this.state.fileList}
+                        fileList={uploadFileList}
                         showError={this.props.showError}
                         onError={this.props.onError}
                       />
@@ -293,7 +300,7 @@ class Editor extends React.Component {
                         {maxUpload >= 2 ? (
                           <span style={{ color: "#666", fontWeight: 400 }}>
                             {intl.get("editor.uploadCount", {
-                              count: maxUpload - this.state.fileList.length
+                              count: maxUpload - uploadFileList.length
                             })}
                           </span>
                         ) : null}

src/index.js

@@ -3,11 +3,47 @@ import ReactDOM from "react-dom";
 import App, { Editor } from "./App";
 // import registerServiceWorker from "./registerServiceWorker";
 
-const Index = props => (
-  <App showAlertComment showAlertReply showAlertFavor showError {...props}>
-    <Editor maxUpload={9} autoFocus {...props.editorProps} />
-  </App>
-);
+class Index extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileList: [
+        {
+          uid: "1",
+          name: "xxx.png",
+          status: "done",
+          response: "success", // custom error message to show
+          url:
+            "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg"
+        }
+      ]
+    };
+  }
+
+  render() {
+    return (
+      <App
+        showAlertComment
+        showAlertReply
+        showAlertFavor
+        showError
+        {...this.props}
+      >
+        <Editor
+          maxUpload={9}
+          autoFocus
+          {...this.props.editorProps}
+          fileList={this.state.fileList}
+          handleChangeFileList={fileList => {
+            this.setState({
+              fileList
+            });
+          }}
+        />
+      </App>
+    );
+  }
+}
 
 /**
  * 渲染评论组件