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

README.md

@@ -372,3 +372,4 @@ $ yarn start
 - [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`
 - [ ] 上传图片的时候偶尔会出现InvalidPart
 - [ ] 上传图片失败时, 提示并且不显示缩略图
+- [x] 支持Ente事件(PC端和手机键盘Enter)

lib/index.js

@@ -177,7 +177,7 @@ if (process.env.NODE_ENV !== "production") {
       });
     },
     onCountChange: function onCountChange(c) {
-      console.log(c);
+      // console.log(c);
     },
     onDelete: function onDelete(type, data) {
       console.log(type, data);

src/App.js

@@ -594,6 +594,7 @@ class App extends Component {
       sUpdateComment: this.sUpdateComment,
       handleEdit: this.handleEdit
     };
+
     return (
       this.state.initDone && (
         <CommentContext.Provider value={value}>

src/components/Editor/index.js

@@ -60,7 +60,6 @@ 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);
@@ -72,7 +71,7 @@ class Editor extends React.Component {
   }
 
   componentDidMount() {
-    const { app, onRef } = this.props;
+    const { app, onRef, allowEnter, onPressEnter } = this.props;
     if (
       app.currentUser &&
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
@@ -82,6 +81,9 @@ 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) {
@@ -101,12 +103,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 的事件
@@ -294,6 +296,23 @@ class Editor extends React.Component {
     return true;
   }
 
+  /**
+   *  **处理Enter事件**
+   *  1. `allowEnter` & `onPressEnter`同时有效时才能触发
+   *  2. `e.preventDefault`为了防止enter事件后仍触发换行
+   *  3. enter事件开启，仍可以用`shift + enter`触发换行
+   *  -- evo 20200222
+   */
+  handlePressEnter = e => {
+    const { allowEnter, onPressEnter } = this.props;
+    if (allowEnter && onPressEnter) {
+      if (!e.shiftKey) {
+        e.preventDefault();
+        onPressEnter();
+      }
+    }
+  };
+
   render() {
     const {
       value,
@@ -326,6 +345,7 @@ class Editor extends React.Component {
     const isLogin =
       app.currentUser &&
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
+
     return (
       <div className="comment-editor-container" onPaste={this.handlePaste}>
         {isLogin ? (
@@ -339,10 +359,13 @@ class Editor extends React.Component {
             <div className="comment-editor">
               <TextArea
                 value={inputValue}
-                onChange={e => this.handleChange(e.target.value)}
+                onChange={e => {
+                  this.handleChange(e.target.value);
+                }}
                 rows={rows}
                 placeholder={placeholder}
                 autoFocus={autoFocus}
+                onPressEnter={this.handlePressEnter}
               />
 
               <div className="comment-toolbar">
@@ -505,7 +528,10 @@ Editor.propTypes = {
   imageToolIcon: PropTypes.node,
   showError: PropTypes.bool,
   onError: PropTypes.func,
-  maxLength: PropTypes.number
+  maxLength: PropTypes.number,
+  // Enter事件相关
+  allowEnter: PropTypes.bool,
+  onPressEnter: PropTypes.func
 };
 
 Editor.defaultProps = {
@@ -525,7 +551,10 @@ Editor.defaultProps = {
   showError: true,
   maxLength: 5000,
   app: {},
-  handleChangeFileList: () => {}
+  handleChangeFileList: () => {},
+  // Enter事件相关
+  allowEnter: false,
+  onPressEnter: undefined
 };
 
 export default Comment(Editor);

src/index.js

@@ -35,9 +35,7 @@ class Index extends React.Component {
           fileList={this.state.fileList}
           value={this.state.value}
           onChange={value => {
-            this.setState({
-              value
-            });
+            this.setState({ value });
           }}
           handleChangeFileList={fileList => {
             console.log("----", fileList);
@@ -45,6 +43,8 @@ class Index extends React.Component {
               fileList
             });
           }}
+          allowEnter
+          onPressEnter={e => alert("enter pressed")}
         />
       </App>
     );
@@ -142,7 +142,7 @@ if (process.env.NODE_ENV !== "production") {
       });
     },
     onCountChange: c => {
-      console.log(c);
+      // console.log(c);
     },
     onDelete: (type, data) => {
       console.log(type, data);