Browse Source

add: 图片上传框位置参数可传

zhengyingya 5 years ago
parent
commit
39cb870100
5 changed files with 20 additions and 10 deletions
  1. 12
    3
      lib/components/Editor/index.js
  2. 1
    1
      lib/components/Editor/index.js.map
  3. 2
    1
      lib/index.js
  4. 1
    1
      lib/index.js.map
  5. 4
    4
      lib/version.json

+ 12
- 3
lib/components/Editor/index.js View File

@@ -277,6 +277,8 @@ var Editor = function (_React$Component) {
277 277
           showUpload = _props.showUpload,
278 278
           multiple = _props.multiple,
279 279
           emojiPopoverPlacement = _props.emojiPopoverPlacement,
280
+          uploadPopoverPlacement = _props.uploadPopoverPlacement,
281
+          uploadOverlayClassName = _props.uploadOverlayClassName,
280 282
           closeUploadWhenBlur = _props.closeUploadWhenBlur,
281 283
           maxUpload = _props.maxUpload,
282 284
           btnLoading = _props.btnLoading,
@@ -325,10 +327,11 @@ var Editor = function (_React$Component) {
325 327
                   trigger: "click",
326 328
                   placement: emojiPopoverPlacement,
327 329
                   autoAdjustOverflow: false,
330
+                  overlayStyle: { zIndex: 999 },
328 331
                   content: _react2.default.createElement(
329 332
                     "div",
330 333
                     {
331
-                      style: { width: 240 },
334
+                      style: { width: 240, height: 205 },
332 335
                       onWheel: this.handleEmojiScroll
333 336
                     },
334 337
                     _react2.default.createElement(_Emoji2.default, {
@@ -348,7 +351,10 @@ var Editor = function (_React$Component) {
348 351
                   trigger: "click"
349 352
                   // TODO: 针对非 react.js,直接使用 click 事件来控制展开或关闭
350 353
                   // visible={this.state.showUpload}
351
-                  , overlayStyle: { zIndex: 999 },
354
+                  , placement: uploadPopoverPlacement,
355
+                  overlayClassName: uploadOverlayClassName,
356
+                  autoAdjustOverflow: false,
357
+                  overlayStyle: { zIndex: 999 },
352 358
                   onVisibleChange: closeUploadWhenBlur ? function (visible) {
353 359
                     _this3.handleShowUpload(visible);
354 360
                   } : null,
@@ -372,7 +378,6 @@ var Editor = function (_React$Component) {
372 378
                     }),
373 379
                     _react2.default.createElement("div", { className: "clearfix" })
374 380
                   ),
375
-                  placement: "bottomLeft",
376 381
                   title: _react2.default.createElement(
377 382
                     "div",
378 383
                     { style: { margin: "5px auto" } },
@@ -437,6 +442,8 @@ Editor.propTypes = {
437 442
   showEmoji: _propTypes2.default.bool,
438 443
   emojiPopoverPlacement: _propTypes2.default.string,
439 444
   showUpload: _propTypes2.default.bool,
445
+  uploadPopoverPlacement: _propTypes2.default.string,
446
+  uploadOverlayClassName: _propTypes2.default.string,
440 447
   multiple: _propTypes2.default.bool,
441 448
   closeUploadWhenBlur: _propTypes2.default.bool,
442 449
   maxUpload: _propTypes2.default.number,
@@ -463,6 +470,8 @@ Editor.defaultProps = {
463 470
   multiple: true,
464 471
   emojiPopoverPlacement: "bottomLeft",
465 472
   closeUploadWhenBlur: false,
473
+  uploadPopoverPlacement: "bottomLeft",
474
+  uploadOverlayClassName: "",
466 475
   maxUpload: 1,
467 476
   // btnSubmitText: "发表",
468 477
   btnLoading: false,

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 2
- 1
lib/index.js View File

@@ -69,7 +69,8 @@ if (process.env.NODE_ENV !== "production") {
69 69
       console.log(c);
70 70
     },
71 71
     editorProps: {
72
-      // emojiPopoverPlacement: "bottom"
72
+      // emojiPopoverPlacement: "bottom",
73
+      uploadPopoverPlacement: "top"
73 74
     }
74 75
   });
75 76
 }

+ 1
- 1
lib/index.js.map View File

@@ -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;AADW;AATD,GAAd;AAaD;;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    }\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","editorProps","renderComment","config","id","Error","type","businessId","console","warn","API","ReactDOM","render","document","getElementById","window","process","env","NODE_ENV","businessUserId","userId","onCountChange","log","c","uploadPopoverPlacement"],"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;AACAuB,8BAAwB;AAFb;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"]}

+ 4
- 4
lib/version.json View File

@@ -1,8 +1,8 @@
1 1
 {
2 2
     "name":       "comment",
3
-    "buildDate":  1559795177962,
3
+    "buildDate":  1560392257361,
4 4
     "version":    "1.0.4",
5
-    "numCommits": 137,
6
-    "hash":       "c861eb3",
7
-    "dirty":      true
5
+    "numCommits": 143,
6
+    "hash":       "7a06eef",
7
+    "dirty":      false
8 8
 }