Browse Source

增加beforeSubmit props.

narro 5 years ago
parent
commit
308fece216

+ 20
- 19
README.md View File

@@ -30,25 +30,26 @@ import Comment, { Editor, RenderText } from 'comment';
30 30
 
31 31
 ## Editor
32 32
 
33
-| props               | type                      | default       | required | description                                                                                       |
34
-| ------------------- | ------------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
35
-| rows                | number                    | 5             | false    | 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行                     |
36
-| placeholder         | string                    | 说点什么吧... | false    | 评论的中的提示文字                                                                                |
37
-| showEmoji           | boolean                   | true          | false    | 是否显示 Toolbar 中表情工具                                                                       |
38
-| showUpload          | boolean                   | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
39
-| maxUpload           | number                    | 1             | false    | 最大能够上传的图片数量                                                                            |
40
-| value               | string                    |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
41
-| onChange            | function(value)           |               | false    | 编辑器内容改变的回调函数                                                                          |
42
-| onSubmit            | function({ text, files }) |               | false    | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表                               |
43
-| btnSubmitText       | string                    | 发表          | false    | 提交按钮的文字                                                                                    |
44
-| btnLoading          | boolean                   | false         | false    | 按钮是否正在加载中                                                                                |
45
-| btnDisable          | boolean                   | false         | false    | 按钮是否禁用                                                                                      |
46
-| button              | ReactNode                 |               | false    | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮 |
47
-| emojiToolIcon       | ReactNode                 |               | false    | Toolbar 中表情的图标                                                                              |
48
-| imageToolIcon       | ReactNode                 |               | false    | Toolbar 中上传文件的图标                                                                          |
49
-| onRef               | function                  |               | false    | 传递子组件的引用                                                                                  |
50
-| closeUploadWhenBlur | boolean                   |               | false    | 当 upload 失去焦点(鼠标点击非 Upload 的区域)的时候,是否自动关闭 Popover                        |
51
-| showError           | boolean                   | true          | false    | 是否使用Antd的Message组件提示错误信息, 主要是上传图片出错的情况                                   |
33
+| props               | type                            | default       | required | description                                                                                       |
34
+| ------------------- | ------------------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------- |
35
+| rows                | number                          | 5             | false    | 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行                     |
36
+| placeholder         | string                          | 说点什么吧... | false    | 评论的中的提示文字                                                                                |
37
+| showEmoji           | boolean                         | true          | false    | 是否显示 Toolbar 中表情工具                                                                       |
38
+| showUpload          | boolean                         | true          | false    | 是否显示 Toolbar 中 上传图片工具                                                                  |
39
+| maxUpload           | number                          | 1             | false    | 最大能够上传的图片数量                                                                            |
40
+| value               | string                          |               | false    | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value                        |
41
+| onChange            | function(value)                 |               | false    | 编辑器内容改变的回调函数                                                                          |
42
+| onSubmit            | function({ text, files })       |               | false    | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表                               |
43
+| beforeSubmit        | function ({text,files}):boolean |               | false    | 点击提交按钮后的钩子, 若返回false则不触发onSubmit函数, 主要用于控制默认的submit行为               |
44
+| btnSubmitText       | string                          | 发表          | false    | 提交按钮的文字                                                                                    |
45
+| btnLoading          | boolean                         | false         | false    | 按钮是否正在加载中                                                                                |
46
+| btnDisable          | boolean                         | false         | false    | 按钮是否禁用                                                                                      |
47
+| button              | ReactNode                       |               | false    | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮 |
48
+| emojiToolIcon       | ReactNode                       |               | false    | Toolbar 中表情的图标                                                                              |
49
+| imageToolIcon       | ReactNode                       |               | false    | Toolbar 中上传文件的图标                                                                          |
50
+| onRef               | function                        |               | false    | 传递子组件的引用                                                                                  |
51
+| closeUploadWhenBlur | boolean                         |               | false    | 当 upload 失去焦点(鼠标点击非 Upload 的区域)的时候,是否自动关闭 Popover                        |
52
+| showError           | boolean                         | true          | false    | 是否使用Antd的Message组件提示错误信息, 主要是上传图片出错的情况                                   |
52 53
 
53 54
 
54 55
 

+ 1
- 1
lib/App.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
lib/components/Editor/Upload.js.map
File diff suppressed because it is too large
View File


+ 10
- 3
lib/components/Editor/index.js View File

@@ -191,9 +191,15 @@ var Editor = function (_React$Component) {
191 191
           files.push("" + _constant.OSS_LINK + fileMap[item.uid]);
192 192
         });
193 193
       }
194
-      this.props.onSubmit({ text: value, files: files }, function () {
195
-        _this2.resetState();
196
-      });
194
+      var canSubmit = true;
195
+      if (this.props.beforeSubmit) {
196
+        canSubmit = this.props.beforeSubmit({ text: value, files: files }) === false ? false : true;
197
+      }
198
+      if (canSubmit) {
199
+        this.props.onSubmit({ text: value, files: files }, function () {
200
+          _this2.resetState();
201
+        });
202
+      }
197 203
     }
198 204
   }, {
199 205
     key: "resetState",
@@ -422,6 +428,7 @@ Editor.propTypes = {
422 428
   value: _propTypes2.default.string,
423 429
   onChange: _propTypes2.default.func,
424 430
   onSubmit: _propTypes2.default.func,
431
+  beforeSubmit: _propTypes2.default.func,
425 432
   btnSubmitText: _propTypes2.default.string,
426 433
   btnLoading: _propTypes2.default.bool,
427 434
   btnDisabled: _propTypes2.default.bool,

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 4
- 1
lib/index.js View File

@@ -84,7 +84,10 @@ var Index = function (_Component) {
84 84
         },
85 85
         _react2.default.createElement(_App.Editor, {
86 86
           maxUpload: 4,
87
-          showError: false
87
+          showError: false,
88
+          beforeSubmit: function beforeSubmit() {
89
+            return true;
90
+          }
88 91
         })
89 92
       );
90 93
 

+ 1
- 1
lib/index.js.map View File

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW;AANb;AAQE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,qBAAW;AAFb;AARF,OADF;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAlFiBG,gB;;AAqFpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          showError={false}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}
1
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW;AANb;AAQE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,qBAAW,KAFb;AAGE,wBAAc,wBAAM;AAClB,mBAAO,IAAP;AACD;AALH;AARF,OADF;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EArFiBG,gB;;AAwFpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          showError={false}\r\n          beforeSubmit={() => {\r\n            return true;\r\n          }}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}

+ 13
- 3
src/components/Editor/index.js View File

@@ -102,9 +102,18 @@ class Editor extends React.Component {
102 102
         files.push(`${OSS_LINK}${fileMap[item.uid]}`);
103 103
       });
104 104
     }
105
-    this.props.onSubmit({ text: value, files }, () => {
106
-      this.resetState();
107
-    });
105
+    let canSubmit = true;
106
+    if (this.props.beforeSubmit) {
107
+      canSubmit =
108
+        this.props.beforeSubmit({ text: value, files }) === false
109
+          ? false
110
+          : true;
111
+    }
112
+    if (canSubmit) {
113
+      this.props.onSubmit({ text: value, files }, () => {
114
+        this.resetState();
115
+      });
116
+    }
108 117
   }
109 118
 
110 119
   resetState() {
@@ -315,6 +324,7 @@ Editor.propTypes = {
315 324
   value: PropTypes.string,
316 325
   onChange: PropTypes.func,
317 326
   onSubmit: PropTypes.func,
327
+  beforeSubmit: PropTypes.func,
318 328
   btnSubmitText: PropTypes.string,
319 329
   btnLoading: PropTypes.bool,
320 330
   btnDisabled: PropTypes.bool,

+ 7
- 1
src/index.js View File

@@ -42,7 +42,13 @@ class Index extends Component {
42 42
         showAlertFavor
43 43
         showError={false}
44 44
       >
45
-        <Editor maxUpload={4} showError={false} />
45
+        <Editor
46
+          maxUpload={4}
47
+          showError={false}
48
+          beforeSubmit={() => {
49
+            return true;
50
+          }}
51
+        />
46 52
       </App>
47 53
     );
48 54