feat: 常规优化

README.md

@@ -132,7 +132,7 @@ import Comment, { Editor } from 'comment'
 
 render() {
   return (
-    <Comment>
+    <Comment type={1} businessId="test">
       <Editor />
     </Comment>
   )
@@ -144,27 +144,12 @@ render() {
 
 ### 作为静态文件引入
 
-作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`：
+作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`，主要是 `type` 和 `businessId`：
 
 ```js
 // ...
-const props = {
-  type: 1,
-  businessId: "1",
-  API: "http://api.links123.net/comment/v1",
-  showList: true
-};
-
-const editorProps = {
-  showEmoji: true,
-  placeholder: "说点什么吧",
-  rows: 5,
-};
-
-
-// ...
-<App {...props}>
-    <Editor {...editorProps} />
+<App type={1} businessId="test">
+    <Editor />
 </App>
 ```
 
@@ -174,10 +159,10 @@ const editorProps = {
 $ yarn build
 ```
 
-打包后会得到静态问卷，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
+打包后会得到静态文件，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
 
 
-然后还需要引入 OSS SDK，用于直传文件到 OSS。
+接下来还需要引入 OSS SDK，用于直传文件到 OSS。
 
 
 最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
@@ -214,3 +199,13 @@ $ yarn start
 - `yarn build` 将项目打包成一个单页应用
 - `yarn lib` 将项目打包成一个 es5 组件
 - `yarn prettier` 格式化代码
+
+## TODO
+
+- [x] 前后端统一错误码
+- [x] type 和 businessID 的定义
+- [x] Editor onSubmit 回调
+- [ ] 对评论的回复点赞，报错
+- [ ] oss/sts 接口报错
+- [ ] 头像 404 `https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/`
+

src/App.js

@@ -103,7 +103,6 @@ class App extends Component {
     axios
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
-        // const { list: replies, total, page } = response.data;
         if (!response.data.list) {
           message.info("没有更多数据了！");
         }
@@ -167,12 +166,12 @@ class App extends Component {
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        const { list } = this.state;
+        const { list, total } = this.state;
         list.unshift({
           ...response.data,
           isTemporary: true // 临时的数据
         });
-        this.setState({ list });
+        this.setState({ list, total: total + 1 });
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
@@ -288,6 +287,7 @@ class App extends Component {
         console.log("response: ", response);
 
         message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        // TODO: (2018.07.20 node) 对评论的回复点赞，报错
         // // 更新 list 中的该项数据的 favored
         // const list = this.state.list.map(item => {
         //   if (item.id === replyId) {

src/components/CommentInput.1/index.js

@@ -1,143 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { OSS_LINK } from "../../constant";
-import Comment from "../../Comment";
-
-class CommentInput extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: "",
-
-      fileList: [], // 图片列表
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChangeFileList = this.handleChangeFileList.bind(this);
-    this.handleChangeEmoji = this.handleChangeEmoji.bind(this);
-    this.handleUpload = this.handleUpload.bind(this);
-  }
-
-  handleChange(value) {
-    this.setState({ value });
-  }
-
-  handleChangeFileList(fileList) {
-    this.setState({ fileList });
-  }
-
-  handleChangeEmoji(emojiId) {
-    let { value } = this.state;
-    value += `[${emojiId}]`;
-    this.setState({ value });
-    React.Children.forEach(this.props.content, child => {
-      // 如果 Editor 的父组件传入了 onChange 事件，则需要将改变之后的值传递给父组件
-      if (child.props.onChange) {
-        child.props.onChange(value);
-      }
-    });
-  }
-
-  handleUpload({ uid, path }) {
-    const { fileMap } = this.state;
-    fileMap[uid] = path;
-    this.setState({ fileMap });
-  }
-
-  handleSubmit() {
-    let { value, fileMap, fileList } = this.state;
-    if (fileList.length) {
-      value += "<br/>";
-      fileList.forEach(item => {
-        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
-      });
-    }
-
-    const { type, commentId, replyId, handleToggleInput } = this.props;
-    if (type === "normal") {
-      this.props.app.sCreateComment({
-        content: value
-      });
-    } else if (type === "comment") {
-      this.props.app.sCreateReply(
-        {
-          comment_id: commentId,
-          content: value
-        },
-        () => handleToggleInput()
-      );
-    } else if (type === "reply") {
-      this.props.app.sCreateReply(
-        {
-          comment_id: commentId,
-          content: value,
-          reply_id: replyId
-        },
-        () => handleToggleInput()
-      );
-    }
-
-    React.Children.forEach(this.props.content, child => {
-      // 如果 Editor 的父组件传入了 onSubmit 事件，则需要将改变之后的值传递给父组件
-      if (child.props.onSubmit) {
-        child.props.onSubmit(value);
-      }
-    });
-  }
-
-  render() {
-    const { type } = this.props;
-    const { value, fileList } = this.state;
-
-    const childrenWithProps = React.Children.map(this.props.content, child => {
-      return React.cloneElement(child, {
-        value: value,
-        fileList: fileList,
-        onChange: this.handleChange,
-        onSubmit: this.handleSubmit,
-        onChangeFileList: this.handleChangeFileList,
-        onChangeEmoji: this.handleChangeEmoji,
-        onUpload: this.handleUpload,
-        loading: this.props.app.loading.sCreateComment,
-        ...child.props
-      });
-    });
-
-    return (
-      <div>
-        {type === "normal" ? (
-          <div>
-            <span
-              style={{
-                border: "1px solid #CECECE",
-                color: "#666",
-                padding: "2px 3px"
-              }}
-            >
-              回复
-            </span>
-            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
-              口碑
-              <span style={{ marginLeft: "20px", color: "#666666" }}>
-                (全站挑出毛病或提出合理建议，奖励10到100元红包)
-              </span>
-            </span>
-          </div>
-        ) : null}
-        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
-      </div>
-    );
-  }
-}
-
-CommentInput.propTypes = {
-  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
-  type: PropTypes.oneOf(["normal", "comment", "reply"])
-};
-
-CommentInput.defaultProps = {
-  type: "normal"
-};
-
-export default Comment(CommentInput);

src/components/CommentInput/index.js

@@ -10,7 +10,6 @@ class CommentInput extends Component {
   }
 
   handleSubmit(value) {
-    console.log("handleSubmit comment input value: ", value);
     const { action, commentId, replyId, callback } = this.props;
     if (action === "comment") {
       this.props.app.sCreateComment({

src/components/ContentItem/index.css

@@ -7,10 +7,11 @@
   display: inline-block;
   width: 90%;
   margin-left: 10px;
+  margin-bottom: 20px;
 }
 .box {
-  margin: 10px 0;
-  padding: 15px 5px;
+  margin: 10px 0 0 0;
+  padding: 15px 5px 0 5px;
   border-top: 1px solid #eee;
 }
 .content {

src/components/ContentItem/index.js

@@ -12,14 +12,14 @@ class CommentItem extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isShowInput: false
+      showInput: false
     };
     this.handleToggleInput = this.handleToggleInput.bind(this);
     this.renderTextWithReply = this.renderTextWithReply.bind(this);
   }
 
   handleToggleInput() {
-    this.setState({ isShowInput: !this.state.isShowInput });
+    this.setState({ showInput: !this.state.showInput });
   }
 
   renderTextWithReply(text, content) {
@@ -46,9 +46,8 @@ class CommentItem extends Component {
       onShowReply,
       app
     } = this.props;
-    // console.log("this.props: ", this.props);
 
-    const { isShowInput } = this.state;
+    const { showInput } = this.state;
 
     return (
       <div className="box">
@@ -111,7 +110,7 @@ class CommentItem extends Component {
           </div>
         </div>
 
-        {isShowInput && (
+        {showInput && (
           <CommentInput
             content={app.children}
             action={action}

src/components/Editor.1/Emoji.css

@@ -1,23 +0,0 @@
-.item {
-  float: left;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  white-space: nowrap;
-  /* this is required unless you put the helper span closely near the img */
-  text-align: center;
-  margin: 0;
-}
-.item .helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-.item img {
-  margin: 0 auto;
-  vertical-align: middle;
-  padding: 3px;
-}
-.item img:hover {
-  border: 1px solid #40a9ff;
-}

src/components/Editor.1/Emoji.js

@@ -1,67 +0,0 @@
-import React from "react";
-import { Carousel } from "antd";
-import emoji, { prefixUrl, ext } from "../../emoji";
-import "./Emoji.css";
-// 每页 20  5*4
-// 共 20 * 3 = 60 (实际是 54)
-
-// class Emoji
-
-const Emoji = ({ onClick }) => {
-  const content = [[], [], []];
-
-  for (let i = 0; i < emoji.length; i++) {
-    if (i < 20) {
-      content[0].push(emoji[i]);
-    } else if (i < 40) {
-      content[1].push(emoji[i]);
-    } else if (i < emoji.length) {
-      content[2].push(emoji[i]);
-    }
-  }
-  return (
-    <Carousel>
-      <div>
-        {content[0].map((item, index) => (
-          <div className="item" key={item.value}>
-            <span className="helper" />
-            <img
-              src={`${prefixUrl}${item.value}.${ext}`}
-              alt={item.title}
-              style={{ display: "inline-block" }}
-              onClick={() => onClick(item.title)}
-            />
-          </div>
-        ))}
-      </div>
-      <div>
-        {content[1].map((item, index) => (
-          <div className="item" key={item.value}>
-            <span className="helper" />
-            <img
-              src={`${prefixUrl}${item.value}.${ext}`}
-              alt={item.title}
-              style={{ display: "inline-block" }}
-              onClick={() => onClick(item.title)}
-            />
-          </div>
-        ))}
-      </div>
-      <div>
-        {content[2].map(item => (
-          <div className="item" key={item.value}>
-            <span className="helper" />
-            <img
-              src={`${prefixUrl}${item.value}.${ext}`}
-              alt={item.title}
-              style={{ display: "inline-block" }}
-              onClick={() => onClick(item.title)}
-            />
-          </div>
-        ))}
-      </div>
-    </Carousel>
-  );
-};
-
-export default Emoji;

src/components/Editor.1/Upload.css

@@ -1,8 +0,0 @@
-.ant-upload-select-picture-card i {
-  font-size: 32px;
-  color: #999;
-}
-.ant-upload-select-picture-card .ant-upload-text {
-  margin-top: 8px;
-  color: #666;
-}

src/components/Editor.1/Upload.js

@@ -1,132 +0,0 @@
-import React from "react";
-import { Upload, Icon, Modal, message } from "antd";
-import dayjs from "dayjs";
-import shortid from "shortid";
-import {
-  OSS_ENDPOINT,
-  OSS_BUCKET,
-  DRIVER_LICENSE_PATH,
-  ERROR_DEFAULT,
-  MAX_UPLOAD_NUMBER
-} from "../../constant";
-import Comment from "../../Comment";
-// import styles from "./Upload.less";
-import "./Upload.css";
-
-const client = oss => {
-  return new window.OSS.Wrapper({
-    accessKeyId: oss.access_key_id,
-    accessKeySecret: oss.access_key_secret,
-    stsToken: oss.security_token,
-    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
-    bucket: OSS_BUCKET
-  });
-};
-
-const uploadPath = (path, file) => {
-  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
-    file.type.split("/")[1]
-  }`;
-};
-
-const UploadToOss = (oss, path, file) => {
-  const url = uploadPath(path, file);
-  return new Promise((resolve, reject) => {
-    client(oss)
-      .multipartUpload(url, file)
-      .then(data => {
-        resolve(data);
-      })
-      .catch(error => {
-        reject(error);
-      });
-  });
-};
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      previewVisible: false,
-      previewImage: ""
-    };
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handlePreview = this.handlePreview.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.customRequest = this.customRequest.bind(this);
-  }
-
-  componentDidMount() {
-    this.props.app.sOssSts();
-  }
-
-  handleCancel() {
-    this.setState({ previewVisible: false });
-  }
-
-  handlePreview(file) {
-    this.setState({
-      previewImage: file.url || file.thumbUrl,
-      previewVisible: true
-    });
-  }
-
-  handleChange({ fileList }) {
-    this.props.onChangeFileList(fileList);
-  }
-
-  customRequest(info) {
-    const { file } = info;
-    info.onProgress({ percent: 10 });
-    let reader = new FileReader();
-    reader.readAsDataURL(info.file);
-    reader.onloadend = () => {
-      info.onProgress({ percent: 20 });
-      // DRIVER_LICENSE_PATH oss 的存储路径位置
-      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
-        .then(data => {
-          info.onProgress({ percent: 100 });
-          info.onSuccess();
-          this.props.onUpload({ path: data.name, uid: file.uid });
-        })
-        .catch(e => {
-          message.error(e.message || ERROR_DEFAULT);
-          info.onError(e);
-        });
-    };
-  }
-
-  render() {
-    const { previewVisible, previewImage } = this.state;
-    const { fileList } = this.props;
-    const uploadButton = (
-      <div>
-        <Icon type="plus" />
-        <div className="ant-upload-text">上传</div>
-      </div>
-    );
-    return (
-      <div>
-        <Upload
-          accept="image/jpg,image/jpeg,image/png,image/bmp"
-          listType="picture-card"
-          fileList={fileList}
-          customRequest={this.customRequest}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-        >
-          {fileList.length >= MAX_UPLOAD_NUMBER ? null : uploadButton}
-        </Upload>
-        <Modal
-          visible={previewVisible}
-          footer={null}
-          onCancel={this.handleCancel}
-        >
-          <img alt="upload" style={{ width: "100%" }} src={previewImage} />
-        </Modal>
-      </div>
-    );
-  }
-}
-
-export default Comment(App);

src/components/Editor.1/index.css

@@ -1,82 +0,0 @@
-.editor {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  max-width: 100%;
-  list-style: none;
-  position: relative;
-  display: block;
-  font-size: 14px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  transition: all 0.3s, height 0s;
-}
-.editor textarea.ant-input {
-  border: none;
-  border-bottom: 1px solid #eee;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.editor textarea.ant-input:hover {
-  border: none;
-  border-bottom: 1px solid #eee;
-}
-.editor textarea.ant-input:focus {
-  box-shadow: none;
-  border-bottom: 1px solid #eee;
-}
-.editor [contentEditable="true"]:empty:not(:focus):before {
-  content: attr(data-text);
-  color: #bfbfbf;
-}
-.editor:focus,
-.editor:hover {
-  border-color: #40a9ff;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-.content {
-  display: block;
-  box-sizing: border-box;
-  padding: 4px 10px;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 110px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-.content:focus,
-.content:hover {
-  outline: 0;
-}
-.toolbar {
-  display: inline-block;
-  width: 100%;
-  margin: 5px 0 0 0;
-}
-.toolbar .icon {
-  font-size: 23px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-.toolbar .icon:hover {
-  color: #40a9ff;
-}
-.feed .ant-popover-inner-content {
-  padding: 12px 16px 20px 16px;
-}
-.feed .ant-carousel .slick-dots {
-  bottom: -10px;
-}
-.feed .ant-carousel .slick-dots li.slick-active button {
-  background-color: #7b868a;
-}
-.feed .ant-carousel .slick-dots li button {
-  background-color: #a2aeb5;
-}

src/components/Editor.1/index.js

@@ -1,157 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Icon, Button, Popover, Input } from "antd";
-import { MAX_UPLOAD_NUMBER } from "../../constant";
-import Upload from "./Upload";
-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) {
-    super(props);
-    this.state = {
-      showUpload: false
-    };
-    this.handleClickEmoji = this.handleClickEmoji.bind(this);
-    this.handleShowUpload = this.handleShowUpload.bind(this);
-  }
-
-  componentDidMount() {}
-
-  handleClickEmoji(emojiId) {
-    this.props.onChangeEmoji(emojiId);
-  }
-
-  handleShowUpload(showUpload) {
-    if (typeof showUpload === "boolean") {
-      this.setState({ showUpload: showUpload });
-    } else {
-      this.setState({ showUpload: !this.state.showUpload });
-    }
-  }
-
-  render() {
-    const props = { ...EditorDefaultProps, ...this.props };
-    const {
-      value,
-      onChange,
-      onSubmit,
-      loading,
-      placeholder,
-      fileList,
-      onChangeFileList,
-      rows,
-      onUpload,
-      showEmoji,
-      showUpload,
-      submitText
-    } = props;
-
-    return (
-      <div className="editor">
-        <TextArea
-          value={value}
-          onChange={e => onChange(e.target.value)}
-          rows={rows}
-          placeholder={placeholder}
-        />
-
-        <div className="toolbar">
-          <div style={{ float: "left", margin: "8px 11px" }}>
-            {showEmoji && (
-              <Popover
-                trigger="click"
-                placement="bottomLeft"
-                autoAdjustOverflow={false}
-                content={
-                  <div style={{ width: 200 }}>
-                    <Emoji onClick={this.handleClickEmoji} />
-                  </div>
-                }
-                overlayClassName="feed"
-              >
-                <Icon type="smile-o" className="icon" />
-              </Popover>
-            )}
-
-            {showUpload && (
-              <Popover
-                visible={this.state.showUpload}
-                overlayStyle={{ zIndex: 999 }}
-                content={
-                  <div
-                    style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}
-                  >
-                    <Upload
-                      onChangeFileList={onChangeFileList}
-                      onUpload={onUpload}
-                      fileList={fileList}
-                    />
-                  </div>
-                }
-                placement="bottomLeft"
-                title={
-                  <div style={{ margin: "5px auto" }}>
-                    <span>
-                      上传图片
-                      <span style={{ color: "#666", fontWeight: 400 }}>
-                        (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
-                      </span>
-                    </span>
-                    <Icon
-                      type="close"
-                      onClick={() => this.handleShowUpload(false)}
-                      style={{
-                        float: "right",
-                        cursor: "pointer",
-                        marginTop: 4
-                      }}
-                    />
-                  </div>
-                }
-              >
-                <Icon
-                  type="picture"
-                  className="icon"
-                  style={{ marginLeft: 10 }}
-                  onClick={() => this.handleShowUpload(true)}
-                />
-              </Popover>
-            )}
-          </div>
-
-          <div style={{ float: "right", margin: "5px 11px" }}>
-            <Button onClick={onSubmit} type="primary" loading={loading}>
-              {submitText}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-Editor.propTypes = {
-  rows: PropTypes.number,
-  placeholder: PropTypes.string,
-  showEmoji: PropTypes.bool,
-  showUpload: PropTypes.bool,
-  submitText: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-export default Editor;

src/components/Editor/Upload.js

@@ -10,7 +10,6 @@ import {
   MAX_UPLOAD_NUMBER
 } from "../../constant";
 import Comment from "../../Comment";
-// import styles from "./Upload.less";
 import "./Upload.css";
 
 const client = oss => {

src/components/Editor/index.js

@@ -101,7 +101,6 @@ class Editor extends React.Component {
   }
 
   render() {
-    // const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
       placeholder,
@@ -115,14 +114,7 @@ class Editor extends React.Component {
       emojiToolIcon,
       imageToolIcon
     } = this.props;
-    // console.log("editor: ", this.props);
-    console.log("imageToolIcon: ", imageToolIcon);
-    //   var clonedElementWithMoreProps = React.cloneElement(
-    //     this.mainContent,
-    //     { anotherMessage: "nice to meet ya!" }
-    // );
-    // console.log('button: ', button);
-    console.log("button.props.onClick ", button.props.onClick);
+
     const handleSubmit = this.handleSubmit;
     return (
       <div className="editor">

src/index.js

@@ -29,43 +29,51 @@ class Index extends Component {
   }
 
   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>
-      ),
-      emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
-      imageToolIcon: (
-        <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
-      )
-    };
-
+    // 最简单的用法
     return (
-      <App {...props}>
-        <Editor {...editorProps} />
+      <App type={1} businessId="test">
+        <Editor />
       </App>
     );
+
+    // 复杂的用户法
+    // 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>
+    //   ),
+    //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
+    //   imageToolIcon: (
+    //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
+    //   )
+    // };
+
+    // return (
+    //   <App {...props}>
+    //     <Editor {...editorProps} />
+    //   </App>
+    // );
   }
 }