Przeglądaj źródła

移动端只能上传一张图片;执行yarn lib

Evo 4 lat temu
rodzic
commit
016964ff38

+ 25
- 0
lib/components/Editor/index.css Wyświetl plik

@@ -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
+}

+ 48
- 34
lib/components/Editor/index.js Wyświetl plik

@@ -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,16 +254,37 @@ 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);
257 259
     }
258 260
 
259 261
     /**
260
-     * 粘贴回调
262
+     *  **统一处理fileList的修改**
263
+     *  1. upload
264
+     *  2. paste
265
+     *  PS: 移动端需要做额外操作
266
+     *  -- evo 20200223
261 267
      */
262 268
 
269
+  }, {
270
+    key: "invokeFileListChange",
271
+    value: function invokeFileListChange(fileList) {
272
+      this.props.handleChangeFileList(fileList);
273
+      this.setState({ fileList: fileList });
274
+      if (_utils.isMobile) {
275
+        var file = fileList[0];
276
+        if (file && file.status === 'done' && !file.thumbUrl.includes('data:image')) {
277
+          this.setState({ uploadVisible: false });
278
+        }
279
+      }
280
+    }
263 281
   }, {
264 282
     key: "handlePaste",
283
+
284
+
285
+    /**
286
+     * 粘贴回调
287
+     */
265 288
     value: function handlePaste(e) {
266 289
       var _this2 = this;
267 290
 
@@ -293,10 +316,7 @@ var Editor = function (_React$Component) {
293 316
             type: file.type,
294 317
             uid: new Date().valueOf()
295 318
           });
296
-          _this2.props.handleChangeFileList(fileList);
297
-          _this2.setState({
298
-            fileList: fileList
299
-          });
319
+          _this2.invokeFileListChange(fileList);
300 320
         }).catch(function (e) {
301 321
           var msg = e.message || _constant.ERROR_DEFAULT;
302 322
           if (_this2.props.showError) {
@@ -525,13 +545,7 @@ var Editor = function (_React$Component) {
525 545
                     },
526 546
                     content: _react2.default.createElement(
527 547
                       "div",
528
-                      {
529
-                        style: {
530
-                          width: 336, // 一行显示3张
531
-                          minHeight: 100,
532
-                          margin: "0 auto"
533
-                        }
534
-                      },
548
+                      { className: "comment-img-popover" },
535 549
                       _react2.default.createElement(_Upload2.default, {
536 550
                         onRef: function onRef(node) {
537 551
                           return _this4.uploadRef = node;
@@ -548,14 +562,14 @@ var Editor = function (_React$Component) {
548 562
                     ),
549 563
                     title: _react2.default.createElement(
550 564
                       "div",
551
-                      { style: { margin: "5px auto" } },
565
+                      { className: "comment-img-title" },
552 566
                       _react2.default.createElement(
553 567
                         "span",
554 568
                         null,
555 569
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
556 570
                         maxUpload >= 2 ? _react2.default.createElement(
557 571
                           "span",
558
-                          { style: { color: "#666", fontWeight: 400 } },
572
+                          { className: "comment-img-title-counter" },
559 573
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
560 574
                             count: maxUpload - uploadFileList.length
561 575
                           })

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


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

@@ -71,7 +71,6 @@ 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
             });

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


+ 11
- 0
lib/utils.js Wyświetl plik

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

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

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

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

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

+ 34
- 14
src/components/Editor/index.js Wyświetl plik

@@ -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,30 @@ class Editor extends React.Component {
161 162
       }
162 163
       return item;
163 164
     });
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) {
164 177
     this.props.handleChangeFileList(fileList);
165
-    this.setState({ fileMap, fileList });
178
+    this.setState({ fileList });
179
+    if (isMobile) {
180
+      const file = fileList[0];
181
+      if (
182
+        file &&
183
+        file.status === "done" &&
184
+        !file.thumbUrl.includes("data:image")
185
+      ) {
186
+        this.setState({ uploadVisible: false });
187
+      }
188
+    }
166 189
   }
167 190
 
168 191
   /**
@@ -198,10 +221,7 @@ class Editor extends React.Component {
198 221
             type: file.type,
199 222
             uid: new Date().valueOf()
200 223
           });
201
-          this.props.handleChangeFileList(fileList);
202
-          this.setState({
203
-            fileList
204
-          });
224
+          this.invokeFileListChange(fileList);
205 225
         })
206 226
         .catch(e => {
207 227
           const msg = e.message || ERROR_DEFAULT;

+ 0
- 1
src/index.js Wyświetl plik

@@ -38,7 +38,6 @@ 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
             });

+ 5
- 0
src/utils.js Wyświetl plik

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