Browse Source

feat: 实现自定义 button 的功能

node 6 years ago
parent
commit
9db305742d

+ 34
- 6
README.md View File

103
 | type  | number |          | true     | 评论的 type  |
103
 | type  | number |          | true     | 评论的 type  |
104
 | businessId | string |     | true     | 评论的 business id|
104
 | businessId | string |     | true     | 评论的 business id|
105
 | API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
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
 ##### Editor
110
 ##### Editor
111
 
111
 
112
 | props | type   | default  | required | description |
112
 | props | type   | default  | required | description |
113
 | ----- | -------| -------- | -------- | ----------- |
113
 | ----- | -------| -------- | -------- | ----------- |
114
-| rows  | number |       5   | false     | 编辑器的高度  |
114
+| rows  | number |       5   | false     | 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
115
 | placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
115
 | placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
116
-| submitText | string |  发表  | false     | 提交按钮的文字|
117
 | showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
116
 | showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
118
 | showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
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 View File

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

+ 1
- 1
src/components/ContentItem/index.js View File

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

+ 28
- 30
src/components/Editor/index.js View File

8
 import "./index.css";
8
 import "./index.css";
9
 
9
 
10
 const { TextArea } = Input;
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
 class Editor extends React.Component {
12
 class Editor extends React.Component {
25
   constructor(props) {
13
   constructor(props) {
48
    */
36
    */
49
   handleChange(value) {
37
   handleChange(value) {
50
     this.setState({ value });
38
     this.setState({ value });
39
+    if (this.props.onChange) {
40
+      this.props.onChange(value);
41
+    }
51
   }
42
   }
52
 
43
 
53
   /**
44
   /**
113
     // const props = { ...EditorDefaultProps, ...this.props };
104
     // const props = { ...EditorDefaultProps, ...this.props };
114
     const {
105
     const {
115
       value,
106
       value,
116
-      onChange,
117
-      onSubmit,
118
-      loading,
119
       placeholder,
107
       placeholder,
120
-      fileList,
121
-      onChangeFileList,
122
       rows,
108
       rows,
123
-      onUpload,
124
       showEmoji,
109
       showEmoji,
125
       showUpload,
110
       showUpload,
126
-      submitText
111
+      btnSubmitText,
112
+      btnLoading,
113
+      btnDisabled,
114
+      button
127
     } = this.props;
115
     } = this.props;
128
     // console.log("editor: ", this.props);
116
     // console.log("editor: ", this.props);
129
 
117
 
130
     return (
118
     return (
131
       <div className="editor">
119
       <div className="editor">
132
         <TextArea
120
         <TextArea
133
-          value={this.state.value}
121
+          value={value || this.state.value}
134
           onChange={e => this.handleChange(e.target.value)}
122
           onChange={e => this.handleChange(e.target.value)}
135
           rows={rows}
123
           rows={rows}
136
           placeholder={placeholder}
124
           placeholder={placeholder}
202
           </div>
190
           </div>
203
 
191
 
204
           <div style={{ float: "right", margin: "5px 11px" }}>
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
           </div>
203
           </div>
213
         </div>
204
         </div>
214
       </div>
205
       </div>
221
   placeholder: PropTypes.string,
212
   placeholder: PropTypes.string,
222
   showEmoji: PropTypes.bool,
213
   showEmoji: PropTypes.bool,
223
   showUpload: PropTypes.bool,
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
 Editor.defaultProps = {
224
 Editor.defaultProps = {
230
   placeholder: "说点什么吧...",
226
   placeholder: "说点什么吧...",
231
   showEmoji: true,
227
   showEmoji: true,
232
   showUpload: true,
228
   showUpload: true,
233
-  submitText: "发表"
229
+  btnSubmitText: "发表",
230
+  btnLoading: false,
231
+  btnDisabled: false
234
 };
232
 };
235
 
233
 
236
 export default Editor;
234
 export default Editor;

+ 62
- 19
src/index.js View File

1
-import React from "react";
1
+import React, { Component } from "react";
2
 import ReactDOM from "react-dom";
2
 import ReactDOM from "react-dom";
3
+import { Button } from "antd";
3
 import App, { Editor } from "./App";
4
 import App, { Editor } from "./App";
4
 import registerServiceWorker from "./registerServiceWorker";
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
 registerServiceWorker();
69
 registerServiceWorker();

+ 1
- 0
src/lang/index.js View File

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