Hepper
/
comment
geforkt von npm/comment
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

publish comment@0.0.1

node vor 6 Jahren
Ursprung
d61de7a078
Commit
0d003e8da3
71 geänderte Dateien mit 4414 neuen und 2 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 7
    0
      .babelrc
  2. 3
    0
      .eslintrc
  3. 47
    0
      .gitignore
  4. 79
    2
      README.md
  5. 6
    0
      config-overrides.js
  6. 9
    0
      lib/App.css
  7. 394
    0
      lib/App.js
  8. 1
    0
      lib/App.js.map
  9. 38
    0
      lib/Comment.js
  10. 1
    0
      lib/Comment.js.map
  11. 16
    0
      lib/axios.js
  12. 1
    0
      lib/axios.js.map
  13. 48
    0
      lib/components/CommentBox/index.css
  14. 180
    0
      lib/components/CommentBox/index.js
  15. 1
    0
      lib/components/CommentBox/index.js.map
  16. 202
    0
      lib/components/CommentInput/index.js
  17. 1
    0
      lib/components/CommentInput/index.js.map
  18. 14
    0
      lib/components/CommentList/index.css
  19. 95
    0
      lib/components/CommentList/index.js
  20. 1
    0
      lib/components/CommentList/index.js.map
  21. 52
    0
      lib/components/ContentItem/index.css
  22. 201
    0
      lib/components/ContentItem/index.js
  23. 1
    0
      lib/components/ContentItem/index.js.map
  24. 23
    0
      lib/components/Editor/Emoji.css
  25. 106
    0
      lib/components/Editor/Emoji.js
  26. 1
    0
      lib/components/Editor/Emoji.js.map
  27. 8
    0
      lib/components/Editor/Upload.css
  28. 205
    0
      lib/components/Editor/Upload.js
  29. 1
    0
      lib/components/Editor/Upload.js.map
  30. 82
    0
      lib/components/Editor/index.css
  31. 213
    0
      lib/components/Editor/index.js
  32. 1
    0
      lib/components/Editor/index.js.map
  33. 22
    0
      lib/constant.js
  34. 1
    0
      lib/constant.js.map
  35. 175
    0
      lib/emoji.js
  36. 1
    0
      lib/emoji.js.map
  37. 57
    0
      lib/helper.js
  38. 1
    0
      lib/helper.js.map
  39. 23
    0
      lib/index.js
  40. 1
    0
      lib/index.js.map
  41. 72
    0
      lib/mock.js
  42. 1
    0
      lib/mock.js.map
  43. 108
    0
      lib/registerServiceWorker.js
  44. 1
    0
      lib/registerServiceWorker.js.map
  45. 52
    0
      package.json
  46. BIN
      public/favicon.ico
  47. 42
    0
      public/index.html
  48. 15
    0
      public/manifest.json
  49. 9
    0
      src/App.css
  50. 307
    0
      src/App.js
  51. 21
    0
      src/Comment.js
  52. 5
    0
      src/axios.js
  53. 48
    0
      src/components/CommentBox/index.css
  54. 120
    0
      src/components/CommentBox/index.js
  55. 135
    0
      src/components/CommentInput/index.js
  56. 14
    0
      src/components/CommentList/index.css
  57. 46
    0
      src/components/CommentList/index.js
  58. 52
    0
      src/components/ContentItem/index.css
  59. 130
    0
      src/components/ContentItem/index.js
  60. 23
    0
      src/components/Editor/Emoji.css
  61. 65
    0
      src/components/Editor/Emoji.js
  62. 8
    0
      src/components/Editor/Upload.css
  63. 132
    0
      src/components/Editor/Upload.js
  64. 82
    0
      src/components/Editor/index.css
  65. 125
    0
      src/components/Editor/index.js
  66. 16
    0
      src/constant.js
  67. 226
    0
      src/emoji.js
  68. 44
    0
      src/helper.js
  69. 7
    0
      src/index.js
  70. 72
    0
      src/mock.js
  71. 117
    0
      src/registerServiceWorker.js

+ 7
- 0
.babelrc Datei anzeigen 

@@ -0,0 +1,7 @@
1 
+{
2 
+  "presets": ["env", "react"],
3 
+  "plugins": [
4 
+    "transform-object-rest-spread",
5 
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
6 
+  ]
7 
+}

+ 3
- 0
.eslintrc Datei anzeigen 

@@ -0,0 +1,3 @@
1 
+{
2 
+  "extends": "react-app"
3 
+}

+ 47
- 0
.gitignore Datei anzeigen 

@@ -0,0 +1,47 @@
1 
+# misc
2 
+.DS_Store
3 
+npm-debug.log*
4 
+.DS_STORE
5 
+node_modules
6 
+scripts/flow/*/.flowconfig
7 
+*~
8 
+*.pyc
9 
+.grunt
10 
+_SpecRunner.html
11 
+__benchmarks__
12 
+build/
13 
+dist/
14 
+remote-repo/
15 
+coverage/
16 
+flow-coverage/
17 
+.module-cache
18 
+fixtures/dom/public/react-dom.js
19 
+fixtures/dom/public/react.js
20 
+test/the-files-to-test.generated.js
21 
+*.log*
22 
+chrome-user-data
23 
+*.sublime-project
24 
+*.sublime-workspace
25 
+.idea
26 
+*.iml
27 
+.vscode
28 
+*.swp
29 
+*.swo
30 
+package-lock.json
31 
+yarn.lock
32 
+
33 
+# testing
34 
+/coverage
35 
+
36 
+# production
37 
+/build
38 
+
39 
+# misc
40 
+.DS_Store
41 
+.env.local
42 
+.env.development.local
43 
+.env.test.local
44 
+.env.production.local
45 
+npm-debug.log*
46 
+yarn-debug.log*
47 
+yarn-error.log*

+ 79
- 2
README.md Datei anzeigen 

@@ -1,3 +1,80 @@
1 
-# comment
1 
+# Comment
2 2
3 
-通用评论
3 
+通用评论系统
4 
+
5 
+
6 
+## 使用
7 
+
8 
+
9 
+### 作为组件使用
10 
+
11 
+```
12 
+# npm 安装
13 
+$ npm install git+https://git.links123.net/node/test_comment.git
14 
+# yarn 安装
15 
+$ yarn add https://git.links123.net/node/test_comment.git
16 
+```
17 
+
18 
+然后在代码里面引入 `comment` 组件：
19 
+
20 
+```jsx
21 
+import Comment from 'comment'
22 
+
23 
+// ...
24 
+
25 
+render() {
26 
+  return (
27 
+    <Comment />
28 
+  )
29 
+}
30 
+```
31 
+
32 
+**注意：最好，还需要在 HTML 文件里面引入阿里云 OSS SDK `<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>`**
33 
+
34 
+
35 
+### 作为静态文件引入
36 
+
37 
+首先引入 OSS SDK，用于直传文件到 OSS。
38 
+
39 
+然后分别通过 link 和 script 标签引入打包后的文件。
40 
+
41 
+再创建一个 id 为 `root-comment` 的标签，作为渲染通用评论的跟元素。
42 
+
43 
+如下所示：
44 
+
45 
+```html
46 
+<!DOCTYPE html>
47 
+<html>
48 
+<head>
49 
+  <meta charset="utf-8" />
50 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
51 
+  <title>Page Title</title>
52 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
53 
+  <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
54 
+</head>
55 
+<body>
56 
+  <div id="root-comment" style="width: 700px"></div>
57 
+  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
58 
+  <script src="./static/js/main.eac872df.js"></script>
59 
+</body>
60 
+</html>
61 
+```
62 
+
63 
+
64 
+## 开发
65 
+
66 
+```
67 
+$ git clone https://git.links123.net/npm/comment
68 
+$ cd comment
69 
+$ yarn
70 
+$ yarn start
71 
+```
72 
+
73 
+- `yarn build` 将项目打包成一个单页应用
74 
+- `yarn lib` 将项目打包成一个组件
75 
+- `yarn prettier` 格式化代码
76 
+
77 
+## TODO
78 
+
79 
+- [ ] 前后端统一错误码
80 
+- [ ] type 和 businessID 的定义

+ 6
- 0
config-overrides.js Datei anzeigen 

@@ -0,0 +1,6 @@
1 
+const { injectBabelPlugin } = require('react-app-rewired');
2 
+
3 
+module.exports = function override(config, env) {
4 
+  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
5 
+  return config;
6 
+};

+ 9
- 0
lib/App.css Datei anzeigen 

@@ -0,0 +1,9 @@
1 
+.comment {
2 
+  width: 100%;
3 
+  padding: 10px;
4 
+  margin-bottom: 100px;
5 
+}
6 
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
7 
+  position: fixed;
8 
+  top: 45%;
9 
+}

+ 394
- 0
lib/App.js Datei anzeigen 

@@ -0,0 +1,394 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _message2 = require("antd/es/message");
8 
+
9 
+var _message3 = _interopRequireDefault(_message2);
10 
+
11 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
12 
+
13 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
14 
+
15 
+require("antd/es/message/style/css");
16 
+
17 
+var _react = require("react");
18 
+
19 
+var _react2 = _interopRequireDefault(_react);
20 
+
21 
+var _axios = require("./axios");
22 
+
23 
+var _axios2 = _interopRequireDefault(_axios);
24 
+
25 
+var _constant = require("./constant");
26 
+
27 
+var _Comment = require("./Comment");
28 
+
29 
+var _helper = require("./helper");
30 
+
31 
+var _CommentInput = require("./components/CommentInput");
32 
+
33 
+var _CommentInput2 = _interopRequireDefault(_CommentInput);
34 
+
35 
+var _CommentList = require("./components/CommentList");
36 
+
37 
+var _CommentList2 = _interopRequireDefault(_CommentList);
38 
+
39 
+require("./App.css");
40 
+
41 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
42 
+
43 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
44 
+
45 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
46 
+
47 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
48 
+// import * as mock from "./mock";
49 
+
50 
+
51 
+var App = function (_Component) {
52 
+  _inherits(App, _Component);
53 
+
54 
+  function App(props) {
55 
+    _classCallCheck(this, App);
56 
+
57 
+    var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
58 
+
59 
+    _this.state = {
60 
+      loading: {},
61 
+
62 
+      // oss 配置
63 
+      oss: {},
64 
+
65 
+      // 评论数据
66 
+      list: [],
67 
+      page: 1,
68 
+      total: 0,
69 
+      // 是否没有更多评论了
70 
+      isNoMoreComment: false
71 
+    };
72 
+    _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
73 
+    _this.sGetComment = _this.sGetComment.bind(_this);
74 
+    _this.sGetReply = _this.sGetReply.bind(_this);
75 
+    _this.sCreateComment = _this.sCreateComment.bind(_this);
76 
+    _this.sCreateReply = _this.sCreateReply.bind(_this);
77 
+    _this.sCommentFavor = _this.sCommentFavor.bind(_this);
78 
+    _this.sOssSts = _this.sOssSts.bind(_this);
79 
+    return _this;
80 
+  }
81 
+
82 
+  _createClass(App, [{
83 
+    key: "componentDidMount",
84 
+    value: function componentDidMount() {
85 
+      this.sGetComment();
86 
+    }
87 
+
88 
+    /**
89 
+     * 改变 loading 状态
90 
+     * @param {string} key key
91 
+     * @param {string} value value
92 
+     */
93 
+
94 
+  }, {
95 
+    key: "handleChangeLoading",
96 
+    value: function handleChangeLoading(key, value) {
97 
+      var loading = this.state.loading;
98 
+
99 
+      loading[key] = value;
100 
+      this.setState({ loading: loading });
101 
+    }
102 
+
103 
+    /**
104 
+     * 获取评论列表
105 
+     */
106 
+
107 
+  }, {
108 
+    key: "sGetComment",
109 
+    value: function sGetComment() {
110 
+      var _this2 = this;
111 
+
112 
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
113 
+          _ref$type = _ref.type,
114 
+          type = _ref$type === undefined ? 1 : _ref$type,
115 
+          _ref$businessId = _ref.businessId,
116 
+          businessId = _ref$businessId === undefined ? 1 : _ref$businessId,
117 
+          _ref$page = _ref.page,
118 
+          page = _ref$page === undefined ? 1 : _ref$page;
119 
+
120 
+      this.handleChangeLoading("sGetComment", true);
121 
+      // 测试数据列表
122 
+      // const { comments } = mock;
123 
+      // this.setState({
124 
+      //   list: comments.list,
125 
+      //   page: 1,
126 
+      //   total: 100
127 
+      // });
128 
+      // this.handleChangeLoading("sGetComment", false);
129 
+      // return;
130 
+      _axios2.default.get(_constant.URL + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
131 
+        var _response$data = response.data,
132 
+            list = _response$data.list,
133 
+            page = _response$data.page,
134 
+            total = _response$data.total;
135 
+
136 
+        if (list) {
137 
+          var newList = list;
138 
+          if (page > 1) {
139 
+            var oldList = _this2.state.list;
140 
+            // 删除临时数据
141 
+
142 
+            oldList = oldList.filter(function (o) {
143 
+              return !o.isTemporary;
144 
+            });
145 
+            newList = oldList.concat(newList);
146 
+          }
147 
+          _this2.setState({
148 
+            list: newList,
149 
+            page: page,
150 
+            total: total
151 
+          });
152 
+        } else {
153 
+          _message3.default.info("没有更多评论了");
154 
+          _this2.setState({
155 
+            isNoMoreComment: true
156 
+          });
157 
+        }
158 
+      }).catch(function (error) {
159 
+        if (error.response && error.response.data && error.response.data.msg) {
160 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
161 
+          return;
162 
+        }
163 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
164 
+      }).finally(function () {
165 
+        _this2.handleChangeLoading("sGetComment", false);
166 
+      });
167 
+    }
168 
+
169 
+    /**
170 
+     * 获取更多回复
171 
+     */
172 
+
173 
+  }, {
174 
+    key: "sGetReply",
175 
+    value: function sGetReply() {
176 
+      var _this3 = this;
177 
+
178 
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
179 
+          commentId = _ref2.commentId,
180 
+          _ref2$page = _ref2.page,
181 
+          page = _ref2$page === undefined ? 1 : _ref2$page;
182 
+
183 
+      this.handleChangeLoading("sGetReply", true);
184 
+      _axios2.default.get(_constant.URL + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
185 
+        var replies = response.data.list;
186 
+
187 
+        if (!replies) {
188 
+          _message3.default.info("没有更多数据了！");
189 
+        }
190 
+        var list = _this3.state.list.map(function (item) {
191 
+          if (item.id === commentId) {
192 
+            if (!item.replies) item.replies = [];
193 
+            if (replies) {
194 
+              if (page === 1) {
195 
+                // 如果当前页数为第一页，则清空当前所有的 replies
196 
+                // 并将获取到的 replies 存放在 state
197 
+                item.replies = replies;
198 
+              } else {
199 
+                item.replies = item.replies.concat(replies);
200 
+                // 如果当前页数非第一页，则合并 replies
201 
+              }
202 
+            } else {
203 
+              item.isNoMoreReply = true;
204 
+            }
205 
+          }
206 
+          return item;
207 
+        });
208 
+        _this3.setState({ list: list });
209 
+      }).catch(function (error) {
210 
+        if (error.response && error.response.data && error.response.data.msg) {
211 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
212 
+          return;
213 
+        }
214 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
215 
+      }).finally(function () {
216 
+        _this3.handleChangeLoading("sGetReply", false);
217 
+      });
218 
+    }
219 
+
220 
+    /**
221 
+     * 添加评论
222 
+     * @param {object} data { type, business_id, content }
223 
+     */
224 
+
225 
+  }, {
226 
+    key: "sCreateComment",
227 
+    value: function sCreateComment(data) {
228 
+      var _this4 = this;
229 
+
230 
+      if (!data.content) return _message3.default.error("评论内容不能为空 ");
231 
+      this.handleChangeLoading("sCreateComment", true);
232 
+      (0, _axios2.default)(_constant.URL + "/comments", {
233 
+        method: "post",
234 
+        data: data,
235 
+        withCredentials: true
236 
+      }).then(function (response) {
237 
+        _message3.default.success("评论成功！");
238 
+        // 将数据写入到 list 中
239 
+        // 临时插入
240 
+        // 等到获取数据之后，删除临时数据
241 
+        var list = _this4.state.list;
242 
+
243 
+        list.unshift(_extends({}, response.data, {
244 
+          isTemporary: true // 临时的数据
245 
+        }));
246 
+        _this4.setState({ list: list });
247 
+      }).catch(function (error) {
248 
+        if (error.response && error.response.data && error.response.data.msg) {
249 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
250 
+          return;
251 
+        }
252 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
253 
+      }).finally(function () {
254 
+        _this4.handleChangeLoading("sCreateComment", false);
255 
+      });
256 
+    }
257 
+
258 
+    /**
259 
+     * 添加回复
260 
+     * 回复评论/回复回复
261 
+     * @param {object} data { comment_id, content, [reply_id] }
262 
+     */
263 
+
264 
+  }, {
265 
+    key: "sCreateReply",
266 
+    value: function sCreateReply(data, cb) {
267 
+      var _this5 = this;
268 
+
269 
+      if (!data.content) return _message3.default.error("回复内容不能为空 ");
270 
+      this.handleChangeLoading("sCreateReply", true);
271 
+      (0, _axios2.default)(_constant.URL + "/replies", {
272 
+        method: "post",
273 
+        data: data,
274 
+        withCredentials: true
275 
+      }).then(function (response) {
276 
+        // console.log("response: ", response.data);
277 
+        // // 将该条数据插入到 list 中
278 
+        // const list = this.state.list.map(item => {
279 
+        //   if (item.id === data.comment_id) {
280 
+        //     if (!item.replies) item.replies = [];
281 
+        //     item.reply_count += 1
282 
+        //     item.replies.unshift(response.data);
283 
+        //   }
284 
+        //   return item;
285 
+        // });
286 
+        // this.setState({ list });
287 
+        _this5.sGetReply({ commentId: data.comment_id });
288 
+        _message3.default.success("回复成功！");
289 
+        if ((0, _helper.isFunction)(cb)) cb();
290 
+      }).catch(function (error) {
291 
+        if (error.response && error.response.data && error.response.data.msg) {
292 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
293 
+          return;
294 
+        }
295 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
296 
+      }).finally(function () {
297 
+        _this5.handleChangeLoading("sCreateReply", false);
298 
+      });
299 
+    }
300 
+
301 
+    /**
302 
+     * 点赞/取消点赞
303 
+     * @param {string} commentId { commentId }
304 
+     * @param {boolean} favored   是否已经点过赞
305 
+     */
306 
+
307 
+  }, {
308 
+    key: "sCommentFavor",
309 
+    value: function sCommentFavor(commentId, favored) {
310 
+      var _this6 = this;
311 
+
312 
+      this.handleChangeLoading("sCommentFavor", true);
313 
+      (0, _axios2.default)(_constant.URL + "/comments/" + commentId + "/favor", {
314 
+        method: favored ? "delete" : "put",
315 
+        withCredentials: true
316 
+      }).then(function (response) {
317 
+        _message3.default.success(favored ? "取消点赞成功！" : "点赞成功！");
318 
+        // 更新 list 中的该项数据的 favored
319 
+        var list = _this6.state.list.map(function (item) {
320 
+          if (item.id === commentId) {
321 
+            item.favored = !favored;
322 
+            item.favor_count += favored ? -1 : 1;
323 
+          }
324 
+          return item;
325 
+        });
326 
+        _this6.setState({ list: list });
327 
+      }).catch(function (error) {
328 
+        if (error.response && error.response.data && error.response.data.msg) {
329 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
330 
+          return;
331 
+        }
332 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
333 
+      }).finally(function () {
334 
+        _this6.handleChangeLoading("sCommentFavor", false);
335 
+      });
336 
+    }
337 
+
338 
+    /**
339 
+     * 获取 OSS 上传的参数
340 
+     */
341 
+
342 
+  }, {
343 
+    key: "sOssSts",
344 
+    value: function sOssSts() {
345 
+      var _this7 = this;
346 
+
347 
+      this.handleChangeLoading("sOssSts", true);
348 
+      _axios2.default.get(_constant.URL + "/oss/sts").then(function (response) {
349 
+        _this7.setState({ oss: _extends({}, response.data) });
350 
+      }).catch(function (error) {
351 
+        if (error.response && error.response.data && error.response.data.msg) {
352 
+          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
353 
+          return;
354 
+        }
355 
+        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
356 
+      }).finally(function () {
357 
+        _this7.handleChangeLoading("sOssSts", false);
358 
+      });
359 
+    }
360 
+  }, {
361 
+    key: "render",
362 
+    value: function render() {
363 
+      // 添加到 Context 的数据
364 
+      var value = _extends({}, this.state, {
365 
+        sCreateComment: this.sCreateComment,
366 
+        sGetComment: this.sGetComment,
367 
+        sCommentFavor: this.sCommentFavor,
368 
+        sCreateReply: this.sCreateReply,
369 
+        sGetReply: this.sGetReply,
370 
+        sOssSts: this.sOssSts
371 
+      });
372 
+
373 
+      return _react2.default.createElement(
374 
+        _Comment.CommentContext.Provider,
375 
+        { value: value },
376 
+        _react2.default.createElement(
377 
+          "div",
378 
+          { className: "comment" },
379 
+          _react2.default.createElement(_CommentInput2.default, null),
380 
+          _react2.default.createElement(
381 
+            "div",
382 
+            { style: { marginTop: 20 } },
383 
+            _react2.default.createElement(_CommentList2.default, null)
384 
+          )
385 
+        )
386 
+      );
387 
+    }
388 
+  }]);
389 
+
390 
+  return App;
391 
+}(_react.Component);
392 
+
393 
+exports.default = App;
394 
+//# sourceMappingURL=App.js.map

+ 1
- 0
lib/App.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 38
- 0
lib/Comment.js Datei anzeigen 

@@ -0,0 +1,38 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+exports.CommentContext = undefined;
7 
+
8 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
9 
+
10 
+exports.Comment = Comment;
11 
+
12 
+var _react = require("react");
13 
+
14 
+var _react2 = _interopRequireDefault(_react);
15 
+
16 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17 
+
18 
+var CommentContext = _react2.default.createContext();
19 
+
20 
+// This function takes a component...
21 
+function Comment(Component) {
22 
+  // ...and returns another component...
23 
+  return function (props) {
24 
+    // ... and renders the wrapped component with the context theme!
25 
+    // Notice that we pass through any additional props as well
26 
+    return _react2.default.createElement(
27 
+      CommentContext.Consumer,
28 
+      null,
29 
+      function (app) {
30 
+        return _react2.default.createElement(Component, _extends({}, props, { app: app }));
31 
+      }
32 
+    );
33 
+  };
34 
+}
35 
+
36 
+exports.CommentContext = CommentContext;
37 
+exports.default = Comment;
38 
+//# sourceMappingURL=Comment.js.map

+ 1
- 0
lib/Comment.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}

+ 16
- 0
lib/axios.js Datei anzeigen 

@@ -0,0 +1,16 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _axios = require("axios");
8 
+
9 
+var _axios2 = _interopRequireDefault(_axios);
10 
+
11 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 
+
13 
+_axios2.default.defaults.withCredentials = true;
14 
+
15 
+exports.default = _axios2.default;
16 
+//# sourceMappingURL=axios.js.map

+ 1
- 0
lib/axios.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;;kBAEeF,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\n\naxios.defaults.withCredentials = true;\n\nexport default axios;\n"]}

+ 48
- 0
lib/components/CommentBox/index.css Datei anzeigen 

@@ -0,0 +1,48 @@
1 
+.showMore {
2 
+  color: #4a90e2;
3 
+  text-align: center;
4 
+  width: 100px;
5 
+  background-color: #f8f8f8;
6 
+  cursor: pointer;
7 
+  padding: 10px;
8 
+  margin: 0 auto;
9 
+  transition: all 0.3s;
10 
+}
11 
+.showMore:hover {
12 
+  background-color: #f5f5f5;
13 
+  color: #1890ff;
14 
+}
15 
+.moreBox {
16 
+  text-align: center;
17 
+  width: 90%;
18 
+  margin-left: 40px;
19 
+  height: 40px;
20 
+  display: inline-block;
21 
+}
22 
+@media screen and (max-width: 616px) and (min-width: 449px) {
23 
+  .moreBox {
24 
+    text-align: center;
25 
+    width: 85%;
26 
+    margin-left: 40px;
27 
+    height: 40px;
28 
+    display: inline-block;
29 
+  }
30 
+}
31 
+@media screen and (max-width: 449px) and (min-width: 365px) {
32 
+  .moreBox {
33 
+    text-align: center;
34 
+    width: 80%;
35 
+    margin-left: 40px;
36 
+    height: 40px;
37 
+    display: inline-block;
38 
+  }
39 
+}
40 
+@media screen and (max-width: 365px) {
41 
+  .moreBox {
42 
+    text-align: center;
43 
+    width: 75%;
44 
+    margin-left: 40px;
45 
+    height: 40px;
46 
+    display: inline-block;
47 
+  }
48 
+}

+ 180
- 0
lib/components/CommentBox/index.js Datei anzeigen 

@@ -0,0 +1,180 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _icon = require("antd/es/icon");
8 
+
9 
+var _icon2 = _interopRequireDefault(_icon);
10 
+
11 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
12 
+
13 
+require("antd/es/icon/style/css");
14 
+
15 
+var _react = require("react");
16 
+
17 
+var _react2 = _interopRequireDefault(_react);
18 
+
19 
+var _propTypes = require("prop-types");
20 
+
21 
+var _propTypes2 = _interopRequireDefault(_propTypes);
22 
+
23 
+var _Comment = require("../../Comment");
24 
+
25 
+var _Comment2 = _interopRequireDefault(_Comment);
26 
+
27 
+var _ContentItem = require("./../ContentItem");
28 
+
29 
+var _ContentItem2 = _interopRequireDefault(_ContentItem);
30 
+
31 
+require("./index.css");
32 
+
33 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
34 
+
35 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
36 
+
37 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
38 
+
39 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
40 
+
41 
+var CommentBox = function (_Component) {
42 
+  _inherits(CommentBox, _Component);
43 
+
44 
+  function CommentBox(props) {
45 
+    _classCallCheck(this, CommentBox);
46 
+
47 
+    var _this = _possibleConstructorReturn(this, (CommentBox.__proto__ || Object.getPrototypeOf(CommentBox)).call(this, props));
48 
+
49 
+    _this.state = {
50 
+      showReply: true,
51 
+      page: 1
52 
+    };
53 
+
54 
+    _this.handleToggleReply = _this.handleToggleReply.bind(_this);
55 
+    _this.handleGetMoreReply = _this.handleGetMoreReply.bind(_this);
56 
+    _this.renderReplies = _this.renderReplies.bind(_this);
57 
+    return _this;
58 
+  }
59 
+
60 
+  /**
61 
+   * 切换是否显示回复列表
62 
+   */
63 
+
64 
+
65 
+  _createClass(CommentBox, [{
66 
+    key: "handleToggleReply",
67 
+    value: function handleToggleReply() {
68 
+      this.setState({ showReply: !this.state.showReply });
69 
+    }
70 
+
71 
+    /**
72 
+     * 获取更多评论
73 
+     * @param {string} commentId comment id
74 
+     */
75 
+
76 
+  }, {
77 
+    key: "handleGetMoreReply",
78 
+    value: function handleGetMoreReply(commentId) {
79 
+      // 从第一页开始获取评论
80 
+      var page = this.state.page;
81 
+
82 
+      this.props.app.sGetReply({ commentId: commentId, page: page });
83 
+      this.setState({ page: page + 1 });
84 
+    }
85 
+
86 
+    /**
87 
+     * 渲染回复 DOM
88 
+     * @param {array} replies 回复列表
89 
+     * @param {boolean} isNoMoreReply 是否没有更多回复
90 
+     */
91 
+
92 
+  }, {
93 
+    key: "renderReplies",
94 
+    value: function renderReplies(replies, isNoMoreReply) {
95 
+      var _this2 = this;
96 
+
97 
+      var commentId = this.props.commentId;
98 
+      var showReply = this.state.showReply;
99 
+
100 
+      if (showReply && replies && replies.length) {
101 
+        var len = replies.length;
102 
+        return _react2.default.createElement(
103 
+          "div",
104 
+          { style: { marginLeft: 50 } },
105 
+          replies.map(function (item, index) {
106 
+            if (index === len - 1) {
107 
+              return [_react2.default.createElement(_ContentItem2.default, {
108 
+                commentId: commentId,
109 
+                replyId: item.id,
110 
+                key: item.id,
111 
+                content: item,
112 
+                type: "reply"
113 
+              }), _react2.default.createElement(
114 
+                "div",
115 
+                { className: "moreBox", key: "show_more_button" },
116 
+                !isNoMoreReply && _react2.default.createElement(
117 
+                  "span",
118 
+                  {
119 
+                    className: "showMore",
120 
+                    onClick: function onClick() {
121 
+                      return _this2.handleGetMoreReply(commentId);
122 
+                    }
123 
+                  },
124 
+                  "\u67E5\u770B\u66F4\u591A\u56DE\u590D"
125 
+                ),
126 
+                _react2.default.createElement(
127 
+                  "a",
128 
+                  {
129 
+                    style: { float: "right" },
130 
+                    onClick: _this2.handleToggleReply
131 
+                  },
132 
+                  _react2.default.createElement(_icon2.default, { type: "up" }),
133 
+                  " \u6536\u8D77\u56DE\u590D"
134 
+                )
135 
+              )];
136 
+            }
137 
+            return _react2.default.createElement(_ContentItem2.default, {
138 
+              commentId: commentId,
139 
+              replyId: item.id,
140 
+              key: item.id,
141 
+              content: item,
142 
+              type: "reply"
143 
+            });
144 
+          })
145 
+        );
146 
+      }
147 
+      return null;
148 
+    }
149 
+  }, {
150 
+    key: "render",
151 
+    value: function render() {
152 
+      var content = this.props.content;
153 
+      var showReply = this.state.showReply;
154 
+
155 
+      return _react2.default.createElement(
156 
+        "div",
157 
+        null,
158 
+        _react2.default.createElement(_ContentItem2.default, {
159 
+          content: content,
160 
+          onShowReply: this.handleToggleReply,
161 
+          showReply: showReply,
162 
+          commentId: content.id,
163 
+          type: "comment"
164 
+        }),
165 
+        this.renderReplies(content.replies, content.isNoMoreReply)
166 
+      );
167 
+    }
168 
+  }]);
169 
+
170 
+  return CommentBox;
171 
+}(_react.Component);
172 
+
173 
+CommentBox.propTypes = {
174 
+  commentId: _propTypes2.default.string.isRequired
175 
+};
176 
+
177 
+CommentBox.defaultProps = {};
178 
+
179 
+exports.default = (0, _Comment2.default)(CommentBox);
180 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/components/CommentBox/index.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 202
- 0
lib/components/CommentInput/index.js Datei anzeigen 

@@ -0,0 +1,202 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 
+
9 
+var _react = require("react");
10 
+
11 
+var _react2 = _interopRequireDefault(_react);
12 
+
13 
+var _propTypes = require("prop-types");
14 
+
15 
+var _propTypes2 = _interopRequireDefault(_propTypes);
16 
+
17 
+var _constant = require("../../constant");
18 
+
19 
+var _Comment = require("../../Comment");
20 
+
21 
+var _Comment2 = _interopRequireDefault(_Comment);
22 
+
23 
+var _Editor = require("../Editor");
24 
+
25 
+var _Editor2 = _interopRequireDefault(_Editor);
26 
+
27 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
28 
+
29 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
30 
+
31 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
32 
+
33 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
34 
+
35 
+var PLACEHOLDER = {
36 
+  normal: "说点什么吧...",
37 
+  default: "说点什么吧..."
38 
+};
39 
+
40 
+var CommentInput = function (_Component) {
41 
+  _inherits(CommentInput, _Component);
42 
+
43 
+  function CommentInput(props) {
44 
+    _classCallCheck(this, CommentInput);
45 
+
46 
+    var _this = _possibleConstructorReturn(this, (CommentInput.__proto__ || Object.getPrototypeOf(CommentInput)).call(this, props));
47 
+
48 
+    _this.state = {
49 
+      value: "",
50 
+
51 
+      fileList: [], // 图片列表
52 
+      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
53 
+    };
54 
+    _this.handleChange = _this.handleChange.bind(_this);
55 
+    _this.handleSubmit = _this.handleSubmit.bind(_this);
56 
+    _this.handleChangeFileList = _this.handleChangeFileList.bind(_this);
57 
+    _this.handleChangeEmoji = _this.handleChangeEmoji.bind(_this);
58 
+    _this.handleUpload = _this.handleUpload.bind(_this);
59 
+    return _this;
60 
+  }
61 
+
62 
+  _createClass(CommentInput, [{
63 
+    key: "handleChange",
64 
+    value: function handleChange(e) {
65 
+      this.setState({ value: e.target.value });
66 
+    }
67 
+  }, {
68 
+    key: "handleChangeFileList",
69 
+    value: function handleChangeFileList(fileList) {
70 
+      this.setState({ fileList: fileList });
71 
+    }
72 
+  }, {
73 
+    key: "handleChangeEmoji",
74 
+    value: function handleChangeEmoji(emojiId) {
75 
+      var value = this.state.value;
76 
+
77 
+      value += "[" + emojiId + "]";
78 
+      this.setState({ value: value });
79 
+    }
80 
+  }, {
81 
+    key: "handleUpload",
82 
+    value: function handleUpload(_ref) {
83 
+      var uid = _ref.uid,
84 
+          path = _ref.path;
85 
+      var fileMap = this.state.fileMap;
86 
+
87 
+      fileMap[uid] = path;
88 
+      this.setState({ fileMap: fileMap });
89 
+    }
90 
+  }, {
91 
+    key: "handleSubmit",
92 
+    value: function handleSubmit() {
93 
+      var _state = this.state,
94 
+          value = _state.value,
95 
+          fileMap = _state.fileMap,
96 
+          fileList = _state.fileList;
97 
+
98 
+      if (fileList.length) {
99 
+        fileList.forEach(function (item) {
100 
+          value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
101 
+        });
102 
+      }
103 
+
104 
+      var _props = this.props,
105 
+          type = _props.type,
106 
+          commentId = _props.commentId,
107 
+          replyId = _props.replyId,
108 
+          handleToggleInput = _props.handleToggleInput;
109 
+
110 
+      if (type === "normal") {
111 
+        this.props.app.sCreateComment({
112 
+          type: 1,
113 
+          business_id: "1",
114 
+          content: value
115 
+        });
116 
+      } else if (type === "comment") {
117 
+        this.props.app.sCreateReply({
118 
+          comment_id: commentId,
119 
+          content: value
120 
+        }, function () {
121 
+          return handleToggleInput();
122 
+        });
123 
+      } else if (type === "reply") {
124 
+        this.props.app.sCreateReply({
125 
+          comment_id: commentId,
126 
+          content: value,
127 
+          reply_id: replyId
128 
+        }, function () {
129 
+          return handleToggleInput();
130 
+        });
131 
+      }
132 
+    }
133 
+  }, {
134 
+    key: "render",
135 
+    value: function render() {
136 
+      var type = this.props.type;
137 
+      var _state2 = this.state,
138 
+          value = _state2.value,
139 
+          fileList = _state2.fileList;
140 
+
141 
+
142 
+      return _react2.default.createElement(
143 
+        "div",
144 
+        null,
145 
+        type === "normal" ? _react2.default.createElement(
146 
+          "div",
147 
+          null,
148 
+          _react2.default.createElement(
149 
+            "span",
150 
+            {
151 
+              style: {
152 
+                border: "1px solid #CECECE",
153 
+                color: "#666",
154 
+                padding: "2px 3px"
155 
+              }
156 
+            },
157 
+            "\u56DE\u590D"
158 
+          ),
159 
+          _react2.default.createElement(
160 
+            "span",
161 
+            { style: { marginLeft: "20px", color: "#5198EB" } },
162 
+            "\u53E3\u7891",
163 
+            _react2.default.createElement(
164 
+              "span",
165 
+              { style: { marginLeft: "20px", color: "#666666" } },
166 
+              "(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)"
167 
+            )
168 
+          )
169 
+        ) : null,
170 
+        _react2.default.createElement(
171 
+          "div",
172 
+          { style: { marginTop: 40 } },
173 
+          _react2.default.createElement(_Editor2.default, {
174 
+            value: value,
175 
+            placeholder: PLACEHOLDER[type] || PLACEHOLDER.default,
176 
+            fileList: fileList,
177 
+            onChange: this.handleChange,
178 
+            onSubmit: this.handleSubmit,
179 
+            onChangeFileList: this.handleChangeFileList,
180 
+            onChangeEmoji: this.handleChangeEmoji,
181 
+            onUpload: this.handleUpload,
182 
+            loading: this.props.app.loading.sCreateComment
183 
+          })
184 
+        )
185 
+      );
186 
+    }
187 
+  }]);
188 
+
189 
+  return CommentInput;
190 
+}(_react.Component);
191 
+
192 
+CommentInput.propTypes = {
193 
+  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
194 
+  type: _propTypes2.default.oneOf(["normal", "comment", "reply"])
195 
+};
196 
+
197 
+CommentInput.defaultProps = {
198 
+  type: "normal"
199 
+};
200 
+
201 
+exports.default = (0, _Comment2.default)(CommentInput);
202 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/components/CommentInput/index.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 14
- 0
lib/components/CommentList/index.css Datei anzeigen 

@@ -0,0 +1,14 @@
1 
+.showMore {
2 
+  color: #4a90e2;
3 
+  text-align: center;
4 
+  width: 100%;
5 
+  background-color: #f8f8f8;
6 
+  cursor: pointer;
7 
+  padding: 10px;
8 
+  margin: 40px auto;
9 
+  transition: all 0.3s;
10 
+}
11 
+.showMore:hover {
12 
+  background-color: #f5f5f5;
13 
+  color: #1890ff;
14 
+}

+ 95
- 0
lib/components/CommentList/index.js Datei anzeigen 

@@ -0,0 +1,95 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _spin = require("antd/es/spin");
8 
+
9 
+var _spin2 = _interopRequireDefault(_spin);
10 
+
11 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
12 
+
13 
+require("antd/es/spin/style/css");
14 
+
15 
+var _react = require("react");
16 
+
17 
+var _react2 = _interopRequireDefault(_react);
18 
+
19 
+var _Comment = require("../../Comment");
20 
+
21 
+var _Comment2 = _interopRequireDefault(_Comment);
22 
+
23 
+var _CommentBox = require("../CommentBox");
24 
+
25 
+var _CommentBox2 = _interopRequireDefault(_CommentBox);
26 
+
27 
+require("./index.css");
28 
+
29 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30 
+
31 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
32 
+
33 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
34 
+
35 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
36 
+
37 
+var CommentList = function (_Component) {
38 
+  _inherits(CommentList, _Component);
39 
+
40 
+  function CommentList(props) {
41 
+    _classCallCheck(this, CommentList);
42 
+
43 
+    var _this = _possibleConstructorReturn(this, (CommentList.__proto__ || Object.getPrototypeOf(CommentList)).call(this, props));
44 
+
45 
+    _this.state = {};
46 
+    return _this;
47 
+  }
48 
+
49 
+  _createClass(CommentList, [{
50 
+    key: "render",
51 
+    value: function render() {
52 
+      var _props$app = this.props.app,
53 
+          list = _props$app.list,
54 
+          page = _props$app.page,
55 
+          loading = _props$app.loading,
56 
+          isNoMoreComment = _props$app.isNoMoreComment,
57 
+          sGetComment = _props$app.sGetComment;
58 
+
59 
+
60 
+      var spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
61 
+      return _react2.default.createElement(
62 
+        "div",
63 
+        null,
64 
+        _react2.default.createElement(
65 
+          _spin2.default,
66 
+          { spinning: spinning },
67 
+          list.map(function (item) {
68 
+            return _react2.default.createElement(_CommentBox2.default, { content: item, key: item.id, commentId: item.id });
69 
+          }),
70 
+          !isNoMoreComment && _react2.default.createElement(
71 
+            "div",
72 
+            {
73 
+              className: "showMore",
74 
+              onClick: function onClick() {
75 
+                return sGetComment({ page: page + 1 });
76 
+              }
77 
+            },
78 
+            _react2.default.createElement(
79 
+              "span",
80 
+              null,
81 
+              "\u67E5\u770B\u66F4\u591A\u8BC4\u8BBA"
82 
+            )
83 
+          )
84 
+        )
85 
+      );
86 
+    }
87 
+  }]);
88 
+
89 
+  return CommentList;
90 
+}(_react.Component);
91 
+
92 
+CommentList.propTypes = {};
93 
+
94 
+exports.default = (0, _Comment2.default)(CommentList);
95 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/components/CommentList/index.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","list","page","loading","isNoMoreComment","sGetComment","spinning","Boolean","sCommentFavor","map","item","id","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;6BAEQ;AAAA,uBAOH,KAAKD,KAAL,CAAWE,GAPR;AAAA,UAELC,IAFK,cAELA,IAFK;AAAA,UAGLC,IAHK,cAGLA,IAHK;AAAA,UAILC,OAJK,cAILA,OAJK;AAAA,UAKLC,eALK,cAKLA,eALK;AAAA,UAMLC,WANK,cAMLA,WANK;;;AASP,UAAMC,WAAWC,QAAQJ,QAAQE,WAAR,IAAuBF,QAAQK,aAAvC,CAAjB;AACA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUF,QAAhB;AACGL,eAAKQ,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CADH;AAKG,WAACP,eAAD,IACC;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMC,YAAY,EAAEH,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AANJ;AADF,OADF;AAkBD;;;;EAlCuBU,gB;;AAqC1Bf,YAAYgB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQhB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\nimport { Spin } from \"antd\";\nimport Comment from \"../../Comment\";\nimport CommentBox from \"../CommentBox\";\nimport \"./index.css\";\n\nclass CommentList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {};\n  }\n\n  render() {\n    const {\n      list,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment\n    } = this.props.app;\n\n    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment && (\n            <div\n              className=\"showMore\"\n              onClick={() => sGetComment({ page: page + 1 })}\n            >\n              <span>查看更多评论</span>\n            </div>\n          )}\n        </Spin>\n      </div>\n    );\n  }\n}\n\nCommentList.propTypes = {};\n\nexport default Comment(CommentList);\n"]}

+ 52
- 0
lib/components/ContentItem/index.css Datei anzeigen 

@@ -0,0 +1,52 @@
1 
+.left {
2 
+  display: inline-block;
3 
+  vertical-align: top;
4 
+  width: 40px;
5 
+}
6 
+.right {
7 
+  display: inline-block;
8 
+  width: 90%;
9 
+  margin-left: 10px;
10 
+}
11 
+.box {
12 
+  margin: 10px;
13 
+  padding: 15px 5px;
14 
+  border-top: 1px solid #eee;
15 
+}
16 
+.content {
17 
+  margin: 10px 0;
18 
+}
19 
+.itemLeft {
20 
+  float: left;
21 
+}
22 
+.itemRight {
23 
+  float: right;
24 
+  margin-left: 5px;
25 
+}
26 
+.bottom {
27 
+  margin: 20px auto;
28 
+}
29 
+.favored {
30 
+  color: #4a90e2;
31 
+}
32 
+@media screen and (max-width: 616px) and (min-width: 449px) {
33 
+  .right {
34 
+    display: inline-block;
35 
+    width: 85%;
36 
+    margin-left: 10px;
37 
+  }
38 
+}
39 
+@media screen and (max-width: 449px) and (min-width: 365px) {
40 
+  .right {
41 
+    display: inline-block;
42 
+    width: 80%;
43 
+    margin-left: 10px;
44 
+  }
45 
+}
46 
+@media screen and (max-width: 365px) {
47 
+  .right {
48 
+    display: inline-block;
49 
+    width: 75%;
50 
+    margin-left: 10px;
51 
+  }
52 
+}

+ 201
- 0
lib/components/ContentItem/index.js Datei anzeigen 

@@ -0,0 +1,201 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _icon = require("antd/es/icon");
8 
+
9 
+var _icon2 = _interopRequireDefault(_icon);
10 
+
11 
+var _avatar = require("antd/es/avatar");
12 
+
13 
+var _avatar2 = _interopRequireDefault(_avatar);
14 
+
15 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
16 
+
17 
+require("antd/es/icon/style/css");
18 
+
19 
+require("antd/es/avatar/style/css");
20 
+
21 
+var _react = require("react");
22 
+
23 
+var _react2 = _interopRequireDefault(_react);
24 
+
25 
+var _propTypes = require("prop-types");
26 
+
27 
+var _propTypes2 = _interopRequireDefault(_propTypes);
28 
+
29 
+var _dayjs = require("dayjs");
30 
+
31 
+var _dayjs2 = _interopRequireDefault(_dayjs);
32 
+
33 
+var _Comment = require("../../Comment");
34 
+
35 
+var _Comment2 = _interopRequireDefault(_Comment);
36 
+
37 
+var _CommentInput = require("../CommentInput");
38 
+
39 
+var _CommentInput2 = _interopRequireDefault(_CommentInput);
40 
+
41 
+var _helper = require("../../helper");
42 
+
43 
+require("./index.css");
44 
+
45 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
46 
+
47 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
48 
+
49 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
50 
+
51 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
52 
+
53 
+var CommentItem = function (_Component) {
54 
+  _inherits(CommentItem, _Component);
55 
+
56 
+  function CommentItem(props) {
57 
+    _classCallCheck(this, CommentItem);
58 
+
59 
+    var _this = _possibleConstructorReturn(this, (CommentItem.__proto__ || Object.getPrototypeOf(CommentItem)).call(this, props));
60 
+
61 
+    _this.state = {
62 
+      isShowInput: false
63 
+    };
64 
+    _this.handleToggleInput = _this.handleToggleInput.bind(_this);
65 
+    _this.renderTextWithReply = _this.renderTextWithReply.bind(_this);
66 
+    return _this;
67 
+  }
68 
+
69 
+  _createClass(CommentItem, [{
70 
+    key: "handleToggleInput",
71 
+    value: function handleToggleInput() {
72 
+      this.setState({ isShowInput: !this.state.isShowInput });
73 
+    }
74 
+  }, {
75 
+    key: "renderTextWithReply",
76 
+    value: function renderTextWithReply(text, content) {
77 
+      var newText = text;
78 
+      var reply = content.reply;
79 
+
80 
+      if (reply) {
81 
+        newText = newText + " //@<a href=\"/" + reply.user_id + "\">" + reply.user_name + "</a> " + reply.content;
82 
+        if (reply.reply) {
83 
+          return this.renderTextWithReply(newText, reply);
84 
+        }
85 
+      }
86 
+      return newText;
87 
+    }
88 
+  }, {
89 
+    key: "render",
90 
+    value: function render() {
91 
+      var _props = this.props,
92 
+          commentId = _props.commentId,
93 
+          replyId = _props.replyId,
94 
+          content = _props.content,
95 
+          type = _props.type,
96 
+          showReply = _props.showReply,
97 
+          onShowReply = _props.onShowReply,
98 
+          app = _props.app;
99 
+      var isShowInput = this.state.isShowInput;
100 
+
101 
+      var isComment = type === "comment";
102 
+      return _react2.default.createElement(
103 
+        "div",
104 
+        { className: "box" },
105 
+        _react2.default.createElement(
106 
+          "div",
107 
+          { className: "left" },
108 
+          _react2.default.createElement(_avatar2.default, { src: content.user_avatar, size: "large" })
109 
+        ),
110 
+        _react2.default.createElement(
111 
+          "div",
112 
+          { className: "right" },
113 
+          _react2.default.createElement(
114 
+            "div",
115 
+            { className: "name" },
116 
+            _react2.default.createElement(
117 
+              "a",
118 
+              { href: "/" + content.user_id },
119 
+              content.user_name || "暂无昵称"
120 
+            ),
121 
+            _react2.default.createElement(
122 
+              "span",
123 
+              { style: { marginLeft: 10 } },
124 
+              (0, _dayjs2.default)(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")
125 
+            )
126 
+          ),
127 
+          _react2.default.createElement("div", {
128 
+            className: "content",
129 
+            dangerouslySetInnerHTML: {
130 
+              __html: (0, _helper.renderContent)(this.renderTextWithReply(content.content, content))
131 
+            }
132 
+          }),
133 
+          _react2.default.createElement(
134 
+            "div",
135 
+            { className: "bottom" },
136 
+            isComment && content.reply_count ? _react2.default.createElement(
137 
+              "div",
138 
+              null,
139 
+              _react2.default.createElement(
140 
+                "a",
141 
+                {
142 
+                  className: "itemLeft",
143 
+                  onClick: onShowReply,
144 
+                  style: { userSelect: "none" }
145 
+                },
146 
+                content.reply_count,
147 
+                " \u6761\u56DE\u590D",
148 
+                showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
149 
+              )
150 
+            ) : null,
151 
+            _react2.default.createElement(
152 
+              "a",
153 
+              { onClick: this.handleToggleInput, className: "itemRight" },
154 
+              "\xA0 \u56DE\u590D"
155 
+            ),
156 
+            _react2.default.createElement(
157 
+              "div",
158 
+              {
159 
+                className: "itemRight",
160 
+                style: { cursor: "pointer" },
161 
+                onClick: function onClick() {
162 
+                  return app.sCommentFavor(content.id, content.favored);
163 
+                }
164 
+              },
165 
+              _react2.default.createElement(_icon2.default, {
166 
+                type: "like-o",
167 
+                className: content.favored ? "favored" : ""
168 
+              }),
169 
+              "\xA0",
170 
+              content.favor_count
171 
+            )
172 
+          ),
173 
+          isShowInput ? _react2.default.createElement(_CommentInput2.default, {
174 
+            type: type,
175 
+            replyId: replyId,
176 
+            commentId: commentId,
177 
+            handleToggleInput: this.handleToggleInput
178 
+          }) : null
179 
+        )
180 
+      );
181 
+    }
182 
+  }]);
183 
+
184 
+  return CommentItem;
185 
+}(_react.Component);
186 
+
187 
+CommentItem.propTypes = {
188 
+  content: _propTypes2.default.object.isRequired,
189 
+  // comment 评论
190 
+  // reply 回复
191 
+  type: _propTypes2.default.oneOf(["comment", "reply"]),
192 
+  onShowReply: _propTypes2.default.func
193 
+};
194 
+
195 
+CommentItem.defaultProps = {
196 
+  type: "comment",
197 
+  onShowReply: function onShowReply() {}
198 
+};
199 
+
200 
+exports.default = (0, _Comment2.default)(CommentItem);
201 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/components/ContentItem/index.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 23
- 0
lib/components/Editor/Emoji.css Datei anzeigen 

@@ -0,0 +1,23 @@
1 
+.item {
2 
+  float: left;
3 
+  width: 40px;
4 
+  height: 40px;
5 
+  cursor: pointer;
6 
+  white-space: nowrap;
7 
+  /* this is required unless you put the helper span closely near the img */
8 
+  text-align: center;
9 
+  margin: 0;
10 
+}
11 
+.item .helper {
12 
+  display: inline-block;
13 
+  height: 100%;
14 
+  vertical-align: middle;
15 
+}
16 
+.item img {
17 
+  margin: 0 auto;
18 
+  vertical-align: middle;
19 
+  padding: 3px;
20 
+}
21 
+.item img:hover {
22 
+  border: 1px solid #40a9ff;
23 
+}

+ 106
- 0
lib/components/Editor/Emoji.js Datei anzeigen 

@@ -0,0 +1,106 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _carousel = require("antd/es/carousel");
8 
+
9 
+var _carousel2 = _interopRequireDefault(_carousel);
10 
+
11 
+require("antd/es/carousel/style/css");
12 
+
13 
+var _react = require("react");
14 
+
15 
+var _react2 = _interopRequireDefault(_react);
16 
+
17 
+var _emoji = require("../../emoji");
18 
+
19 
+var _emoji2 = _interopRequireDefault(_emoji);
20 
+
21 
+require("./Emoji.css");
22 
+
23 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 
+
25 
+// 每页 20  5*4
26 
+// 共 20 * 3 = 60 (实际是 54)
27 
+
28 
+var Emoji = function Emoji(_ref) {
29 
+  var _onClick = _ref.onClick;
30 
+
31 
+  var content = [[], [], []];
32 
+
33 
+  for (var i = 0; i < _emoji2.default.length; i++) {
34 
+    if (i < 20) {
35 
+      content[0].push(_emoji2.default[i]);
36 
+    } else if (i < 40) {
37 
+      content[1].push(_emoji2.default[i]);
38 
+    } else if (i < _emoji2.default.length) {
39 
+      content[2].push(_emoji2.default[i]);
40 
+    }
41 
+  }
42 
+  return _react2.default.createElement(
43 
+    _carousel2.default,
44 
+    null,
45 
+    _react2.default.createElement(
46 
+      "div",
47 
+      null,
48 
+      content[0].map(function (item, index) {
49 
+        return _react2.default.createElement(
50 
+          "div",
51 
+          { className: "item", key: item.value },
52 
+          _react2.default.createElement("span", { className: "helper" }),
53 
+          _react2.default.createElement("img", {
54 
+            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
55 
+            alt: item.title,
56 
+            style: { display: "inline-block" },
57 
+            onClick: function onClick() {
58 
+              return _onClick(item.title);
59 
+            }
60 
+          })
61 
+        );
62 
+      })
63 
+    ),
64 
+    _react2.default.createElement(
65 
+      "div",
66 
+      null,
67 
+      content[1].map(function (item, index) {
68 
+        return _react2.default.createElement(
69 
+          "div",
70 
+          { className: "item", key: item.value },
71 
+          _react2.default.createElement("span", { className: "helper" }),
72 
+          _react2.default.createElement("img", {
73 
+            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
74 
+            alt: item.title,
75 
+            style: { display: "inline-block" },
76 
+            onClick: function onClick() {
77 
+              return _onClick(item.title);
78 
+            }
79 
+          })
80 
+        );
81 
+      })
82 
+    ),
83 
+    _react2.default.createElement(
84 
+      "div",
85 
+      null,
86 
+      content[2].map(function (item) {
87 
+        return _react2.default.createElement(
88 
+          "div",
89 
+          { className: "item", key: item.value },
90 
+          _react2.default.createElement("span", { className: "helper" }),
91 
+          _react2.default.createElement("img", {
92 
+            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
93 
+            alt: item.title,
94 
+            style: { display: "inline-block" },
95 
+            onClick: function onClick() {
96 
+              return _onClick(item.title);
97 
+            }
98 
+          })
99 
+        );
100 
+      })
101 
+    )
102 
+  );
103 
+};
104 
+
105 
+exports.default = Emoji;
106 
+//# sourceMappingURL=Emoji.js.map

+ 1
- 0
lib/components/Editor/Emoji.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","onClick","content","i","emoji","length","push","map","item","index","value","prefixUrl","ext","title","display"],"mappings":";;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OAAiB;AAAA,MAAdC,QAAc,QAAdA,OAAc;;AAC7B,MAAMC,UAAU,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT,CAAhB;;AAEA,OAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIC,gBAAMC,MAA1B,EAAkCF,GAAlC,EAAuC;AACrC,QAAIA,IAAI,EAAR,EAAY;AACVD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFD,MAEO,IAAIA,IAAI,EAAR,EAAY;AACjBD,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD,KAFM,MAEA,IAAIA,IAAIC,gBAAMC,MAAd,EAAsB;AAC3BH,cAAQ,CAAR,EAAWI,IAAX,CAAgBF,gBAAMD,CAAN,CAAhB;AACD;AACF;AACD,SACE;AAAA;AAAA;AACE;AAAA;AAAA;AACGD,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KADF;AAcE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe,UAACC,IAAD,EAAOC,KAAP;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKD,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH,KAdF;AA2BE;AAAA;AAAA;AACGX,cAAQ,CAAR,EAAWK,GAAX,CAAe;AAAA,eACd;AAAA;AAAA,YAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKE,KAAhC;AACE,kDAAM,WAAU,QAAhB,GADF;AAEE;AACE,sBAAQC,gBAAR,GAAoBH,KAAKE,KAAzB,SAAkCE,UADpC;AAEE,iBAAKJ,KAAKK,KAFZ;AAGE,mBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,qBAAS;AAAA,qBAAMb,SAAQO,KAAKK,KAAb,CAAN;AAAA;AAJX;AAFF,SADc;AAAA,OAAf;AADH;AA3BF,GADF;AA2CD,CAvDD;;kBAyDeb,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\nimport emoji, { prefixUrl, ext } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\nconst Emoji = ({ onClick }) => {\n  const content = [[], [], []];\n\n  for (let i = 0; i < emoji.length; i++) {\n    if (i < 20) {\n      content[0].push(emoji[i]);\n    } else if (i < 40) {\n      content[1].push(emoji[i]);\n    } else if (i < emoji.length) {\n      content[2].push(emoji[i]);\n    }\n  }\n  return (\n    <Carousel>\n      <div>\n        {content[0].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[1].map((item, index) => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n      <div>\n        {content[2].map(item => (\n          <div className=\"item\" key={item.value}>\n            <span className=\"helper\" />\n            <img\n              src={`${prefixUrl}${item.value}.${ext}`}\n              alt={item.title}\n              style={{ display: \"inline-block\" }}\n              onClick={() => onClick(item.title)}\n            />\n          </div>\n        ))}\n      </div>\n    </Carousel>\n  );\n};\n\nexport default Emoji;\n"]}

+ 8
- 0
lib/components/Editor/Upload.css Datei anzeigen 

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

+ 205
- 0
lib/components/Editor/Upload.js Datei anzeigen 

@@ -0,0 +1,205 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _modal = require("antd/es/modal");
8 
+
9 
+var _modal2 = _interopRequireDefault(_modal);
10 
+
11 
+var _upload = require("antd/es/upload");
12 
+
13 
+var _upload2 = _interopRequireDefault(_upload);
14 
+
15 
+var _icon = require("antd/es/icon");
16 
+
17 
+var _icon2 = _interopRequireDefault(_icon);
18 
+
19 
+var _message2 = require("antd/es/message");
20 
+
21 
+var _message3 = _interopRequireDefault(_message2);
22 
+
23 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
24 
+
25 
+require("antd/es/modal/style/css");
26 
+
27 
+require("antd/es/upload/style/css");
28 
+
29 
+require("antd/es/icon/style/css");
30 
+
31 
+require("antd/es/message/style/css");
32 
+
33 
+var _react = require("react");
34 
+
35 
+var _react2 = _interopRequireDefault(_react);
36 
+
37 
+var _dayjs = require("dayjs");
38 
+
39 
+var _dayjs2 = _interopRequireDefault(_dayjs);
40 
+
41 
+var _shortid = require("shortid");
42 
+
43 
+var _shortid2 = _interopRequireDefault(_shortid);
44 
+
45 
+var _constant = require("../../constant");
46 
+
47 
+var _Comment = require("../../Comment");
48 
+
49 
+var _Comment2 = _interopRequireDefault(_Comment);
50 
+
51 
+require("./Upload.css");
52 
+
53 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54 
+
55 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
56 
+
57 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
58 
+
59 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
60 
+// import styles from "./Upload.less";
61 
+
62 
+
63 
+var client = function client(oss) {
64 
+  return new window.OSS.Wrapper({
65 
+    accessKeyId: oss.access_key_id,
66 
+    accessKeySecret: oss.access_key_secret,
67 
+    stsToken: oss.security_token,
68 
+    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
69 
+    bucket: _constant.OSS_BUCKET
70 
+  });
71 
+};
72 
+
73 
+var uploadPath = function uploadPath(path, file) {
74 
+  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
75 
+};
76 
+
77 
+var UploadToOss = function UploadToOss(oss, path, file) {
78 
+  var url = uploadPath(path, file);
79 
+  return new Promise(function (resolve, reject) {
80 
+    client(oss).multipartUpload(url, file).then(function (data) {
81 
+      resolve(data);
82 
+    }).catch(function (error) {
83 
+      reject(error);
84 
+    });
85 
+  });
86 
+};
87 
+
88 
+var App = function (_React$Component) {
89 
+  _inherits(App, _React$Component);
90 
+
91 
+  function App(props) {
92 
+    _classCallCheck(this, App);
93 
+
94 
+    var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
95 
+
96 
+    _this.state = {
97 
+      previewVisible: false,
98 
+      previewImage: ""
99 
+    };
100 
+    _this.handleCancel = _this.handleCancel.bind(_this);
101 
+    _this.handlePreview = _this.handlePreview.bind(_this);
102 
+    _this.handleChange = _this.handleChange.bind(_this);
103 
+    _this.customRequest = _this.customRequest.bind(_this);
104 
+    return _this;
105 
+  }
106 
+
107 
+  _createClass(App, [{
108 
+    key: "componentDidMount",
109 
+    value: function componentDidMount() {
110 
+      this.props.app.sOssSts();
111 
+    }
112 
+  }, {
113 
+    key: "handleCancel",
114 
+    value: function handleCancel() {
115 
+      this.setState({ previewVisible: false });
116 
+    }
117 
+  }, {
118 
+    key: "handlePreview",
119 
+    value: function handlePreview(file) {
120 
+      this.setState({
121 
+        previewImage: file.url || file.thumbUrl,
122 
+        previewVisible: true
123 
+      });
124 
+    }
125 
+  }, {
126 
+    key: "handleChange",
127 
+    value: function handleChange(_ref) {
128 
+      var fileList = _ref.fileList;
129 
+
130 
+      this.props.onChangeFileList(fileList);
131 
+    }
132 
+  }, {
133 
+    key: "customRequest",
134 
+    value: function customRequest(info) {
135 
+      var _this2 = this;
136 
+
137 
+      var file = info.file;
138 
+
139 
+      info.onProgress({ percent: 10 });
140 
+      var reader = new FileReader();
141 
+      reader.readAsDataURL(info.file);
142 
+      reader.onloadend = function () {
143 
+        info.onProgress({ percent: 20 });
144 
+        // DRIVER_LICENSE_PATH oss 的存储路径位置
145 
+        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
146 
+          info.onProgress({ percent: 100 });
147 
+          info.onSuccess();
148 
+          _this2.props.onUpload({ path: data.name, uid: file.uid });
149 
+        }).catch(function (e) {
150 
+          _message3.default.error(e.message || _constant.ERROR_DEFAULT);
151 
+          info.onError(e);
152 
+        });
153 
+      };
154 
+    }
155 
+  }, {
156 
+    key: "render",
157 
+    value: function render() {
158 
+      var _state = this.state,
159 
+          previewVisible = _state.previewVisible,
160 
+          previewImage = _state.previewImage;
161 
+      var fileList = this.props.fileList;
162 
+
163 
+      var uploadButton = _react2.default.createElement(
164 
+        "div",
165 
+        null,
166 
+        _react2.default.createElement(_icon2.default, { type: "plus" }),
167 
+        _react2.default.createElement(
168 
+          "div",
169 
+          { className: "ant-upload-text" },
170 
+          "\u4E0A\u4F20"
171 
+        )
172 
+      );
173 
+      return _react2.default.createElement(
174 
+        "div",
175 
+        null,
176 
+        _react2.default.createElement(
177 
+          _upload2.default,
178 
+          {
179 
+            accept: "image/jpg,image/jpeg,image/png,image/bmp",
180 
+            listType: "picture-card",
181 
+            fileList: fileList,
182 
+            customRequest: this.customRequest,
183 
+            onPreview: this.handlePreview,
184 
+            onChange: this.handleChange
185 
+          },
186 
+          fileList.length >= _constant.MAX_UPLOAD_NUMBER ? null : uploadButton
187 
+        ),
188 
+        _react2.default.createElement(
189 
+          _modal2.default,
190 
+          {
191 
+            visible: previewVisible,
192 
+            footer: null,
193 
+            onCancel: this.handleCancel
194 
+          },
195 
+          _react2.default.createElement("img", { alt: "upload", style: { width: "100%" }, src: previewImage })
196 
+        )
197 
+      );
198 
+    }
199 
+  }]);
200 
+
201 
+  return App;
202 
+}(_react2.default.Component);
203 
+
204 
+exports.default = (0, _Comment2.default)(App);
205 
+//# sourceMappingURL=Upload.js.map

+ 1
- 0
lib/components/Editor/Upload.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 82
- 0
lib/components/Editor/index.css Datei anzeigen 

@@ -0,0 +1,82 @@
1 
+.editor {
2 
+  box-sizing: border-box;
3 
+  margin: 0;
4 
+  padding: 0;
5 
+  width: 100%;
6 
+  max-width: 100%;
7 
+  list-style: none;
8 
+  position: relative;
9 
+  display: block;
10 
+  font-size: 14px;
11 
+  line-height: 1.5;
12 
+  color: rgba(0, 0, 0, 0.65);
13 
+  background-color: #fff;
14 
+  background-image: none;
15 
+  border: 1px solid #d9d9d9;
16 
+  border-radius: 4px;
17 
+  transition: all 0.3s, height 0s;
18 
+}
19 
+.editor textarea.ant-input {
20 
+  border: none;
21 
+  border-bottom: 1px solid #eee;
22 
+  border-bottom-right-radius: 0;
23 
+  border-bottom-left-radius: 0;
24 
+}
25 
+.editor textarea.ant-input:hover {
26 
+  border: none;
27 
+  border-bottom: 1px solid #eee;
28 
+}
29 
+.editor textarea.ant-input:focus {
30 
+  box-shadow: none;
31 
+  border-bottom: 1px solid #eee;
32 
+}
33 
+.editor [contentEditable="true"]:empty:not(:focus):before {
34 
+  content: attr(data-text);
35 
+  color: #bfbfbf;
36 
+}
37 
+.editor:focus,
38 
+.editor:hover {
39 
+  border-color: #40a9ff;
40 
+  outline: 0;
41 
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
42 
+}
43 
+.content {
44 
+  display: block;
45 
+  box-sizing: border-box;
46 
+  padding: 4px 10px;
47 
+  width: 100%;
48 
+  max-width: 100%;
49 
+  height: 100%;
50 
+  max-height: 110px;
51 
+  overflow-y: auto;
52 
+  overflow-x: auto;
53 
+}
54 
+.content:focus,
55 
+.content:hover {
56 
+  outline: 0;
57 
+}
58 
+.toolbar {
59 
+  display: inline-block;
60 
+  width: 100%;
61 
+  margin: 5px 0 0 0;
62 
+}
63 
+.toolbar .icon {
64 
+  font-size: 23px;
65 
+  cursor: pointer;
66 
+  transition: color 0.3s;
67 
+}
68 
+.toolbar .icon:hover {
69 
+  color: #40a9ff;
70 
+}
71 
+.feed .ant-popover-inner-content {
72 
+  padding: 12px 16px 20px 16px;
73 
+}
74 
+.feed .ant-carousel .slick-dots {
75 
+  bottom: -10px;
76 
+}
77 
+.feed .ant-carousel .slick-dots li.slick-active button {
78 
+  background-color: #7b868a;
79 
+}
80 
+.feed .ant-carousel .slick-dots li button {
81 
+  background-color: #a2aeb5;
82 
+}

+ 213
- 0
lib/components/Editor/index.js Datei anzeigen 

@@ -0,0 +1,213 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+
7 
+var _button = require("antd/es/button");
8 
+
9 
+var _button2 = _interopRequireDefault(_button);
10 
+
11 
+var _popover = require("antd/es/popover");
12 
+
13 
+var _popover2 = _interopRequireDefault(_popover);
14 
+
15 
+var _icon = require("antd/es/icon");
16 
+
17 
+var _icon2 = _interopRequireDefault(_icon);
18 
+
19 
+var _input = require("antd/es/input");
20 
+
21 
+var _input2 = _interopRequireDefault(_input);
22 
+
23 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
24 
+
25 
+require("antd/es/button/style/css");
26 
+
27 
+require("antd/es/popover/style/css");
28 
+
29 
+require("antd/es/icon/style/css");
30 
+
31 
+require("antd/es/input/style/css");
32 
+
33 
+var _react = require("react");
34 
+
35 
+var _react2 = _interopRequireDefault(_react);
36 
+
37 
+var _constant = require("../../constant");
38 
+
39 
+var _Upload = require("./Upload");
40 
+
41 
+var _Upload2 = _interopRequireDefault(_Upload);
42 
+
43 
+var _Emoji = require("./Emoji");
44 
+
45 
+var _Emoji2 = _interopRequireDefault(_Emoji);
46 
+
47 
+require("./index.css");
48 
+
49 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
50 
+
51 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
52 
+
53 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
54 
+
55 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
56 
+
57 
+// import styles from "./index.less";
58 
+
59 
+
60 
+var TextArea = _input2.default.TextArea;
61 
+
62 
+var Editor = function (_React$Component) {
63 
+  _inherits(Editor, _React$Component);
64 
+
65 
+  function Editor(props) {
66 
+    _classCallCheck(this, Editor);
67 
+
68 
+    var _this = _possibleConstructorReturn(this, (Editor.__proto__ || Object.getPrototypeOf(Editor)).call(this, props));
69 
+
70 
+    _this.state = {
71 
+      showUpload: false
72 
+    };
73 
+    _this.handleClickEmoji = _this.handleClickEmoji.bind(_this);
74 
+    _this.handleShowUpload = _this.handleShowUpload.bind(_this);
75 
+    return _this;
76 
+  }
77 
+
78 
+  _createClass(Editor, [{
79 
+    key: "componentDidMount",
80 
+    value: function componentDidMount() {}
81 
+  }, {
82 
+    key: "handleClickEmoji",
83 
+    value: function handleClickEmoji(emojiId) {
84 
+      this.props.onChangeEmoji(emojiId);
85 
+    }
86 
+  }, {
87 
+    key: "handleShowUpload",
88 
+    value: function handleShowUpload(showUpload) {
89 
+      if (typeof showUpload === "boolean") {
90 
+        this.setState({ showUpload: showUpload });
91 
+      } else {
92 
+        this.setState({ showUpload: !this.state.showUpload });
93 
+      }
94 
+    }
95 
+  }, {
96 
+    key: "render",
97 
+    value: function render() {
98 
+      var _this2 = this;
99 
+
100 
+      var _props = this.props,
101 
+          value = _props.value,
102 
+          onChange = _props.onChange,
103 
+          placeholder = _props.placeholder,
104 
+          fileList = _props.fileList,
105 
+          onChangeFileList = _props.onChangeFileList,
106 
+          onUpload = _props.onUpload;
107 
+
108 
+      return _react2.default.createElement(
109 
+        "div",
110 
+        { className: "editor" },
111 
+        _react2.default.createElement(TextArea, {
112 
+          value: value,
113 
+          onChange: onChange,
114 
+          rows: 5,
115 
+          placeholder: placeholder
116 
+        }),
117 
+        _react2.default.createElement(
118 
+          "div",
119 
+          { className: "toolbar" },
120 
+          _react2.default.createElement(
121 
+            "div",
122 
+            { style: { float: "left", margin: "8px 11px" } },
123 
+            _react2.default.createElement(
124 
+              _popover2.default,
125 
+              {
126 
+                trigger: "click",
127 
+                placement: "bottomLeft",
128 
+                autoAdjustOverflow: false,
129 
+                content: _react2.default.createElement(
130 
+                  "div",
131 
+                  { style: { width: 200 } },
132 
+                  _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
133 
+                ),
134 
+                overlayClassName: "feed"
135 
+              },
136 
+              _react2.default.createElement(_icon2.default, { type: "smile-o", className: "icon" })
137 
+            ),
138 
+            _react2.default.createElement(
139 
+              _popover2.default,
140 
+              {
141 
+                visible: this.state.showUpload,
142 
+                overlayStyle: { zIndex: 999 },
143 
+                content: _react2.default.createElement(
144 
+                  "div",
145 
+                  { style: { width: 112 * _constant.MAX_UPLOAD_NUMBER, minHeight: 100 } },
146 
+                  _react2.default.createElement(_Upload2.default, {
147 
+                    onChangeFileList: onChangeFileList,
148 
+                    onUpload: onUpload,
149 
+                    fileList: fileList
150 
+                  })
151 
+                ),
152 
+                placement: "bottomLeft",
153 
+                title: _react2.default.createElement(
154 
+                  "div",
155 
+                  { style: { margin: "5px auto" } },
156 
+                  _react2.default.createElement(
157 
+                    "span",
158 
+                    null,
159 
+                    "\u4E0A\u4F20\u56FE\u7247",
160 
+                    _react2.default.createElement(
161 
+                      "span",
162 
+                      { style: { color: "#666", fontWeight: 400 } },
163 
+                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
164 
+                      _constant.MAX_UPLOAD_NUMBER - fileList.length,
165 
+                      "\u5F20\u56FE\u7247)"
166 
+                    )
167 
+                  ),
168 
+                  _react2.default.createElement(_icon2.default, {
169 
+                    type: "close",
170 
+                    onClick: function onClick() {
171 
+                      return _this2.handleShowUpload(false);
172 
+                    },
173 
+                    style: {
174 
+                      float: "right",
175 
+                      cursor: "pointer",
176 
+                      marginTop: 4
177 
+                    }
178 
+                  })
179 
+                )
180 
+              },
181 
+              _react2.default.createElement(_icon2.default, {
182 
+                type: "picture",
183 
+                className: "icon",
184 
+                style: { marginLeft: 10 },
185 
+                onClick: function onClick() {
186 
+                  return _this2.handleShowUpload(true);
187 
+                }
188 
+              })
189 
+            )
190 
+          ),
191 
+          _react2.default.createElement(
192 
+            "div",
193 
+            { style: { float: "right", margin: "5px 11px" } },
194 
+            _react2.default.createElement(
195 
+              _button2.default,
196 
+              {
197 
+                onClick: this.props.onSubmit,
198 
+                type: "primary",
199 
+                loading: this.props.loading
200 
+              },
201 
+              "\u53D1\u8868"
202 
+            )
203 
+          )
204 
+        )
205 
+      );
206 
+    }
207 
+  }]);
208 
+
209 
+  return Editor;
210 
+}(_react2.default.Component);
211 
+
212 
+exports.default = Editor;
213 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/components/Editor/index.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 22
- 0
lib/constant.js Datei anzeigen 

@@ -0,0 +1,22 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+var URL = exports.URL = "http://121.41.20.11:8082/v1";
7 
+// export const URL = "http://api.links123.net/comment/v1";
8 
+
9 
+var ERROR_DEFAULT = exports.ERROR_DEFAULT = "出错了！";
10 
+
11 
+var LIMIT = exports.LIMIT = 10; // 默认 limit
12 
+
13 
+var OSS_ENDPOINT = exports.OSS_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
14 
+var OSS_BUCKET = exports.OSS_BUCKET = "links-comment";
15 
+var DRIVER_LICENSE_PATH = exports.DRIVER_LICENSE_PATH = "/comment";
16 
+
17 
+var OSS_LINK = exports.OSS_LINK = "http://links-comment.oss-cn-beijing.aliyuncs.com";
18 
+
19 
+var MAX_UPLOAD_NUMBER = exports.MAX_UPLOAD_NUMBER = 4;
20 
+
21 
+var REGEXP = exports.REGEXP = /\[.+?\]/g;
22 
+//# sourceMappingURL=constant.js.map

+ 1
- 0
lib/constant.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/constant.js"],"names":["URL","ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP"],"mappings":";;;;;AAAO,IAAMA,oBAAM,6BAAZ;AACP;;AAEO,IAAMC,wCAAgB,MAAtB;;AAEA,IAAMC,wBAAQ,EAAd,C,CAAkB;;AAElB,IAAMC,sCAAe,6BAArB;AACA,IAAMC,kCAAa,eAAnB;AACA,IAAMC,oDAAsB,UAA5B;;AAEA,IAAMC,8BAAW,kDAAjB;;AAEA,IAAMC,gDAAoB,CAA1B;;AAEA,IAAMC,0BAAS,UAAf","file":"constant.js","sourcesContent":["export const URL = \"http://121.41.20.11:8082/v1\";\n// export const URL = \"http://api.links123.net/comment/v1\";\n\nexport const ERROR_DEFAULT = \"出错了！\";\n\nexport const LIMIT = 10; // 默认 limit\n\nexport const OSS_ENDPOINT = \"oss-cn-beijing.aliyuncs.com\";\nexport const OSS_BUCKET = \"links-comment\";\nexport const DRIVER_LICENSE_PATH = \"/comment\";\n\nexport const OSS_LINK = \"http://links-comment.oss-cn-beijing.aliyuncs.com\";\n\nexport const MAX_UPLOAD_NUMBER = 4;\n\nexport const REGEXP = /\\[.+?\\]/g;\n"]}

+ 175
- 0
lib/emoji.js Datei anzeigen 

@@ -0,0 +1,175 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+var emoji = [{
7 
+  value: "0",
8 
+  title: "捶地"
9 
+}, {
10 
+  value: "1",
11 
+  title: "怀疑"
12 
+}, {
13 
+  value: "2",
14 
+  title: "撇嘴"
15 
+}, {
16 
+  value: "3",
17 
+  title: "色"
18 
+}, {
19 
+  value: "4",
20 
+  ttile: "发呆"
21 
+}, {
22 
+  value: "5",
23 
+  title: "酷"
24 
+}, {
25 
+  value: "6",
26 
+  title: "害羞"
27 
+}, {
28 
+  value: "7",
29 
+  title: "闭嘴"
30 
+}, {
31 
+  value: "8",
32 
+  title: "睡觉"
33 
+}, {
34 
+  value: "9",
35 
+  title: "大哭"
36 
+}, {
37 
+  value: "10",
38 
+  title: "尴尬"
39 
+}, {
40 
+  value: "11",
41 
+  title: "发怒"
42 
+}, {
43 
+  value: "12",
44 
+  title: "调皮"
45 
+}, {
46 
+  value: "13",
47 
+  title: "呲牙"
48 
+}, {
49 
+  value: "14",
50 
+  title: "微笑"
51 
+}, {
52 
+  value: "15",
53 
+  title: "难过"
54 
+}, {
55 
+  value: "16",
56 
+  title: "帅呆"
57 
+}, {
58 
+  value: "17",
59 
+  title: "折磨"
60 
+}, {
61 
+  value: "18",
62 
+  title: "吐"
63 
+}, {
64 
+  value: "19",
65 
+  title: "偷笑"
66 
+}, {
67 
+  value: "20",
68 
+  title: "可爱"
69 
+}, {
70 
+  value: "21",
71 
+  title: "白眼"
72 
+}, {
73 
+  value: "22",
74 
+  title: "傲慢"
75 
+}, {
76 
+  value: "23",
77 
+  title: "嘴馋"
78 
+}, {
79 
+  value: "24",
80 
+  title: "困"
81 
+}, {
82 
+  value: "25",
83 
+  title: "恐慌"
84 
+}, {
85 
+  value: "26",
86 
+  title: "流汗"
87 
+}, {
88 
+  value: "27",
89 
+  title: "憨笑"
90 
+}, {
91 
+  value: "28",
92 
+  title: "大兵"
93 
+}, {
94 
+  value: "29",
95 
+  title: "奋斗"
96 
+}, {
97 
+  value: "30",
98 
+  title: "疑问"
99 
+}, {
100 
+  value: "31",
101 
+  title: "嘘"
102 
+}, {
103 
+  value: "32",
104 
+  title: "晕"
105 
+}, {
106 
+  value: "33",
107 
+  title: "被炸了"
108 
+}, {
109 
+  value: "34",
110 
+  title: "骷髅"
111 
+}, {
112 
+  value: "35",
113 
+  title: "敲打"
114 
+}, {
115 
+  value: "36",
116 
+  title: "拜拜"
117 
+}, {
118 
+  value: "37",
119 
+  title: "发抖"
120 
+}, {
121 
+  value: "38",
122 
+  title: "亲密"
123 
+}, {
124 
+  value: "39",
125 
+  title: "跳"
126 
+}, {
127 
+  value: "40",
128 
+  title: "猪头"
129 
+}, {
130 
+  value: "41",
131 
+  title: "拥抱"
132 
+}, {
133 
+  value: "42",
134 
+  title: "生日蛋糕"
135 
+}, {
136 
+  value: "43",
137 
+  title: "闪电"
138 
+}, {
139 
+  value: "44",
140 
+  title: "地雷"
141 
+}, {
142 
+  value: "45",
143 
+  title: "刀"
144 
+}, {
145 
+  value: "46",
146 
+  title: "足球"
147 
+}, {
148 
+  value: "47",
149 
+  title: "便便"
150 
+}, {
151 
+  value: "48",
152 
+  title: "咖啡"
153 
+}, {
154 
+  value: "49",
155 
+  title: "米饭"
156 
+}, {
157 
+  value: "50",
158 
+  title: "玫瑰"
159 
+}, {
160 
+  value: "51",
161 
+  title: "枯萎玫瑰"
162 
+}, {
163 
+  value: "52",
164 
+  title: "爱心"
165 
+}, {
166 
+  value: "53",
167 
+  title: "心碎"
168 
+}];
169 
+
170 
+var prefixUrl = exports.prefixUrl = "https://a.links123.cn/site/src/feed/imgs/qq/";
171 
+
172 
+var ext = exports.ext = "gif";
173 
+
174 
+exports.default = emoji;
175 
+//# sourceMappingURL=emoji.js.map

+ 1
- 0
lib/emoji.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 57
- 0
lib/helper.js Datei anzeigen 

@@ -0,0 +1,57 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+exports.isFunction = isFunction;
7 
+exports.isUrl = isUrl;
8 
+exports.arrayToObject = arrayToObject;
9 
+exports.renderContent = renderContent;
10 
+
11 
+var _constant = require("./constant");
12 
+
13 
+var _emoji = require("./emoji");
14 
+
15 
+var _emoji2 = _interopRequireDefault(_emoji);
16 
+
17 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 
+
19 
+function isFunction(functionToCheck) {
20 
+  return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
21 
+}
22 
+
23 
+function isUrl(userInput) {
24 
+  var regexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
25 
+  var res = userInput.match(regexp);
26 
+  if (res === null) return false;else return true;
27 
+}
28 
+
29 
+/**
30 
+ * 将对象数组转换为对象
31 
+ * @param {array} array Array of Objects
32 
+ * @param {string} keyField string
33 
+ */
34 
+function arrayToObject(array, keyField) {
35 
+  return array.reduce(function (obj, item) {
36 
+    obj[item[keyField]] = item;
37 
+    return obj;
38 
+  }, {});
39 
+}
40 
+
41 
+/**
42 
+ * 渲染编辑器
43 
+ * [x] => <img src="x" />
44 
+ * @param {strig} content
45 
+ */
46 
+function renderContent(content, onClick) {
47 
+  return content.replace(_constant.REGEXP, function (a, b) {
48 
+    var src = a.slice(1, -1);
49 
+    if (isUrl(src)) {
50 
+      return "<img src=\"" + src + "\" alt=\"" + src + "\" style=\"max-width: 300px\" />";
51 
+    }
52 
+    var emojiObejct = arrayToObject(_emoji2.default, "title");
53 
+    var value = emojiObejct[src].value;
54 
+    return "<img src=\"" + _emoji.prefixUrl + value + "." + _emoji.ext + "\" alt=\"" + value + "\" />";
55 
+  });
56 
+}
57 
+//# sourceMappingURL=helper.js.map

+ 1
- 0
lib/helper.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/helper.js"],"names":["isFunction","isUrl","arrayToObject","renderContent","functionToCheck","toString","call","userInput","regexp","res","match","array","keyField","reduce","obj","item","content","onClick","replace","REGEXP","a","b","src","slice","emojiObejct","emoji","value","prefixUrl","ext"],"mappings":";;;;;QAGgBA,U,GAAAA,U;QAMAC,K,GAAAA,K;QAYAC,a,GAAAA,a;QAYAC,a,GAAAA,a;;AAjChB;;AACA;;;;;;AAEO,SAASH,UAAT,CAAoBI,eAApB,EAAqC;AAC1C,SACEA,mBAAmB,GAAGC,QAAH,CAAYC,IAAZ,CAAiBF,eAAjB,MAAsC,mBAD3D;AAGD;;AAEM,SAASH,KAAT,CAAeM,SAAf,EAA0B;AAC/B,MAAMC,SAAS,kGAAf;AACA,MAAIC,MAAMF,UAAUG,KAAV,CAAgBF,MAAhB,CAAV;AACA,MAAIC,QAAQ,IAAZ,EAAkB,OAAO,KAAP,CAAlB,KACK,OAAO,IAAP;AACN;;AAED;;;;;AAKO,SAASP,aAAT,CAAuBS,KAAvB,EAA8BC,QAA9B,EAAwC;AAC7C,SAAOD,MAAME,MAAN,CAAa,UAACC,GAAD,EAAMC,IAAN,EAAe;AACjCD,QAAIC,KAAKH,QAAL,CAAJ,IAAsBG,IAAtB;AACA,WAAOD,GAAP;AACD,GAHM,EAGJ,EAHI,CAAP;AAID;;AAED;;;;;AAKO,SAASX,aAAT,CAAuBa,OAAvB,EAAgCC,OAAhC,EAAyC;AAC9C,SAAOD,QAAQE,OAAR,CAAgBC,gBAAhB,EAAwB,UAASC,CAAT,EAAYC,CAAZ,EAAe;AAC5C,QAAMC,MAAMF,EAAEG,KAAF,CAAQ,CAAR,EAAW,CAAC,CAAZ,CAAZ;AACA,QAAItB,MAAMqB,GAAN,CAAJ,EAAgB;AACd,6BAAoBA,GAApB,iBAAiCA,GAAjC;AACD;AACD,QAAME,cAActB,cAAcuB,eAAd,EAAqB,OAArB,CAApB;AACA,QAAMC,QAAQF,YAAYF,GAAZ,EAAiBI,KAA/B;AACA,2BAAoBC,gBAApB,GAAgCD,KAAhC,SAAyCE,UAAzC,iBAAsDF,KAAtD;AACD,GARM,CAAP;AASD","file":"helper.js","sourcesContent":["import { REGEXP } from \"./constant\";\nimport emoji, { prefixUrl, ext } from \"./emoji\";\n\nexport function isFunction(functionToCheck) {\n  return (\n    functionToCheck && {}.toString.call(functionToCheck) === \"[object Function]\"\n  );\n}\n\nexport function isUrl(userInput) {\n  const regexp = /(http(s)?:\\/\\/.)?(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;\n  var res = userInput.match(regexp);\n  if (res === null) return false;\n  else return true;\n}\n\n/**\n * 将对象数组转换为对象\n * @param {array} array Array of Objects\n * @param {string} keyField string\n */\nexport function arrayToObject(array, keyField) {\n  return array.reduce((obj, item) => {\n    obj[item[keyField]] = item;\n    return obj;\n  }, {});\n}\n\n/**\n * 渲染编辑器\n * [x] => <img src=\"x\" />\n * @param {strig} content\n */\nexport function renderContent(content, onClick) {\n  return content.replace(REGEXP, function(a, b) {\n    const src = a.slice(1, -1);\n    if (isUrl(src)) {\n      return `<img src=\"${src}\" alt=\"${src}\" style=\"max-width: 300px\" />`;\n    }\n    const emojiObejct = arrayToObject(emoji, \"title\");\n    const value = emojiObejct[src].value;\n    return `<img src=\"${prefixUrl}${value}.${ext}\" alt=\"${value}\" />`;\n  });\n}\n"]}

+ 23
- 0
lib/index.js Datei anzeigen 

@@ -0,0 +1,23 @@
1 
+"use strict";
2 
+
3 
+var _react = require("react");
4 
+
5 
+var _react2 = _interopRequireDefault(_react);
6 
+
7 
+var _reactDom = require("react-dom");
8 
+
9 
+var _reactDom2 = _interopRequireDefault(_reactDom);
10 
+
11 
+var _App = require("./App");
12 
+
13 
+var _App2 = _interopRequireDefault(_App);
14 
+
15 
+var _registerServiceWorker = require("./registerServiceWorker");
16 
+
17 
+var _registerServiceWorker2 = _interopRequireDefault(_registerServiceWorker);
18 
+
19 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 
+
21 
+_reactDom2.default.render(_react2.default.createElement(_App2.default, null), document.getElementById("root-comment"));
22 
+(0, _registerServiceWorker2.default)();
23 
+//# sourceMappingURL=index.js.map

+ 1
- 0
lib/index.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/index.js"],"names":["ReactDOM","render","document","getElementById"],"mappings":";;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEAA,mBAASC,MAAT,CAAgB,8BAAC,aAAD,OAAhB,EAAyBC,SAASC,cAAT,CAAwB,cAAxB,CAAzB;AACA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nReactDOM.render(<App />, document.getElementById(\"root-comment\"));\nregisterServiceWorker();\n"]}

+ 72
- 0
lib/mock.js Datei anzeigen 

@@ -0,0 +1,72 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+var comments = exports.comments = {
7 
+  list: [{
8 
+    id: "5b3a4f0973df3e6a32b0a9d2",
9 
+    user_id: 0,
10 
+    user_name: "",
11 
+    user_avatar: "",
12 
+    content: "test[微笑]",
13 
+    replies: [{
14 
+      id: "5b3c58c473df3e64d8d53afb",
15 
+      user_id: 0,
16 
+      user_name: "",
17 
+      user_avatar: "",
18 
+      reply: null,
19 
+      content: "test",
20 
+      favor_count: 1,
21 
+      favored: false,
22 
+      created: 1530681540
23 
+    }, {
24 
+      id: "5b3c58c473df3e64d8d53afa",
25 
+      user_id: 0,
26 
+      user_name: "",
27 
+      user_avatar: "",
28 
+      reply: {
29 
+        id: "5b3c58c473df3e64d8d53afb",
30 
+        user_id: 0,
31 
+        user_name: "",
32 
+        user_avatar: "",
33 
+        reply: null,
34 
+        content: "test",
35 
+        favor_count: 1,
36 
+        favored: false,
37 
+        created: 1530681540
38 
+      },
39 
+      content: "test",
40 
+      favor_count: 2,
41 
+      favored: false,
42 
+      created: 1530681540
43 
+    }, {
44 
+      id: "5b3c6e4873df3e53f870d912",
45 
+      user_id: 0,
46 
+      user_name: "",
47 
+      user_avatar: "",
48 
+      reply: {
49 
+        id: "5b3c58c473df3e64d8d53afb",
50 
+        user_id: 0,
51 
+        user_name: "",
52 
+        user_avatar: "",
53 
+        reply: null,
54 
+        content: "test",
55 
+        favor_count: 1,
56 
+        favored: false,
57 
+        created: 1530681540
58 
+      },
59 
+      content: "test",
60 
+      favor_count: 0,
61 
+      favored: false,
62 
+      created: 1530687048
63 
+    }],
64 
+    reply_count: 4,
65 
+    favor_count: 0,
66 
+    favored: false,
67 
+    created: 1530547977
68 
+  }],
69 
+  total: 1,
70 
+  page: 1
71 
+};
72 
+//# sourceMappingURL=mock.js.map

+ 1
- 0
lib/mock.js.map Datei anzeigen 

@@ -0,0 +1 @@
1 
+{"version":3,"sources":["../src/mock.js"],"names":["comments","list","id","user_id","user_name","user_avatar","content","replies","reply","favor_count","favored","created","reply_count","total","page"],"mappings":";;;;;AAAO,IAAMA,8BAAW;AACtBC,QAAM,CACJ;AACEC,QAAI,0BADN;AAEEC,aAAS,CAFX;AAGEC,eAAW,EAHb;AAIEC,iBAAa,EAJf;AAKEC,aAAS,UALX;AAMEC,aAAS,CACP;AACEL,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO,IALT;AAMEF,eAAS,MANX;AAOEG,mBAAa,CAPf;AAQEC,eAAS,KARX;AASEC,eAAS;AATX,KADO,EAYP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAZO,EAiCP;AACET,UAAI,0BADN;AAEEC,eAAS,CAFX;AAGEC,iBAAW,EAHb;AAIEC,mBAAa,EAJf;AAKEG,aAAO;AACLN,YAAI,0BADC;AAELC,iBAAS,CAFJ;AAGLC,mBAAW,EAHN;AAILC,qBAAa,EAJR;AAKLG,eAAO,IALF;AAMLF,iBAAS,MANJ;AAOLG,qBAAa,CAPR;AAQLC,iBAAS,KARJ;AASLC,iBAAS;AATJ,OALT;AAgBEL,eAAS,MAhBX;AAiBEG,mBAAa,CAjBf;AAkBEC,eAAS,KAlBX;AAmBEC,eAAS;AAnBX,KAjCO,CANX;AA6DEC,iBAAa,CA7Df;AA8DEH,iBAAa,CA9Df;AA+DEC,aAAS,KA/DX;AAgEEC,aAAS;AAhEX,GADI,CADgB;AAqEtBE,SAAO,CArEe;AAsEtBC,QAAM;AAtEgB,CAAjB","file":"mock.js","sourcesContent":["export const comments = {\n  list: [\n    {\n      id: \"5b3a4f0973df3e6a32b0a9d2\",\n      user_id: 0,\n      user_name: \"\",\n      user_avatar: \"\",\n      content: \"test[微笑]\",\n      replies: [\n        {\n          id: \"5b3c58c473df3e64d8d53afb\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: null,\n          content: \"test\",\n          favor_count: 1,\n          favored: false,\n          created: 1530681540\n        },\n        {\n          id: \"5b3c58c473df3e64d8d53afa\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: {\n            id: \"5b3c58c473df3e64d8d53afb\",\n            user_id: 0,\n            user_name: \"\",\n            user_avatar: \"\",\n            reply: null,\n            content: \"test\",\n            favor_count: 1,\n            favored: false,\n            created: 1530681540\n          },\n          content: \"test\",\n          favor_count: 2,\n          favored: false,\n          created: 1530681540\n        },\n        {\n          id: \"5b3c6e4873df3e53f870d912\",\n          user_id: 0,\n          user_name: \"\",\n          user_avatar: \"\",\n          reply: {\n            id: \"5b3c58c473df3e64d8d53afb\",\n            user_id: 0,\n            user_name: \"\",\n            user_avatar: \"\",\n            reply: null,\n            content: \"test\",\n            favor_count: 1,\n            favored: false,\n            created: 1530681540\n          },\n          content: \"test\",\n          favor_count: 0,\n          favored: false,\n          created: 1530687048\n        }\n      ],\n      reply_count: 4,\n      favor_count: 0,\n      favored: false,\n      created: 1530547977\n    }\n  ],\n  total: 1,\n  page: 1\n};\n"]}

+ 108
- 0
lib/registerServiceWorker.js Datei anzeigen 

@@ -0,0 +1,108 @@
1 
+"use strict";
2 
+
3 
+Object.defineProperty(exports, "__esModule", {
4 
+  value: true
5 
+});
6 
+exports.default = register;
7 
+exports.unregister = unregister;
8 
+// In production, we register a service worker to serve assets from local cache.
9 
+
10 
+// This lets the app load faster on subsequent visits in production, and gives
11 
+// it offline capabilities. However, it also means that developers (and users)
12 
+// will only see deployed updates on the "N+1" visit to a page, since previously
13 
+// cached resources are updated in the background.
14 
+
15 
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
16 
+// This link also includes instructions on opting out of this behavior.
17 
+
18 
+var isLocalhost = Boolean(window.location.hostname === "localhost" ||
19 
+// [::1] is the IPv6 localhost address.
20 
+window.location.hostname === "[::1]" ||
21 
+// 127.0.0.1/8 is considered localhost for IPv4.
22 
+window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
23 
+
24 
+function register() {
25 
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
26 
+    // The URL constructor is available in all browsers that support SW.
27 
+    var publicUrl = new URL(process.env.PUBLIC_URL, window.location);
28 
+    if (publicUrl.origin !== window.location.origin) {
29 
+      // Our service worker won't work if PUBLIC_URL is on a different origin
30 
+      // from what our page is served on. This might happen if a CDN is used to
31 
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
32 
+      return;
33 
+    }
34 
+
35 
+    window.addEventListener("load", function () {
36 
+      var swUrl = process.env.PUBLIC_URL + "/service-worker.js";
37 
+
38 
+      if (isLocalhost) {
39 
+        // This is running on localhost. Lets check if a service worker still exists or not.
40 
+        checkValidServiceWorker(swUrl);
41 
+
42 
+        // Add some additional logging to localhost, pointing developers to the
43 
+        // service worker/PWA documentation.
44 
+        navigator.serviceWorker.ready.then(function () {
45 
+          console.log("This web app is being served cache-first by a service " + "worker. To learn more, visit https://goo.gl/SC7cgQ");
46 
+        });
47 
+      } else {
48 
+        // Is not local host. Just register service worker
49 
+        registerValidSW(swUrl);
50 
+      }
51 
+    });
52 
+  }
53 
+}
54 
+
55 
+function registerValidSW(swUrl) {
56 
+  navigator.serviceWorker.register(swUrl).then(function (registration) {
57 
+    registration.onupdatefound = function () {
58 
+      var installingWorker = registration.installing;
59 
+      installingWorker.onstatechange = function () {
60 
+        if (installingWorker.state === "installed") {
61 
+          if (navigator.serviceWorker.controller) {
62 
+            // At this point, the old content will have been purged and
63 
+            // the fresh content will have been added to the cache.
64 
+            // It's the perfect time to display a "New content is
65 
+            // available; please refresh." message in your web app.
66 
+            console.log("New content is available; please refresh.");
67 
+          } else {
68 
+            // At this point, everything has been precached.
69 
+            // It's the perfect time to display a
70 
+            // "Content is cached for offline use." message.
71 
+            console.log("Content is cached for offline use.");
72 
+          }
73 
+        }
74 
+      };
75 
+    };
76 
+  }).catch(function (error) {
77 
+    console.error("Error during service worker registration:", error);
78 
+  });
79 
+}
80 
+
81 
+function checkValidServiceWorker(swUrl) {
82 
+  // Check if the service worker can be found. If it can't reload the page.
83 
+  fetch(swUrl).then(function (response) {
84 
+    // Ensure service worker exists, and that we really are getting a JS file.
85 
+    if (response.status === 404 || response.headers.get("content-type").indexOf("javascript") === -1) {
86 
+      // No service worker found. Probably a different app. Reload the page.
87 
+      navigator.serviceWorker.ready.then(function (registration) {
88 
+        registration.unregister().then(function () {
89 
+          window.location.reload();
90 
+        });
91 
+      });
92 
+    } else {
93 
+      // Service worker found. Proceed as normal.
94 
+      registerValidSW(swUrl);
95 
+    }
96 
+  }).catch(function () {
97 
+    console.log("No internet connection found. App is running in offline mode.");
98 
+  });
99 
+}
100 
+
101 
+function unregister() {
102 
+  if ("serviceWorker" in navigator) {
103 
+    navigator.serviceWorker.ready.then(function (registration) {
104 
+      registration.unregister();
105 
+    });
106 
+  }
107 
+}
108 
+//# sourceMappingURL=registerServiceWorker.js.map

+ 1
- 0
lib/registerServiceWorker.js.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 52
- 0
package.json Datei anzeigen 

@@ -0,0 +1,52 @@
1 
+{
2 
+  "name": "comment",
3 
+  "version": "0.0.1",
4 
+  "main": "lib/App.js",
5 
+  "description": "通用评论",
6 
+  "keywords": [
7 
+    "评论"
8 
+  ],
9 
+  "author": "node",
10 
+  "email": "nodejh@qq.com",
11 
+  "homepage": "https://git.links123.net/node/test_comment",
12 
+  "bugs": {
13 
+    "url": "https://git.links123.net/node/test_comment/issues"
14 
+  },
15 
+  "private": true,
16 
+  "dependencies": {
17 
+    "antd": "^3.6.6",
18 
+    "axios": "^0.18.0",
19 
+    "dayjs": "^1.7.2",
20 
+    "react": "^16.4.1",
21 
+    "react-dom": "^16.4.1",
22 
+    "react-scripts": "1.1.4",
23 
+    "shortid": "^2.2.11"
24 
+  },
25 
+  "lint-staged": {
26 
+    "src/**/*.{js,jsx,json,css,less}": [
27 
+      "prettier --write",
28 
+      "git add"
29 
+    ]
30 
+  },
31 
+  "scripts": {
32 
+    "precommit": "lint-staged",
33 
+    "prettier": "prettier --write src/**/*.{js,jsx,json,css,less}",
34 
+    "start": "react-app-rewired start",
35 
+    "build": "react-app-rewired build",
36 
+    "test": "react-app-rewired test --env=jsdom",
37 
+    "eject": "react-scripts eject",
38 
+    "lib": "babel ./src --out-dir ./lib --source-maps --copy-files"
39 
+  },
40 
+  "devDependencies": {
41 
+    "babel-cli": "^6.26.0",
42 
+    "babel-plugin-import": "^1.8.0",
43 
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
44 
+    "babel-preset-env": "^1.7.0",
45 
+    "babel-preset-react": "^6.24.1",
46 
+    "husky": "^0.14.3",
47 
+    "lint-staged": "^7.2.0",
48 
+    "prettier": "^1.13.7",
49 
+    "react-app-rewired": "^1.5.2"
50 
+  },
51 
+  "license": "MIT"
52 
+}

BIN
public/favicon.ico Datei anzeigen


+ 42
- 0
public/index.html Datei anzeigen 

@@ -0,0 +1,42 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 
+    <meta name="theme-color" content="#000000">
7 
+    <!--
8 
+      manifest.json provides metadata used when your web app is added to the
9 
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 
+    -->
11 
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 
+    <!--
14 
+      Notice the use of %PUBLIC_URL% in the tags above.
15 
+      It will be replaced with the URL of the `public` folder during the build.
16 
+      Only files inside the `public` folder can be referenced from the HTML.
17 
+
18 
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 
+      work correctly both with client-side routing and a non-root public URL.
20 
+      Learn how to configure a non-root public URL by running `npm run build`.
21 
+    -->
22 
+
23 
+     <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
24 
+    <title>评论</title>
25 
+  </head>
26 
+  <body>
27 
+    <noscript>
28 
+      You need to enable JavaScript to run this app.
29 
+    </noscript>
30 
+    <div id="root-comment"></div>
31 
+    <!--
32 
+      This HTML file is a template.
33 
+      If you open it directly in the browser, you will see an empty page.
34 
+
35 
+      You can add webfonts, meta tags, or analytics to this file.
36 
+      The build step will place the bundled scripts into the <body> tag.
37 
+
38 
+      To begin the development, run `npm start` or `yarn start`.
39 
+      To create a production bundle, use `npm run build` or `yarn build`.
40 
+    -->
41 
+  </body>
42 
+</html>

+ 15
- 0
public/manifest.json Datei anzeigen 

@@ -0,0 +1,15 @@
1 
+{
2 
+  "short_name": "React App",
3 
+  "name": "Create React App Sample",
4 
+  "icons": [
5 
+    {
6 
+      "src": "favicon.ico",
7 
+      "sizes": "64x64 32x32 24x24 16x16",
8 
+      "type": "image/x-icon"
9 
+    }
10 
+  ],
11 
+  "start_url": "./index.html",
12 
+  "display": "standalone",
13 
+  "theme_color": "#000000",
14 
+  "background_color": "#ffffff"
15 
+}

+ 9
- 0
src/App.css Datei anzeigen 

@@ -0,0 +1,9 @@
1 
+.comment {
2 
+  width: 100%;
3 
+  padding: 10px;
4 
+  margin-bottom: 100px;
5 
+}
6 
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
7 
+  position: fixed;
8 
+  top: 45%;
9 
+}

+ 307
- 0
src/App.js Datei anzeigen 

@@ -0,0 +1,307 @@
1 
+import React, { Component } from "react";
2 
+import { message } from "antd";
3 
+import axios from "./axios";
4 
+import { URL, ERROR_DEFAULT, LIMIT } from "./constant";
5 
+import { CommentContext } from "./Comment";
6 
+import { isFunction } from "./helper";
7 
+import CommentInput from "./components/CommentInput";
8 
+import CommentList from "./components/CommentList";
9 
+// import * as mock from "./mock";
10 
+import "./App.css";
11 
+
12 
+class App extends Component {
13 
+  constructor(props) {
14 
+    super(props);
15 
+    this.state = {
16 
+      loading: {},
17 
+
18 
+      // oss 配置
19 
+      oss: {},
20 
+
21 
+      // 评论数据
22 
+      list: [],
23 
+      page: 1,
24 
+      total: 0,
25 
+      // 是否没有更多评论了
26 
+      isNoMoreComment: false
27 
+    };
28 
+    this.handleChangeLoading = this.handleChangeLoading.bind(this);
29 
+    this.sGetComment = this.sGetComment.bind(this);
30 
+    this.sGetReply = this.sGetReply.bind(this);
31 
+    this.sCreateComment = this.sCreateComment.bind(this);
32 
+    this.sCreateReply = this.sCreateReply.bind(this);
33 
+    this.sCommentFavor = this.sCommentFavor.bind(this);
34 
+    this.sOssSts = this.sOssSts.bind(this);
35 
+  }
36 
+
37 
+  componentDidMount() {
38 
+    this.sGetComment();
39 
+  }
40 
+
41 
+  /**
42 
+   * 改变 loading 状态
43 
+   * @param {string} key key
44 
+   * @param {string} value value
45 
+   */
46 
+  handleChangeLoading(key, value) {
47 
+    const { loading } = this.state;
48 
+    loading[key] = value;
49 
+    this.setState({ loading });
50 
+  }
51 
+
52 
+  /**
53 
+   * 获取评论列表
54 
+   */
55 
+  sGetComment({ type = 1, businessId = 1, page = 1 } = {}) {
56 
+    this.handleChangeLoading("sGetComment", true);
57 
+    // 测试数据列表
58 
+    // const { comments } = mock;
59 
+    // this.setState({
60 
+    //   list: comments.list,
61 
+    //   page: 1,
62 
+    //   total: 100
63 
+    // });
64 
+    // this.handleChangeLoading("sGetComment", false);
65 
+    // return;
66 
+    axios
67 
+      .get(
68 
+        `${URL}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
69 
+      )
70 
+      .then(response => {
71 
+        const { list, page, total } = response.data;
72 
+        if (list) {
73 
+          let newList = list;
74 
+          if (page > 1) {
75 
+            let { list: oldList } = this.state;
76 
+            // 删除临时数据
77 
+            oldList = oldList.filter(o => !o.isTemporary);
78 
+            newList = oldList.concat(newList);
79 
+          }
80 
+          this.setState({
81 
+            list: newList,
82 
+            page,
83 
+            total
84 
+          });
85 
+        } else {
86 
+          message.info("没有更多评论了");
87 
+          this.setState({
88 
+            isNoMoreComment: true
89 
+          });
90 
+        }
91 
+      })
92 
+      .catch(error => {
93 
+        if (error.response && error.response.data && error.response.data.msg) {
94 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
95 
+          return;
96 
+        }
97 
+        message.error(error.message || ERROR_DEFAULT);
98 
+      })
99 
+      .finally(() => {
100 
+        this.handleChangeLoading("sGetComment", false);
101 
+      });
102 
+  }
103 
+
104 
+  /**
105 
+   * 获取更多回复
106 
+   */
107 
+  sGetReply({ commentId, page = 1 } = {}) {
108 
+    this.handleChangeLoading("sGetReply", true);
109 
+    axios
110 
+      .get(`${URL}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
111 
+      .then(response => {
112 
+        const { list: replies } = response.data;
113 
+        if (!replies) {
114 
+          message.info("没有更多数据了！");
115 
+        }
116 
+        const list = this.state.list.map(item => {
117 
+          if (item.id === commentId) {
118 
+            if (!item.replies) item.replies = [];
119 
+            if (replies) {
120 
+              if (page === 1) {
121 
+                // 如果当前页数为第一页，则清空当前所有的 replies
122 
+                // 并将获取到的 replies 存放在 state
123 
+                item.replies = replies;
124 
+              } else {
125 
+                item.replies = item.replies.concat(replies);
126 
+                // 如果当前页数非第一页，则合并 replies
127 
+              }
128 
+            } else {
129 
+              item.isNoMoreReply = true;
130 
+            }
131 
+          }
132 
+          return item;
133 
+        });
134 
+        this.setState({ list });
135 
+      })
136 
+      .catch(error => {
137 
+        if (error.response && error.response.data && error.response.data.msg) {
138 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
139 
+          return;
140 
+        }
141 
+        message.error(error.message || ERROR_DEFAULT);
142 
+      })
143 
+      .finally(() => {
144 
+        this.handleChangeLoading("sGetReply", false);
145 
+      });
146 
+  }
147 
+
148 
+  /**
149 
+   * 添加评论
150 
+   * @param {object} data { type, business_id, content }
151 
+   */
152 
+  sCreateComment(data) {
153 
+    if (!data.content) return message.error("评论内容不能为空 ");
154 
+    this.handleChangeLoading("sCreateComment", true);
155 
+    axios(`${URL}/comments`, {
156 
+      method: "post",
157 
+      data,
158 
+      withCredentials: true
159 
+    })
160 
+      .then(response => {
161 
+        message.success("评论成功！");
162 
+        // 将数据写入到 list 中
163 
+        // 临时插入
164 
+        // 等到获取数据之后，删除临时数据
165 
+        const { list } = this.state;
166 
+        list.unshift({
167 
+          ...response.data,
168 
+          isTemporary: true // 临时的数据
169 
+        });
170 
+        this.setState({ list });
171 
+      })
172 
+      .catch(error => {
173 
+        if (error.response && error.response.data && error.response.data.msg) {
174 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
175 
+          return;
176 
+        }
177 
+        message.error(error.message || ERROR_DEFAULT);
178 
+      })
179 
+      .finally(() => {
180 
+        this.handleChangeLoading("sCreateComment", false);
181 
+      });
182 
+  }
183 
+
184 
+  /**
185 
+   * 添加回复
186 
+   * 回复评论/回复回复
187 
+   * @param {object} data { comment_id, content, [reply_id] }
188 
+   */
189 
+  sCreateReply(data, cb) {
190 
+    if (!data.content) return message.error("回复内容不能为空 ");
191 
+    this.handleChangeLoading("sCreateReply", true);
192 
+    axios(`${URL}/replies`, {
193 
+      method: "post",
194 
+      data,
195 
+      withCredentials: true
196 
+    })
197 
+      .then(response => {
198 
+        // console.log("response: ", response.data);
199 
+        // // 将该条数据插入到 list 中
200 
+        // const list = this.state.list.map(item => {
201 
+        //   if (item.id === data.comment_id) {
202 
+        //     if (!item.replies) item.replies = [];
203 
+        //     item.reply_count += 1
204 
+        //     item.replies.unshift(response.data);
205 
+        //   }
206 
+        //   return item;
207 
+        // });
208 
+        // this.setState({ list });
209 
+        this.sGetReply({ commentId: data.comment_id });
210 
+        message.success("回复成功！");
211 
+        if (isFunction(cb)) cb();
212 
+      })
213 
+      .catch(error => {
214 
+        if (error.response && error.response.data && error.response.data.msg) {
215 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
216 
+          return;
217 
+        }
218 
+        message.error(error.message || ERROR_DEFAULT);
219 
+      })
220 
+      .finally(() => {
221 
+        this.handleChangeLoading("sCreateReply", false);
222 
+      });
223 
+  }
224 
+
225 
+  /**
226 
+   * 点赞/取消点赞
227 
+   * @param {string} commentId { commentId }
228 
+   * @param {boolean} favored   是否已经点过赞
229 
+   */
230 
+  sCommentFavor(commentId, favored) {
231 
+    this.handleChangeLoading("sCommentFavor", true);
232 
+    axios(`${URL}/comments/${commentId}/favor`, {
233 
+      method: favored ? "delete" : "put",
234 
+      withCredentials: true
235 
+    })
236 
+      .then(response => {
237 
+        message.success(favored ? "取消点赞成功！" : "点赞成功！");
238 
+        // 更新 list 中的该项数据的 favored
239 
+        const list = this.state.list.map(item => {
240 
+          if (item.id === commentId) {
241 
+            item.favored = !favored;
242 
+            item.favor_count += favored ? -1 : 1;
243 
+          }
244 
+          return item;
245 
+        });
246 
+        this.setState({ list });
247 
+      })
248 
+      .catch(error => {
249 
+        if (error.response && error.response.data && error.response.data.msg) {
250 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
251 
+          return;
252 
+        }
253 
+        message.error(error.message || ERROR_DEFAULT);
254 
+      })
255 
+      .finally(() => {
256 
+        this.handleChangeLoading("sCommentFavor", false);
257 
+      });
258 
+  }
259 
+
260 
+  /**
261 
+   * 获取 OSS 上传的参数
262 
+   */
263 
+  sOssSts() {
264 
+    this.handleChangeLoading("sOssSts", true);
265 
+    axios
266 
+      .get(`${URL}/oss/sts`)
267 
+      .then(response => {
268 
+        this.setState({ oss: { ...response.data } });
269 
+      })
270 
+      .catch(error => {
271 
+        if (error.response && error.response.data && error.response.data.msg) {
272 
+          message.error(error.response.data.msg || ERROR_DEFAULT);
273 
+          return;
274 
+        }
275 
+        message.error(error.message || ERROR_DEFAULT);
276 
+      })
277 
+      .finally(() => {
278 
+        this.handleChangeLoading("sOssSts", false);
279 
+      });
280 
+  }
281 
+
282 
+  render() {
283 
+    // 添加到 Context 的数据
284 
+    const value = {
285 
+      ...this.state,
286 
+      sCreateComment: this.sCreateComment,
287 
+      sGetComment: this.sGetComment,
288 
+      sCommentFavor: this.sCommentFavor,
289 
+      sCreateReply: this.sCreateReply,
290 
+      sGetReply: this.sGetReply,
291 
+      sOssSts: this.sOssSts
292 
+    };
293 
+
294 
+    return (
295 
+      <CommentContext.Provider value={value}>
296 
+        <div className="comment">
297 
+          <CommentInput />
298 
+          <div style={{ marginTop: 20 }}>
299 
+            <CommentList />
300 
+          </div>
301 
+        </div>
302 
+      </CommentContext.Provider>
303 
+    );
304 
+  }
305 
+}
306 
+
307 
+export default App;

+ 21
- 0
src/Comment.js Datei anzeigen 

@@ -0,0 +1,21 @@
1 
+import React from "react";
2 
+
3 
+const CommentContext = React.createContext();
4 
+
5 
+// This function takes a component...
6 
+export function Comment(Component) {
7 
+  // ...and returns another component...
8 
+  return function(props) {
9 
+    // ... and renders the wrapped component with the context theme!
10 
+    // Notice that we pass through any additional props as well
11 
+    return (
12 
+      <CommentContext.Consumer>
13 
+        {app => <Component {...props} app={app} />}
14 
+      </CommentContext.Consumer>
15 
+    );
16 
+  };
17 
+}
18 
+
19 
+export { CommentContext };
20 
+
21 
+export default Comment;

+ 5
- 0
src/axios.js Datei anzeigen 

@@ -0,0 +1,5 @@
1 
+import axios from "axios";
2 
+
3 
+axios.defaults.withCredentials = true;
4 
+
5 
+export default axios;

+ 48
- 0
src/components/CommentBox/index.css Datei anzeigen 

@@ -0,0 +1,48 @@
1 
+.showMore {
2 
+  color: #4a90e2;
3 
+  text-align: center;
4 
+  width: 100px;
5 
+  background-color: #f8f8f8;
6 
+  cursor: pointer;
7 
+  padding: 10px;
8 
+  margin: 0 auto;
9 
+  transition: all 0.3s;
10 
+}
11 
+.showMore:hover {
12 
+  background-color: #f5f5f5;
13 
+  color: #1890ff;
14 
+}
15 
+.moreBox {
16 
+  text-align: center;
17 
+  width: 90%;
18 
+  margin-left: 40px;
19 
+  height: 40px;
20 
+  display: inline-block;
21 
+}
22 
+@media screen and (max-width: 616px) and (min-width: 449px) {
23 
+  .moreBox {
24 
+    text-align: center;
25 
+    width: 85%;
26 
+    margin-left: 40px;
27 
+    height: 40px;
28 
+    display: inline-block;
29 
+  }
30 
+}
31 
+@media screen and (max-width: 449px) and (min-width: 365px) {
32 
+  .moreBox {
33 
+    text-align: center;
34 
+    width: 80%;
35 
+    margin-left: 40px;
36 
+    height: 40px;
37 
+    display: inline-block;
38 
+  }
39 
+}
40 
+@media screen and (max-width: 365px) {
41 
+  .moreBox {
42 
+    text-align: center;
43 
+    width: 75%;
44 
+    margin-left: 40px;
45 
+    height: 40px;
46 
+    display: inline-block;
47 
+  }
48 
+}

+ 120
- 0
src/components/CommentBox/index.js Datei anzeigen 

@@ -0,0 +1,120 @@
1 
+import React, { Component } from "react";
2 
+import PropTypes from "prop-types";
3 
+import { Icon } from "antd";
4 
+import Comment from "../../Comment";
5 
+import ContentItem from "./../ContentItem";
6 
+import "./index.css";
7 
+
8 
+class CommentBox extends Component {
9 
+  constructor(props) {
10 
+    super(props);
11 
+    this.state = {
12 
+      showReply: true,
13 
+      page: 1
14 
+    };
15 
+
16 
+    this.handleToggleReply = this.handleToggleReply.bind(this);
17 
+    this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
18 
+    this.renderReplies = this.renderReplies.bind(this);
19 
+  }
20 
+
21 
+  /**
22 
+   * 切换是否显示回复列表
23 
+   */
24 
+  handleToggleReply() {
25 
+    this.setState({ showReply: !this.state.showReply });
26 
+  }
27 
+
28 
+  /**
29 
+   * 获取更多评论
30 
+   * @param {string} commentId comment id
31 
+   */
32 
+  handleGetMoreReply(commentId) {
33 
+    // 从第一页开始获取评论
34 
+    const { page } = this.state;
35 
+    this.props.app.sGetReply({ commentId, page });
36 
+    this.setState({ page: page + 1 });
37 
+  }
38 
+
39 
+  /**
40 
+   * 渲染回复 DOM
41 
+   * @param {array} replies 回复列表
42 
+   * @param {boolean} isNoMoreReply 是否没有更多回复
43 
+   */
44 
+  renderReplies(replies, isNoMoreReply) {
45 
+    const { commentId } = this.props;
46 
+    const { showReply } = this.state;
47 
+    if (showReply && replies && replies.length) {
48 
+      const len = replies.length;
49 
+      return (
50 
+        <div style={{ marginLeft: 50 }}>
51 
+          {replies.map((item, index) => {
52 
+            if (index === len - 1) {
53 
+              return [
54 
+                <ContentItem
55 
+                  commentId={commentId}
56 
+                  replyId={item.id}
57 
+                  key={item.id}
58 
+                  content={item}
59 
+                  type="reply"
60 
+                />,
61 
+                <div className="moreBox" key="show_more_button">
62 
+                  {!isNoMoreReply && (
63 
+                    <span
64 
+                      className="showMore"
65 
+                      onClick={() => this.handleGetMoreReply(commentId)}
66 
+                    >
67 
+                      查看更多回复
68 
+                    </span>
69 
+                  )}
70 
+
71 
+                  <a
72 
+                    style={{ float: "right" }}
73 
+                    onClick={this.handleToggleReply}
74 
+                  >
75 
+                    <Icon type="up" /> 收起回复
76 
+                  </a>
77 
+                </div>
78 
+              ];
79 
+            }
80 
+            return (
81 
+              <ContentItem
82 
+                commentId={commentId}
83 
+                replyId={item.id}
84 
+                key={item.id}
85 
+                content={item}
86 
+                type="reply"
87 
+              />
88 
+            );
89 
+          })}
90 
+        </div>
91 
+      );
92 
+    }
93 
+    return null;
94 
+  }
95 
+
96 
+  render() {
97 
+    const { content } = this.props;
98 
+    const { showReply } = this.state;
99 
+    return (
100 
+      <div>
101 
+        <ContentItem
102 
+          content={content}
103 
+          onShowReply={this.handleToggleReply}
104 
+          showReply={showReply}
105 
+          commentId={content.id}
106 
+          type="comment"
107 
+        />
108 
+        {this.renderReplies(content.replies, content.isNoMoreReply)}
109 
+      </div>
110 
+    );
111 
+  }
112 
+}
113 
+
114 
+CommentBox.propTypes = {
115 
+  commentId: PropTypes.string.isRequired
116 
+};
117 
+
118 
+CommentBox.defaultProps = {};
119 
+
120 
+export default Comment(CommentBox);

+ 135
- 0
src/components/CommentInput/index.js Datei anzeigen 

@@ -0,0 +1,135 @@
1 
+import React, { Component } from "react";
2 
+import PropTypes from "prop-types";
3 
+import { OSS_LINK } from "../../constant";
4 
+import Comment from "../../Comment";
5 
+import Editor from "../Editor";
6 
+
7 
+const PLACEHOLDER = {
8 
+  normal: "说点什么吧...",
9 
+  default: "说点什么吧..."
10 
+};
11 
+
12 
+class CommentInput extends Component {
13 
+  constructor(props) {
14 
+    super(props);
15 
+    this.state = {
16 
+      value: "",
17 
+
18 
+      fileList: [], // 图片列表
19 
+      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
20 
+    };
21 
+    this.handleChange = this.handleChange.bind(this);
22 
+    this.handleSubmit = this.handleSubmit.bind(this);
23 
+    this.handleChangeFileList = this.handleChangeFileList.bind(this);
24 
+    this.handleChangeEmoji = this.handleChangeEmoji.bind(this);
25 
+    this.handleUpload = this.handleUpload.bind(this);
26 
+  }
27 
+
28 
+  handleChange(e) {
29 
+    this.setState({ value: e.target.value });
30 
+  }
31 
+
32 
+  handleChangeFileList(fileList) {
33 
+    this.setState({ fileList });
34 
+  }
35 
+
36 
+  handleChangeEmoji(emojiId) {
37 
+    let { value } = this.state;
38 
+    value += `[${emojiId}]`;
39 
+    this.setState({ value });
40 
+  }
41 
+
42 
+  handleUpload({ uid, path }) {
43 
+    const { fileMap } = this.state;
44 
+    fileMap[uid] = path;
45 
+    this.setState({ fileMap });
46 
+  }
47 
+
48 
+  handleSubmit() {
49 
+    let { value, fileMap, fileList } = this.state;
50 
+    if (fileList.length) {
51 
+      fileList.forEach(item => {
52 
+        value += `[${OSS_LINK}${fileMap[item.uid]}]`;
53 
+      });
54 
+    }
55 
+
56 
+    const { type, commentId, replyId, handleToggleInput } = this.props;
57 
+    if (type === "normal") {
58 
+      this.props.app.sCreateComment({
59 
+        type: 1,
60 
+        business_id: "1",
61 
+        content: value
62 
+      });
63 
+    } else if (type === "comment") {
64 
+      this.props.app.sCreateReply(
65 
+        {
66 
+          comment_id: commentId,
67 
+          content: value
68 
+        },
69 
+        () => handleToggleInput()
70 
+      );
71 
+    } else if (type === "reply") {
72 
+      this.props.app.sCreateReply(
73 
+        {
74 
+          comment_id: commentId,
75 
+          content: value,
76 
+          reply_id: replyId
77 
+        },
78 
+        () => handleToggleInput()
79 
+      );
80 
+    }
81 
+  }
82 
+
83 
+  render() {
84 
+    const { type } = this.props;
85 
+    const { value, fileList } = this.state;
86 
+
87 
+    return (
88 
+      <div>
89 
+        {type === "normal" ? (
90 
+          <div>
91 
+            <span
92 
+              style={{
93 
+                border: "1px solid #CECECE",
94 
+                color: "#666",
95 
+                padding: "2px 3px"
96 
+              }}
97 
+            >
98 
+              回复
99 
+            </span>
100 
+            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
101 
+              口碑
102 
+              <span style={{ marginLeft: "20px", color: "#666666" }}>
103 
+                (全站挑出毛病或提出合理建议，奖励10到100元红包)
104 
+              </span>
105 
+            </span>
106 
+          </div>
107 
+        ) : null}
108 
+        <div style={{ marginTop: 40 }}>
109 
+          <Editor
110 
+            value={value}
111 
+            placeholder={PLACEHOLDER[type] || PLACEHOLDER.default}
112 
+            fileList={fileList}
113 
+            onChange={this.handleChange}
114 
+            onSubmit={this.handleSubmit}
115 
+            onChangeFileList={this.handleChangeFileList}
116 
+            onChangeEmoji={this.handleChangeEmoji}
117 
+            onUpload={this.handleUpload}
118 
+            loading={this.props.app.loading.sCreateComment}
119 
+          />
120 
+        </div>
121 
+      </div>
122 
+    );
123 
+  }
124 
+}
125 
+
126 
+CommentInput.propTypes = {
127 
+  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
128 
+  type: PropTypes.oneOf(["normal", "comment", "reply"])
129 
+};
130 
+
131 
+CommentInput.defaultProps = {
132 
+  type: "normal"
133 
+};
134 
+
135 
+export default Comment(CommentInput);

+ 14
- 0
src/components/CommentList/index.css Datei anzeigen 

@@ -0,0 +1,14 @@
1 
+.showMore {
2 
+  color: #4a90e2;
3 
+  text-align: center;
4 
+  width: 100%;
5 
+  background-color: #f8f8f8;
6 
+  cursor: pointer;
7 
+  padding: 10px;
8 
+  margin: 40px auto;
9 
+  transition: all 0.3s;
10 
+}
11 
+.showMore:hover {
12 
+  background-color: #f5f5f5;
13 
+  color: #1890ff;
14 
+}

+ 46
- 0
src/components/CommentList/index.js Datei anzeigen 

@@ -0,0 +1,46 @@
1 
+import React, { Component } from "react";
2 
+import { Spin } from "antd";
3 
+import Comment from "../../Comment";
4 
+import CommentBox from "../CommentBox";
5 
+import "./index.css";
6 
+
7 
+class CommentList extends Component {
8 
+  constructor(props) {
9 
+    super(props);
10 
+    this.state = {};
11 
+  }
12 
+
13 
+  render() {
14 
+    const {
15 
+      list,
16 
+      page,
17 
+      loading,
18 
+      isNoMoreComment,
19 
+      sGetComment
20 
+    } = this.props.app;
21 
+
22 
+    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
23 
+    return (
24 
+      <div>
25 
+        <Spin spinning={spinning}>
26 
+          {list.map(item => (
27 
+            <CommentBox content={item} key={item.id} commentId={item.id} />
28 
+          ))}
29 
+
30 
+          {!isNoMoreComment && (
31 
+            <div
32 
+              className="showMore"
33 
+              onClick={() => sGetComment({ page: page + 1 })}
34 
+            >
35 
+              <span>查看更多评论</span>
36 
+            </div>
37 
+          )}
38 
+        </Spin>
39 
+      </div>
40 
+    );
41 
+  }
42 
+}
43 
+
44 
+CommentList.propTypes = {};
45 
+
46 
+export default Comment(CommentList);

+ 52
- 0
src/components/ContentItem/index.css Datei anzeigen 

@@ -0,0 +1,52 @@
1 
+.left {
2 
+  display: inline-block;
3 
+  vertical-align: top;
4 
+  width: 40px;
5 
+}
6 
+.right {
7 
+  display: inline-block;
8 
+  width: 90%;
9 
+  margin-left: 10px;
10 
+}
11 
+.box {
12 
+  margin: 10px;
13 
+  padding: 15px 5px;
14 
+  border-top: 1px solid #eee;
15 
+}
16 
+.content {
17 
+  margin: 10px 0;
18 
+}
19 
+.itemLeft {
20 
+  float: left;
21 
+}
22 
+.itemRight {
23 
+  float: right;
24 
+  margin-left: 5px;
25 
+}
26 
+.bottom {
27 
+  margin: 20px auto;
28 
+}
29 
+.favored {
30 
+  color: #4a90e2;
31 
+}
32 
+@media screen and (max-width: 616px) and (min-width: 449px) {
33 
+  .right {
34 
+    display: inline-block;
35 
+    width: 85%;
36 
+    margin-left: 10px;
37 
+  }
38 
+}
39 
+@media screen and (max-width: 449px) and (min-width: 365px) {
40 
+  .right {
41 
+    display: inline-block;
42 
+    width: 80%;
43 
+    margin-left: 10px;
44 
+  }
45 
+}
46 
+@media screen and (max-width: 365px) {
47 
+  .right {
48 
+    display: inline-block;
49 
+    width: 75%;
50 
+    margin-left: 10px;
51 
+  }
52 
+}

+ 130
- 0
src/components/ContentItem/index.js Datei anzeigen 

@@ -0,0 +1,130 @@
1 
+import React, { Component } from "react";
2 
+import PropTypes from "prop-types";
3 
+import { Avatar, Icon } from "antd";
4 
+import dayjs from "dayjs";
5 
+import Comment from "../../Comment";
6 
+import CommentInput from "../CommentInput";
7 
+import { renderContent } from "../../helper";
8 
+import "./index.css";
9 
+
10 
+class CommentItem extends Component {
11 
+  constructor(props) {
12 
+    super(props);
13 
+    this.state = {
14 
+      isShowInput: false
15 
+    };
16 
+    this.handleToggleInput = this.handleToggleInput.bind(this);
17 
+    this.renderTextWithReply = this.renderTextWithReply.bind(this);
18 
+  }
19 
+
20 
+  handleToggleInput() {
21 
+    this.setState({ isShowInput: !this.state.isShowInput });
22 
+  }
23 
+
24 
+  renderTextWithReply(text, content) {
25 
+    let newText = text;
26 
+    const { reply } = content;
27 
+    if (reply) {
28 
+      newText = `${newText} //@<a href="/${reply.user_id}">${
29 
+        reply.user_name
30 
+      }</a> ${reply.content}`;
31 
+      if (reply.reply) {
32 
+        return this.renderTextWithReply(newText, reply);
33 
+      }
34 
+    }
35 
+    return newText;
36 
+  }
37 
+
38 
+  render() {
39 
+    const {
40 
+      commentId,
41 
+      replyId,
42 
+      content,
43 
+      type,
44 
+      showReply,
45 
+      onShowReply,
46 
+      app
47 
+    } = this.props;
48 
+    const { isShowInput } = this.state;
49 
+    const isComment = type === "comment";
50 
+    return (
51 
+      <div className="box">
52 
+        <div className="left">
53 
+          <Avatar src={content.user_avatar} size="large" />
54 
+        </div>
55 
+        <div className="right">
56 
+          <div className="name">
57 
+            <a href={`/${content.user_id}`}>
58 
+              {content.user_name || "暂无昵称"}
59 
+            </a>
60 
+
61 
+            <span style={{ marginLeft: 10 }}>
62 
+              {dayjs(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")}
63 
+            </span>
64 
+          </div>
65 
+          <div
66 
+            className="content"
67 
+            dangerouslySetInnerHTML={{
68 
+              __html: renderContent(
69 
+                this.renderTextWithReply(content.content, content)
70 
+              )
71 
+            }}
72 
+          />
73 
+          <div className="bottom">
74 
+            {isComment && content.reply_count ? (
75 
+              <div>
76 
+                <a
77 
+                  className="itemLeft"
78 
+                  onClick={onShowReply}
79 
+                  style={{ userSelect: "none" }}
80 
+                >
81 
+                  {content.reply_count} 条回复
82 
+                  {showReply ? <Icon type="up" /> : <Icon type="down" />}
83 
+                </a>
84 
+              </div>
85 
+            ) : null}
86 
+
87 
+            <a onClick={this.handleToggleInput} className="itemRight">
88 
+              &nbsp; 回复
89 
+            </a>
90 
+            <div
91 
+              className="itemRight"
92 
+              style={{ cursor: "pointer" }}
93 
+              onClick={() => app.sCommentFavor(content.id, content.favored)}
94 
+            >
95 
+              <Icon
96 
+                type="like-o"
97 
+                className={content.favored ? "favored" : ""}
98 
+              />
99 
+              &nbsp;{content.favor_count}
100 
+            </div>
101 
+          </div>
102 
+
103 
+          {isShowInput ? (
104 
+            <CommentInput
105 
+              type={type}
106 
+              replyId={replyId}
107 
+              commentId={commentId}
108 
+              handleToggleInput={this.handleToggleInput}
109 
+            />
110 
+          ) : null}
111 
+        </div>
112 
+      </div>
113 
+    );
114 
+  }
115 
+}
116 
+
117 
+CommentItem.propTypes = {
118 
+  content: PropTypes.object.isRequired,
119 
+  // comment 评论
120 
+  // reply 回复
121 
+  type: PropTypes.oneOf(["comment", "reply"]),
122 
+  onShowReply: PropTypes.func
123 
+};
124 
+
125 
+CommentItem.defaultProps = {
126 
+  type: "comment",
127 
+  onShowReply: () => {}
128 
+};
129 
+
130 
+export default Comment(CommentItem);

+ 23
- 0
src/components/Editor/Emoji.css Datei anzeigen 

@@ -0,0 +1,23 @@
1 
+.item {
2 
+  float: left;
3 
+  width: 40px;
4 
+  height: 40px;
5 
+  cursor: pointer;
6 
+  white-space: nowrap;
7 
+  /* this is required unless you put the helper span closely near the img */
8 
+  text-align: center;
9 
+  margin: 0;
10 
+}
11 
+.item .helper {
12 
+  display: inline-block;
13 
+  height: 100%;
14 
+  vertical-align: middle;
15 
+}
16 
+.item img {
17 
+  margin: 0 auto;
18 
+  vertical-align: middle;
19 
+  padding: 3px;
20 
+}
21 
+.item img:hover {
22 
+  border: 1px solid #40a9ff;
23 
+}

+ 65
- 0
src/components/Editor/Emoji.js Datei anzeigen 

@@ -0,0 +1,65 @@
1 
+import React from "react";
2 
+import { Carousel } from "antd";
3 
+import emoji, { prefixUrl, ext } from "../../emoji";
4 
+import "./Emoji.css";
5 
+// 每页 20  5*4
6 
+// 共 20 * 3 = 60 (实际是 54)
7 
+
8 
+const Emoji = ({ onClick }) => {
9 
+  const content = [[], [], []];
10 
+
11 
+  for (let i = 0; i < emoji.length; i++) {
12 
+    if (i < 20) {
13 
+      content[0].push(emoji[i]);
14 
+    } else if (i < 40) {
15 
+      content[1].push(emoji[i]);
16 
+    } else if (i < emoji.length) {
17 
+      content[2].push(emoji[i]);
18 
+    }
19 
+  }
20 
+  return (
21 
+    <Carousel>
22 
+      <div>
23 
+        {content[0].map((item, index) => (
24 
+          <div className="item" key={item.value}>
25 
+            <span className="helper" />
26 
+            <img
27 
+              src={`${prefixUrl}${item.value}.${ext}`}
28 
+              alt={item.title}
29 
+              style={{ display: "inline-block" }}
30 
+              onClick={() => onClick(item.title)}
31 
+            />
32 
+          </div>
33 
+        ))}
34 
+      </div>
35 
+      <div>
36 
+        {content[1].map((item, index) => (
37 
+          <div className="item" key={item.value}>
38 
+            <span className="helper" />
39 
+            <img
40 
+              src={`${prefixUrl}${item.value}.${ext}`}
41 
+              alt={item.title}
42 
+              style={{ display: "inline-block" }}
43 
+              onClick={() => onClick(item.title)}
44 
+            />
45 
+          </div>
46 
+        ))}
47 
+      </div>
48 
+      <div>
49 
+        {content[2].map(item => (
50 
+          <div className="item" key={item.value}>
51 
+            <span className="helper" />
52 
+            <img
53 
+              src={`${prefixUrl}${item.value}.${ext}`}
54 
+              alt={item.title}
55 
+              style={{ display: "inline-block" }}
56 
+              onClick={() => onClick(item.title)}
57 
+            />
58 
+          </div>
59 
+        ))}
60 
+      </div>
61 
+    </Carousel>
62 
+  );
63 
+};
64 
+
65 
+export default Emoji;

+ 8
- 0
src/components/Editor/Upload.css Datei anzeigen 

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

+ 132
- 0
src/components/Editor/Upload.js Datei anzeigen 

@@ -0,0 +1,132 @@
1 
+import React from "react";
2 
+import { Upload, Icon, Modal, message } from "antd";
3 
+import dayjs from "dayjs";
4 
+import shortid from "shortid";
5 
+import {
6 
+  OSS_ENDPOINT,
7 
+  OSS_BUCKET,
8 
+  DRIVER_LICENSE_PATH,
9 
+  ERROR_DEFAULT,
10 
+  MAX_UPLOAD_NUMBER
11 
+} from "../../constant";
12 
+import Comment from "../../Comment";
13 
+// import styles from "./Upload.less";
14 
+import "./Upload.css";
15 
+
16 
+const client = oss => {
17 
+  return new window.OSS.Wrapper({
18 
+    accessKeyId: oss.access_key_id,
19 
+    accessKeySecret: oss.access_key_secret,
20 
+    stsToken: oss.security_token,
21 
+    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
22 
+    bucket: OSS_BUCKET
23 
+  });
24 
+};
25 
+
26 
+const uploadPath = (path, file) => {
27 
+  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
28 
+    file.type.split("/")[1]
29 
+  }`;
30 
+};
31 
+
32 
+const UploadToOss = (oss, path, file) => {
33 
+  const url = uploadPath(path, file);
34 
+  return new Promise((resolve, reject) => {
35 
+    client(oss)
36 
+      .multipartUpload(url, file)
37 
+      .then(data => {
38 
+        resolve(data);
39 
+      })
40 
+      .catch(error => {
41 
+        reject(error);
42 
+      });
43 
+  });
44 
+};
45 
+
46 
+class App extends React.Component {
47 
+  constructor(props) {
48 
+    super(props);
49 
+    this.state = {
50 
+      previewVisible: false,
51 
+      previewImage: ""
52 
+    };
53 
+    this.handleCancel = this.handleCancel.bind(this);
54 
+    this.handlePreview = this.handlePreview.bind(this);
55 
+    this.handleChange = this.handleChange.bind(this);
56 
+    this.customRequest = this.customRequest.bind(this);
57 
+  }
58 
+
59 
+  componentDidMount() {
60 
+    this.props.app.sOssSts();
61 
+  }
62 
+
63 
+  handleCancel() {
64 
+    this.setState({ previewVisible: false });
65 
+  }
66 
+
67 
+  handlePreview(file) {
68 
+    this.setState({
69 
+      previewImage: file.url || file.thumbUrl,
70 
+      previewVisible: true
71 
+    });
72 
+  }
73 
+
74 
+  handleChange({ fileList }) {
75 
+    this.props.onChangeFileList(fileList);
76 
+  }
77 
+
78 
+  customRequest(info) {
79 
+    const { file } = info;
80 
+    info.onProgress({ percent: 10 });
81 
+    let reader = new FileReader();
82 
+    reader.readAsDataURL(info.file);
83 
+    reader.onloadend = () => {
84 
+      info.onProgress({ percent: 20 });
85 
+      // DRIVER_LICENSE_PATH oss 的存储路径位置
86 
+      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
87 
+        .then(data => {
88 
+          info.onProgress({ percent: 100 });
89 
+          info.onSuccess();
90 
+          this.props.onUpload({ path: data.name, uid: file.uid });
91 
+        })
92 
+        .catch(e => {
93 
+          message.error(e.message || ERROR_DEFAULT);
94 
+          info.onError(e);
95 
+        });
96 
+    };
97 
+  }
98 
+
99 
+  render() {
100 
+    const { previewVisible, previewImage } = this.state;
101 
+    const { fileList } = this.props;
102 
+    const uploadButton = (
103 
+      <div>
104 
+        <Icon type="plus" />
105 
+        <div className="ant-upload-text">上传</div>
106 
+      </div>
107 
+    );
108 
+    return (
109 
+      <div>
110 
+        <Upload
111 
+          accept="image/jpg,image/jpeg,image/png,image/bmp"
112 
+          listType="picture-card"
113 
+          fileList={fileList}
114 
+          customRequest={this.customRequest}
115 
+          onPreview={this.handlePreview}
116 
+          onChange={this.handleChange}
117 
+        >
118 
+          {fileList.length >= MAX_UPLOAD_NUMBER ? null : uploadButton}
119 
+        </Upload>
120 
+        <Modal
121 
+          visible={previewVisible}
122 
+          footer={null}
123 
+          onCancel={this.handleCancel}
124 
+        >
125 
+          <img alt="upload" style={{ width: "100%" }} src={previewImage} />
126 
+        </Modal>
127 
+      </div>
128 
+    );
129 
+  }
130 
+}
131 
+
132 
+export default Comment(App);

+ 82
- 0
src/components/Editor/index.css Datei anzeigen 

@@ -0,0 +1,82 @@
1 
+.editor {
2 
+  box-sizing: border-box;
3 
+  margin: 0;
4 
+  padding: 0;
5 
+  width: 100%;
6 
+  max-width: 100%;
7 
+  list-style: none;
8 
+  position: relative;
9 
+  display: block;
10 
+  font-size: 14px;
11 
+  line-height: 1.5;
12 
+  color: rgba(0, 0, 0, 0.65);
13 
+  background-color: #fff;
14 
+  background-image: none;
15 
+  border: 1px solid #d9d9d9;
16 
+  border-radius: 4px;
17 
+  transition: all 0.3s, height 0s;
18 
+}
19 
+.editor textarea.ant-input {
20 
+  border: none;
21 
+  border-bottom: 1px solid #eee;
22 
+  border-bottom-right-radius: 0;
23 
+  border-bottom-left-radius: 0;
24 
+}
25 
+.editor textarea.ant-input:hover {
26 
+  border: none;
27 
+  border-bottom: 1px solid #eee;
28 
+}
29 
+.editor textarea.ant-input:focus {
30 
+  box-shadow: none;
31 
+  border-bottom: 1px solid #eee;
32 
+}
33 
+.editor [contentEditable="true"]:empty:not(:focus):before {
34 
+  content: attr(data-text);
35 
+  color: #bfbfbf;
36 
+}
37 
+.editor:focus,
38 
+.editor:hover {
39 
+  border-color: #40a9ff;
40 
+  outline: 0;
41 
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
42 
+}
43 
+.content {
44 
+  display: block;
45 
+  box-sizing: border-box;
46 
+  padding: 4px 10px;
47 
+  width: 100%;
48 
+  max-width: 100%;
49 
+  height: 100%;
50 
+  max-height: 110px;
51 
+  overflow-y: auto;
52 
+  overflow-x: auto;
53 
+}
54 
+.content:focus,
55 
+.content:hover {
56 
+  outline: 0;
57 
+}
58 
+.toolbar {
59 
+  display: inline-block;
60 
+  width: 100%;
61 
+  margin: 5px 0 0 0;
62 
+}
63 
+.toolbar .icon {
64 
+  font-size: 23px;
65 
+  cursor: pointer;
66 
+  transition: color 0.3s;
67 
+}
68 
+.toolbar .icon:hover {
69 
+  color: #40a9ff;
70 
+}
71 
+.feed .ant-popover-inner-content {
72 
+  padding: 12px 16px 20px 16px;
73 
+}
74 
+.feed .ant-carousel .slick-dots {
75 
+  bottom: -10px;
76 
+}
77 
+.feed .ant-carousel .slick-dots li.slick-active button {
78 
+  background-color: #7b868a;
79 
+}
80 
+.feed .ant-carousel .slick-dots li button {
81 
+  background-color: #a2aeb5;
82 
+}

+ 125
- 0
src/components/Editor/index.js Datei anzeigen 

@@ -0,0 +1,125 @@
1 
+// https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
2 
+import React from "react";
3 
+import { Icon, Button, Popover, Input } from "antd";
4 
+import { MAX_UPLOAD_NUMBER } from "../../constant";
5 
+import Upload from "./Upload";
6 
+import Emoji from "./Emoji";
7 
+// import styles from "./index.less";
8 
+import "./index.css";
9 
+
10 
+const { TextArea } = Input;
11 
+
12 
+export default class Editor extends React.Component {
13 
+  constructor(props) {
14 
+    super(props);
15 
+    this.state = {
16 
+      showUpload: false
17 
+    };
18 
+    this.handleClickEmoji = this.handleClickEmoji.bind(this);
19 
+    this.handleShowUpload = this.handleShowUpload.bind(this);
20 
+  }
21 
+
22 
+  componentDidMount() {}
23 
+
24 
+  handleClickEmoji(emojiId) {
25 
+    this.props.onChangeEmoji(emojiId);
26 
+  }
27 
+
28 
+  handleShowUpload(showUpload) {
29 
+    if (typeof showUpload === "boolean") {
30 
+      this.setState({ showUpload: showUpload });
31 
+    } else {
32 
+      this.setState({ showUpload: !this.state.showUpload });
33 
+    }
34 
+  }
35 
+
36 
+  render() {
37 
+    const {
38 
+      value,
39 
+      onChange,
40 
+      placeholder,
41 
+      fileList,
42 
+      onChangeFileList,
43 
+      onUpload
44 
+    } = this.props;
45 
+    return (
46 
+      <div className="editor">
47 
+        <TextArea
48 
+          value={value}
49 
+          onChange={onChange}
50 
+          rows={5}
51 
+          placeholder={placeholder}
52 
+        />
53 
+
54 
+        <div className="toolbar">
55 
+          <div style={{ float: "left", margin: "8px 11px" }}>
56 
+            <Popover
57 
+              trigger="click"
58 
+              placement="bottomLeft"
59 
+              autoAdjustOverflow={false}
60 
+              content={
61 
+                <div style={{ width: 200 }}>
62 
+                  <Emoji onClick={this.handleClickEmoji} />
63 
+                </div>
64 
+              }
65 
+              overlayClassName="feed"
66 
+            >
67 
+              <Icon type="smile-o" className="icon" />
68 
+            </Popover>
69 
+
70 
+            <Popover
71 
+              visible={this.state.showUpload}
72 
+              overlayStyle={{ zIndex: 999 }}
73 
+              content={
74 
+                <div style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}>
75 
+                  <Upload
76 
+                    onChangeFileList={onChangeFileList}
77 
+                    onUpload={onUpload}
78 
+                    fileList={fileList}
79 
+                  />
80 
+                </div>
81 
+              }
82 
+              placement="bottomLeft"
83 
+              title={
84 
+                <div style={{ margin: "5px auto" }}>
85 
+                  <span>
86 
+                    上传图片
87 
+                    <span style={{ color: "#666", fontWeight: 400 }}>
88 
+                      (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
89 
+                    </span>
90 
+                  </span>
91 
+                  <Icon
92 
+                    type="close"
93 
+                    onClick={() => this.handleShowUpload(false)}
94 
+                    style={{
95 
+                      float: "right",
96 
+                      cursor: "pointer",
97 
+                      marginTop: 4
98 
+                    }}
99 
+                  />
100 
+                </div>
101 
+              }
102 
+            >
103 
+              <Icon
104 
+                type="picture"
105 
+                className="icon"
106 
+                style={{ marginLeft: 10 }}
107 
+                onClick={() => this.handleShowUpload(true)}
108 
+              />
109 
+            </Popover>
110 
+          </div>
111 
+
112 
+          <div style={{ float: "right", margin: "5px 11px" }}>
113 
+            <Button
114 
+              onClick={this.props.onSubmit}
115 
+              type="primary"
116 
+              loading={this.props.loading}
117 
+            >
118 
+              发表
119 
+            </Button>
120 
+          </div>
121 
+        </div>
122 
+      </div>
123 
+    );
124 
+  }
125 
+}

+ 16
- 0
src/constant.js Datei anzeigen 

@@ -0,0 +1,16 @@
1 
+export const URL = "http://121.41.20.11:8082/v1";
2 
+// export const URL = "http://api.links123.net/comment/v1";
3 
+
4 
+export const ERROR_DEFAULT = "出错了！";
5 
+
6 
+export const LIMIT = 10; // 默认 limit
7 
+
8 
+export const OSS_ENDPOINT = "oss-cn-beijing.aliyuncs.com";
9 
+export const OSS_BUCKET = "links-comment";
10 
+export const DRIVER_LICENSE_PATH = "/comment";
11 
+
12 
+export const OSS_LINK = "http://links-comment.oss-cn-beijing.aliyuncs.com";
13 
+
14 
+export const MAX_UPLOAD_NUMBER = 4;
15 
+
16 
+export const REGEXP = /\[.+?\]/g;

+ 226
- 0
src/emoji.js Datei anzeigen 

@@ -0,0 +1,226 @@
1 
+const emoji = [
2 
+  {
3 
+    value: "0",
4 
+    title: "捶地"
5 
+  },
6 
+  {
7 
+    value: "1",
8 
+    title: "怀疑"
9 
+  },
10 
+
11 
+  {
12 
+    value: "2",
13 
+    title: "撇嘴"
14 
+  },
15 
+  {
16 
+    value: "3",
17 
+    title: "色"
18 
+  },
19 
+  {
20 
+    value: "4",
21 
+    ttile: "发呆"
22 
+  },
23 
+  {
24 
+    value: "5",
25 
+    title: "酷"
26 
+  },
27 
+  {
28 
+    value: "6",
29 
+    title: "害羞"
30 
+  },
31 
+
32 
+  {
33 
+    value: "7",
34 
+    title: "闭嘴"
35 
+  },
36 
+  {
37 
+    value: "8",
38 
+    title: "睡觉"
39 
+  },
40 
+  {
41 
+    value: "9",
42 
+    title: "大哭"
43 
+  },
44 
+  {
45 
+    value: "10",
46 
+    title: "尴尬"
47 
+  },
48 
+  {
49 
+    value: "11",
50 
+    title: "发怒"
51 
+  },
52 
+  {
53 
+    value: "12",
54 
+    title: "调皮"
55 
+  },
56 
+  {
57 
+    value: "13",
58 
+    title: "呲牙"
59 
+  },
60 
+  {
61 
+    value: "14",
62 
+    title: "微笑"
63 
+  },
64 
+  {
65 
+    value: "15",
66 
+    title: "难过"
67 
+  },
68 
+  {
69 
+    value: "16",
70 
+    title: "帅呆"
71 
+  },
72 
+  {
73 
+    value: "17",
74 
+    title: "折磨"
75 
+  },
76 
+  {
77 
+    value: "18",
78 
+    title: "吐"
79 
+  },
80 
+  {
81 
+    value: "19",
82 
+    title: "偷笑"
83 
+  },
84 
+  {
85 
+    value: "20",
86 
+    title: "可爱"
87 
+  },
88 
+  {
89 
+    value: "21",
90 
+    title: "白眼"
91 
+  },
92 
+  {
93 
+    value: "22",
94 
+    title: "傲慢"
95 
+  },
96 
+  {
97 
+    value: "23",
98 
+    title: "嘴馋"
99 
+  },
100 
+  {
101 
+    value: "24",
102 
+    title: "困"
103 
+  },
104 
+  {
105 
+    value: "25",
106 
+    title: "恐慌"
107 
+  },
108 
+  {
109 
+    value: "26",
110 
+    title: "流汗"
111 
+  },
112 
+  {
113 
+    value: "27",
114 
+    title: "憨笑"
115 
+  },
116 
+  {
117 
+    value: "28",
118 
+    title: "大兵"
119 
+  },
120 
+  {
121 
+    value: "29",
122 
+    title: "奋斗"
123 
+  },
124 
+  {
125 
+    value: "30",
126 
+    title: "疑问"
127 
+  },
128 
+  {
129 
+    value: "31",
130 
+    title: "嘘"
131 
+  },
132 
+  {
133 
+    value: "32",
134 
+    title: "晕"
135 
+  },
136 
+  {
137 
+    value: "33",
138 
+    title: "被炸了"
139 
+  },
140 
+  {
141 
+    value: "34",
142 
+    title: "骷髅"
143 
+  },
144 
+  {
145 
+    value: "35",
146 
+    title: "敲打"
147 
+  },
148 
+  {
149 
+    value: "36",
150 
+    title: "拜拜"
151 
+  },
152 
+  {
153 
+    value: "37",
154 
+    title: "发抖"
155 
+  },
156 
+  {
157 
+    value: "38",
158 
+    title: "亲密"
159 
+  },
160 
+  {
161 
+    value: "39",
162 
+    title: "跳"
163 
+  },
164 
+  {
165 
+    value: "40",
166 
+    title: "猪头"
167 
+  },
168 
+  {
169 
+    value: "41",
170 
+    title: "拥抱"
171 
+  },
172 
+  {
173 
+    value: "42",
174 
+    title: "生日蛋糕"
175 
+  },
176 
+  {
177 
+    value: "43",
178 
+    title: "闪电"
179 
+  },
180 
+  {
181 
+    value: "44",
182 
+    title: "地雷"
183 
+  },
184 
+  {
185 
+    value: "45",
186 
+    title: "刀"
187 
+  },
188 
+  {
189 
+    value: "46",
190 
+    title: "足球"
191 
+  },
192 
+  {
193 
+    value: "47",
194 
+    title: "便便"
195 
+  },
196 
+  {
197 
+    value: "48",
198 
+    title: "咖啡"
199 
+  },
200 
+  {
201 
+    value: "49",
202 
+    title: "米饭"
203 
+  },
204 
+  {
205 
+    value: "50",
206 
+    title: "玫瑰"
207 
+  },
208 
+  {
209 
+    value: "51",
210 
+    title: "枯萎玫瑰"
211 
+  },
212 
+  {
213 
+    value: "52",
214 
+    title: "爱心"
215 
+  },
216 
+  {
217 
+    value: "53",
218 
+    title: "心碎"
219 
+  }
220 
+];
221 
+
222 
+export const prefixUrl = "https://a.links123.cn/site/src/feed/imgs/qq/";
223 
+
224 
+export const ext = "gif";
225 
+
226 
+export default emoji;

+ 44
- 0
src/helper.js Datei anzeigen 

@@ -0,0 +1,44 @@
1 
+import { REGEXP } from "./constant";
2 
+import emoji, { prefixUrl, ext } from "./emoji";
3 
+
4 
+export function isFunction(functionToCheck) {
5 
+  return (
6 
+    functionToCheck && {}.toString.call(functionToCheck) === "[object Function]"
7 
+  );
8 
+}
9 
+
10 
+export function isUrl(userInput) {
11 
+  const regexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
12 
+  var res = userInput.match(regexp);
13 
+  if (res === null) return false;
14 
+  else return true;
15 
+}
16 
+
17 
+/**
18 
+ * 将对象数组转换为对象
19 
+ * @param {array} array Array of Objects
20 
+ * @param {string} keyField string
21 
+ */
22 
+export function arrayToObject(array, keyField) {
23 
+  return array.reduce((obj, item) => {
24 
+    obj[item[keyField]] = item;
25 
+    return obj;
26 
+  }, {});
27 
+}
28 
+
29 
+/**
30 
+ * 渲染编辑器
31 
+ * [x] => <img src="x" />
32 
+ * @param {strig} content
33 
+ */
34 
+export function renderContent(content, onClick) {
35 
+  return content.replace(REGEXP, function(a, b) {
36 
+    const src = a.slice(1, -1);
37 
+    if (isUrl(src)) {
38 
+      return `<img src="${src}" alt="${src}" style="max-width: 300px" />`;
39 
+    }
40 
+    const emojiObejct = arrayToObject(emoji, "title");
41 
+    const value = emojiObejct[src].value;
42 
+    return `<img src="${prefixUrl}${value}.${ext}" alt="${value}" />`;
43 
+  });
44 
+}

+ 7
- 0
src/index.js Datei anzeigen 

@@ -0,0 +1,7 @@
1 
+import React from "react";
2 
+import ReactDOM from "react-dom";
3 
+import App from "./App";
4 
+import registerServiceWorker from "./registerServiceWorker";
5 
+
6 
+ReactDOM.render(<App />, document.getElementById("root-comment"));
7 
+registerServiceWorker();

+ 72
- 0
src/mock.js Datei anzeigen 

@@ -0,0 +1,72 @@
1 
+export const comments = {
2 
+  list: [
3 
+    {
4 
+      id: "5b3a4f0973df3e6a32b0a9d2",
5 
+      user_id: 0,
6 
+      user_name: "",
7 
+      user_avatar: "",
8 
+      content: "test[微笑]",
9 
+      replies: [
10 
+        {
11 
+          id: "5b3c58c473df3e64d8d53afb",
12 
+          user_id: 0,
13 
+          user_name: "",
14 
+          user_avatar: "",
15 
+          reply: null,
16 
+          content: "test",
17 
+          favor_count: 1,
18 
+          favored: false,
19 
+          created: 1530681540
20 
+        },
21 
+        {
22 
+          id: "5b3c58c473df3e64d8d53afa",
23 
+          user_id: 0,
24 
+          user_name: "",
25 
+          user_avatar: "",
26 
+          reply: {
27 
+            id: "5b3c58c473df3e64d8d53afb",
28 
+            user_id: 0,
29 
+            user_name: "",
30 
+            user_avatar: "",
31 
+            reply: null,
32 
+            content: "test",
33 
+            favor_count: 1,
34 
+            favored: false,
35 
+            created: 1530681540
36 
+          },
37 
+          content: "test",
38 
+          favor_count: 2,
39 
+          favored: false,
40 
+          created: 1530681540
41 
+        },
42 
+        {
43 
+          id: "5b3c6e4873df3e53f870d912",
44 
+          user_id: 0,
45 
+          user_name: "",
46 
+          user_avatar: "",
47 
+          reply: {
48 
+            id: "5b3c58c473df3e64d8d53afb",
49 
+            user_id: 0,
50 
+            user_name: "",
51 
+            user_avatar: "",
52 
+            reply: null,
53 
+            content: "test",
54 
+            favor_count: 1,
55 
+            favored: false,
56 
+            created: 1530681540
57 
+          },
58 
+          content: "test",
59 
+          favor_count: 0,
60 
+          favored: false,
61 
+          created: 1530687048
62 
+        }
63 
+      ],
64 
+      reply_count: 4,
65 
+      favor_count: 0,
66 
+      favored: false,
67 
+      created: 1530547977
68 
+    }
69 
+  ],
70 
+  total: 1,
71 
+  page: 1
72 
+};

+ 117
- 0
src/registerServiceWorker.js Datei anzeigen 

@@ -0,0 +1,117 @@
1 
+// In production, we register a service worker to serve assets from local cache.
2 
+
3 
+// This lets the app load faster on subsequent visits in production, and gives
4 
+// it offline capabilities. However, it also means that developers (and users)
5 
+// will only see deployed updates on the "N+1" visit to a page, since previously
6 
+// cached resources are updated in the background.
7 
+
8 
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 
+// This link also includes instructions on opting out of this behavior.
10 
+
11 
+const isLocalhost = Boolean(
12 
+  window.location.hostname === "localhost" ||
13 
+    // [::1] is the IPv6 localhost address.
14 
+    window.location.hostname === "[::1]" ||
15 
+    // 127.0.0.1/8 is considered localhost for IPv4.
16 
+    window.location.hostname.match(
17 
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 
+    )
19 
+);
20 
+
21 
+export default function register() {
22 
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
23 
+    // The URL constructor is available in all browsers that support SW.
24 
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 
+    if (publicUrl.origin !== window.location.origin) {
26 
+      // Our service worker won't work if PUBLIC_URL is on a different origin
27 
+      // from what our page is served on. This might happen if a CDN is used to
28 
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 
+      return;
30 
+    }
31 
+
32 
+    window.addEventListener("load", () => {
33 
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 
+
35 
+      if (isLocalhost) {
36 
+        // This is running on localhost. Lets check if a service worker still exists or not.
37 
+        checkValidServiceWorker(swUrl);
38 
+
39 
+        // Add some additional logging to localhost, pointing developers to the
40 
+        // service worker/PWA documentation.
41 
+        navigator.serviceWorker.ready.then(() => {
42 
+          console.log(
43 
+            "This web app is being served cache-first by a service " +
44 
+              "worker. To learn more, visit https://goo.gl/SC7cgQ"
45 
+          );
46 
+        });
47 
+      } else {
48 
+        // Is not local host. Just register service worker
49 
+        registerValidSW(swUrl);
50 
+      }
51 
+    });
52 
+  }
53 
+}
54 
+
55 
+function registerValidSW(swUrl) {
56 
+  navigator.serviceWorker
57 
+    .register(swUrl)
58 
+    .then(registration => {
59 
+      registration.onupdatefound = () => {
60 
+        const installingWorker = registration.installing;
61 
+        installingWorker.onstatechange = () => {
62 
+          if (installingWorker.state === "installed") {
63 
+            if (navigator.serviceWorker.controller) {
64 
+              // At this point, the old content will have been purged and
65 
+              // the fresh content will have been added to the cache.
66 
+              // It's the perfect time to display a "New content is
67 
+              // available; please refresh." message in your web app.
68 
+              console.log("New content is available; please refresh.");
69 
+            } else {
70 
+              // At this point, everything has been precached.
71 
+              // It's the perfect time to display a
72 
+              // "Content is cached for offline use." message.
73 
+              console.log("Content is cached for offline use.");
74 
+            }
75 
+          }
76 
+        };
77 
+      };
78 
+    })
79 
+    .catch(error => {
80 
+      console.error("Error during service worker registration:", error);
81 
+    });
82 
+}
83 
+
84 
+function checkValidServiceWorker(swUrl) {
85 
+  // Check if the service worker can be found. If it can't reload the page.
86 
+  fetch(swUrl)
87 
+    .then(response => {
88 
+      // Ensure service worker exists, and that we really are getting a JS file.
89 
+      if (
90 
+        response.status === 404 ||
91 
+        response.headers.get("content-type").indexOf("javascript") === -1
92 
+      ) {
93 
+        // No service worker found. Probably a different app. Reload the page.
94 
+        navigator.serviceWorker.ready.then(registration => {
95 
+          registration.unregister().then(() => {
96 
+            window.location.reload();
97 
+          });
98 
+        });
99 
+      } else {
100 
+        // Service worker found. Proceed as normal.
101 
+        registerValidSW(swUrl);
102 
+      }
103 
+    })
104 
+    .catch(() => {
105 
+      console.log(
106 
+        "No internet connection found. App is running in offline mode."
107 
+      );
108 
+    });
109 
+}
110 
+
111 
+export function unregister() {
112 
+  if ("serviceWorker" in navigator) {
113 
+    navigator.serviceWorker.ready.then(registration => {
114 
+      registration.unregister();
115 
+    });
116 
+  }
117 
+}