Browse Source

Add: Enter event;

Evo 4 years ago
parent
commit
855671a6fc
5 changed files with 51 additions and 12 deletions
  1. 1
    0
      README.md
  2. 1
    1
      lib/index.js
  3. 1
    0
      src/App.js
  4. 44
    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}>

+ 44
- 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
+  // allowInput = true;
300
+  // handleKeyDownWhenAllowEnter = e => {
301
+  //   const { allowEnter } = this.props;
302
+  //   // enter
303
+  //   if(allowEnter && e.keyCode === 13) {
304
+  //     // e.stopPropagation();
305
+  //     // return false;
306
+  //   }
307
+  //   // console.log("ee =>", e, typeof e.keyCode, e.ctrlKey);
308
+  // };
309
+
310
+  /**
311
+   *
312
+   *  -- evo 20200222
313
+   */
314
+  handlePressEnter = e => {
315
+    const { allowEnter, onPressEnter } = this.props;
316
+    if (allowEnter && onPressEnter) {
317
+      if (!e.shiftKey) {
318
+        e.preventDefault();
319
+        onPressEnter();
320
+      }
321
+    }
322
+  };
323
+
297
   render() {
324
   render() {
298
     const {
325
     const {
299
       value,
326
       value,
326
     const isLogin =
353
     const isLogin =
327
       app.currentUser &&
354
       app.currentUser &&
328
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
355
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
356
+
329
     return (
357
     return (
330
       <div className="comment-editor-container" onPaste={this.handlePaste}>
358
       <div className="comment-editor-container" onPaste={this.handlePaste}>
331
         {isLogin ? (
359
         {isLogin ? (
339
             <div className="comment-editor">
367
             <div className="comment-editor">
340
               <TextArea
368
               <TextArea
341
                 value={inputValue}
369
                 value={inputValue}
342
-                onChange={e => this.handleChange(e.target.value)}
370
+                onChange={e => {
371
+                  this.handleChange(e.target.value);
372
+                }}
343
                 rows={rows}
373
                 rows={rows}
344
                 placeholder={placeholder}
374
                 placeholder={placeholder}
345
                 autoFocus={autoFocus}
375
                 autoFocus={autoFocus}
376
+                onPressEnter={this.handlePressEnter}
346
               />
377
               />
347
 
378
 
348
               <div className="comment-toolbar">
379
               <div className="comment-toolbar">
505
   imageToolIcon: PropTypes.node,
536
   imageToolIcon: PropTypes.node,
506
   showError: PropTypes.bool,
537
   showError: PropTypes.bool,
507
   onError: PropTypes.func,
538
   onError: PropTypes.func,
508
-  maxLength: PropTypes.number
539
+  maxLength: PropTypes.number,
540
+  // Enter事件相关
541
+  allowEnter: PropTypes.bool,
542
+  onPressEnter: PropTypes.func
509
 };
543
 };
510
 
544
 
511
 Editor.defaultProps = {
545
 Editor.defaultProps = {
525
   showError: true,
559
   showError: true,
526
   maxLength: 5000,
560
   maxLength: 5000,
527
   app: {},
561
   app: {},
528
-  handleChangeFileList: () => {}
562
+  handleChangeFileList: () => {},
563
+  // Enter事件相关
564
+  allowEnter: false,
565
+  onPressEnter: undefined
529
 };
566
 };
530
 
567
 
531
 export default Comment(Editor);
568
 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);