浏览代码

Merge branch 'feature/img' of Evo/comment into master

AdamFu 4 年前
父节点
当前提交
daff054613

+ 25
- 0
lib/components/Editor/index.css 查看文件

@@ -130,3 +130,28 @@
130 130
     height: 28px;
131 131
   }
132 132
 }
133
+
134
+.comment-img-popover {
135
+  /* 一行显示3张图 */
136
+  width: 336px;
137
+  min-height: 100px;
138
+  margin: 0 auto;
139
+}
140
+
141
+.comment-img-title {
142
+  margin: 5px auto;
143
+}
144
+.comment-img-title-counter {
145
+  color: #666;
146
+  font-weight: 400;
147
+}
148
+
149
+@media (max-width: 575px) {
150
+  .comment-img-popover {
151
+    /* 一行显示2张图 */
152
+    width: 224px;
153
+  }
154
+  .comment-img-title-counter {
155
+    display: none;
156
+  }
157
+}

+ 78
- 57
lib/components/Editor/index.js 查看文件

@@ -36,9 +36,13 @@ require("antd/es/message/style");
36 36
 
37 37
 require("antd/es/input/style");
38 38
 
39
-var _react = require("react");
39
+var _dayjs = require("dayjs");
40 40
 
41
-var _react2 = _interopRequireDefault(_react);
41
+var _dayjs2 = _interopRequireDefault(_dayjs);
42
+
43
+var _shortid = require("shortid");
44
+
45
+var _shortid2 = _interopRequireDefault(_shortid);
42 46
 
43 47
 var _propTypes = require("prop-types");
44 48
 
@@ -48,34 +52,32 @@ var _classnames = require("classnames");
48 52
 
49 53
 var _classnames2 = _interopRequireDefault(_classnames);
50 54
 
51
-var _reactIntlUniversal = require("react-intl-universal");
52
-
53
-var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
54
-
55
-var _dayjs = require("dayjs");
55
+var _react = require("react");
56 56
 
57
-var _dayjs2 = _interopRequireDefault(_dayjs);
57
+var _react2 = _interopRequireDefault(_react);
58 58
 
59
-var _shortid = require("shortid");
59
+var _reactIntlUniversal = require("react-intl-universal");
60 60
 
61
-var _shortid2 = _interopRequireDefault(_shortid);
61
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
62 62
 
63
-var _constant = require("../../constant");
63
+var _Emoji = require("./Emoji");
64 64
 
65
-var _helper = require("../../helper");
65
+var _Emoji2 = _interopRequireDefault(_Emoji);
66 66
 
67 67
 var _Upload = require("./Upload");
68 68
 
69 69
 var _Upload2 = _interopRequireDefault(_Upload);
70 70
 
71
-var _Emoji = require("./Emoji");
72
-
73
-var _Emoji2 = _interopRequireDefault(_Emoji);
74
-
75 71
 var _Comment = require("../../Comment");
76 72
 
77 73
 var _Comment2 = _interopRequireDefault(_Comment);
78 74
 
75
+var _utils = require("./../../utils");
76
+
77
+var _constant = require("../../constant");
78
+
79
+var _helper = require("../../helper");
80
+
79 81
 require("./index.css");
80 82
 
81 83
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -139,6 +141,7 @@ var Editor = function (_React$Component) {
139 141
     _this.resetState = _this.resetState.bind(_this);
140 142
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
141 143
     _this.handlePressEnter = _this.handlePressEnter.bind(_this);
144
+    _this.invokeFileListChange = _this.invokeFileListChange.bind(_this);
142 145
     return _this;
143 146
   }
144 147
 
@@ -213,8 +216,7 @@ var Editor = function (_React$Component) {
213 216
       if (fileList.length > this.props.maxUpload) {
214 217
         list = fileList.slice(0, this.props.maxUpload);
215 218
       }
216
-      this.props.handleChangeFileList(list);
217
-      this.setState({ fileList: list });
219
+      this.invokeFileListChange(list);
218 220
     }
219 221
 
220 222
     /**
@@ -252,8 +254,33 @@ var Editor = function (_React$Component) {
252 254
         }
253 255
         return item;
254 256
       });
255
-      this.props.handleChangeFileList(fileList);
256
-      this.setState({ fileMap: fileMap, fileList: fileList });
257
+      this.setState({ fileMap: fileMap });
258
+      this.invokeFileListChange(fileList);
259
+    }
260
+
261
+    /**
262
+     *  **统一处理fileList的修改**
263
+     *  1. upload
264
+     *  2. paste
265
+     *  PS: 移动端需要做额外操作
266
+     *  -- evo 20200223
267
+     */
268
+
269
+  }, {
270
+    key: "invokeFileListChange",
271
+    value: function invokeFileListChange(fileList) {
272
+      var _props2 = this.props,
273
+          limitOne = _props2.limitOne,
274
+          handleChangeFileList = _props2.handleChangeFileList;
275
+
276
+      handleChangeFileList(fileList);
277
+      this.setState({ fileList: fileList });
278
+      if (limitOne && _utils.isMobile) {
279
+        var file = fileList[0];
280
+        if (file && file.status === "done" && !file.thumbUrl.includes("data:image")) {
281
+          this.setState({ uploadVisible: false });
282
+        }
283
+      }
257 284
     }
258 285
 
259 286
     /**
@@ -293,10 +320,7 @@ var Editor = function (_React$Component) {
293 320
             type: file.type,
294 321
             uid: new Date().valueOf()
295 322
           });
296
-          _this2.props.handleChangeFileList(fileList);
297
-          _this2.setState({
298
-            fileList: fileList
299
-          });
323
+          _this2.invokeFileListChange(fileList);
300 324
         }).catch(function (e) {
301 325
           var msg = e.message || _constant.ERROR_DEFAULT;
302 326
           if (_this2.props.showError) {
@@ -379,10 +403,10 @@ var Editor = function (_React$Component) {
379 403
   }, {
380 404
     key: "checkDisabledSubmit",
381 405
     value: function checkDisabledSubmit() {
382
-      var _props2 = this.props,
383
-          btnDisabled = _props2.btnDisabled,
384
-          value = _props2.value,
385
-          fileList = _props2.fileList;
406
+      var _props3 = this.props,
407
+          btnDisabled = _props3.btnDisabled,
408
+          value = _props3.value,
409
+          fileList = _props3.fileList;
386 410
 
387 411
       if (btnDisabled) {
388 412
         return true;
@@ -425,24 +449,24 @@ var Editor = function (_React$Component) {
425 449
     value: function render() {
426 450
       var _this4 = this;
427 451
 
428
-      var _props3 = this.props,
429
-          value = _props3.value,
430
-          rows = _props3.rows,
431
-          showEmoji = _props3.showEmoji,
432
-          showUpload = _props3.showUpload,
433
-          multiple = _props3.multiple,
434
-          emojiPopoverPlacement = _props3.emojiPopoverPlacement,
435
-          uploadPopoverPlacement = _props3.uploadPopoverPlacement,
436
-          uploadOverlayClassName = _props3.uploadOverlayClassName,
437
-          fileList = _props3.fileList,
438
-          maxUpload = _props3.maxUpload,
439
-          btnLoading = _props3.btnLoading,
440
-          button = _props3.button,
441
-          emojiToolIcon = _props3.emojiToolIcon,
442
-          imageToolIcon = _props3.imageToolIcon,
443
-          maxLength = _props3.maxLength,
444
-          autoFocus = _props3.autoFocus,
445
-          app = _props3.app;
452
+      var _props4 = this.props,
453
+          value = _props4.value,
454
+          rows = _props4.rows,
455
+          showEmoji = _props4.showEmoji,
456
+          showUpload = _props4.showUpload,
457
+          multiple = _props4.multiple,
458
+          emojiPopoverPlacement = _props4.emojiPopoverPlacement,
459
+          uploadPopoverPlacement = _props4.uploadPopoverPlacement,
460
+          uploadOverlayClassName = _props4.uploadOverlayClassName,
461
+          fileList = _props4.fileList,
462
+          maxUpload = _props4.maxUpload,
463
+          btnLoading = _props4.btnLoading,
464
+          button = _props4.button,
465
+          emojiToolIcon = _props4.emojiToolIcon,
466
+          imageToolIcon = _props4.imageToolIcon,
467
+          maxLength = _props4.maxLength,
468
+          autoFocus = _props4.autoFocus,
469
+          app = _props4.app;
446 470
 
447 471
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
448 472
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
@@ -525,13 +549,7 @@ var Editor = function (_React$Component) {
525 549
                     },
526 550
                     content: _react2.default.createElement(
527 551
                       "div",
528
-                      {
529
-                        style: {
530
-                          width: 336, // 一行显示3张
531
-                          minHeight: 100,
532
-                          margin: "0 auto"
533
-                        }
534
-                      },
552
+                      { className: "comment-img-popover" },
535 553
                       _react2.default.createElement(_Upload2.default, {
536 554
                         onRef: function onRef(node) {
537 555
                           return _this4.uploadRef = node;
@@ -548,14 +566,14 @@ var Editor = function (_React$Component) {
548 566
                     ),
549 567
                     title: _react2.default.createElement(
550 568
                       "div",
551
-                      { style: { margin: "5px auto" } },
569
+                      { className: "comment-img-title" },
552 570
                       _react2.default.createElement(
553 571
                         "span",
554 572
                         null,
555 573
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
556 574
                         maxUpload >= 2 ? _react2.default.createElement(
557 575
                           "span",
558
-                          { style: { color: "#666", fontWeight: 400 } },
576
+                          { className: "comment-img-title-counter" },
559 577
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
560 578
                             count: maxUpload - uploadFileList.length
561 579
                           })
@@ -652,7 +670,9 @@ Editor.propTypes = {
652 670
   onError: _propTypes2.default.func,
653 671
   maxLength: _propTypes2.default.number,
654 672
   // Enter事件相关
655
-  allowEnterSubmit: _propTypes2.default.bool
673
+  allowEnterSubmit: _propTypes2.default.bool,
674
+  // 私信仅允许选中一个,此处可以优化为通用的limit
675
+  limitOne: _propTypes2.default.bool
656 676
 };
657 677
 
658 678
 Editor.defaultProps = {
@@ -674,7 +694,8 @@ Editor.defaultProps = {
674 694
   app: {},
675 695
   handleChangeFileList: function handleChangeFileList() {},
676 696
   // Enter事件相关
677
-  allowEnterSubmit: false
697
+  allowEnterSubmit: false,
698
+  limitOne: false
678 699
 };
679 700
 
680 701
 exports.default = (0, _Comment2.default)(Editor);

+ 1
- 1
lib/components/Editor/index.js.map
文件差异内容过多而无法显示
查看文件


+ 2
- 2
lib/index.js 查看文件

@@ -71,12 +71,12 @@ var Index = function (_React$Component) {
71 71
             _this2.setState({ value: value });
72 72
           },
73 73
           handleChangeFileList: function handleChangeFileList(fileList) {
74
-            console.log("----", fileList);
75 74
             _this2.setState({
76 75
               fileList: fileList
77 76
             });
78 77
           },
79
-          allowEnterSubmit: true
78
+          allowEnterSubmit: true,
79
+          limitOne: true
80 80
         }))
81 81
       );
82 82
     }

+ 1
- 1
lib/index.js.map
文件差异内容过多而无法显示
查看文件


+ 10
- 0
lib/utils.js 查看文件

@@ -0,0 +1,10 @@
1
+"use strict";
2
+
3
+Object.defineProperty(exports, "__esModule", {
4
+  value: true
5
+});
6
+/**
7
+ * 575: 为了和media query中的判断保持一致
8
+ */
9
+var isMobile = exports.isMobile = typeof window.orientation === "number" && document.body.offsetWidth < 575;
10
+//# sourceMappingURL=utils.js.map

+ 1
- 0
lib/utils.js.map 查看文件

@@ -0,0 +1 @@
1
+{"version":3,"sources":["../src/utils.js"],"names":["isMobile","window","orientation","document","body","offsetWidth"],"mappings":";;;;;AAAA;;;AAGO,IAAMA,8BACX,OAAOC,OAAOC,WAAd,KAA8B,QAA9B,IAA0CC,SAASC,IAAT,CAAcC,WAAd,GAA4B,GADjE","file":"utils.js","sourcesContent":["/**\n * 575: 为了和media query中的判断保持一致\n */\nexport const isMobile =\n  typeof window.orientation === \"number\" && document.body.offsetWidth < 575;\n"]}

+ 4
- 4
lib/version.json 查看文件

@@ -1,8 +1,8 @@
1 1
 {
2 2
     "name":       "comment",
3
-    "buildDate":  1582351916030,
3
+    "buildDate":  1582467062540,
4 4
     "version":    "1.0.4",
5
-    "numCommits": 201,
6
-    "hash":       "556bf1c",
7
-    "dirty":      false
5
+    "numCommits": 204,
6
+    "hash":       "016964f",
7
+    "dirty":      true
8 8
 }

+ 25
- 0
src/components/Editor/index.css 查看文件

@@ -130,3 +130,28 @@
130 130
     height: 28px;
131 131
   }
132 132
 }
133
+
134
+.comment-img-popover {
135
+  /* 一行显示3张图 */
136
+  width: 336px;
137
+  min-height: 100px;
138
+  margin: 0 auto;
139
+}
140
+
141
+.comment-img-title {
142
+  margin: 5px auto;
143
+}
144
+.comment-img-title-counter {
145
+  color: #666;
146
+  font-weight: 400;
147
+}
148
+
149
+@media (max-width: 575px) {
150
+  .comment-img-popover {
151
+    /* 一行显示2张图 */
152
+    width: 224px;
153
+  }
154
+  .comment-img-title-counter {
155
+    display: none;
156
+  }
157
+}

+ 44
- 26
src/components/Editor/index.js 查看文件

@@ -1,15 +1,16 @@
1
-import React, { Fragment } from "react";
1
+import dayjs from "dayjs";
2
+import shortid from "shortid";
2 3
 import PropTypes from "prop-types";
3
-import { Icon, Button, Popover, Input, message } from "antd";
4 4
 import classnames from "classnames";
5
+import React, { Fragment } from "react";
5 6
 import intl from "react-intl-universal";
6
-import dayjs from "dayjs";
7
-import shortid from "shortid";
8
-import { OSS_LINK } from "../../constant";
9
-import { isFunction } from "../../helper";
10
-import Upload from "./Upload";
7
+import { Icon, Button, Popover, Input, message } from "antd";
11 8
 import Emoji from "./Emoji";
9
+import Upload from "./Upload";
12 10
 import Comment from "../../Comment";
11
+import { isMobile } from "./../../utils";
12
+import { OSS_LINK } from "../../constant";
13
+import { isFunction } from "../../helper";
13 14
 import {
14 15
   OSS_ENDPOINT,
15 16
   OSS_BUCKET,
@@ -70,6 +71,7 @@ class Editor extends React.Component {
70 71
     this.resetState = this.resetState.bind(this);
71 72
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
72 73
     this.handlePressEnter = this.handlePressEnter.bind(this);
74
+    this.invokeFileListChange = this.invokeFileListChange.bind(this);
73 75
   }
74 76
 
75 77
   componentDidMount() {
@@ -131,8 +133,7 @@ class Editor extends React.Component {
131 133
     if (fileList.length > this.props.maxUpload) {
132 134
       list = fileList.slice(0, this.props.maxUpload);
133 135
     }
134
-    this.props.handleChangeFileList(list);
135
-    this.setState({ fileList: list });
136
+    this.invokeFileListChange(list);
136 137
   }
137 138
 
138 139
   /**
@@ -161,8 +162,31 @@ class Editor extends React.Component {
161 162
       }
162 163
       return item;
163 164
     });
164
-    this.props.handleChangeFileList(fileList);
165
-    this.setState({ fileMap, fileList });
165
+    this.setState({ fileMap });
166
+    this.invokeFileListChange(fileList);
167
+  }
168
+
169
+  /**
170
+   *  **统一处理fileList的修改**
171
+   *  1. upload
172
+   *  2. paste
173
+   *  PS: 移动端需要做额外操作
174
+   *  -- evo 20200223
175
+   */
176
+  invokeFileListChange(fileList) {
177
+    const { limitOne, handleChangeFileList } = this.props;
178
+    handleChangeFileList(fileList);
179
+    this.setState({ fileList });
180
+    if (limitOne && isMobile) {
181
+      const file = fileList[0];
182
+      if (
183
+        file &&
184
+        file.status === "done" &&
185
+        !file.thumbUrl.includes("data:image")
186
+      ) {
187
+        this.setState({ uploadVisible: false });
188
+      }
189
+    }
166 190
   }
167 191
 
168 192
   /**
@@ -198,10 +222,7 @@ class Editor extends React.Component {
198 222
             type: file.type,
199 223
             uid: new Date().valueOf()
200 224
           });
201
-          this.props.handleChangeFileList(fileList);
202
-          this.setState({
203
-            fileList
204
-          });
225
+          this.invokeFileListChange(fileList);
205 226
         })
206 227
         .catch(e => {
207 228
           const msg = e.message || ERROR_DEFAULT;
@@ -411,13 +432,7 @@ class Editor extends React.Component {
411 432
                         });
412 433
                       }}
413 434
                       content={
414
-                        <div
415
-                          style={{
416
-                            width: 336, // 一行显示3张
417
-                            minHeight: 100,
418
-                            margin: "0 auto"
419
-                          }}
420
-                        >
435
+                        <div className="comment-img-popover">
421 436
                           <Upload
422 437
                             onRef={node => (this.uploadRef = node)}
423 438
                             multiple={multiple}
@@ -432,11 +447,11 @@ class Editor extends React.Component {
432 447
                         </div>
433 448
                       }
434 449
                       title={
435
-                        <div style={{ margin: "5px auto" }}>
450
+                        <div className="comment-img-title">
436 451
                           <span>
437 452
                             {intl.get("editor.uploadTip")}
438 453
                             {maxUpload >= 2 ? (
439
-                              <span style={{ color: "#666", fontWeight: 400 }}>
454
+                              <span className="comment-img-title-counter">
440 455
                                 {intl.get("editor.uploadCount", {
441 456
                                   count: maxUpload - uploadFileList.length
442 457
                                 })}
@@ -528,7 +543,9 @@ Editor.propTypes = {
528 543
   onError: PropTypes.func,
529 544
   maxLength: PropTypes.number,
530 545
   // Enter事件相关
531
-  allowEnterSubmit: PropTypes.bool
546
+  allowEnterSubmit: PropTypes.bool,
547
+  // 私信仅允许选中一个,此处可以优化为通用的limit
548
+  limitOne: PropTypes.bool
532 549
 };
533 550
 
534 551
 Editor.defaultProps = {
@@ -550,7 +567,8 @@ Editor.defaultProps = {
550 567
   app: {},
551 568
   handleChangeFileList: () => {},
552 569
   // Enter事件相关
553
-  allowEnterSubmit: false
570
+  allowEnterSubmit: false,
571
+  limitOne: false
554 572
 };
555 573
 
556 574
 export default Comment(Editor);

+ 1
- 1
src/index.js 查看文件

@@ -38,12 +38,12 @@ class Index extends React.Component {
38 38
             this.setState({ value });
39 39
           }}
40 40
           handleChangeFileList={fileList => {
41
-            console.log("----", fileList);
42 41
             this.setState({
43 42
               fileList
44 43
             });
45 44
           }}
46 45
           allowEnterSubmit
46
+          limitOne
47 47
         />
48 48
       </App>
49 49
     );

+ 5
- 0
src/utils.js 查看文件

@@ -0,0 +1,5 @@
1
+/**
2
+ * 575: 为了和media query中的判断保持一致
3
+ */
4
+export const isMobile =
5
+  typeof window.orientation === "number" && document.body.offsetWidth < 575;