Przeglądaj źródła

Merge branch 'master' of Hepper/comment into master

AdamFu 5 lat temu
rodzic
commit
d8191bbbec

+ 9
- 2
lib/components/Editor/index.js Wyświetl plik

@@ -167,6 +167,7 @@ var Editor = function (_React$Component) {
167 167
       if (fileList.length > this.props.maxUpload) {
168 168
         list = fileList.slice(0, this.props.maxUpload);
169 169
       }
170
+      this.props.handleChangeFileList(list);
170 171
       this.setState({ fileList: list });
171 172
     }
172 173
 
@@ -233,6 +234,10 @@ var Editor = function (_React$Component) {
233 234
       var files = [];
234 235
       if (fileList.length) {
235 236
         fileList.forEach(function (item) {
237
+          if (item.url) {
238
+            files.push(item.url);
239
+            return;
240
+          }
236 241
           if (!fileMap[item.uid]) {
237 242
             return;
238 243
           }
@@ -283,6 +288,7 @@ var Editor = function (_React$Component) {
283 288
           emojiPopoverPlacement = _props.emojiPopoverPlacement,
284 289
           uploadPopoverPlacement = _props.uploadPopoverPlacement,
285 290
           uploadOverlayClassName = _props.uploadOverlayClassName,
291
+          fileList = _props.fileList,
286 292
           closeUploadWhenBlur = _props.closeUploadWhenBlur,
287 293
           maxUpload = _props.maxUpload,
288 294
           btnLoading = _props.btnLoading,
@@ -298,6 +304,7 @@ var Editor = function (_React$Component) {
298 304
       var handleSubmit = this.handleSubmit;
299 305
       var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.state.fileList.length;
300 306
       var inputValue = value || this.state.value;
307
+      var uploadFileList = fileList || this.state.fileList;
301 308
       return _react2.default.createElement(
302 309
         "div",
303 310
         { className: "comment-editor-container" },
@@ -376,7 +383,7 @@ var Editor = function (_React$Component) {
376 383
                       onChangeFileList: this.handleChangeFileList,
377 384
                       onUpload: this.handleUpload,
378 385
                       maxUpload: maxUpload,
379
-                      fileList: this.state.fileList,
386
+                      fileList: uploadFileList,
380 387
                       showError: this.props.showError,
381 388
                       onError: this.props.onError
382 389
                     }),
@@ -393,7 +400,7 @@ var Editor = function (_React$Component) {
393 400
                         "span",
394 401
                         { style: { color: "#666", fontWeight: 400 } },
395 402
                         _reactIntlUniversal2.default.get("editor.uploadCount", {
396
-                          count: maxUpload - this.state.fileList.length
403
+                          count: maxUpload - uploadFileList.length
397 404
                         })
398 405
                       ) : null
399 406
                     )

+ 1
- 1
lib/components/Editor/index.js.map
Plik diff jest za duży
Wyświetl plik


+ 60
- 7
lib/index.js Wyświetl plik

@@ -2,6 +2,8 @@
2 2
 
3 3
 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; };
4 4
 
5
+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; }; }();
6
+
5 7
 var _react = require("react");
6 8
 
7 9
 var _react2 = _interopRequireDefault(_react);
@@ -16,15 +18,64 @@ var _App2 = _interopRequireDefault(_App);
16 18
 
17 19
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 20
 
21
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22
+
23
+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; }
24
+
25
+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; }
26
+
19 27
 // import registerServiceWorker from "./registerServiceWorker";
20 28
 
21
-var Index = function Index(props) {
22
-  return _react2.default.createElement(
23
-    _App2.default,
24
-    _extends({ showAlertComment: true, showAlertReply: true, showAlertFavor: true, showError: true }, props),
25
-    _react2.default.createElement(_App.Editor, _extends({ maxUpload: 9, autoFocus: true }, props.editorProps))
26
-  );
27
-};
29
+var Index = function (_React$Component) {
30
+  _inherits(Index, _React$Component);
31
+
32
+  function Index(props) {
33
+    _classCallCheck(this, Index);
34
+
35
+    var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
36
+
37
+    _this.state = {
38
+      fileList: [{
39
+        uid: "1",
40
+        name: "xxx.png",
41
+        status: "done",
42
+        response: "success", // custom error message to show
43
+        url: "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg"
44
+      }]
45
+    };
46
+    return _this;
47
+  }
48
+
49
+  _createClass(Index, [{
50
+    key: "render",
51
+    value: function render() {
52
+      var _this2 = this;
53
+
54
+      return _react2.default.createElement(
55
+        _App2.default,
56
+        _extends({
57
+          showAlertComment: true,
58
+          showAlertReply: true,
59
+          showAlertFavor: true,
60
+          showError: true
61
+        }, this.props),
62
+        _react2.default.createElement(_App.Editor, _extends({
63
+          maxUpload: 9,
64
+          autoFocus: true
65
+        }, this.props.editorProps, {
66
+          fileList: this.state.fileList,
67
+          handleChangeFileList: function handleChangeFileList(fileList) {
68
+            _this2.setState({
69
+              fileList: fileList
70
+            });
71
+          }
72
+        }))
73
+      );
74
+    }
75
+  }]);
76
+
77
+  return Index;
78
+}(_react2.default.Component);
28 79
 
29 80
 /**
30 81
  * 渲染评论组件
@@ -34,6 +85,8 @@ var Index = function Index(props) {
34 85
  *  - {string} businessId 评论的 businessId
35 86
  *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1
36 87
  */
88
+
89
+
37 90
 function renderComment(config) {
38 91
   if (!config.id) {
39 92
     throw new Error("id is required");

+ 1
- 1
lib/index.js.map Wyświetl plik

@@ -1 +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"]}
1
+{"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"]}

+ 4
- 4
lib/version.json Wyświetl plik

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

+ 9
- 2
src/components/Editor/index.js Wyświetl plik

@@ -83,6 +83,7 @@ class Editor extends React.Component {
83 83
     if (fileList.length > this.props.maxUpload) {
84 84
       list = fileList.slice(0, this.props.maxUpload);
85 85
     }
86
+    this.props.handleChangeFileList(list);
86 87
     this.setState({ fileList: list });
87 88
   }
88 89
 
@@ -131,6 +132,10 @@ class Editor extends React.Component {
131 132
     const files = [];
132 133
     if (fileList.length) {
133 134
       fileList.forEach(item => {
135
+        if (item.url) {
136
+          files.push(item.url);
137
+          return;
138
+        }
134 139
         if (!fileMap[item.uid]) {
135 140
           return;
136 141
         }
@@ -180,6 +185,7 @@ class Editor extends React.Component {
180 185
       emojiPopoverPlacement,
181 186
       uploadPopoverPlacement,
182 187
       uploadOverlayClassName,
188
+      fileList,
183 189
       closeUploadWhenBlur,
184 190
       maxUpload,
185 191
       // btnSubmitText,
@@ -199,6 +205,7 @@ class Editor extends React.Component {
199 205
       btnDisabled ||
200 206
       (!this.props.value && !this.state.value && !this.state.fileList.length);
201 207
     const inputValue = value || this.state.value;
208
+    const uploadFileList = fileList || this.state.fileList;
202 209
     return (
203 210
       <div className="comment-editor-container">
204 211
         <div
@@ -279,7 +286,7 @@ class Editor extends React.Component {
279 286
                         onChangeFileList={this.handleChangeFileList}
280 287
                         onUpload={this.handleUpload}
281 288
                         maxUpload={maxUpload}
282
-                        fileList={this.state.fileList}
289
+                        fileList={uploadFileList}
283 290
                         showError={this.props.showError}
284 291
                         onError={this.props.onError}
285 292
                       />
@@ -293,7 +300,7 @@ class Editor extends React.Component {
293 300
                         {maxUpload >= 2 ? (
294 301
                           <span style={{ color: "#666", fontWeight: 400 }}>
295 302
                             {intl.get("editor.uploadCount", {
296
-                              count: maxUpload - this.state.fileList.length
303
+                              count: maxUpload - uploadFileList.length
297 304
                             })}
298 305
                           </span>
299 306
                         ) : null}

+ 41
- 5
src/index.js Wyświetl plik

@@ -3,11 +3,47 @@ import ReactDOM from "react-dom";
3 3
 import App, { Editor } from "./App";
4 4
 // import registerServiceWorker from "./registerServiceWorker";
5 5
 
6
-const Index = props => (
7
-  <App showAlertComment showAlertReply showAlertFavor showError {...props}>
8
-    <Editor maxUpload={9} autoFocus {...props.editorProps} />
9
-  </App>
10
-);
6
+class Index extends React.Component {
7
+  constructor(props) {
8
+    super(props);
9
+    this.state = {
10
+      fileList: [
11
+        {
12
+          uid: "1",
13
+          name: "xxx.png",
14
+          status: "done",
15
+          response: "success", // custom error message to show
16
+          url:
17
+            "//links-comment.oss-cn-beijing.aliyuncs.com/comment/20190617/UCs7aXEjW.jpeg"
18
+        }
19
+      ]
20
+    };
21
+  }
22
+
23
+  render() {
24
+    return (
25
+      <App
26
+        showAlertComment
27
+        showAlertReply
28
+        showAlertFavor
29
+        showError
30
+        {...this.props}
31
+      >
32
+        <Editor
33
+          maxUpload={9}
34
+          autoFocus
35
+          {...this.props.editorProps}
36
+          fileList={this.state.fileList}
37
+          handleChangeFileList={fileList => {
38
+            this.setState({
39
+              fileList
40
+            });
41
+          }}
42
+        />
43
+      </App>
44
+    );
45
+  }
46
+}
11 47
 
12 48
 /**
13 49
  * 渲染评论组件