Browse Source

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

AdamFu 4 years ago
parent
commit
78fe198b54
5 changed files with 43 additions and 12 deletions
  1. 1
    0
      README.md
  2. 1
    1
      lib/index.js
  3. 1
    0
      src/App.js
  4. 36
    7
      src/components/Editor/index.js
  5. 4
    4
      src/index.js

+ 1
- 0
README.md View File

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

+ 1
- 1
lib/index.js View File

177
       });
177
       });
178
     },
178
     },
179
     onCountChange: function onCountChange(c) {
179
     onCountChange: function onCountChange(c) {
180
-      console.log(c);
180
+      // console.log(c);
181
     },
181
     },
182
     onDelete: function onDelete(type, data) {
182
     onDelete: function onDelete(type, data) {
183
       console.log(type, data);
183
       console.log(type, data);

+ 1
- 0
src/App.js View File

594
       sUpdateComment: this.sUpdateComment,
594
       sUpdateComment: this.sUpdateComment,
595
       handleEdit: this.handleEdit
595
       handleEdit: this.handleEdit
596
     };
596
     };
597
+
597
     return (
598
     return (
598
       this.state.initDone && (
599
       this.state.initDone && (
599
         <CommentContext.Provider value={value}>
600
         <CommentContext.Provider value={value}>

+ 36
- 7
src/components/Editor/index.js View File

60
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
60
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
61
       uploadVisible: false
61
       uploadVisible: false
62
     };
62
     };
63
-    this.handleChange = this.handleChange.bind(this);
64
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
63
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
65
     this.handleChangeFileList = this.handleChangeFileList.bind(this);
64
     this.handleChangeFileList = this.handleChangeFileList.bind(this);
66
     this.handleShowUpload = this.handleShowUpload.bind(this);
65
     this.handleShowUpload = this.handleShowUpload.bind(this);
72
   }
71
   }
73
 
72
 
74
   componentDidMount() {
73
   componentDidMount() {
75
-    const { app, onRef } = this.props;
74
+    const { app, onRef, allowEnter, onPressEnter } = this.props;
76
     if (
75
     if (
77
       app.currentUser &&
76
       app.currentUser &&
78
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
77
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
82
     if (isFunction(onRef)) {
81
     if (isFunction(onRef)) {
83
       onRef(this);
82
       onRef(this);
84
     }
83
     }
84
+
85
+    if ((allowEnter && !onPressEnter) || (!allowEnter && onPressEnter))
86
+      console.error("`onPressEnter` must be undefined when `allowEnter`!");
85
   }
87
   }
86
 
88
 
87
   handleEmojiScroll(e) {
89
   handleEmojiScroll(e) {
101
    * 将最新的值存储到 state 中
103
    * 将最新的值存储到 state 中
102
    * @param {string} value 输入的值
104
    * @param {string} value 输入的值
103
    */
105
    */
104
-  handleChange(value) {
106
+  handleChange = value => {
105
     this.setState({ value });
107
     this.setState({ value });
106
     if (this.props.onChange) {
108
     if (this.props.onChange) {
107
       this.props.onChange(value);
109
       this.props.onChange(value);
108
     }
110
     }
109
-  }
111
+  };
110
 
112
 
111
   /**
113
   /**
112
    * 点击 emoji 的事件
114
    * 点击 emoji 的事件
294
     return true;
296
     return true;
295
   }
297
   }
296
 
298
 
299
+  /**
300
+   *  **处理Enter事件**
301
+   *  1. `allowEnter` & `onPressEnter`同时有效时才能触发
302
+   *  2. `e.preventDefault`为了防止enter事件后仍触发换行
303
+   *  3. enter事件开启,仍可以用`shift + enter`触发换行
304
+   *  -- evo 20200222
305
+   */
306
+  handlePressEnter = e => {
307
+    const { allowEnter, onPressEnter } = this.props;
308
+    if (allowEnter && onPressEnter) {
309
+      if (!e.shiftKey) {
310
+        e.preventDefault();
311
+        onPressEnter();
312
+      }
313
+    }
314
+  };
315
+
297
   render() {
316
   render() {
298
     const {
317
     const {
299
       value,
318
       value,
326
     const isLogin =
345
     const isLogin =
327
       app.currentUser &&
346
       app.currentUser &&
328
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
347
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
348
+
329
     return (
349
     return (
330
       <div className="comment-editor-container" onPaste={this.handlePaste}>
350
       <div className="comment-editor-container" onPaste={this.handlePaste}>
331
         {isLogin ? (
351
         {isLogin ? (
339
             <div className="comment-editor">
359
             <div className="comment-editor">
340
               <TextArea
360
               <TextArea
341
                 value={inputValue}
361
                 value={inputValue}
342
-                onChange={e => this.handleChange(e.target.value)}
362
+                onChange={e => {
363
+                  this.handleChange(e.target.value);
364
+                }}
343
                 rows={rows}
365
                 rows={rows}
344
                 placeholder={placeholder}
366
                 placeholder={placeholder}
345
                 autoFocus={autoFocus}
367
                 autoFocus={autoFocus}
368
+                onPressEnter={this.handlePressEnter}
346
               />
369
               />
347
 
370
 
348
               <div className="comment-toolbar">
371
               <div className="comment-toolbar">
505
   imageToolIcon: PropTypes.node,
528
   imageToolIcon: PropTypes.node,
506
   showError: PropTypes.bool,
529
   showError: PropTypes.bool,
507
   onError: PropTypes.func,
530
   onError: PropTypes.func,
508
-  maxLength: PropTypes.number
531
+  maxLength: PropTypes.number,
532
+  // Enter事件相关
533
+  allowEnter: PropTypes.bool,
534
+  onPressEnter: PropTypes.func
509
 };
535
 };
510
 
536
 
511
 Editor.defaultProps = {
537
 Editor.defaultProps = {
525
   showError: true,
551
   showError: true,
526
   maxLength: 5000,
552
   maxLength: 5000,
527
   app: {},
553
   app: {},
528
-  handleChangeFileList: () => {}
554
+  handleChangeFileList: () => {},
555
+  // Enter事件相关
556
+  allowEnter: false,
557
+  onPressEnter: undefined
529
 };
558
 };
530
 
559
 
531
 export default Comment(Editor);
560
 export default Comment(Editor);

+ 4
- 4
src/index.js View File

35
           fileList={this.state.fileList}
35
           fileList={this.state.fileList}
36
           value={this.state.value}
36
           value={this.state.value}
37
           onChange={value => {
37
           onChange={value => {
38
-            this.setState({
39
-              value
40
-            });
38
+            this.setState({ value });
41
           }}
39
           }}
42
           handleChangeFileList={fileList => {
40
           handleChangeFileList={fileList => {
43
             console.log("----", fileList);
41
             console.log("----", fileList);
45
               fileList
43
               fileList
46
             });
44
             });
47
           }}
45
           }}
46
+          allowEnter
47
+          onPressEnter={e => alert("enter pressed")}
48
         />
48
         />
49
       </App>
49
       </App>
50
     );
50
     );
142
       });
142
       });
143
     },
143
     },
144
     onCountChange: c => {
144
     onCountChange: c => {
145
-      console.log(c);
145
+      // console.log(c);
146
     },
146
     },
147
     onDelete: (type, data) => {
147
     onDelete: (type, data) => {
148
       console.log(type, data);
148
       console.log(type, data);