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

lib/App.js

@@ -745,6 +745,7 @@ var App = function (_Component) {
         sUpdateComment: this.sUpdateComment,
         handleEdit: this.handleEdit
       });
+
       return this.state.initDone && _react2.default.createElement(
         _Comment.CommentContext.Provider,
         { value: value },

lib/components/Editor/index.js

@@ -138,6 +138,7 @@ var Editor = function (_React$Component) {
     _this.handlePaste = _this.handlePaste.bind(_this);
     _this.resetState = _this.resetState.bind(_this);
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
+    _this.handlePressEnter = _this.handlePressEnter.bind(_this);
     return _this;
   }
 
@@ -400,6 +401,25 @@ var Editor = function (_React$Component) {
       }
       return true;
     }
+
+    /**
+     *  **处理Enter事件**
+     *  1. `allowEnterSubmit`为true时enter触发submit事件
+     *  2. `e.preventDefault`为了防止enter事件后仍触发换行
+     *  3. enter事件开启后，仍可以用`shift + enter`触发换行
+     *  -- evo 20200222
+     */
+
+  }, {
+    key: "handlePressEnter",
+    value: function handlePressEnter(e) {
+      if (this.props.allowEnterSubmit) {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.handleSubmit();
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -431,6 +451,7 @@ var Editor = function (_React$Component) {
       var inputValue = value || this.state.value;
       var uploadFileList = fileList || this.state.fileList;
       var isLogin = app.currentUser && (app.currentUser.user_id > 0 || app.currentUser.id > 0);
+
       return _react2.default.createElement(
         "div",
         { className: "comment-editor-container", onPaste: this.handlePaste },
@@ -449,11 +470,12 @@ var Editor = function (_React$Component) {
             _react2.default.createElement(TextArea, {
               value: inputValue,
               onChange: function onChange(e) {
-                return _this4.handleChange(e.target.value);
+                _this4.handleChange(e.target.value);
               },
               rows: rows,
               placeholder: placeholder,
-              autoFocus: autoFocus
+              autoFocus: autoFocus,
+              onPressEnter: this.handlePressEnter
             }),
             _react2.default.createElement(
               "div",
@@ -628,7 +650,9 @@ Editor.propTypes = {
   imageToolIcon: _propTypes2.default.node,
   showError: _propTypes2.default.bool,
   onError: _propTypes2.default.func,
-  maxLength: _propTypes2.default.number
+  maxLength: _propTypes2.default.number,
+  // Enter事件相关
+  allowEnterSubmit: _propTypes2.default.bool
 };
 
 Editor.defaultProps = {
@@ -648,7 +672,9 @@ Editor.defaultProps = {
   showError: true,
   maxLength: 5000,
   app: {},
-  handleChangeFileList: function handleChangeFileList() {}
+  handleChangeFileList: function handleChangeFileList() {},
+  // Enter事件相关
+  allowEnterSubmit: false
 };
 
 exports.default = (0, _Comment2.default)(Editor);

lib/index.js

@@ -68,16 +68,15 @@ var Index = function (_React$Component) {
           fileList: this.state.fileList,
           value: this.state.value,
           onChange: function onChange(value) {
-            _this2.setState({
-              value: value
-            });
+            _this2.setState({ value: value });
           },
           handleChangeFileList: function handleChangeFileList(fileList) {
             console.log("----", fileList);
             _this2.setState({
               fileList: fileList
             });
-          }
+          },
+          allowEnterSubmit: true
         }))
       );
     }

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1577536315907,
+    "buildDate":  1582351916030,
     "version":    "1.0.4",
-    "numCommits": 197,
-    "hash":       "92e9ffb",
-    "dirty":      true
+    "numCommits": 201,
+    "hash":       "556bf1c",
+    "dirty":      false
 }

src/components/Editor/index.js

@@ -60,6 +60,7 @@ class Editor extends React.Component {
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
       uploadVisible: false
     };
+    this.handleChange = this.handleChange.bind(this);
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
     this.handleChangeFileList = this.handleChangeFileList.bind(this);
     this.handleShowUpload = this.handleShowUpload.bind(this);
@@ -68,10 +69,11 @@ class Editor extends React.Component {
     this.handlePaste = this.handlePaste.bind(this);
     this.resetState = this.resetState.bind(this);
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
+    this.handlePressEnter = this.handlePressEnter.bind(this);
   }
 
   componentDidMount() {
-    const { app, onRef, allowEnter, onPressEnter } = this.props;
+    const { app, onRef } = this.props;
     if (
       app.currentUser &&
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
@@ -81,9 +83,6 @@ class Editor extends React.Component {
     if (isFunction(onRef)) {
       onRef(this);
     }
-
-    if ((allowEnter && !onPressEnter) || (!allowEnter && onPressEnter))
-      console.error("`onPressEnter` must be undefined when `allowEnter`!");
   }
 
   handleEmojiScroll(e) {
@@ -103,12 +102,12 @@ class Editor extends React.Component {
    * 将最新的值存储到 state 中
    * @param {string} value 输入的值
    */
-  handleChange = value => {
+  handleChange(value) {
     this.setState({ value });
     if (this.props.onChange) {
       this.props.onChange(value);
     }
-  };
+  }
 
   /**
    * 点击 emoji 的事件
@@ -298,20 +297,19 @@ class Editor extends React.Component {
 
   /**
    *  **处理Enter事件**
-   *  1. `allowEnter` & `onPressEnter`同时有效时才能触发
+   *  1. `allowEnterSubmit`为true时enter触发submit事件
    *  2. `e.preventDefault`为了防止enter事件后仍触发换行
-   *  3. enter事件开启，仍可以用`shift + enter`触发换行
+   *  3. enter事件开启后，仍可以用`shift + enter`触发换行
    *  -- evo 20200222
    */
-  handlePressEnter = e => {
-    const { allowEnter, onPressEnter } = this.props;
-    if (allowEnter && onPressEnter) {
+  handlePressEnter(e) {
+    if (this.props.allowEnterSubmit) {
       if (!e.shiftKey) {
         e.preventDefault();
-        onPressEnter();
+        this.handleSubmit();
       }
     }
-  };
+  }
 
   render() {
     const {
@@ -530,8 +528,7 @@ Editor.propTypes = {
   onError: PropTypes.func,
   maxLength: PropTypes.number,
   // Enter事件相关
-  allowEnter: PropTypes.bool,
-  onPressEnter: PropTypes.func
+  allowEnterSubmit: PropTypes.bool
 };
 
 Editor.defaultProps = {
@@ -553,8 +550,7 @@ Editor.defaultProps = {
   app: {},
   handleChangeFileList: () => {},
   // Enter事件相关
-  allowEnter: false,
-  onPressEnter: undefined
+  allowEnterSubmit: false
 };
 
 export default Comment(Editor);

src/index.js

@@ -43,8 +43,7 @@ class Index extends React.Component {
               fileList
             });
           }}
-          allowEnter
-          onPressEnter={e => alert("enter pressed")}
+          allowEnterSubmit
         />
       </App>
     );