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

lib/components/Editor/index.css

@@ -130,3 +130,28 @@
     height: 28px;
   }
 }
+
+.comment-img-popover {
+  /* 一行显示3张图 */
+  width: 336px;
+  min-height: 100px;
+  margin: 0 auto;
+}
+
+.comment-img-title {
+  margin: 5px auto;
+}
+.comment-img-title-counter {
+  color: #666;
+  font-weight: 400;
+}
+
+@media (max-width: 575px) {
+  .comment-img-popover {
+    /* 一行显示2张图 */
+    width: 224px;
+  }
+  .comment-img-title-counter {
+    display: none;
+  }
+}

lib/components/Editor/index.js

@@ -36,9 +36,13 @@ require("antd/es/message/style");
 
 require("antd/es/input/style");
 
-var _react = require("react");
+var _dayjs = require("dayjs");
 
-var _react2 = _interopRequireDefault(_react);
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _shortid = require("shortid");
+
+var _shortid2 = _interopRequireDefault(_shortid);
 
 var _propTypes = require("prop-types");
 
@@ -48,34 +52,32 @@ var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactIntlUniversal = require("react-intl-universal");
-
-var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
-
-var _dayjs = require("dayjs");
+var _react = require("react");
 
-var _dayjs2 = _interopRequireDefault(_dayjs);
+var _react2 = _interopRequireDefault(_react);
 
-var _shortid = require("shortid");
+var _reactIntlUniversal = require("react-intl-universal");
 
-var _shortid2 = _interopRequireDefault(_shortid);
+var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
-var _constant = require("../../constant");
+var _Emoji = require("./Emoji");
 
-var _helper = require("../../helper");
+var _Emoji2 = _interopRequireDefault(_Emoji);
 
 var _Upload = require("./Upload");
 
 var _Upload2 = _interopRequireDefault(_Upload);
 
-var _Emoji = require("./Emoji");
-
-var _Emoji2 = _interopRequireDefault(_Emoji);
-
 var _Comment = require("../../Comment");
 
 var _Comment2 = _interopRequireDefault(_Comment);
 
+var _utils = require("./../../utils");
+
+var _constant = require("../../constant");
+
+var _helper = require("../../helper");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -139,6 +141,7 @@ var Editor = function (_React$Component) {
     _this.resetState = _this.resetState.bind(_this);
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
     _this.handlePressEnter = _this.handlePressEnter.bind(_this);
+    _this.invokeFileListChange = _this.invokeFileListChange.bind(_this);
     return _this;
   }
 
@@ -213,8 +216,7 @@ var Editor = function (_React$Component) {
       if (fileList.length > this.props.maxUpload) {
         list = fileList.slice(0, this.props.maxUpload);
       }
-      this.props.handleChangeFileList(list);
-      this.setState({ fileList: list });
+      this.invokeFileListChange(list);
     }
 
     /**
@@ -252,8 +254,33 @@ var Editor = function (_React$Component) {
         }
         return item;
       });
-      this.props.handleChangeFileList(fileList);
-      this.setState({ fileMap: fileMap, fileList: fileList });
+      this.setState({ fileMap: fileMap });
+      this.invokeFileListChange(fileList);
+    }
+
+    /**
+     *  **统一处理fileList的修改**
+     *  1. upload
+     *  2. paste
+     *  PS: 移动端需要做额外操作
+     *  -- evo 20200223
+     */
+
+  }, {
+    key: "invokeFileListChange",
+    value: function invokeFileListChange(fileList) {
+      var _props2 = this.props,
+          limitOne = _props2.limitOne,
+          handleChangeFileList = _props2.handleChangeFileList;
+
+      handleChangeFileList(fileList);
+      this.setState({ fileList: fileList });
+      if (limitOne && _utils.isMobile) {
+        var file = fileList[0];
+        if (file && file.status === "done" && !file.thumbUrl.includes("data:image")) {
+          this.setState({ uploadVisible: false });
+        }
+      }
     }
 
     /**
@@ -293,10 +320,7 @@ var Editor = function (_React$Component) {
             type: file.type,
             uid: new Date().valueOf()
           });
-          _this2.props.handleChangeFileList(fileList);
-          _this2.setState({
-            fileList: fileList
-          });
+          _this2.invokeFileListChange(fileList);
         }).catch(function (e) {
           var msg = e.message || _constant.ERROR_DEFAULT;
           if (_this2.props.showError) {
@@ -379,10 +403,10 @@ var Editor = function (_React$Component) {
   }, {
     key: "checkDisabledSubmit",
     value: function checkDisabledSubmit() {
-      var _props2 = this.props,
-          btnDisabled = _props2.btnDisabled,
-          value = _props2.value,
-          fileList = _props2.fileList;
+      var _props3 = this.props,
+          btnDisabled = _props3.btnDisabled,
+          value = _props3.value,
+          fileList = _props3.fileList;
 
       if (btnDisabled) {
         return true;
@@ -425,24 +449,24 @@ var Editor = function (_React$Component) {
     value: function render() {
       var _this4 = this;
 
-      var _props3 = this.props,
-          value = _props3.value,
-          rows = _props3.rows,
-          showEmoji = _props3.showEmoji,
-          showUpload = _props3.showUpload,
-          multiple = _props3.multiple,
-          emojiPopoverPlacement = _props3.emojiPopoverPlacement,
-          uploadPopoverPlacement = _props3.uploadPopoverPlacement,
-          uploadOverlayClassName = _props3.uploadOverlayClassName,
-          fileList = _props3.fileList,
-          maxUpload = _props3.maxUpload,
-          btnLoading = _props3.btnLoading,
-          button = _props3.button,
-          emojiToolIcon = _props3.emojiToolIcon,
-          imageToolIcon = _props3.imageToolIcon,
-          maxLength = _props3.maxLength,
-          autoFocus = _props3.autoFocus,
-          app = _props3.app;
+      var _props4 = this.props,
+          value = _props4.value,
+          rows = _props4.rows,
+          showEmoji = _props4.showEmoji,
+          showUpload = _props4.showUpload,
+          multiple = _props4.multiple,
+          emojiPopoverPlacement = _props4.emojiPopoverPlacement,
+          uploadPopoverPlacement = _props4.uploadPopoverPlacement,
+          uploadOverlayClassName = _props4.uploadOverlayClassName,
+          fileList = _props4.fileList,
+          maxUpload = _props4.maxUpload,
+          btnLoading = _props4.btnLoading,
+          button = _props4.button,
+          emojiToolIcon = _props4.emojiToolIcon,
+          imageToolIcon = _props4.imageToolIcon,
+          maxLength = _props4.maxLength,
+          autoFocus = _props4.autoFocus,
+          app = _props4.app;
 
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
@@ -525,13 +549,7 @@ var Editor = function (_React$Component) {
                     },
                     content: _react2.default.createElement(
                       "div",
-                      {
-                        style: {
-                          width: 336, // 一行显示3张
-                          minHeight: 100,
-                          margin: "0 auto"
-                        }
-                      },
+                      { className: "comment-img-popover" },
                       _react2.default.createElement(_Upload2.default, {
                         onRef: function onRef(node) {
                           return _this4.uploadRef = node;
@@ -548,14 +566,14 @@ var Editor = function (_React$Component) {
                     ),
                     title: _react2.default.createElement(
                       "div",
-                      { style: { margin: "5px auto" } },
+                      { className: "comment-img-title" },
                       _react2.default.createElement(
                         "span",
                         null,
                         _reactIntlUniversal2.default.get("editor.uploadTip"),
                         maxUpload >= 2 ? _react2.default.createElement(
                           "span",
-                          { style: { color: "#666", fontWeight: 400 } },
+                          { className: "comment-img-title-counter" },
                           _reactIntlUniversal2.default.get("editor.uploadCount", {
                             count: maxUpload - uploadFileList.length
                           })
@@ -652,7 +670,9 @@ Editor.propTypes = {
   onError: _propTypes2.default.func,
   maxLength: _propTypes2.default.number,
   // Enter事件相关
-  allowEnterSubmit: _propTypes2.default.bool
+  allowEnterSubmit: _propTypes2.default.bool,
+  // 私信仅允许选中一个，此处可以优化为通用的limit
+  limitOne: _propTypes2.default.bool
 };
 
 Editor.defaultProps = {
@@ -674,7 +694,8 @@ Editor.defaultProps = {
   app: {},
   handleChangeFileList: function handleChangeFileList() {},
   // Enter事件相关
-  allowEnterSubmit: false
+  allowEnterSubmit: false,
+  limitOne: false
 };
 
 exports.default = (0, _Comment2.default)(Editor);

lib/index.js

@@ -71,12 +71,12 @@ var Index = function (_React$Component) {
             _this2.setState({ value: value });
           },
           handleChangeFileList: function handleChangeFileList(fileList) {
-            console.log("----", fileList);
             _this2.setState({
               fileList: fileList
             });
           },
-          allowEnterSubmit: true
+          allowEnterSubmit: true,
+          limitOne: true
         }))
       );
     }

lib/utils.js

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

lib/utils.js.map

@@ -0,0 +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"]}

lib/version.json

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

src/components/Editor/index.css

@@ -130,3 +130,28 @@
     height: 28px;
   }
 }
+
+.comment-img-popover {
+  /* 一行显示3张图 */
+  width: 336px;
+  min-height: 100px;
+  margin: 0 auto;
+}
+
+.comment-img-title {
+  margin: 5px auto;
+}
+.comment-img-title-counter {
+  color: #666;
+  font-weight: 400;
+}
+
+@media (max-width: 575px) {
+  .comment-img-popover {
+    /* 一行显示2张图 */
+    width: 224px;
+  }
+  .comment-img-title-counter {
+    display: none;
+  }
+}

src/components/Editor/index.js

@@ -1,15 +1,16 @@
-import React, { Fragment } from "react";
+import dayjs from "dayjs";
+import shortid from "shortid";
 import PropTypes from "prop-types";
-import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
+import React, { Fragment } from "react";
 import intl from "react-intl-universal";
-import dayjs from "dayjs";
-import shortid from "shortid";
-import { OSS_LINK } from "../../constant";
-import { isFunction } from "../../helper";
-import Upload from "./Upload";
+import { Icon, Button, Popover, Input, message } from "antd";
 import Emoji from "./Emoji";
+import Upload from "./Upload";
 import Comment from "../../Comment";
+import { isMobile } from "./../../utils";
+import { OSS_LINK } from "../../constant";
+import { isFunction } from "../../helper";
 import {
   OSS_ENDPOINT,
   OSS_BUCKET,
@@ -70,6 +71,7 @@ class Editor extends React.Component {
     this.resetState = this.resetState.bind(this);
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
     this.handlePressEnter = this.handlePressEnter.bind(this);
+    this.invokeFileListChange = this.invokeFileListChange.bind(this);
   }
 
   componentDidMount() {
@@ -131,8 +133,7 @@ class Editor extends React.Component {
     if (fileList.length > this.props.maxUpload) {
       list = fileList.slice(0, this.props.maxUpload);
     }
-    this.props.handleChangeFileList(list);
-    this.setState({ fileList: list });
+    this.invokeFileListChange(list);
   }
 
   /**
@@ -161,8 +162,31 @@ class Editor extends React.Component {
       }
       return item;
     });
-    this.props.handleChangeFileList(fileList);
-    this.setState({ fileMap, fileList });
+    this.setState({ fileMap });
+    this.invokeFileListChange(fileList);
+  }
+
+  /**
+   *  **统一处理fileList的修改**
+   *  1. upload
+   *  2. paste
+   *  PS: 移动端需要做额外操作
+   *  -- evo 20200223
+   */
+  invokeFileListChange(fileList) {
+    const { limitOne, handleChangeFileList } = this.props;
+    handleChangeFileList(fileList);
+    this.setState({ fileList });
+    if (limitOne && isMobile) {
+      const file = fileList[0];
+      if (
+        file &&
+        file.status === "done" &&
+        !file.thumbUrl.includes("data:image")
+      ) {
+        this.setState({ uploadVisible: false });
+      }
+    }
   }
 
   /**
@@ -198,10 +222,7 @@ class Editor extends React.Component {
             type: file.type,
             uid: new Date().valueOf()
           });
-          this.props.handleChangeFileList(fileList);
-          this.setState({
-            fileList
-          });
+          this.invokeFileListChange(fileList);
         })
         .catch(e => {
           const msg = e.message || ERROR_DEFAULT;
@@ -411,13 +432,7 @@ class Editor extends React.Component {
                         });
                       }}
                       content={
-                        <div
-                          style={{
-                            width: 336, // 一行显示3张
-                            minHeight: 100,
-                            margin: "0 auto"
-                          }}
-                        >
+                        <div className="comment-img-popover">
                           <Upload
                             onRef={node => (this.uploadRef = node)}
                             multiple={multiple}
@@ -432,11 +447,11 @@ class Editor extends React.Component {
                         </div>
                       }
                       title={
-                        <div style={{ margin: "5px auto" }}>
+                        <div className="comment-img-title">
                           <span>
                             {intl.get("editor.uploadTip")}
                             {maxUpload >= 2 ? (
-                              <span style={{ color: "#666", fontWeight: 400 }}>
+                              <span className="comment-img-title-counter">
                                 {intl.get("editor.uploadCount", {
                                   count: maxUpload - uploadFileList.length
                                 })}
@@ -528,7 +543,9 @@ Editor.propTypes = {
   onError: PropTypes.func,
   maxLength: PropTypes.number,
   // Enter事件相关
-  allowEnterSubmit: PropTypes.bool
+  allowEnterSubmit: PropTypes.bool,
+  // 私信仅允许选中一个，此处可以优化为通用的limit
+  limitOne: PropTypes.bool
 };
 
 Editor.defaultProps = {
@@ -550,7 +567,8 @@ Editor.defaultProps = {
   app: {},
   handleChangeFileList: () => {},
   // Enter事件相关
-  allowEnterSubmit: false
+  allowEnterSubmit: false,
+  limitOne: false
 };
 
 export default Comment(Editor);

src/index.js

@@ -38,12 +38,12 @@ class Index extends React.Component {
             this.setState({ value });
           }}
           handleChangeFileList={fileList => {
-            console.log("----", fileList);
             this.setState({
               fileList
             });
           }}
           allowEnterSubmit
+          limitOne
         />
       </App>
     );

src/utils.js

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