feat: 实现自定义 button 的功能

README.md

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

src/components/CommentInput/index.js

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

src/components/ContentItem/index.js

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

src/components/Editor/index.js

@@ -8,18 +8,6 @@ import Emoji from "./Emoji";
 import "./index.css";
 
 const { TextArea } = Input;
-// // 设置 Editor 组件的默认值
-// // 不能在 Editor.defaultProps 中设置
-// // 因为 Editor 在 ComponentInput 中调用
-// // 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
-// const EditorDefaultProps = {
-//   rows: 5,
-//   placeholder: "说点什么吧...",
-//   showEmoji: true,
-//   showUpload: true,
-//   submitText: "发表",
-//   onChange: () => {},
-// };
 
 class Editor extends React.Component {
   constructor(props) {
@@ -48,6 +36,9 @@ class Editor extends React.Component {
    */
   handleChange(value) {
     this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
   }
 
   /**
@@ -113,24 +104,21 @@ class Editor extends React.Component {
     // const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
-      onChange,
-      onSubmit,
-      loading,
       placeholder,
-      fileList,
-      onChangeFileList,
       rows,
-      onUpload,
       showEmoji,
       showUpload,
-      submitText
+      btnSubmitText,
+      btnLoading,
+      btnDisabled,
+      button
     } = this.props;
     // console.log("editor: ", this.props);
 
     return (
       <div className="editor">
         <TextArea
-          value={this.state.value}
+          value={value || this.state.value}
           onChange={e => this.handleChange(e.target.value)}
           rows={rows}
           placeholder={placeholder}
@@ -202,13 +190,16 @@ class Editor extends React.Component {
           </div>
 
           <div style={{ float: "right", margin: "5px 11px" }}>
-            <Button
-              onClick={() => this.handleSubmit()}
-              type="primary"
-              loading={loading}
-            >
-              {submitText}
-            </Button>
+            {button || (
+              <Button
+                onClick={() => this.handleSubmit()}
+                type="primary"
+                loading={btnLoading}
+                disabled={btnDisabled}
+              >
+                {btnSubmitText}
+              </Button>
+            )}
           </div>
         </div>
       </div>
@@ -221,8 +212,13 @@ Editor.propTypes = {
   placeholder: PropTypes.string,
   showEmoji: PropTypes.bool,
   showUpload: PropTypes.bool,
-  submitText: PropTypes.string,
-  onChange: PropTypes.func
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  btnSubmitText: PropTypes.string,
+  btnLoading: PropTypes.bool,
+  btnDisabled: PropTypes.bool,
+  button: PropTypes.node
 };
 
 Editor.defaultProps = {
@@ -230,7 +226,9 @@ Editor.defaultProps = {
   placeholder: "说点什么吧...",
   showEmoji: true,
   showUpload: true,
-  submitText: "发表"
+  btnSubmitText: "发表",
+  btnLoading: false,
+  btnDisabled: false
 };
 
 export default Editor;

src/index.js

@@ -1,26 +1,69 @@
-import React from "react";
+import React, { Component } from "react";
 import ReactDOM from "react-dom";
+import { Button } from "antd";
 import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
-const props = {
-  type: 1,
-  businessId: "1",
-  API: "http://api.links123.net/comment/v1",
-  showList: true
-};
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ""
+    };
+    this.handleChangeValue = this.handleChangeValue.bind(this);
+    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
+  }
 
-const editorProps = {
-  showEmoji: true,
-  placeholder: "说点什么吧",
-  rows: 5
-  // onSubmit={v => console.log()} // TODO...
-};
+  handleChangeValue(value) {
+    this.setState({ value });
+    console.log("handleChangeValue value: ", value);
+  }
 
-ReactDOM.render(
-  <App {...props}>
-    <Editor {...editorProps} />
-  </App>,
-  document.getElementById("root-comment")
-);
+  handleChangeSubmit(value) {
+    this.setState({ loading: true }, () => {
+      setTimeout(() => {
+        this.setState({ loading: false });
+      }, 2000);
+    });
+    console.log("submit value: ", value);
+  }
+
+  render() {
+    const props = {
+      type: 1,
+      businessId: "1",
+      API: "http://api.links123.net/comment/v1",
+      showList: true
+    };
+
+    const editorProps = {
+      showEmoji: true,
+      placeholder: "说点什么吧",
+      rows: 5,
+      btnLoading: this.state.loading,
+      btnDisable: this.state.loading,
+      btnSubmitText: "提交",
+      value: this.state.value,
+      onChange: v => this.handleChangeValue(v),
+      onSubmit: v => this.handleChangeSubmit(v),
+      button: (
+        <Button
+          type="primary"
+          ghost
+          onClick={() => console.log("click btn: ", this.state.value)}
+        >
+          自定义按钮
+        </Button>
+      )
+    };
+
+    return (
+      <App {...props}>
+        <Editor {...editorProps} />
+      </App>
+    );
+  }
+}
+
+ReactDOM.render(<Index />, document.getElementById("root-comment"));
 registerServiceWorker();

src/lang/index.js

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