refactor: update editor and readme

README.md

@@ -1,5 +1,114 @@
 # Comment
-通用评论系统
+
+通用评论系统及编辑器
+
+`version 0.2.0`
+
+```js
+import Comment, { Editor } from 'comment';
+```
+
+
+## Props
+
+#### Comment
+
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| type  | number |          | true     | 评论的 type  |
+| businessId | string |     | true     | 评论的 business id|
+| API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
+| showList | boolean |   true  | false     | 是否显示评论列表|
+| showEditor | boolean |   true  | false     | 是否显示评论输入框|
+
+
+##### Editor
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| rows  | number |       5   | false     | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
+| placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
+| showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
+| showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
+| 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 来自定义提交编辑器值的按钮|
+| emojiToolIcon | ReactNode  |     | false     | Toolbar 中表情的图标 |
+| imageToolIcon | ReactNode  |     | false     | Toolbar 中上传文件的图标 |
+
+### 什么时候不要使用 value/onChange/onSubmit
+
+如果将 `comment` 作为通用评论组件，则不要使用 `value` `onChange` `onSubmit`。因为组件内部，实现了通用评论的业务逻辑。
+
+**可以使用 value/onChange/onSubmit 的情况:**
+
+- 单独使用其中的 `Editor`。即 `import { Editor } from 'comment'`
+- 不需要展示评论列表，即设置 `showList: false`
+
+```jsx
+// 单独使用 Editor
+<Editor value="xxx" onChange={(v) => console.log(v)} />
+
+// 不需要展示评论列表
+
+<Comment type={1}  showList={false}>
+  <Editor value="xxx" onChange={(v) => console.log(v)} />
+</Comment>
+
+```
+
+### button 
+
+如果使用 `button`，则 `btnLoading` `btnDisable` `btnSubmitText` 都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。
+
+所以如果要提交编辑器的值，需要自己在 `Button` 组件上实现提交功能。编辑器的值，可以通过 `onChange` 方法获取到。
+
+如果使用了 `button` 属性，并且没有为其设置 `onClick` 方法，则 `onClick` 默认为发布评论，即点击按钮会发表评论:
+
+```jsx
+// 如下代码所示
+// 点击“自定义按钮”的时候，会发表评论。这是由 Comment 组件内部实现的业务逻辑
+<Comment type={1} businessId="test" showList={false}>
+  <Editor 
+    button={(
+      <Button
+        type="primary"
+        ghost
+      >
+        自定义按钮
+      </Button>
+    )}
+  />
+</Comment>
+```
+
+如果使用了 `button` 属性，并且设置了 `onClick` 方法，则会覆盖默认的 `onClick` 方法:
+
+```jsx
+// 下面的代码，点击的时候，不会提交评论
+// 而是会输出 state 的值（
+// 即编辑器的值，因为 onChange 将编辑器输入的值通过回调函数传递给了父组件）
+<Comment type={1} businessId="test" showList={false}>
+  <Editor 
+    button={(
+      <Button
+        type="primary"
+        ghost
+        value={this.state.value}
+        onChange={(value) => this.setState({ value })}
+        onClick={() => console.log(this.state.value)}
+      >
+        自定义按钮
+      </Button>
+    )}
+  />
+</Comment>
+```
 
 
 ## 使用
@@ -30,7 +139,7 @@ render() {
 }
 ```
 
-**注意：最好，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
+**注意：最后，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
 
 
 ### 作为静态文件引入
@@ -43,7 +152,7 @@ const props = {
   type: 1,
   businessId: "1",
   API: "http://api.links123.net/comment/v1",
-  showList: false
+  showList: true
 };
 
 const editorProps = {
@@ -93,61 +202,6 @@ $ yarn build
 </html>
 ```
 
-## Props
-
-#### Comment
-
-
-| props | type   | default  | required | description |
-| ----- | -------| -------- | -------- | ----------- |
-| type  | number |          | true     | 评论的 type  |
-| businessId | string |     | true     | 评论的 business id|
-| API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
-| showList | boolean |   true  | false     | 是否显示评论列表|
-| showEditor | boolean |   true  | false     | 是否显示评论输入框|
-
-
-##### Editor
-
-| props | type   | default  | required | description |
-| ----- | -------| -------- | -------- | ----------- |
-| rows  | number |       5   | false     | 编辑器的高度。默认情况下，回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
-| placeholder | string |  说点什么吧...   | false     | 评论的中的提示文字|
-| showEmoji | boolean |   true  | false     | 是否显示 Toolbar 中表情工具|
-| showUpload | boolean |   true  | false     | 是否显示 Toolbar 中 上传图片工具|
-| 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>
-```
-
 ## 开发
 
 ```
@@ -158,12 +212,5 @@ $ yarn start
 ```
 
 - `yarn build` 将项目打包成一个单页应用
-- `yarn lib` 将项目打包成一个组件
+- `yarn lib` 将项目打包成一个 es5 组件
 - `yarn prettier` 格式化代码
-
-## TODO
-
-- [ ] 前后端统一错误码
-- [x] type 和 businessID 的定义
-- [ ] Editor onSubmit 回调
-

package.json

@@ -31,7 +31,7 @@
   },
   "scripts": {
     "precommit": "lint-staged",
-    "prettier": "prettier --trailing-comma --write 'src/**/*.{js,jsx,json,css,less}'",
+    "prettier": "prettier --single-quote --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/components/CommentInput/index.js

@@ -10,7 +10,7 @@ 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;
     if (action === "comment") {
       this.props.app.sCreateComment({

src/components/Editor/index.js

@@ -111,10 +111,19 @@ class Editor extends React.Component {
       btnSubmitText,
       btnLoading,
       btnDisabled,
-      button
+      button,
+      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">
         <TextArea
@@ -138,7 +147,7 @@ class Editor extends React.Component {
                 }
                 overlayClassName="feed"
               >
-                <Icon type="smile-o" className="icon" />
+                {emojiToolIcon || <Icon type="smile-o" className="icon" />}
               </Popover>
             )}
 
@@ -179,18 +188,28 @@ class Editor extends React.Component {
                   </div>
                 }
               >
-                <Icon
-                  type="picture"
-                  className="icon"
-                  style={{ marginLeft: 10 }}
-                  onClick={() => this.handleShowUpload(true)}
-                />
+                {imageToolIcon ? (
+                  React.cloneElement(imageToolIcon, {
+                    onClick: () => this.handleShowUpload(true)
+                  })
+                ) : (
+                  <Icon
+                    type="picture"
+                    className="icon"
+                    style={{ marginLeft: 10 }}
+                    onClick={() => this.handleShowUpload(true)}
+                  />
+                )}
               </Popover>
             )}
           </div>
 
           <div style={{ float: "right", margin: "5px 11px" }}>
-            {button || (
+            {button ? (
+              React.cloneElement(button, {
+                onClick: button.props.onClick || handleSubmit
+              })
+            ) : (
               <Button
                 onClick={() => this.handleSubmit()}
                 type="primary"
@@ -218,7 +237,9 @@ Editor.propTypes = {
   btnSubmitText: PropTypes.string,
   btnLoading: PropTypes.bool,
   btnDisabled: PropTypes.bool,
-  button: PropTypes.node
+  button: PropTypes.node,
+  emojiToolIcon: PropTypes.node,
+  imageToolIcon: PropTypes.node
 };
 
 Editor.defaultProps = {

src/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import { Button } from "antd";
+import { Button, Icon } from "antd";
 import App, { Editor } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
@@ -50,10 +50,14 @@ class Index extends Component {
         <Button
           type="primary"
           ghost
-          onClick={() => console.log("click btn: ", this.state.value)}
+          // 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 }} />
       )
     };