Parcourir la source

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

AdamFu il y a 4 ans
Parent
révision
78fe198b54
5 fichiers modifiés avec 43 ajouts et 12 suppressions
  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 Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

@@ -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}>

+ 36
- 7
src/components/Editor/index.js Voir le fichier

@@ -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,23 @@ class Editor extends React.Component {
294 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 316
   render() {
298 317
     const {
299 318
       value,
@@ -326,6 +345,7 @@ class Editor extends React.Component {
326 345
     const isLogin =
327 346
       app.currentUser &&
328 347
       (app.currentUser.user_id > 0 || app.currentUser.id > 0);
348
+
329 349
     return (
330 350
       <div className="comment-editor-container" onPaste={this.handlePaste}>
331 351
         {isLogin ? (
@@ -339,10 +359,13 @@ class Editor extends React.Component {
339 359
             <div className="comment-editor">
340 360
               <TextArea
341 361
                 value={inputValue}
342
-                onChange={e => this.handleChange(e.target.value)}
362
+                onChange={e => {
363
+                  this.handleChange(e.target.value);
364
+                }}
343 365
                 rows={rows}
344 366
                 placeholder={placeholder}
345 367
                 autoFocus={autoFocus}
368
+                onPressEnter={this.handlePressEnter}
346 369
               />
347 370
 
348 371
               <div className="comment-toolbar">
@@ -505,7 +528,10 @@ Editor.propTypes = {
505 528
   imageToolIcon: PropTypes.node,
506 529
   showError: PropTypes.bool,
507 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 537
 Editor.defaultProps = {
@@ -525,7 +551,10 @@ Editor.defaultProps = {
525 551
   showError: true,
526 552
   maxLength: 5000,
527 553
   app: {},
528
-  handleChangeFileList: () => {}
554
+  handleChangeFileList: () => {},
555
+  // Enter事件相关
556
+  allowEnter: false,
557
+  onPressEnter: undefined
529 558
 };
530 559
 
531 560
 export default Comment(Editor);

+ 4
- 4
src/index.js Voir le fichier

@@ -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);