doc: UPDATE README.md

README.md

@@ -17,13 +17,15 @@ $ yarn add git+https://git.links123.net/npm/comment.git
 然后在代码里面引入 `comment` 组件：
 
 ```jsx
-import Comment from 'comment'
+import Comment, { Editor } from 'comment'
 
 // ...
 
 render() {
   return (
-    <Comment />
+    <Comment>
+      <Editor />
+    </Comment>
   )
 }
 ```
@@ -33,11 +35,43 @@ render() {
 
 ### 作为静态文件引入
 
-首先引入 OSS SDK，用于直传文件到 OSS。
+作为静态问卷使用的话，首先需要在 `index.js` 里面设置好组件的 `props`：
 
-然后分别通过 link 和 script 标签引入打包后的文件。
+```js
+// ...
+const props = {
+  type: 1,
+  businessId: "1",
+  API: "http://api.links123.net/comment/v1",
+  showList: false
+};
+
+const editorProps = {
+  showEmoji: true,
+  placeholder: "说点什么吧",
+  rows: 5,
+};
+
+
+// ...
+<App {...props}>
+    <Editor {...editorProps} />
+</App>
+```
+
+然后再进行打包：
+
+```
+$ yarn build
+```
+
+打包后会得到静态问卷，分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
 
-再创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
+
+然后还需要引入 OSS SDK，用于直传文件到 OSS。
+
+
+最后创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
 
 如下所示：
 
@@ -59,6 +93,32 @@ render() {
 </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  | true     | 是否显示评论列表|
+| showEditor | boolean |   true  | true     | 是否显示评论输入框|
+
+
+##### Editor
+
+| props | type   | default  | required | description |
+| ----- | -------| -------- | -------- | ----------- |
+| 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... 尚未完成。点击提交按钮的回调函数|
+
 
 ## 开发
 
@@ -76,4 +136,6 @@ $ yarn start
 ## TODO
 
 - [ ] 前后端统一错误码
-- [ ] type 和 businessID 的定义
+- [x] type 和 businessID 的定义
+- [ ] Editor onSubmit 回调
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [

src/App.js

@@ -314,14 +314,12 @@ App.propTypes = {
   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 };

src/CHANGELOG.md

@@ -3,5 +3,10 @@
 
 ## 0.1.0
 
+- [x] 不兼容更新。
+- [x] 添加了很多 `Props`
+- [x] 组件导出为 `Comment` 和 `Editor`
+
+
 
 

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,65 +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)
-
-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,142 +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;
-
-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/index.js

@@ -14,11 +14,12 @@ const editorProps = {
   showEmoji: true,
   placeholder: "说点什么吧",
   rows: 5
+  // onSubmit={v => console.log()} // TODO...
 };
 
 ReactDOM.render(
   <App {...props}>
-    <Editor {...editorProps} onSubmit={v => console.log()} />
+    <Editor {...editorProps} />
   </App>,
   document.getElementById("root-comment")
 );