Quellcode durchsuchen

Add: Enter event;

Evo vor 4 Jahren
Ursprung
Commit
855671a6fc
5 geänderte Dateien mit 51 neuen und 12 gelöschten Zeilen
  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 Datei anzeigen

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

+ 1
- 1
lib/index.js Datei anzeigen

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

+ 1
- 0
src/App.js Datei anzeigen

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

+ 44
- 7
src/components/Editor/index.js Datei anzeigen

@@ -60,7 +60,6 @@ class Editor extends React.Component {
60 60
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
61 61
       uploadVisible: false
62 62
     };
63
-    this.handleChange = this.handleChange.bind(this);
64 63
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
65 64
     this.handleChangeFileList = this.handleChangeFileList.bind(this);
66 65
     this.handleShowUpload = this.handleShowUpload.bind(this);
@@ -72,7 +71,7 @@ class Editor extends React.Component {
72 71
   }
73 72
 
74 73
   componentDidMount() {
75
-    const { app, onRef } = this.props;
74
+    const { app, onRef, allowEnter, onPressEnter } = this.props;
76 75
     if (
77 76
       app.currentUser &&
78 77
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
@@ -82,6 +81,9 @@ class Editor extends React.Component {
82 81
     if (isFunction(onRef)) {
83 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 89
   handleEmojiScroll(e) {
@@ -101,12 +103,12 @@ class Editor extends React.Component {
101 103
    * 将最新的值存储到 state 中
102 104
    * @param {string} value 输入的值
103 105
    */
104
-  handleChange(value) {
106
+  handleChange = value => {
105 107
     this.setState({ value });
106 108
     if (this.props.onChange) {
107 109
       this.props.onChange(value);
108 110
     }
109
-  }
111
+  };
110 112
 
111 113
   /**
112 114
    * 点击 emoji 的事件
@@ -294,6 +296,31 @@ class Editor extends React.Component {
294 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 324
   render() {
298 325
     const {
299 326
       value,
@@ -326,6 +353,7 @@ class Editor extends React.Component {
326 353
     const isLogin =
327 354
       app.currentUser &&
328 355
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
356
+
329 357
     return (
330 358
       <div className="comment-editor-container" onPaste={this.handlePaste}>
331 359
         {isLogin ? (
@@ -339,10 +367,13 @@ class Editor extends React.Component {
339 367
             <div className="comment-editor">
340 368
               <TextArea
341 369
                 value={inputValue}
342
-                onChange={e => this.handleChange(e.target.value)}
370
+                onChange={e => {
371
+                  this.handleChange(e.target.value);
372
+                }}
343 373
                 rows={rows}
344 374
                 placeholder={placeholder}
345 375
                 autoFocus={autoFocus}
376
+                onPressEnter={this.handlePressEnter}
346 377
               />
347 378
 
348 379
               <div className="comment-toolbar">
@@ -505,7 +536,10 @@ Editor.propTypes = {
505 536
   imageToolIcon: PropTypes.node,
506 537
   showError: PropTypes.bool,
507 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 545
 Editor.defaultProps = {
@@ -525,7 +559,10 @@ Editor.defaultProps = {
525 559
   showError: true,
526 560
   maxLength: 5000,
527 561
   app: {},
528
-  handleChangeFileList: () => {}
562
+  handleChangeFileList: () => {},
563
+  // Enter事件相关
564
+  allowEnter: false,
565
+  onPressEnter: undefined
529 566
 };
530 567
 
531 568
 export default Comment(Editor);

+ 4
- 4
src/index.js Datei anzeigen

@@ -35,9 +35,7 @@ class Index extends React.Component {
35 35
           fileList={this.state.fileList}
36 36
           value={this.state.value}
37 37
           onChange={value => {
38
-            this.setState({
39
-              value
40
-            });
38
+            this.setState({ value });
41 39
           }}
42 40
           handleChangeFileList={fileList => {
43 41
             console.log("----", fileList);
@@ -45,6 +43,8 @@ class Index extends React.Component {
45 43
               fileList
46 44
             });
47 45
           }}
46
+          allowEnter
47
+          onPressEnter={e => alert("enter pressed")}
48 48
         />
49 49
       </App>
50 50
     );
@@ -142,7 +142,7 @@ if (process.env.NODE_ENV !== "production") {
142 142
       });
143 143
     },
144 144
     onCountChange: c => {
145
-      console.log(c);
145
+      // console.log(c);
146 146
     },
147 147
     onDelete: (type, data) => {
148 148
       console.log(type, data);