feat: 将通用评论中的编辑器等拆分为组件，并预留 props 供使用者自定义功能

package.json

@@ -17,6 +17,7 @@
     "antd": "^3.6.6",
     "axios": "^0.18.0",
     "dayjs": "^1.7.2",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4",
@@ -30,7 +31,7 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "prettier": "prettier --write src/**/*.{js,jsx,json,css,less}",
+    "prettier": "prettier --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",

src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import { message } from "antd";
 import axios from "./axios";
-import { URL, ERROR_DEFAULT, LIMIT } from "./constant";
+import { ERROR_DEFAULT, LIMIT } from "./constant";
 import { CommentContext } from "./Comment";
 import { isFunction } from "./helper";
 import CommentInput from "./components/CommentInput";
 import CommentList from "./components/CommentList";
-// import * as mock from "./mock";
+import Editor from "./components/Editor";
 import "./App.css";
 
 class App extends Component {
@@ -34,9 +35,7 @@ class App extends Component {
     this.sOssSts = this.sOssSts.bind(this);
   }
 
-  componentDidMount() {
-    this.sGetComment();
-  }
+  componentDidMount() {}
 
   /**
    * 改变 loading 状态
@@ -52,20 +51,12 @@ class App extends Component {
   /**
    * 获取评论列表
    */
-  sGetComment({ type = 1, businessId = 1, page = 1 } = {}) {
+  sGetComment({ page = 1 } = {}) {
     this.handleChangeLoading("sGetComment", true);
-    // 测试数据列表
-    // const { comments } = mock;
-    // this.setState({
-    //   list: comments.list,
-    //   page: 1,
-    //   total: 100
-    // });
-    // this.handleChangeLoading("sGetComment", false);
-    // return;
+    const { API, type, businessId } = this.props;
     axios
       .get(
-        `${URL}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
+        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
       )
       .then(response => {
         const { list, page, total } = response.data;
@@ -106,8 +97,9 @@ class App extends Component {
    */
   sGetReply({ commentId, page = 1 } = {}) {
     this.handleChangeLoading("sGetReply", true);
+    const { API } = this.props;
     axios
-      .get(`${URL}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
+      .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
         const { list: replies } = response.data;
         if (!replies) {
@@ -147,14 +139,19 @@ class App extends Component {
 
   /**
    * 添加评论
-   * @param {object} data { type, business_id, content }
+   * @param {string} content comment content
    */
-  sCreateComment(data) {
-    if (!data.content) return message.error("评论内容不能为空 ");
+  sCreateComment(content) {
+    if (!content) return message.error("评论内容不能为空 ");
     this.handleChangeLoading("sCreateComment", true);
-    axios(`${URL}/comments`, {
+    const { API, type, businessId } = this.props;
+    axios(`${API}/comments`, {
       method: "post",
-      data,
+      data: {
+        type,
+        business_id: businessId,
+        content
+      },
       withCredentials: true
     })
       .then(response => {
@@ -189,13 +186,13 @@ class App extends Component {
   sCreateReply(data, cb) {
     if (!data.content) return message.error("回复内容不能为空 ");
     this.handleChangeLoading("sCreateReply", true);
-    axios(`${URL}/replies`, {
+    const { API } = this.props;
+    axios(`${API}/replies`, {
       method: "post",
       data,
       withCredentials: true
     })
       .then(response => {
-        // console.log("response: ", response.data);
         // // 将该条数据插入到 list 中
         // const list = this.state.list.map(item => {
         //   if (item.id === data.comment_id) {
@@ -229,7 +226,8 @@ class App extends Component {
    */
   sCommentFavor(commentId, favored) {
     this.handleChangeLoading("sCommentFavor", true);
-    axios(`${URL}/comments/${commentId}/favor`, {
+    const { API } = this.props;
+    axios(`${API}/comments/${commentId}/favor`, {
       method: favored ? "delete" : "put",
       withCredentials: true
     })
@@ -262,8 +260,9 @@ class App extends Component {
    */
   sOssSts() {
     this.handleChangeLoading("sOssSts", true);
+    const { API } = this.props;
     axios
-      .get(`${URL}/oss/sts`)
+      .get(`${API}/oss/sts`)
       .then(response => {
         this.setState({ oss: { ...response.data } });
       })
@@ -283,6 +282,7 @@ class App extends Component {
     // 添加到 Context 的数据
     const value = {
       ...this.state,
+      ...this.props,
       sCreateComment: this.sCreateComment,
       sGetComment: this.sGetComment,
       sCommentFavor: this.sCommentFavor,
@@ -294,14 +294,36 @@ class App extends Component {
     return (
       <CommentContext.Provider value={value}>
         <div className="comment">
-          <CommentInput />
-          <div style={{ marginTop: 20 }}>
-            <CommentList />
-          </div>
+          {this.props.showEditor && (
+            <CommentInput content={this.props.children} />
+          )}
+          {this.props.showList && (
+            <div style={{ marginTop: 20 }}>
+              <CommentList />
+            </div>
+          )}
         </div>
       </CommentContext.Provider>
     );
   }
 }
 
+App.propTypes = {
+  type: PropTypes.number.isRequired, // 评论的 type
+  businessId: PropTypes.string.isRequired, // 评论的 business_id
+  API: PropTypes.string, // 评论的 API 前缀
+  showList: PropTypes.bool, // 是否显示评论列表
+  showEditor: PropTypes.bool // 是否显示评论输入框
+  // editor: PropTypes.node, // 评论编辑器
+};
+
+App.defaultProps = {
+  API: "http://api.links123.net/comment/v1",
+  showList: true,
+  showEditor: true
+  // editor: <span>a</span>,
+};
+
+export { Editor };
+
 export default App;

src/CHANGELOG.md

@@ -0,0 +1,7 @@
+# CHANGELOG
+
+
+## 0.1.0
+
+
+

src/components/CommentInput/index.js

@@ -2,12 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { OSS_LINK } from "../../constant";
 import Comment from "../../Comment";
-import Editor from "../Editor";
-
-const PLACEHOLDER = {
-  normal: "说点什么吧...",
-  default: "说点什么吧..."
-};
 
 class CommentInput extends Component {
   constructor(props) {
@@ -25,8 +19,8 @@ class CommentInput extends Component {
     this.handleUpload = this.handleUpload.bind(this);
   }
 
-  handleChange(e) {
-    this.setState({ value: e.target.value });
+  handleChange(value) {
+    this.setState({ value });
   }
 
   handleChangeFileList(fileList) {
@@ -37,6 +31,12 @@ class CommentInput extends Component {
     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 }) {
@@ -48,6 +48,7 @@ class CommentInput extends Component {
   handleSubmit() {
     let { value, fileMap, fileList } = this.state;
     if (fileList.length) {
+      value += "<br/>";
       fileList.forEach(item => {
         value += `[${OSS_LINK}${fileMap[item.uid]}]`;
       });
@@ -56,8 +57,6 @@ class CommentInput extends Component {
     const { type, commentId, replyId, handleToggleInput } = this.props;
     if (type === "normal") {
       this.props.app.sCreateComment({
-        type: 1,
-        business_id: "1",
         content: value
       });
     } else if (type === "comment") {
@@ -78,12 +77,33 @@ class CommentInput extends Component {
         () => 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" ? (
@@ -105,19 +125,7 @@ class CommentInput extends Component {
             </span>
           </div>
         ) : null}
-        <div style={{ marginTop: 40 }}>
-          <Editor
-            value={value}
-            placeholder={PLACEHOLDER[type] || PLACEHOLDER.default}
-            fileList={fileList}
-            onChange={this.handleChange}
-            onSubmit={this.handleSubmit}
-            onChangeFileList={this.handleChangeFileList}
-            onChangeEmoji={this.handleChangeEmoji}
-            onUpload={this.handleUpload}
-            loading={this.props.app.loading.sCreateComment}
-          />
-        </div>
+        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
       </div>
     );
   }

src/components/CommentList/index.js

@@ -10,6 +10,10 @@ class CommentList extends Component {
     this.state = {};
   }
 
+  componentWillMount() {
+    this.props.app.sGetComment();
+  }
+
   render() {
     const {
       list,

src/components/Editor.1/Emoji.css

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Carousel } from "antd";
+import emoji, { prefixUrl, ext } from "../../emoji";
+import "./Emoji.css";
+// 每页 20  5*4
+// 共 20 * 3 = 60 (实际是 54)
+
+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

@@ -0,0 +1,8 @@
+.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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,82 @@
+.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

@@ -0,0 +1,142 @@
+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;
+
+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 {
+      value,
+      onChange,
+      placeholder,
+      fileList,
+      onChangeFileList,
+      rows,
+      onUpload
+    } = this.props;
+
+    return (
+      <div className="editor">
+        <TextArea
+          value={value}
+          onChange={onChange}
+          rows={rows}
+          placeholder={placeholder}
+        />
+
+        <div className="toolbar">
+          {false && (
+            <div style={{ float: "left", margin: "8px 11px" }}>
+              <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>
+
+              <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={this.props.onSubmit}
+              type="primary"
+              loading={this.props.loading}
+            >
+              发表
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Editor.propTypes = {
+  rows: PropTypes.number,
+  placeholder: PropTypes.string
+};
+
+Editor.defaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧..."
+};
+
+export default Editor;

src/components/Editor/Emoji.js

@@ -5,6 +5,8 @@ import "./Emoji.css";
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
 
+// class Emoji
+
 const Emoji = ({ onClick }) => {
   const content = [[], [], []];
 

src/components/Editor/index.js

@@ -1,15 +1,26 @@
-// https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
 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 styles from "./index.less";
 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: () => {}
+};
 
-export default class Editor extends React.Component {
+class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -34,88 +45,98 @@ export default class Editor extends React.Component {
   }
 
   render() {
+    const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
       onChange,
+      onSubmit,
+      loading,
       placeholder,
       fileList,
       onChangeFileList,
-      onUpload
-    } = this.props;
+      rows,
+      onUpload,
+      showEmoji,
+      showUpload,
+      submitText
+    } = props;
+
     return (
       <div className="editor">
         <TextArea
           value={value}
-          onChange={onChange}
-          rows={5}
+          onChange={e => onChange(e.target.value)}
+          rows={rows}
           placeholder={placeholder}
         />
 
         <div className="toolbar">
           <div style={{ float: "left", margin: "8px 11px" }}>
-            <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>
+            {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>
+            )}
 
-            <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}张图片)
+            {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>
-                  </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>
+                    <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={this.props.onSubmit}
-              type="primary"
-              loading={this.props.loading}
-            >
-              发表
+            <Button onClick={onSubmit} type="primary" loading={loading}>
+              {submitText}
             </Button>
           </div>
         </div>
@@ -123,3 +144,14 @@ export default class Editor extends React.Component {
     );
   }
 }
+
+Editor.propTypes = {
+  rows: PropTypes.number,
+  placeholder: PropTypes.string,
+  showEmoji: PropTypes.bool,
+  showUpload: PropTypes.bool,
+  submitText: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default Editor;

src/constant.js

@@ -1,6 +1,3 @@
-// export const URL = "http://121.41.20.11:8082/v1";
-export const URL = "http://api.links123.net/comment/v1";
-
 export const ERROR_DEFAULT = "出错了！";
 
 export const LIMIT = 10; // 默认 limit

src/index.js

@@ -1,7 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root-comment"));
+const props = {
+  type: 1,
+  businessId: "1",
+  API: "http://api.links123.net/comment/v1",
+  showList: false
+};
+
+const editorProps = {
+  showEmoji: true,
+  placeholder: "说点什么吧",
+  rows: 5
+};
+
+ReactDOM.render(
+  <App {...props}>
+    <Editor {...editorProps} onSubmit={v => console.log()} />
+  </App>,
+  document.getElementById("root-comment")
+);
 registerServiceWorker();

src/lang/index.js

@@ -0,0 +1,15 @@
+// 语言包
+// 英文短语和中文提示的对应
+const data = {
+  "auth failed": "请先登录",
+  "create comment failed": "创建评论失败",
+  "comment favor failed": "评论点赞失败",
+  "delete comment favor failed": "评论取消点赞失败",
+  "get comments failed": "获取评论列表失败",
+  "create reply failed": "创建回复失败",
+  "reply favor failed": "回复点赞失败",
+  "delete reply favor failed": "删除回复点赞失败",
+  "get replies failed": "获取回复列表失败"
+};
+
+export default data;