瀏覽代碼

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

AdamFu 4 年之前
父節點
當前提交
9a188d5039

+ 1
- 0
lib/App.js 查看文件

@@ -745,6 +745,7 @@ var App = function (_Component) {
745 745
         sUpdateComment: this.sUpdateComment,
746 746
         handleEdit: this.handleEdit
747 747
       });
748
+
748 749
       return this.state.initDone && _react2.default.createElement(
749 750
         _Comment.CommentContext.Provider,
750 751
         { value: value },

+ 1
- 1
lib/App.js.map
文件差異過大導致無法顯示
查看文件


+ 1
- 1
lib/components/EditComment/EditComment.js.map
文件差異過大導致無法顯示
查看文件


+ 30
- 4
lib/components/Editor/index.js 查看文件

@@ -138,6 +138,7 @@ var Editor = function (_React$Component) {
138 138
     _this.handlePaste = _this.handlePaste.bind(_this);
139 139
     _this.resetState = _this.resetState.bind(_this);
140 140
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
141
+    _this.handlePressEnter = _this.handlePressEnter.bind(_this);
141 142
     return _this;
142 143
   }
143 144
 
@@ -400,6 +401,25 @@ var Editor = function (_React$Component) {
400 401
       }
401 402
       return true;
402 403
     }
404
+
405
+    /**
406
+     *  **处理Enter事件**
407
+     *  1. `allowEnterSubmit`为true时enter触发submit事件
408
+     *  2. `e.preventDefault`为了防止enter事件后仍触发换行
409
+     *  3. enter事件开启后,仍可以用`shift + enter`触发换行
410
+     *  -- evo 20200222
411
+     */
412
+
413
+  }, {
414
+    key: "handlePressEnter",
415
+    value: function handlePressEnter(e) {
416
+      if (this.props.allowEnterSubmit) {
417
+        if (!e.shiftKey) {
418
+          e.preventDefault();
419
+          this.handleSubmit();
420
+        }
421
+      }
422
+    }
403 423
   }, {
404 424
     key: "render",
405 425
     value: function render() {
@@ -431,6 +451,7 @@ var Editor = function (_React$Component) {
431 451
       var inputValue = value || this.state.value;
432 452
       var uploadFileList = fileList || this.state.fileList;
433 453
       var isLogin = app.currentUser && (app.currentUser.user_id > 0 || app.currentUser.id > 0);
454
+
434 455
       return _react2.default.createElement(
435 456
         "div",
436 457
         { className: "comment-editor-container", onPaste: this.handlePaste },
@@ -449,11 +470,12 @@ var Editor = function (_React$Component) {
449 470
             _react2.default.createElement(TextArea, {
450 471
               value: inputValue,
451 472
               onChange: function onChange(e) {
452
-                return _this4.handleChange(e.target.value);
473
+                _this4.handleChange(e.target.value);
453 474
               },
454 475
               rows: rows,
455 476
               placeholder: placeholder,
456
-              autoFocus: autoFocus
477
+              autoFocus: autoFocus,
478
+              onPressEnter: this.handlePressEnter
457 479
             }),
458 480
             _react2.default.createElement(
459 481
               "div",
@@ -628,7 +650,9 @@ Editor.propTypes = {
628 650
   imageToolIcon: _propTypes2.default.node,
629 651
   showError: _propTypes2.default.bool,
630 652
   onError: _propTypes2.default.func,
631
-  maxLength: _propTypes2.default.number
653
+  maxLength: _propTypes2.default.number,
654
+  // Enter事件相关
655
+  allowEnterSubmit: _propTypes2.default.bool
632 656
 };
633 657
 
634 658
 Editor.defaultProps = {
@@ -648,7 +672,9 @@ Editor.defaultProps = {
648 672
   showError: true,
649 673
   maxLength: 5000,
650 674
   app: {},
651
-  handleChangeFileList: function handleChangeFileList() {}
675
+  handleChangeFileList: function handleChangeFileList() {},
676
+  // Enter事件相关
677
+  allowEnterSubmit: false
652 678
 };
653 679
 
654 680
 exports.default = (0, _Comment2.default)(Editor);

+ 1
- 1
lib/components/Editor/index.js.map
文件差異過大導致無法顯示
查看文件


+ 3
- 4
lib/index.js 查看文件

@@ -68,16 +68,15 @@ var Index = function (_React$Component) {
68 68
           fileList: this.state.fileList,
69 69
           value: this.state.value,
70 70
           onChange: function onChange(value) {
71
-            _this2.setState({
72
-              value: value
73
-            });
71
+            _this2.setState({ value: value });
74 72
           },
75 73
           handleChangeFileList: function handleChangeFileList(fileList) {
76 74
             console.log("----", fileList);
77 75
             _this2.setState({
78 76
               fileList: fileList
79 77
             });
80
-          }
78
+          },
79
+          allowEnterSubmit: true
81 80
         }))
82 81
       );
83 82
     }

+ 1
- 1
lib/index.js.map
文件差異過大導致無法顯示
查看文件


+ 4
- 4
lib/version.json 查看文件

@@ -1,8 +1,8 @@
1 1
 {
2 2
     "name":       "comment",
3
-    "buildDate":  1577536315907,
3
+    "buildDate":  1582351916030,
4 4
     "version":    "1.0.4",
5
-    "numCommits": 197,
6
-    "hash":       "92e9ffb",
7
-    "dirty":      true
5
+    "numCommits": 201,
6
+    "hash":       "556bf1c",
7
+    "dirty":      false
8 8
 }

+ 13
- 17
src/components/Editor/index.js 查看文件

@@ -60,6 +60,7 @@ class Editor extends React.Component {
60 60
       fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
61 61
       uploadVisible: false
62 62
     };
63
+    this.handleChange = this.handleChange.bind(this);
63 64
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
64 65
     this.handleChangeFileList = this.handleChangeFileList.bind(this);
65 66
     this.handleShowUpload = this.handleShowUpload.bind(this);
@@ -68,10 +69,11 @@ class Editor extends React.Component {
68 69
     this.handlePaste = this.handlePaste.bind(this);
69 70
     this.resetState = this.resetState.bind(this);
70 71
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
72
+    this.handlePressEnter = this.handlePressEnter.bind(this);
71 73
   }
72 74
 
73 75
   componentDidMount() {
74
-    const { app, onRef, allowEnter, onPressEnter } = this.props;
76
+    const { app, onRef } = this.props;
75 77
     if (
76 78
       app.currentUser &&
77 79
       (app.currentUser.user_id > 0 || app.currentUser.id > 0)
@@ -81,9 +83,6 @@ class Editor extends React.Component {
81 83
     if (isFunction(onRef)) {
82 84
       onRef(this);
83 85
     }
84
-
85
-    if ((allowEnter && !onPressEnter) || (!allowEnter && onPressEnter))
86
-      console.error("`onPressEnter` must be undefined when `allowEnter`!");
87 86
   }
88 87
 
89 88
   handleEmojiScroll(e) {
@@ -103,12 +102,12 @@ class Editor extends React.Component {
103 102
    * 将最新的值存储到 state 中
104 103
    * @param {string} value 输入的值
105 104
    */
106
-  handleChange = value => {
105
+  handleChange(value) {
107 106
     this.setState({ value });
108 107
     if (this.props.onChange) {
109 108
       this.props.onChange(value);
110 109
     }
111
-  };
110
+  }
112 111
 
113 112
   /**
114 113
    * 点击 emoji 的事件
@@ -298,20 +297,19 @@ class Editor extends React.Component {
298 297
 
299 298
   /**
300 299
    *  **处理Enter事件**
301
-   *  1. `allowEnter` & `onPressEnter`同时有效时才能触发
300
+   *  1. `allowEnterSubmit`为true时enter触发submit事件
302 301
    *  2. `e.preventDefault`为了防止enter事件后仍触发换行
303
-   *  3. enter事件开启,仍可以用`shift + enter`触发换行
302
+   *  3. enter事件开启,仍可以用`shift + enter`触发换行
304 303
    *  -- evo 20200222
305 304
    */
306
-  handlePressEnter = e => {
307
-    const { allowEnter, onPressEnter } = this.props;
308
-    if (allowEnter && onPressEnter) {
305
+  handlePressEnter(e) {
306
+    if (this.props.allowEnterSubmit) {
309 307
       if (!e.shiftKey) {
310 308
         e.preventDefault();
311
-        onPressEnter();
309
+        this.handleSubmit();
312 310
       }
313 311
     }
314
-  };
312
+  }
315 313
 
316 314
   render() {
317 315
     const {
@@ -530,8 +528,7 @@ Editor.propTypes = {
530 528
   onError: PropTypes.func,
531 529
   maxLength: PropTypes.number,
532 530
   // Enter事件相关
533
-  allowEnter: PropTypes.bool,
534
-  onPressEnter: PropTypes.func
531
+  allowEnterSubmit: PropTypes.bool
535 532
 };
536 533
 
537 534
 Editor.defaultProps = {
@@ -553,8 +550,7 @@ Editor.defaultProps = {
553 550
   app: {},
554 551
   handleChangeFileList: () => {},
555 552
   // Enter事件相关
556
-  allowEnter: false,
557
-  onPressEnter: undefined
553
+  allowEnterSubmit: false
558 554
 };
559 555
 
560 556
 export default Comment(Editor);

+ 1
- 2
src/index.js 查看文件

@@ -43,8 +43,7 @@ class Index extends React.Component {
43 43
               fileList
44 44
             });
45 45
           }}
46
-          allowEnter
47
-          onPressEnter={e => alert("enter pressed")}
46
+          allowEnterSubmit
48 47
         />
49 48
       </App>
50 49
     );