소스 검색

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

Evo 4 년 전
부모
커밋
016964ff38
11개의 변경된 파일130개의 추가작업 그리고 56개의 파일을 삭제
  1. 25
    0
      lib/components/Editor/index.css
  2. 48
    34
      lib/components/Editor/index.js
  3. 1
    1
      lib/components/Editor/index.js.map
  4. 0
    1
      lib/index.js
  5. 1
    1
      lib/index.js.map
  6. 11
    0
      lib/utils.js
  7. 1
    0
      lib/utils.js.map
  8. 4
    4
      lib/version.json
  9. 34
    14
      src/components/Editor/index.js
  10. 0
    1
      src/index.js
  11. 5
    0
      src/utils.js

+ 25
- 0
lib/components/Editor/index.css 파일 보기

130
     height: 28px;
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 파일 보기

36
 
36
 
37
 require("antd/es/input/style");
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
 var _propTypes = require("prop-types");
47
 var _propTypes = require("prop-types");
44
 
48
 
48
 
52
 
49
 var _classnames2 = _interopRequireDefault(_classnames);
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
 var _Upload = require("./Upload");
67
 var _Upload = require("./Upload");
68
 
68
 
69
 var _Upload2 = _interopRequireDefault(_Upload);
69
 var _Upload2 = _interopRequireDefault(_Upload);
70
 
70
 
71
-var _Emoji = require("./Emoji");
72
-
73
-var _Emoji2 = _interopRequireDefault(_Emoji);
74
-
75
 var _Comment = require("../../Comment");
71
 var _Comment = require("../../Comment");
76
 
72
 
77
 var _Comment2 = _interopRequireDefault(_Comment);
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
 require("./index.css");
81
 require("./index.css");
80
 
82
 
81
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
83
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
139
     _this.resetState = _this.resetState.bind(_this);
141
     _this.resetState = _this.resetState.bind(_this);
140
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
142
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
141
     _this.handlePressEnter = _this.handlePressEnter.bind(_this);
143
     _this.handlePressEnter = _this.handlePressEnter.bind(_this);
144
+    _this.invokeFileListChange = _this.invokeFileListChange.bind(_this);
142
     return _this;
145
     return _this;
143
   }
146
   }
144
 
147
 
213
       if (fileList.length > this.props.maxUpload) {
216
       if (fileList.length > this.props.maxUpload) {
214
         list = fileList.slice(0, this.props.maxUpload);
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
         }
254
         }
253
         return item;
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
     key: "handlePaste",
282
     key: "handlePaste",
283
+
284
+
285
+    /**
286
+     * 粘贴回调
287
+     */
265
     value: function handlePaste(e) {
288
     value: function handlePaste(e) {
266
       var _this2 = this;
289
       var _this2 = this;
267
 
290
 
293
             type: file.type,
316
             type: file.type,
294
             uid: new Date().valueOf()
317
             uid: new Date().valueOf()
295
           });
318
           });
296
-          _this2.props.handleChangeFileList(fileList);
297
-          _this2.setState({
298
-            fileList: fileList
299
-          });
319
+          _this2.invokeFileListChange(fileList);
300
         }).catch(function (e) {
320
         }).catch(function (e) {
301
           var msg = e.message || _constant.ERROR_DEFAULT;
321
           var msg = e.message || _constant.ERROR_DEFAULT;
302
           if (_this2.props.showError) {
322
           if (_this2.props.showError) {
525
                     },
545
                     },
526
                     content: _react2.default.createElement(
546
                     content: _react2.default.createElement(
527
                       "div",
547
                       "div",
528
-                      {
529
-                        style: {
530
-                          width: 336, // 一行显示3张
531
-                          minHeight: 100,
532
-                          margin: "0 auto"
533
-                        }
534
-                      },
548
+                      { className: "comment-img-popover" },
535
                       _react2.default.createElement(_Upload2.default, {
549
                       _react2.default.createElement(_Upload2.default, {
536
                         onRef: function onRef(node) {
550
                         onRef: function onRef(node) {
537
                           return _this4.uploadRef = node;
551
                           return _this4.uploadRef = node;
548
                     ),
562
                     ),
549
                     title: _react2.default.createElement(
563
                     title: _react2.default.createElement(
550
                       "div",
564
                       "div",
551
-                      { style: { margin: "5px auto" } },
565
+                      { className: "comment-img-title" },
552
                       _react2.default.createElement(
566
                       _react2.default.createElement(
553
                         "span",
567
                         "span",
554
                         null,
568
                         null,
555
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
569
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
556
                         maxUpload >= 2 ? _react2.default.createElement(
570
                         maxUpload >= 2 ? _react2.default.createElement(
557
                           "span",
571
                           "span",
558
-                          { style: { color: "#666", fontWeight: 400 } },
572
+                          { className: "comment-img-title-counter" },
559
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
573
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
560
                             count: maxUpload - uploadFileList.length
574
                             count: maxUpload - uploadFileList.length
561
                           })
575
                           })

+ 1
- 1
lib/components/Editor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 0
- 1
lib/index.js 파일 보기

71
             _this2.setState({ value: value });
71
             _this2.setState({ value: value });
72
           },
72
           },
73
           handleChangeFileList: function handleChangeFileList(fileList) {
73
           handleChangeFileList: function handleChangeFileList(fileList) {
74
-            console.log("----", fileList);
75
             _this2.setState({
74
             _this2.setState({
76
               fileList: fileList
75
               fileList: fileList
77
             });
76
             });

+ 1
- 1
lib/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 11
- 0
lib/utils.js 파일 보기

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 파일 보기

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 파일 보기

1
 {
1
 {
2
     "name":       "comment",
2
     "name":       "comment",
3
-    "buildDate":  1582351916030,
3
+    "buildDate":  1582452764350,
4
     "version":    "1.0.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 파일 보기

1
-import React, { Fragment } from "react";
1
+import dayjs from "dayjs";
2
+import shortid from "shortid";
2
 import PropTypes from "prop-types";
3
 import PropTypes from "prop-types";
3
-import { Icon, Button, Popover, Input, message } from "antd";
4
 import classnames from "classnames";
4
 import classnames from "classnames";
5
+import React, { Fragment } from "react";
5
 import intl from "react-intl-universal";
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
 import Emoji from "./Emoji";
8
 import Emoji from "./Emoji";
9
+import Upload from "./Upload";
12
 import Comment from "../../Comment";
10
 import Comment from "../../Comment";
11
+import { isMobile } from "./../../utils";
12
+import { OSS_LINK } from "../../constant";
13
+import { isFunction } from "../../helper";
13
 import {
14
 import {
14
   OSS_ENDPOINT,
15
   OSS_ENDPOINT,
15
   OSS_BUCKET,
16
   OSS_BUCKET,
70
     this.resetState = this.resetState.bind(this);
71
     this.resetState = this.resetState.bind(this);
71
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
72
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
72
     this.handlePressEnter = this.handlePressEnter.bind(this);
73
     this.handlePressEnter = this.handlePressEnter.bind(this);
74
+    this.invokeFileListChange = this.invokeFileListChange.bind(this);
73
   }
75
   }
74
 
76
 
75
   componentDidMount() {
77
   componentDidMount() {
131
     if (fileList.length > this.props.maxUpload) {
133
     if (fileList.length > this.props.maxUpload) {
132
       list = fileList.slice(0, this.props.maxUpload);
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
       }
162
       }
162
       return item;
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
     this.props.handleChangeFileList(fileList);
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
             type: file.type,
221
             type: file.type,
199
             uid: new Date().valueOf()
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
         .catch(e => {
226
         .catch(e => {
207
           const msg = e.message || ERROR_DEFAULT;
227
           const msg = e.message || ERROR_DEFAULT;

+ 0
- 1
src/index.js 파일 보기

38
             this.setState({ value });
38
             this.setState({ value });
39
           }}
39
           }}
40
           handleChangeFileList={fileList => {
40
           handleChangeFileList={fileList => {
41
-            console.log("----", fileList);
42
             this.setState({
41
             this.setState({
43
               fileList
42
               fileList
44
             });
43
             });

+ 5
- 0
src/utils.js 파일 보기

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