Explorar el Código

feat: 实现自定义 button 的功能

node hace 6 años
padre
commit
9db305742d

+ 34
- 6
README.md Ver fichero

@@ -103,22 +103,50 @@ $ yarn build
103 103
 | type  | number |          | true     | 评论的 type  |
104 104
 | businessId | string |     | true     | 评论的 business id|
105 105
 | API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
106
-| showList | boolean |   true  | true     | 是否显示评论列表|
107
-| showEditor | boolean |   true  | true     | 是否显示评论输入框|
106
+| showList | boolean |   true  | false     | 是否显示评论列表|
107
+| showEditor | boolean |   true  | false     | 是否显示评论输入框|
108 108
 
109 109
 
110 110
 ##### Editor
111 111
 
112 112
 | props | type   | default  | required | description |
113 113
 | ----- | -------| -------- | -------- | ----------- |
114
-| rows  | number |       5   | false     | 编辑器的高度  |
114
+| rows  | number |       5   | false     | 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
115 115
 | placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
116
-| submitText | string |  发表  | false     | 提交按钮的文字|
117 116
 | showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
118 117
 | showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
119
-| onChange | function |     | false     | 编辑器内容改变的回调函数|
120
-| onSubmit | function |     | false     | TODO... 尚未完成。点击提交按钮的回调函数|
118
+| value | string |     | false     | 编辑器的值。如果设置了改属性,则编辑器变为受控组件,需要父组件来维护 value|
119
+| onChange | function(value) |     | false     | 编辑器内容改变的回调函数|
120
+| onSubmit | function(value)  |     | false     | 点击提交按钮的回调函数|
121
+| btnSubmitText | string  | 发表    | false     | 提交按钮的文字|
122
+| btnLoading | boolean  | false    | false     | 按钮是否正在加载中|
123
+| btnDisable | boolean  | false    | false     | 按钮是否禁用|
124
+| button | ReactNode  |     | false     | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮|
121 125
 
126
+#### button 
127
+
128
+如果使用 `button`,则 `onSubmit` `btnLoading` `btnDisable` `btnSubmitText` 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。
129
+
130
+所以如果要提交编辑器的值,需要自己在 `Button` 组件上实现提交功能。编辑器的值,可以通过 `onChange` 方法获取到。
131
+
132
+
133
+用法示例:
134
+
135
+```jsx
136
+<App type={1} businessId="test">
137
+  <Editor
138
+    // 将编辑器的值保存在 state 中
139
+    onChange={value => this.setState({ value })}
140
+    button={(
141
+      <Button
142
+        onClick={() => console.log(this.state.value)}
143
+      >
144
+      自定义按钮
145
+      </Button>
146
+    )}
147
+  />
148
+</App>
149
+```
122 150
 
123 151
 ## 开发
124 152
 

+ 3
- 3
src/components/CommentInput/index.js Ver fichero

@@ -10,10 +10,8 @@ class CommentInput extends Component {
10 10
   }
11 11
 
12 12
   handleSubmit(value) {
13
-    console.log("handleSubmit comment input value: ", value);
13
+    // console.log("handleSubmit comment input value: ", value);
14 14
     const { action, commentId, replyId, callback } = this.props;
15
-    console.log(" action, commentId, replyId, callback: ", this.props);
16
-
17 15
     if (action === "comment") {
18 16
       this.props.app.sCreateComment({
19 17
         content: value
@@ -41,6 +39,8 @@ class CommentInput extends Component {
41 39
   render() {
42 40
     const childrenWithProps = React.Children.map(this.props.content, child => {
43 41
       return React.cloneElement(child, {
42
+        // 编辑器本身不提交值,但 CommentInput 会提交
43
+        // CommentInput 主要是负责评论的业务逻辑,提交评论和回复
44 44
         // 默认使用 CommentInput 的 onSubmit 来提交评论
45 45
         // 但也可以使用 Editor 的 props 来覆盖 onSubmit
46 46
         onSubmit: this.handleSubmit,

+ 1
- 1
src/components/ContentItem/index.js Ver fichero

@@ -46,7 +46,7 @@ class CommentItem extends Component {
46 46
       onShowReply,
47 47
       app
48 48
     } = this.props;
49
-    console.log("this.props: ", this.props);
49
+    // console.log("this.props: ", this.props);
50 50
 
51 51
     const { isShowInput } = this.state;
52 52
 

+ 28
- 30
src/components/Editor/index.js Ver fichero

@@ -8,18 +8,6 @@ import Emoji from "./Emoji";
8 8
 import "./index.css";
9 9
 
10 10
 const { TextArea } = Input;
11
-// // 设置 Editor 组件的默认值
12
-// // 不能在 Editor.defaultProps 中设置
13
-// // 因为 Editor 在 ComponentInput 中调用
14
-// // 在 ComponentInput 中,需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
15
-// const EditorDefaultProps = {
16
-//   rows: 5,
17
-//   placeholder: "说点什么吧...",
18
-//   showEmoji: true,
19
-//   showUpload: true,
20
-//   submitText: "发表",
21
-//   onChange: () => {},
22
-// };
23 11
 
24 12
 class Editor extends React.Component {
25 13
   constructor(props) {
@@ -48,6 +36,9 @@ class Editor extends React.Component {
48 36
    */
49 37
   handleChange(value) {
50 38
     this.setState({ value });
39
+    if (this.props.onChange) {
40
+      this.props.onChange(value);
41
+    }
51 42
   }
52 43
 
53 44
   /**
@@ -113,24 +104,21 @@ class Editor extends React.Component {
113 104
     // const props = { ...EditorDefaultProps, ...this.props };
114 105
     const {
115 106
       value,
116
-      onChange,
117
-      onSubmit,
118
-      loading,
119 107
       placeholder,
120
-      fileList,
121
-      onChangeFileList,
122 108
       rows,
123
-      onUpload,
124 109
       showEmoji,
125 110
       showUpload,
126
-      submitText
111
+      btnSubmitText,
112
+      btnLoading,
113
+      btnDisabled,
114
+      button
127 115
     } = this.props;
128 116
     // console.log("editor: ", this.props);
129 117
 
130 118
     return (
131 119
       <div className="editor">
132 120
         <TextArea
133
-          value={this.state.value}
121
+          value={value || this.state.value}
134 122
           onChange={e => this.handleChange(e.target.value)}
135 123
           rows={rows}
136 124
           placeholder={placeholder}
@@ -202,13 +190,16 @@ class Editor extends React.Component {
202 190
           </div>
203 191
 
204 192
           <div style={{ float: "right", margin: "5px 11px" }}>
205
-            <Button
206
-              onClick={() => this.handleSubmit()}
207
-              type="primary"
208
-              loading={loading}
209
-            >
210
-              {submitText}
211
-            </Button>
193
+            {button || (
194
+              <Button
195
+                onClick={() => this.handleSubmit()}
196
+                type="primary"
197
+                loading={btnLoading}
198
+                disabled={btnDisabled}
199
+              >
200
+                {btnSubmitText}
201
+              </Button>
202
+            )}
212 203
           </div>
213 204
         </div>
214 205
       </div>
@@ -221,8 +212,13 @@ Editor.propTypes = {
221 212
   placeholder: PropTypes.string,
222 213
   showEmoji: PropTypes.bool,
223 214
   showUpload: PropTypes.bool,
224
-  submitText: PropTypes.string,
225
-  onChange: PropTypes.func
215
+  value: PropTypes.string,
216
+  onChange: PropTypes.func,
217
+  onSubmit: PropTypes.func,
218
+  btnSubmitText: PropTypes.string,
219
+  btnLoading: PropTypes.bool,
220
+  btnDisabled: PropTypes.bool,
221
+  button: PropTypes.node
226 222
 };
227 223
 
228 224
 Editor.defaultProps = {
@@ -230,7 +226,9 @@ Editor.defaultProps = {
230 226
   placeholder: "说点什么吧...",
231 227
   showEmoji: true,
232 228
   showUpload: true,
233
-  submitText: "发表"
229
+  btnSubmitText: "发表",
230
+  btnLoading: false,
231
+  btnDisabled: false
234 232
 };
235 233
 
236 234
 export default Editor;

+ 62
- 19
src/index.js Ver fichero

@@ -1,26 +1,69 @@
1
-import React from "react";
1
+import React, { Component } from "react";
2 2
 import ReactDOM from "react-dom";
3
+import { Button } from "antd";
3 4
 import App, { Editor } from "./App";
4 5
 import registerServiceWorker from "./registerServiceWorker";
5 6
 
6
-const props = {
7
-  type: 1,
8
-  businessId: "1",
9
-  API: "http://api.links123.net/comment/v1",
10
-  showList: true
11
-};
7
+class Index extends Component {
8
+  constructor(props) {
9
+    super(props);
10
+    this.state = {
11
+      value: ""
12
+    };
13
+    this.handleChangeValue = this.handleChangeValue.bind(this);
14
+    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
15
+  }
12 16
 
13
-const editorProps = {
14
-  showEmoji: true,
15
-  placeholder: "说点什么吧",
16
-  rows: 5
17
-  // onSubmit={v => console.log()} // TODO...
18
-};
17
+  handleChangeValue(value) {
18
+    this.setState({ value });
19
+    console.log("handleChangeValue value: ", value);
20
+  }
19 21
 
20
-ReactDOM.render(
21
-  <App {...props}>
22
-    <Editor {...editorProps} />
23
-  </App>,
24
-  document.getElementById("root-comment")
25
-);
22
+  handleChangeSubmit(value) {
23
+    this.setState({ loading: true }, () => {
24
+      setTimeout(() => {
25
+        this.setState({ loading: false });
26
+      }, 2000);
27
+    });
28
+    console.log("submit value: ", value);
29
+  }
30
+
31
+  render() {
32
+    const props = {
33
+      type: 1,
34
+      businessId: "1",
35
+      API: "http://api.links123.net/comment/v1",
36
+      showList: true
37
+    };
38
+
39
+    const editorProps = {
40
+      showEmoji: true,
41
+      placeholder: "说点什么吧",
42
+      rows: 5,
43
+      btnLoading: this.state.loading,
44
+      btnDisable: this.state.loading,
45
+      btnSubmitText: "提交",
46
+      value: this.state.value,
47
+      onChange: v => this.handleChangeValue(v),
48
+      onSubmit: v => this.handleChangeSubmit(v),
49
+      button: (
50
+        <Button
51
+          type="primary"
52
+          ghost
53
+          onClick={() => console.log("click btn: ", this.state.value)}
54
+        >
55
+          自定义按钮
56
+        </Button>
57
+      )
58
+    };
59
+
60
+    return (
61
+      <App {...props}>
62
+        <Editor {...editorProps} />
63
+      </App>
64
+    );
65
+  }
66
+}
67
+
68
+ReactDOM.render(<Index />, document.getElementById("root-comment"));
26 69
 registerServiceWorker();

+ 1
- 0
src/lang/index.js Ver fichero

@@ -1,6 +1,7 @@
1 1
 // 语言包
2 2
 // 英文短语和中文提示的对应
3 3
 const data = {
4
+  "not found": "没有数据",
4 5
   "auth failed": "请先登录",
5 6
   "create comment failed": "创建评论失败",
6 7
   "comment favor failed": "评论点赞失败",