Selaa lähdekoodia

styles: 更新样式,所有样式都以 comment 开头

node 6 vuotta sitten
vanhempi
commit
080531df87
53 muutettua tiedostoa jossa 1097 lisäystä ja 883 poistoa
  1. 26
    0
      CHANGELOG.md
  2. 2
    0
      README.md
  3. 190
    92
      lib/App.js
  4. 1
    1
      lib/App.js.map
  5. 2
    2
      lib/Comment.js
  6. 1
    1
      lib/Comment.js.map
  7. 9
    0
      lib/avatar.js
  8. 1
    0
      lib/avatar.js.map
  9. 2
    2
      lib/axios.js
  10. 1
    1
      lib/axios.js.map
  11. 30
    29
      lib/components/CommentBox/index.js
  12. 1
    1
      lib/components/CommentBox/index.js.map
  13. 31
    128
      lib/components/CommentInput/index.js
  14. 1
    1
      lib/components/CommentInput/index.js.map
  15. 24
    16
      lib/components/CommentList/index.js
  16. 1
    1
      lib/components/CommentList/index.js.map
  17. 3
    2
      lib/components/ContentItem/index.css
  18. 100
    67
      lib/components/ContentItem/index.js
  19. 1
    1
      lib/components/ContentItem/index.js.map
  20. 27
    27
      lib/components/Editor/Emoji.js
  21. 1
    1
      lib/components/Editor/Emoji.js.map
  22. 32
    34
      lib/components/Editor/Upload.js
  23. 1
    1
      lib/components/Editor/Upload.js.map
  24. 1
    1
      lib/components/Editor/index.css
  25. 199
    93
      lib/components/Editor/index.js
  26. 1
    1
      lib/components/Editor/index.js.map
  27. 8
    6
      lib/constant.js
  28. 1
    1
      lib/constant.js.map
  29. 111
    111
      lib/emoji.js
  30. 1
    1
      lib/emoji.js.map
  31. 7
    7
      lib/helper.js
  32. 1
    1
      lib/helper.js.map
  33. 102
    24
      lib/index.js
  34. 1
    1
      lib/index.js.map
  35. 11
    10
      lib/lang/index.js
  36. 1
    1
      lib/lang/index.js.map
  37. 25
    25
      lib/mock.js
  38. 1
    1
      lib/mock.js.map
  39. 14
    14
      lib/registerServiceWorker.js
  40. 1
    1
      lib/registerServiceWorker.js.map
  41. 1
    1
      package.json
  42. 13
    0
      src/App.css
  43. 14
    5
      src/App.js
  44. 0
    12
      src/CHANGELOG.md
  45. 11
    10
      src/components/CommentBox/index.css
  46. 2
    2
      src/components/CommentBox/index.js
  47. 2
    2
      src/components/CommentList/index.css
  48. 2
    2
      src/components/CommentList/index.js
  49. 19
    17
      src/components/ContentItem/index.css
  50. 27
    17
      src/components/ContentItem/index.js
  51. 23
    29
      src/components/Editor/index.css
  52. 9
    7
      src/components/Editor/index.js
  53. 0
    72
      src/mock.js

+ 26
- 0
CHANGELOG.md Näytä tiedosto

@@ -0,0 +1,26 @@
1
+# CHANGELOG
2
+
3
+## 0.2.0
4
+
5
+- [x] 添加 showHeader 属性
6
+- [x] 添加 onSubmit 属性
7
+- [x] 添加 btnSubmitText 属性
8
+- [x] 添加 btnLoading 属性
9
+- [x] 添加 btnDisable 属性
10
+- [x] 添加 button 属性
11
+- [x] 添加 emojiToolIcon 属性
12
+- [x] 添加 imageToolIcon 属性
13
+- [x] 完全解藕编辑器组件,由 Comment 实现评论逻辑
14
+- [x] fixed: 发呆表情变成了 undefined
15
+- [x] fixed: 输入表情之后,之前的文字被覆盖了
16
+- [x] fixed: 统一前后端错误提示
17
+
18
+## 0.1.0
19
+
20
+- [x] 不兼容更新。
21
+- [x] 添加了很多 `Props`
22
+- [x] 组件导出为 `Comment` 和 `Editor`
23
+
24
+
25
+
26
+

+ 2
- 0
README.md Näytä tiedosto

@@ -21,6 +21,8 @@ import Comment, { Editor } from 'comment';
21 21
 | API  | string | http://api.links123.net/comment/v1 | false | API 前缀|
22 22
 | showList | boolean |   true  | false     | 是否显示评论列表|
23 23
 | showEditor | boolean |   true  | false     | 是否显示评论输入框|
24
+| showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
25
+
24 26
 
25 27
 
26 28
 ##### Editor

+ 190
- 92
lib/App.js Näytä tiedosto

@@ -1,11 +1,15 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 exports.Editor = undefined;
7 7
 
8
-var _message2 = require("antd/es/message");
8
+var _tag = require('antd/es/tag');
9
+
10
+var _tag2 = _interopRequireDefault(_tag);
11
+
12
+var _message2 = require('antd/es/message');
9 13
 
10 14
 var _message3 = _interopRequireDefault(_message2);
11 15
 
@@ -13,39 +17,45 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
13 17
 
14 18
 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; }; }();
15 19
 
16
-require("antd/es/message/style/css");
20
+require('antd/es/tag/style/css');
21
+
22
+require('antd/es/message/style/css');
17 23
 
18
-var _react = require("react");
24
+var _react = require('react');
19 25
 
20 26
 var _react2 = _interopRequireDefault(_react);
21 27
 
22
-var _propTypes = require("prop-types");
28
+var _propTypes = require('prop-types');
23 29
 
24 30
 var _propTypes2 = _interopRequireDefault(_propTypes);
25 31
 
26
-var _axios = require("./axios");
32
+var _axios = require('./axios');
27 33
 
28 34
 var _axios2 = _interopRequireDefault(_axios);
29 35
 
30
-var _constant = require("./constant");
36
+var _constant = require('./constant');
31 37
 
32
-var _Comment = require("./Comment");
38
+var _Comment = require('./Comment');
33 39
 
34
-var _helper = require("./helper");
40
+var _helper = require('./helper');
35 41
 
36
-var _CommentInput = require("./components/CommentInput");
42
+var _CommentInput = require('./components/CommentInput');
37 43
 
38 44
 var _CommentInput2 = _interopRequireDefault(_CommentInput);
39 45
 
40
-var _CommentList = require("./components/CommentList");
46
+var _CommentList = require('./components/CommentList');
41 47
 
42 48
 var _CommentList2 = _interopRequireDefault(_CommentList);
43 49
 
44
-var _Editor = require("./components/Editor");
50
+var _Editor = require('./components/Editor');
45 51
 
46 52
 var _Editor2 = _interopRequireDefault(_Editor);
47 53
 
48
-require("./App.css");
54
+var _lang = require('./lang');
55
+
56
+var _lang2 = _interopRequireDefault(_lang);
57
+
58
+require('./App.css');
49 59
 
50 60
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
51 61
 
@@ -82,12 +92,13 @@ var App = function (_Component) {
82 92
     _this.sCreateComment = _this.sCreateComment.bind(_this);
83 93
     _this.sCreateReply = _this.sCreateReply.bind(_this);
84 94
     _this.sCommentFavor = _this.sCommentFavor.bind(_this);
95
+    _this.sReplyFavor = _this.sReplyFavor.bind(_this);
85 96
     _this.sOssSts = _this.sOssSts.bind(_this);
86 97
     return _this;
87 98
   }
88 99
 
89 100
   _createClass(App, [{
90
-    key: "componentDidMount",
101
+    key: 'componentDidMount',
91 102
     value: function componentDidMount() {}
92 103
 
93 104
     /**
@@ -97,7 +108,7 @@ var App = function (_Component) {
97 108
      */
98 109
 
99 110
   }, {
100
-    key: "handleChangeLoading",
111
+    key: 'handleChangeLoading',
101 112
     value: function handleChangeLoading(key, value) {
102 113
       var loading = this.state.loading;
103 114
 
@@ -110,7 +121,7 @@ var App = function (_Component) {
110 121
      */
111 122
 
112 123
   }, {
113
-    key: "sGetComment",
124
+    key: 'sGetComment',
114 125
     value: function sGetComment() {
115 126
       var _this2 = this;
116 127
 
@@ -118,13 +129,13 @@ var App = function (_Component) {
118 129
           _ref$page = _ref.page,
119 130
           page = _ref$page === undefined ? 1 : _ref$page;
120 131
 
121
-      this.handleChangeLoading("sGetComment", true);
132
+      this.handleChangeLoading('sGetComment', true);
122 133
       var _props = this.props,
123 134
           API = _props.API,
124 135
           type = _props.type,
125 136
           businessId = _props.businessId;
126 137
 
127
-      _axios2.default.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
138
+      _axios2.default.get(API + '/comments?type=' + type + '&business_id=' + businessId + '&page=' + page + '&limit=' + _constant.LIMIT).then(function (response) {
128 139
         var _response$data = response.data,
129 140
             list = _response$data.list,
130 141
             page = _response$data.page,
@@ -147,19 +158,19 @@ var App = function (_Component) {
147 158
             total: total
148 159
           });
149 160
         } else {
150
-          _message3.default.info("没有更多评论了");
161
+          _message3.default.info('没有更多评论了');
151 162
           _this2.setState({
152 163
             isNoMoreComment: true
153 164
           });
154 165
         }
155 166
       }).catch(function (error) {
156 167
         if (error.response && error.response.data && error.response.data.msg) {
157
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
168
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
158 169
           return;
159 170
         }
160
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
171
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
161 172
       }).finally(function () {
162
-        _this2.handleChangeLoading("sGetComment", false);
173
+        _this2.handleChangeLoading('sGetComment', false);
163 174
       });
164 175
     }
165 176
 
@@ -168,7 +179,7 @@ var App = function (_Component) {
168 179
      */
169 180
 
170 181
   }, {
171
-    key: "sGetReply",
182
+    key: 'sGetReply',
172 183
     value: function sGetReply() {
173 184
       var _this3 = this;
174 185
 
@@ -177,27 +188,29 @@ var App = function (_Component) {
177 188
           _ref2$page = _ref2.page,
178 189
           page = _ref2$page === undefined ? 1 : _ref2$page;
179 190
 
180
-      this.handleChangeLoading("sGetReply", true);
191
+      this.handleChangeLoading('sGetReply', true);
181 192
       var API = this.props.API;
182 193
 
183
-      _axios2.default.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
184
-        var replies = response.data.list;
185
-
186
-        if (!replies) {
187
-          _message3.default.info("没有更多数据了!");
194
+      _axios2.default.get(API + '/replies?comment_id=' + commentId + '&page=' + page + '&limit=' + _constant.LIMIT).then(function (response) {
195
+        if (!response.data.list) {
196
+          _message3.default.info('没有更多数据了!');
188 197
         }
189 198
         var list = _this3.state.list.map(function (item) {
190 199
           if (item.id === commentId) {
191 200
             if (!item.replies) item.replies = [];
192
-            if (replies) {
201
+            if (response.data.list) {
193 202
               if (page === 1) {
194 203
                 // 如果当前页数为第一页,则清空当前所有的 replies
195 204
                 // 并将获取到的 replies 存放在 state
196
-                item.replies = replies;
205
+                item.replies = response.data.list;
197 206
               } else {
198
-                item.replies = item.replies.concat(replies);
207
+                item.replies = item.replies.filter(function (o) {
208
+                  return !o.isTemporary;
209
+                }).concat(response.data.list);
199 210
                 // 如果当前页数非第一页,则合并 replies
200 211
               }
212
+              item.reply_count = response.data.total;
213
+              item.reply_page = response.data.page;
201 214
             } else {
202 215
               item.isNoMoreReply = true;
203 216
             }
@@ -207,34 +220,37 @@ var App = function (_Component) {
207 220
         _this3.setState({ list: list });
208 221
       }).catch(function (error) {
209 222
         if (error.response && error.response.data && error.response.data.msg) {
210
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
223
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
211 224
           return;
212 225
         }
213
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
226
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
214 227
       }).finally(function () {
215
-        _this3.handleChangeLoading("sGetReply", false);
228
+        _this3.handleChangeLoading('sGetReply', false);
216 229
       });
217 230
     }
218 231
 
219 232
     /**
220 233
      * 添加评论
221
-     * @param {string} content comment content
234
+     * @param {object} {content} comment content
222 235
      */
223 236
 
224 237
   }, {
225
-    key: "sCreateComment",
226
-    value: function sCreateComment(content) {
238
+    key: 'sCreateComment',
239
+    value: function sCreateComment() {
227 240
       var _this4 = this;
228 241
 
229
-      if (!content) return _message3.default.error("评论内容不能为空 ");
230
-      this.handleChangeLoading("sCreateComment", true);
242
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
243
+          content = _ref3.content;
244
+
245
+      if (!content) return _message3.default.error('评论内容不能为空 ');
246
+      this.handleChangeLoading('sCreateComment', true);
231 247
       var _props2 = this.props,
232 248
           API = _props2.API,
233 249
           type = _props2.type,
234 250
           businessId = _props2.businessId;
235 251
 
236
-      (0, _axios2.default)(API + "/comments", {
237
-        method: "post",
252
+      (0, _axios2.default)(API + '/comments', {
253
+        method: 'post',
238 254
         data: {
239 255
           type: type,
240 256
           business_id: businessId,
@@ -242,24 +258,26 @@ var App = function (_Component) {
242 258
         },
243 259
         withCredentials: true
244 260
       }).then(function (response) {
245
-        _message3.default.success("评论成功!");
261
+        _message3.default.success('评论成功!');
246 262
         // 将数据写入到 list 中
247 263
         // 临时插入
248 264
         // 等到获取数据之后,删除临时数据
249
-        var list = _this4.state.list;
265
+        var _state = _this4.state,
266
+            list = _state.list,
267
+            total = _state.total;
250 268
 
251 269
         list.unshift(_extends({}, response.data, {
252 270
           isTemporary: true // 临时的数据
253 271
         }));
254
-        _this4.setState({ list: list });
272
+        _this4.setState({ list: list, total: total + 1 });
255 273
       }).catch(function (error) {
256 274
         if (error.response && error.response.data && error.response.data.msg) {
257
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
275
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
258 276
           return;
259 277
         }
260
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
278
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
261 279
       }).finally(function () {
262
-        _this4.handleChangeLoading("sCreateComment", false);
280
+        _this4.handleChangeLoading('sCreateComment', false);
263 281
       });
264 282
     }
265 283
 
@@ -270,62 +288,67 @@ var App = function (_Component) {
270 288
      */
271 289
 
272 290
   }, {
273
-    key: "sCreateReply",
291
+    key: 'sCreateReply',
274 292
     value: function sCreateReply(data, cb) {
275 293
       var _this5 = this;
276 294
 
277
-      if (!data.content) return _message3.default.error("回复内容不能为空 ");
278
-      this.handleChangeLoading("sCreateReply", true);
295
+      console.log('list: ', this.state.list);
296
+
297
+      if (!data.content) return _message3.default.error('回复内容不能为空 ');
298
+      this.handleChangeLoading('sCreateReply', true);
279 299
       var API = this.props.API;
280 300
 
281
-      (0, _axios2.default)(API + "/replies", {
282
-        method: "post",
301
+      (0, _axios2.default)(API + '/replies', {
302
+        method: 'post',
283 303
         data: data,
284 304
         withCredentials: true
285 305
       }).then(function (response) {
286
-        // // 将该条数据插入到 list 中
287
-        // const list = this.state.list.map(item => {
288
-        //   if (item.id === data.comment_id) {
289
-        //     if (!item.replies) item.replies = [];
290
-        //     item.reply_count += 1
291
-        //     item.replies.unshift(response.data);
292
-        //   }
293
-        //   return item;
294
-        // });
295
-        // this.setState({ list });
296
-        _this5.sGetReply({ commentId: data.comment_id });
297
-        _message3.default.success("回复成功!");
306
+        _message3.default.success('回复成功!');
298 307
         if ((0, _helper.isFunction)(cb)) cb();
308
+        // 将数据写入到 list 中
309
+        // 临时插入
310
+        // 等到获取数据之后,删除临时数据
311
+        var list = _this5.state.list.map(function (item) {
312
+          if (item.id === data.comment_id) {
313
+            if (!item.replies) item.replies = [];
314
+            item.replies.push(_extends({}, response.data, {
315
+              isTemporary: true // 临时的数据
316
+            }));
317
+            item.reply_count += 1;
318
+          }
319
+          return item;
320
+        });
321
+        _this5.setState({ list: list });
299 322
       }).catch(function (error) {
300 323
         if (error.response && error.response.data && error.response.data.msg) {
301
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
324
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
302 325
           return;
303 326
         }
304
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
327
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
305 328
       }).finally(function () {
306
-        _this5.handleChangeLoading("sCreateReply", false);
329
+        _this5.handleChangeLoading('sCreateReply', false);
307 330
       });
308 331
     }
309 332
 
310 333
     /**
311
-     * 点赞/取消点赞
334
+     * 评论 点赞/取消点赞
312 335
      * @param {string} commentId { commentId }
313 336
      * @param {boolean} favored   是否已经点过赞
314 337
      */
315 338
 
316 339
   }, {
317
-    key: "sCommentFavor",
340
+    key: 'sCommentFavor',
318 341
     value: function sCommentFavor(commentId, favored) {
319 342
       var _this6 = this;
320 343
 
321
-      this.handleChangeLoading("sCommentFavor", true);
344
+      this.handleChangeLoading('sCommentFavor', true);
322 345
       var API = this.props.API;
323 346
 
324
-      (0, _axios2.default)(API + "/comments/" + commentId + "/favor", {
325
-        method: favored ? "delete" : "put",
347
+      (0, _axios2.default)(API + '/comments/' + commentId + '/favor', {
348
+        method: favored ? 'delete' : 'put',
326 349
         withCredentials: true
327 350
       }).then(function (response) {
328
-        _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
351
+        _message3.default.success(favored ? '取消点赞成功!' : '点赞成功!');
329 352
         // 更新 list 中的该项数据的 favored
330 353
         var list = _this6.state.list.map(function (item) {
331 354
           if (item.id === commentId) {
@@ -337,12 +360,57 @@ var App = function (_Component) {
337 360
         _this6.setState({ list: list });
338 361
       }).catch(function (error) {
339 362
         if (error.response && error.response.data && error.response.data.msg) {
340
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
363
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
341 364
           return;
342 365
         }
343
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
366
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
344 367
       }).finally(function () {
345
-        _this6.handleChangeLoading("sCommentFavor", false);
368
+        _this6.handleChangeLoading('sCommentFavor', false);
369
+      });
370
+    }
371
+
372
+    /**
373
+     * 回复 点赞/取消点赞
374
+     * @param {string} replyId  replyId
375
+     * @param {string} commentId  commentId
376
+     * @param {boolean} favored   是否已经点过赞
377
+     */
378
+
379
+  }, {
380
+    key: 'sReplyFavor',
381
+    value: function sReplyFavor(replyId, commentId, favored) {
382
+      var _this7 = this;
383
+
384
+      this.handleChangeLoading('sReplyFavor', true);
385
+      console.log('replyId, commentId ', replyId, commentId);
386
+
387
+      var API = this.props.API;
388
+
389
+      (0, _axios2.default)(API + '/replies/' + replyId + '/favor', {
390
+        method: favored ? 'delete' : 'put',
391
+        withCredentials: true
392
+      }).then(function (response) {
393
+        console.log('response: ', response);
394
+
395
+        _message3.default.success(favored ? '取消点赞成功!' : '点赞成功!');
396
+        // TODO: (2018.07.20 node) 对评论的回复点赞,报错
397
+        // // 更新 list 中的该项数据的 favored
398
+        // const list = this.state.list.map(item => {
399
+        //   if (item.id === replyId) {
400
+        //     item.favored = !favored;
401
+        //     item.favor_count += favored ? -1 : 1;
402
+        //   }
403
+        //   return item;
404
+        // });
405
+        // this.setState({ list });
406
+      }).catch(function (error) {
407
+        if (error.response && error.response.data && error.response.data.msg) {
408
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
409
+          return;
410
+        }
411
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
412
+      }).finally(function () {
413
+        _this7.handleChangeLoading('sReplyFavor', false);
346 414
       });
347 415
     }
348 416
 
@@ -351,33 +419,34 @@ var App = function (_Component) {
351 419
      */
352 420
 
353 421
   }, {
354
-    key: "sOssSts",
422
+    key: 'sOssSts',
355 423
     value: function sOssSts() {
356
-      var _this7 = this;
424
+      var _this8 = this;
357 425
 
358
-      this.handleChangeLoading("sOssSts", true);
426
+      this.handleChangeLoading('sOssSts', true);
359 427
       var API = this.props.API;
360 428
 
361
-      _axios2.default.get(API + "/oss/sts").then(function (response) {
362
-        _this7.setState({ oss: _extends({}, response.data) });
429
+      _axios2.default.get(API + '/oss/sts').then(function (response) {
430
+        _this8.setState({ oss: _extends({}, response.data) });
363 431
       }).catch(function (error) {
364 432
         if (error.response && error.response.data && error.response.data.msg) {
365
-          _message3.default.error(error.response.data.msg || _constant.ERROR_DEFAULT);
433
+          _message3.default.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
366 434
           return;
367 435
         }
368
-        _message3.default.error(error.message || _constant.ERROR_DEFAULT);
436
+        _message3.default.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
369 437
       }).finally(function () {
370
-        _this7.handleChangeLoading("sOssSts", false);
438
+        _this8.handleChangeLoading('sOssSts', false);
371 439
       });
372 440
     }
373 441
   }, {
374
-    key: "render",
442
+    key: 'render',
375 443
     value: function render() {
376 444
       // 添加到 Context 的数据
377 445
       var value = _extends({}, this.state, this.props, {
378 446
         sCreateComment: this.sCreateComment,
379 447
         sGetComment: this.sGetComment,
380 448
         sCommentFavor: this.sCommentFavor,
449
+        sReplyFavor: this.sReplyFavor,
381 450
         sCreateReply: this.sCreateReply,
382 451
         sGetReply: this.sGetReply,
383 452
         sOssSts: this.sOssSts
@@ -387,11 +456,38 @@ var App = function (_Component) {
387 456
         _Comment.CommentContext.Provider,
388 457
         { value: value },
389 458
         _react2.default.createElement(
390
-          "div",
391
-          { className: "comment" },
459
+          'div',
460
+          { className: 'comment' },
461
+          this.props.showHeader && _react2.default.createElement(
462
+            'div',
463
+            { style: { marginBottom: 15 } },
464
+            _react2.default.createElement(
465
+              _tag2.default,
466
+              {
467
+                style: {
468
+                  border: '1px solid #CECECE',
469
+                  borderRadius: 0,
470
+                  color: '#666'
471
+                }
472
+              },
473
+              '\u7559\u8A00'
474
+            ),
475
+            _react2.default.createElement(
476
+              'span',
477
+              {
478
+                style: { color: '#5198EB', marginRight: 15, marginLeft: 5 }
479
+              },
480
+              '\u53E3\u7891'
481
+            ),
482
+            _react2.default.createElement(
483
+              'span',
484
+              { style: { color: '#666' } },
485
+              '(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)'
486
+            )
487
+          ),
392 488
           this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
393 489
           this.props.showList && _react2.default.createElement(
394
-            "div",
490
+            'div',
395 491
             { style: { marginTop: 20 } },
396 492
             _react2.default.createElement(_CommentList2.default, null)
397 493
           )
@@ -408,13 +504,15 @@ App.propTypes = {
408 504
   businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
409 505
   API: _propTypes2.default.string, // 评论的 API 前缀
410 506
   showList: _propTypes2.default.bool, // 是否显示评论列表
411
-  showEditor: _propTypes2.default.bool // 是否显示评论输入框
507
+  showEditor: _propTypes2.default.bool, // 是否显示评论输入框
508
+  showHeader: _propTypes2.default.bool // 是否显示评论顶部的提示
412 509
 };
413 510
 
414 511
 App.defaultProps = {
415
-  API: "http://api.links123.net/comment/v1",
512
+  API: 'http://api.links123.net/comment/v1',
416 513
   showList: true,
417
-  showEditor: true
514
+  showEditor: true,
515
+  showHeader: true
418 516
 };
419 517
 
420 518
 exports.Editor = _Editor2.default;

+ 1
- 1
lib/App.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 2
- 2
lib/Comment.js Näytä tiedosto

@@ -1,4 +1,4 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
@@ -9,7 +9,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
9 9
 
10 10
 exports.Comment = Comment;
11 11
 
12
-var _react = require("react");
12
+var _react = require('react');
13 13
 
14 14
 var _react2 = _interopRequireDefault(_react);
15 15
 

+ 1
- 1
lib/Comment.js.map Näytä tiedosto

@@ -1 +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"]}
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"]}

+ 9
- 0
lib/avatar.js
File diff suppressed because it is too large
Näytä tiedosto


+ 1
- 0
lib/avatar.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 2
- 2
lib/axios.js Näytä tiedosto

@@ -1,10 +1,10 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _axios = require("axios");
7
+var _axios = require('axios');
8 8
 
9 9
 var _axios2 = _interopRequireDefault(_axios);
10 10
 

+ 1
- 1
lib/axios.js.map Näytä tiedosto

@@ -1 +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"]}
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"]}

+ 30
- 29
lib/components/CommentBox/index.js Näytä tiedosto

@@ -1,34 +1,34 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _icon = require("antd/es/icon");
7
+var _icon = require('antd/es/icon');
8 8
 
9 9
 var _icon2 = _interopRequireDefault(_icon);
10 10
 
11 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 12
 
13
-require("antd/es/icon/style/css");
13
+require('antd/es/icon/style/css');
14 14
 
15
-var _react = require("react");
15
+var _react = require('react');
16 16
 
17 17
 var _react2 = _interopRequireDefault(_react);
18 18
 
19
-var _propTypes = require("prop-types");
19
+var _propTypes = require('prop-types');
20 20
 
21 21
 var _propTypes2 = _interopRequireDefault(_propTypes);
22 22
 
23
-var _Comment = require("../../Comment");
23
+var _Comment = require('../../Comment');
24 24
 
25 25
 var _Comment2 = _interopRequireDefault(_Comment);
26 26
 
27
-var _ContentItem = require("./../ContentItem");
27
+var _ContentItem = require('./../ContentItem');
28 28
 
29 29
 var _ContentItem2 = _interopRequireDefault(_ContentItem);
30 30
 
31
-require("./index.css");
31
+require('./index.css');
32 32
 
33 33
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
34 34
 
@@ -63,7 +63,7 @@ var CommentBox = function (_Component) {
63 63
 
64 64
 
65 65
   _createClass(CommentBox, [{
66
-    key: "handleToggleReply",
66
+    key: 'handleToggleReply',
67 67
     value: function handleToggleReply() {
68 68
       this.setState({ showReply: !this.state.showReply });
69 69
     }
@@ -74,7 +74,7 @@ var CommentBox = function (_Component) {
74 74
      */
75 75
 
76 76
   }, {
77
-    key: "handleGetMoreReply",
77
+    key: 'handleGetMoreReply',
78 78
     value: function handleGetMoreReply(commentId) {
79 79
       // 从第一页开始获取评论
80 80
       var page = this.state.page;
@@ -86,12 +86,13 @@ var CommentBox = function (_Component) {
86 86
     /**
87 87
      * 渲染回复 DOM
88 88
      * @param {array} replies 回复列表
89
+     * @param {number} replies 回复的数量
89 90
      * @param {boolean} isNoMoreReply 是否没有更多回复
90 91
      */
91 92
 
92 93
   }, {
93
-    key: "renderReplies",
94
-    value: function renderReplies(replies, isNoMoreReply) {
94
+    key: 'renderReplies',
95
+    value: function renderReplies(replies, replyCount, isNoMoreReply) {
95 96
       var _this2 = this;
96 97
 
97 98
       var commentId = this.props.commentId;
@@ -100,7 +101,7 @@ var CommentBox = function (_Component) {
100 101
       if (showReply && replies && replies.length) {
101 102
         var len = replies.length;
102 103
         return _react2.default.createElement(
103
-          "div",
104
+          'div',
104 105
           { style: { marginLeft: 50 } },
105 106
           replies.map(function (item, index) {
106 107
             if (index === len - 1) {
@@ -109,28 +110,28 @@ var CommentBox = function (_Component) {
109 110
                 replyId: item.id,
110 111
                 key: item.id,
111 112
                 content: item,
112
-                type: "reply"
113
+                action: 'replyToReply' // 回复的回复
113 114
               }), _react2.default.createElement(
114
-                "div",
115
-                { className: "moreBox", key: "show_more_button" },
116
-                !isNoMoreReply && _react2.default.createElement(
117
-                  "span",
115
+                'div',
116
+                { className: 'moreBox', key: 'show_more_button' },
117
+                !isNoMoreReply && replyCount !== len && _react2.default.createElement(
118
+                  'span',
118 119
                   {
119
-                    className: "showMore",
120
+                    className: 'showMore',
120 121
                     onClick: function onClick() {
121 122
                       return _this2.handleGetMoreReply(commentId);
122 123
                     }
123 124
                   },
124
-                  "\u67E5\u770B\u66F4\u591A\u56DE\u590D"
125
+                  '\u67E5\u770B\u66F4\u591A\u56DE\u590D'
125 126
                 ),
126 127
                 _react2.default.createElement(
127
-                  "a",
128
+                  'a',
128 129
                   {
129
-                    style: { float: "right" },
130
+                    style: { float: 'right' },
130 131
                     onClick: _this2.handleToggleReply
131 132
                   },
132
-                  _react2.default.createElement(_icon2.default, { type: "up" }),
133
-                  " \u6536\u8D77\u56DE\u590D"
133
+                  _react2.default.createElement(_icon2.default, { type: 'up' }),
134
+                  ' \u6536\u8D77\u56DE\u590D'
134 135
                 )
135 136
               )];
136 137
             }
@@ -139,7 +140,7 @@ var CommentBox = function (_Component) {
139 140
               replyId: item.id,
140 141
               key: item.id,
141 142
               content: item,
142
-              type: "reply"
143
+              action: 'replyToReply' // 评论的回复
143 144
             });
144 145
           })
145 146
         );
@@ -147,22 +148,22 @@ var CommentBox = function (_Component) {
147 148
       return null;
148 149
     }
149 150
   }, {
150
-    key: "render",
151
+    key: 'render',
151 152
     value: function render() {
152 153
       var content = this.props.content;
153 154
       var showReply = this.state.showReply;
154 155
 
155 156
       return _react2.default.createElement(
156
-        "div",
157
+        'div',
157 158
         null,
158 159
         _react2.default.createElement(_ContentItem2.default, {
159 160
           content: content,
160 161
           onShowReply: this.handleToggleReply,
161 162
           showReply: showReply,
162 163
           commentId: content.id,
163
-          type: "comment"
164
+          action: 'reply' // 评论的回复
164 165
         }),
165
-        this.renderReplies(content.replies, content.isNoMoreReply)
166
+        this.renderReplies(content.replies, content.reply_count, content.isNoMoreReply)
166 167
       );
167 168
     }
168 169
   }]);

+ 1
- 1
lib/components/CommentBox/index.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 31
- 128
lib/components/CommentInput/index.js Näytä tiedosto

@@ -1,4 +1,4 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
@@ -8,17 +8,15 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
8 8
 
9 9
 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; }; }();
10 10
 
11
-var _react = require("react");
11
+var _react = require('react');
12 12
 
13 13
 var _react2 = _interopRequireDefault(_react);
14 14
 
15
-var _propTypes = require("prop-types");
15
+var _propTypes = require('prop-types');
16 16
 
17 17
 var _propTypes2 = _interopRequireDefault(_propTypes);
18 18
 
19
-var _constant = require("../../constant");
20
-
21
-var _Comment = require("../../Comment");
19
+var _Comment = require('../../Comment');
22 20
 
23 21
 var _Comment2 = _interopRequireDefault(_Comment);
24 22
 
@@ -38,160 +36,63 @@ var CommentInput = function (_Component) {
38 36
 
39 37
     var _this = _possibleConstructorReturn(this, (CommentInput.__proto__ || Object.getPrototypeOf(CommentInput)).call(this, props));
40 38
 
41
-    _this.state = {
42
-      value: "",
43
-
44
-      fileList: [], // 图片列表
45
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
46
-    };
47
-    _this.handleChange = _this.handleChange.bind(_this);
39
+    _this.state = {};
48 40
     _this.handleSubmit = _this.handleSubmit.bind(_this);
49
-    _this.handleChangeFileList = _this.handleChangeFileList.bind(_this);
50
-    _this.handleChangeEmoji = _this.handleChangeEmoji.bind(_this);
51
-    _this.handleUpload = _this.handleUpload.bind(_this);
52 41
     return _this;
53 42
   }
54 43
 
55 44
   _createClass(CommentInput, [{
56
-    key: "handleChange",
57
-    value: function handleChange(value) {
58
-      this.setState({ value: value });
59
-    }
60
-  }, {
61
-    key: "handleChangeFileList",
62
-    value: function handleChangeFileList(fileList) {
63
-      this.setState({ fileList: fileList });
64
-    }
65
-  }, {
66
-    key: "handleChangeEmoji",
67
-    value: function handleChangeEmoji(emojiId) {
68
-      var value = this.state.value;
69
-
70
-      value += "[" + emojiId + "]";
71
-      this.setState({ value: value });
72
-      _react2.default.Children.forEach(this.props.content, function (child) {
73
-        // 如果 Editor 的父组件传入了 onChange 事件,则需要将改变之后的值传递给父组件
74
-        if (child.props.onChange) {
75
-          child.props.onChange(value);
76
-        }
77
-      });
78
-    }
79
-  }, {
80
-    key: "handleUpload",
81
-    value: function handleUpload(_ref) {
82
-      var uid = _ref.uid,
83
-          path = _ref.path;
84
-      var fileMap = this.state.fileMap;
85
-
86
-      fileMap[uid] = path;
87
-      this.setState({ fileMap: fileMap });
88
-    }
89
-  }, {
90
-    key: "handleSubmit",
91
-    value: function handleSubmit() {
92
-      var _state = this.state,
93
-          value = _state.value,
94
-          fileMap = _state.fileMap,
95
-          fileList = _state.fileList;
96
-
97
-      if (fileList.length) {
98
-        value += "<br/>";
99
-        fileList.forEach(function (item) {
100
-          value += "[" + _constant.OSS_LINK + fileMap[item.uid] + "]";
101
-        });
102
-      }
103
-
45
+    key: 'handleSubmit',
46
+    value: function handleSubmit(value) {
104 47
       var _props = this.props,
105
-          type = _props.type,
48
+          action = _props.action,
106 49
           commentId = _props.commentId,
107 50
           replyId = _props.replyId,
108
-          handleToggleInput = _props.handleToggleInput;
51
+          callback = _props.callback;
109 52
 
110
-      if (type === "normal") {
53
+      if (action === 'comment') {
111 54
         this.props.app.sCreateComment({
112 55
           content: value
113 56
         });
114
-      } else if (type === "comment") {
57
+      } else if (action === 'reply') {
115 58
         this.props.app.sCreateReply({
116 59
           comment_id: commentId,
117 60
           content: value
118 61
         }, function () {
119
-          return handleToggleInput();
62
+          return callback && callback();
120 63
         });
121
-      } else if (type === "reply") {
64
+      } else if (action === 'replyToReply') {
122 65
         this.props.app.sCreateReply({
123 66
           comment_id: commentId,
124 67
           content: value,
125 68
           reply_id: replyId
126 69
         }, function () {
127
-          return handleToggleInput();
70
+          return callback && callback();
128 71
         });
129 72
       }
130
-
131
-      _react2.default.Children.forEach(this.props.content, function (child) {
132
-        // 如果 Editor 的父组件传入了 onSubmit 事件,则需要将改变之后的值传递给父组件
133
-        if (child.props.onSubmit) {
134
-          child.props.onSubmit(value);
135
-        }
136
-      });
137 73
     }
138 74
   }, {
139
-    key: "render",
75
+    key: 'render',
140 76
     value: function render() {
141 77
       var _this2 = this;
142 78
 
143
-      var type = this.props.type;
144
-      var _state2 = this.state,
145
-          value = _state2.value,
146
-          fileList = _state2.fileList;
147
-
148
-
149 79
       var childrenWithProps = _react2.default.Children.map(this.props.content, function (child) {
150 80
         return _react2.default.cloneElement(child, _extends({
151
-          value: value,
152
-          fileList: fileList,
153
-          onChange: _this2.handleChange,
154
-          onSubmit: _this2.handleSubmit,
155
-          onChangeFileList: _this2.handleChangeFileList,
156
-          onChangeEmoji: _this2.handleChangeEmoji,
157
-          onUpload: _this2.handleUpload,
158
-          loading: _this2.props.app.loading.sCreateComment
159
-        }, child.props));
81
+          // 编辑器本身不提交值,但 CommentInput 会提交
82
+          // CommentInput 主要是负责评论的业务逻辑,提交评论和回复
83
+          // 默认使用 CommentInput 的 onSubmit 来提交评论
84
+          // 但也可以使用 Editor 的 props 来覆盖 onSubmit
85
+          onSubmit: _this2.handleSubmit
86
+        }, child.props, {
87
+          // 如果当前的编辑器不是“评论”,则编辑器高度减小一些
88
+          rows: _this2.props.action === 'comment' ? child.props.rows : child.props.rows - 1
89
+        }));
160 90
       });
161 91
 
162 92
       return _react2.default.createElement(
163
-        "div",
93
+        'div',
164 94
         null,
165
-        type === "normal" ? _react2.default.createElement(
166
-          "div",
167
-          null,
168
-          _react2.default.createElement(
169
-            "span",
170
-            {
171
-              style: {
172
-                border: "1px solid #CECECE",
173
-                color: "#666",
174
-                padding: "2px 3px"
175
-              }
176
-            },
177
-            "\u56DE\u590D"
178
-          ),
179
-          _react2.default.createElement(
180
-            "span",
181
-            { style: { marginLeft: "20px", color: "#5198EB" } },
182
-            "\u53E3\u7891",
183
-            _react2.default.createElement(
184
-              "span",
185
-              { style: { marginLeft: "20px", color: "#666666" } },
186
-              "(\u5168\u7AD9\u6311\u51FA\u6BDB\u75C5\u6216\u63D0\u51FA\u5408\u7406\u5EFA\u8BAE\uFF0C\u5956\u52B110\u5230100\u5143\u7EA2\u5305)"
187
-            )
188
-          )
189
-        ) : null,
190
-        _react2.default.createElement(
191
-          "div",
192
-          { style: { marginTop: 40 } },
193
-          childrenWithProps
194
-        )
95
+        childrenWithProps
195 96
       );
196 97
     }
197 98
   }]);
@@ -200,12 +101,14 @@ var CommentInput = function (_Component) {
200 101
 }(_react.Component);
201 102
 
202 103
 CommentInput.propTypes = {
203
-  // normal 有切换回复/口碑的 header ; comment 评论输入框 / reply 回复输入框
204
-  type: _propTypes2.default.oneOf(["normal", "comment", "reply"])
104
+  // comment 评论
105
+  // reply 评论的回复
106
+  // replyToReply 回复的回复
107
+  action: _propTypes2.default.oneOf(['comment', 'reply', 'replyToReply'])
205 108
 };
206 109
 
207 110
 CommentInput.defaultProps = {
208
-  type: "normal"
111
+  action: 'comment'
209 112
 };
210 113
 
211 114
 exports.default = (0, _Comment2.default)(CommentInput);

+ 1
- 1
lib/components/CommentInput/index.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 24
- 16
lib/components/CommentList/index.js Näytä tiedosto

@@ -1,30 +1,30 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _spin = require("antd/es/spin");
7
+var _spin = require('antd/es/spin');
8 8
 
9 9
 var _spin2 = _interopRequireDefault(_spin);
10 10
 
11 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 12
 
13
-require("antd/es/spin/style/css");
13
+require('antd/es/spin/style/css');
14 14
 
15
-var _react = require("react");
15
+var _react = require('react');
16 16
 
17 17
 var _react2 = _interopRequireDefault(_react);
18 18
 
19
-var _Comment = require("../../Comment");
19
+var _Comment = require('../../Comment');
20 20
 
21 21
 var _Comment2 = _interopRequireDefault(_Comment);
22 22
 
23
-var _CommentBox = require("../CommentBox");
23
+var _CommentBox = require('../CommentBox');
24 24
 
25 25
 var _CommentBox2 = _interopRequireDefault(_CommentBox);
26 26
 
27
-require("./index.css");
27
+require('./index.css');
28 28
 
29 29
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30 30
 
@@ -47,43 +47,51 @@ var CommentList = function (_Component) {
47 47
   }
48 48
 
49 49
   _createClass(CommentList, [{
50
-    key: "componentWillMount",
50
+    key: 'componentWillMount',
51 51
     value: function componentWillMount() {
52 52
       this.props.app.sGetComment();
53 53
     }
54 54
   }, {
55
-    key: "render",
55
+    key: 'render',
56 56
     value: function render() {
57 57
       var _props$app = this.props.app,
58 58
           list = _props$app.list,
59
+          total = _props$app.total,
59 60
           page = _props$app.page,
60 61
           loading = _props$app.loading,
61 62
           isNoMoreComment = _props$app.isNoMoreComment,
62 63
           sGetComment = _props$app.sGetComment;
63 64
 
64 65
 
65
-      var spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
66
+      var spinning = Boolean(loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor);
66 67
       return _react2.default.createElement(
67
-        "div",
68
+        'div',
68 69
         null,
69 70
         _react2.default.createElement(
70 71
           _spin2.default,
71 72
           { spinning: spinning },
73
+          _react2.default.createElement(
74
+            'div',
75
+            null,
76
+            '\u5171 ',
77
+            total,
78
+            ' \u6761\u8BC4\u8BBA'
79
+          ),
72 80
           list.map(function (item) {
73 81
             return _react2.default.createElement(_CommentBox2.default, { content: item, key: item.id, commentId: item.id });
74 82
           }),
75
-          !isNoMoreComment && _react2.default.createElement(
76
-            "div",
83
+          !isNoMoreComment && list.length !== total && _react2.default.createElement(
84
+            'div',
77 85
             {
78
-              className: "showMore",
86
+              className: 'showMore',
79 87
               onClick: function onClick() {
80 88
                 return sGetComment({ page: page + 1 });
81 89
               }
82 90
             },
83 91
             _react2.default.createElement(
84
-              "span",
92
+              'span',
85 93
               null,
86
-              "\u67E5\u770B\u66F4\u591A\u8BC4\u8BBA"
94
+              '\u67E5\u770B\u66F4\u591A\u8BC4\u8BBA'
87 95
             )
88 96
           )
89 97
         )

+ 1
- 1
lib/components/CommentList/index.js.map Näytä tiedosto

@@ -1 +1 @@
1
-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","page","loading","isNoMoreComment","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;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAOH,KAAKH,KAAL,CAAWE,GAPR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,IAHK,cAGLA,IAHK;AAAA,UAILC,OAJK,cAILA,OAJK;AAAA,UAKLC,eALK,cAKLA,eALK;AAAA,UAMLJ,WANK,cAMLA,WANK;;;AASP,UAAMK,WAAWC,QAAQH,QAAQH,WAAR,IAAuBG,QAAQI,aAAvC,CAAjB;AACA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUF,QAAhB;AACGJ,eAAKO,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CADH;AAKG,WAACN,eAAD,IACC;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMJ,YAAY,EAAEE,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AANJ;AADF,OADF;AAkBD;;;;EAtCuBS,gB;;AAyC1Bf,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  componentWillMount() {\n    this.props.app.sGetComment();\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"]}
1
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","loading","isNoMoreComment","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","length","Component","propTypes"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;6BAEQ;AAAA,uBAQH,KAAKH,KAAL,CAAWE,GARR;AAAA,UAELE,IAFK,cAELA,IAFK;AAAA,UAGLC,KAHK,cAGLA,KAHK;AAAA,UAILC,IAJK,cAILA,IAJK;AAAA,UAKLC,OALK,cAKLA,OALK;AAAA,UAMLC,eANK,cAMLA,eANK;AAAA,UAOLL,WAPK,cAOLA,WAPK;;;AAUP,UAAMM,WAAWC,QACfH,QAAQJ,WAAR,IAAuBI,QAAQI,aAA/B,IAAgDJ,QAAQK,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQJ,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKS,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMG,WAACP,eAAD,IACCJ,KAAKY,MAAL,KAAgBX,KADjB,IAEG;AAAA;AAAA;AACE,yBAAU,UADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF;AARN;AADF,OADF;AAoBD;;;;EA3CuBW,gB;;AA8C1BlB,YAAYmB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQnB,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  componentWillMount() {\n    this.props.app.sGetComment();\n  }\n\n  render() {\n    const {\n      list,\n      total,\n      page,\n      loading,\n      isNoMoreComment,\n      sGetComment,\n    } = this.props.app;\n\n    const spinning = Boolean(\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\n    );\n    return (\n      <div>\n        <Spin spinning={spinning}>\n          <div>共 {total} 条评论</div>\n          {list.map(item => (\n            <CommentBox content={item} key={item.id} commentId={item.id} />\n          ))}\n\n          {!isNoMoreComment &&\n            list.length !== total && (\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"]}

+ 3
- 2
lib/components/ContentItem/index.css Näytä tiedosto

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

+ 100
- 67
lib/components/ContentItem/index.js Näytä tiedosto

@@ -1,46 +1,62 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _icon = require("antd/es/icon");
7
+var _icon = require('antd/es/icon');
8 8
 
9 9
 var _icon2 = _interopRequireDefault(_icon);
10 10
 
11
-var _avatar = require("antd/es/avatar");
11
+var _tooltip = require('antd/es/tooltip');
12
+
13
+var _tooltip2 = _interopRequireDefault(_tooltip);
14
+
15
+var _avatar = require('antd/es/avatar');
12 16
 
13 17
 var _avatar2 = _interopRequireDefault(_avatar);
14 18
 
15 19
 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 20
 
17
-require("antd/es/icon/style/css");
21
+require('antd/es/icon/style/css');
18 22
 
19
-require("antd/es/avatar/style/css");
23
+require('antd/es/tooltip/style/css');
20 24
 
21
-var _react = require("react");
25
+require('antd/es/avatar/style/css');
26
+
27
+var _react = require('react');
22 28
 
23 29
 var _react2 = _interopRequireDefault(_react);
24 30
 
25
-var _propTypes = require("prop-types");
31
+var _propTypes = require('prop-types');
26 32
 
27 33
 var _propTypes2 = _interopRequireDefault(_propTypes);
28 34
 
29
-var _dayjs = require("dayjs");
35
+var _dayjs = require('dayjs');
30 36
 
31 37
 var _dayjs2 = _interopRequireDefault(_dayjs);
32 38
 
33
-var _Comment = require("../../Comment");
39
+require('dayjs/locale/zh-cn');
40
+
41
+var _relativeTime = require('dayjs/plugin/relativeTime');
42
+
43
+var _relativeTime2 = _interopRequireDefault(_relativeTime);
44
+
45
+var _Comment = require('../../Comment');
34 46
 
35 47
 var _Comment2 = _interopRequireDefault(_Comment);
36 48
 
37
-var _CommentInput = require("../CommentInput");
49
+var _CommentInput = require('../CommentInput');
38 50
 
39 51
 var _CommentInput2 = _interopRequireDefault(_CommentInput);
40 52
 
41
-var _helper = require("../../helper");
53
+var _avatar3 = require('../../avatar');
54
+
55
+var _avatar4 = _interopRequireDefault(_avatar3);
56
+
57
+var _helper = require('../../helper');
42 58
 
43
-require("./index.css");
59
+require('./index.css');
44 60
 
45 61
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
46 62
 
@@ -50,6 +66,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
50 66
 
51 67
 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 68
 
69
+_dayjs2.default.locale('zh-cn');
70
+_dayjs2.default.extend(_relativeTime2.default);
71
+
53 72
 var CommentItem = function (_Component) {
54 73
   _inherits(CommentItem, _Component);
55 74
 
@@ -59,7 +78,7 @@ var CommentItem = function (_Component) {
59 78
     var _this = _possibleConstructorReturn(this, (CommentItem.__proto__ || Object.getPrototypeOf(CommentItem)).call(this, props));
60 79
 
61 80
     _this.state = {
62
-      isShowInput: false
81
+      showInput: false
63 82
     };
64 83
     _this.handleToggleInput = _this.handleToggleInput.bind(_this);
65 84
     _this.renderTextWithReply = _this.renderTextWithReply.bind(_this);
@@ -67,18 +86,18 @@ var CommentItem = function (_Component) {
67 86
   }
68 87
 
69 88
   _createClass(CommentItem, [{
70
-    key: "handleToggleInput",
89
+    key: 'handleToggleInput',
71 90
     value: function handleToggleInput() {
72
-      this.setState({ isShowInput: !this.state.isShowInput });
91
+      this.setState({ showInput: !this.state.showInput });
73 92
     }
74 93
   }, {
75
-    key: "renderTextWithReply",
94
+    key: 'renderTextWithReply',
76 95
     value: function renderTextWithReply(text, content) {
77 96
       var newText = text;
78 97
       var reply = content.reply;
79 98
 
80 99
       if (reply) {
81
-        newText = newText + " //@<a href=\"/" + reply.user_id + "\">" + reply.user_name + "</a> " + reply.content;
100
+        newText = newText + ' //@<a href="/' + reply.user_id + '">' + reply.user_name + '</a> ' + reply.content;
82 101
         if (reply.reply) {
83 102
           return this.renderTextWithReply(newText, reply);
84 103
         }
@@ -86,97 +105,110 @@ var CommentItem = function (_Component) {
86 105
       return newText;
87 106
     }
88 107
   }, {
89
-    key: "render",
108
+    key: 'render',
90 109
     value: function render() {
91 110
       var _props = this.props,
92 111
           commentId = _props.commentId,
93 112
           replyId = _props.replyId,
94 113
           content = _props.content,
95
-          type = _props.type,
114
+          action = _props.action,
96 115
           showReply = _props.showReply,
97 116
           onShowReply = _props.onShowReply,
98 117
           app = _props.app;
99
-      var isShowInput = this.state.isShowInput;
118
+      var showInput = this.state.showInput;
119
+
100 120
 
101
-      var isComment = type === "comment";
102 121
       return _react2.default.createElement(
103
-        "div",
104
-        { className: "box" },
122
+        'div',
123
+        { className: 'box' },
105 124
         _react2.default.createElement(
106
-          "div",
107
-          { className: "left" },
108
-          _react2.default.createElement(_avatar2.default, { src: content.user_avatar, size: "large" })
125
+          'div',
126
+          { className: 'left' },
127
+          _react2.default.createElement(_avatar2.default, { src: content.user_avatar || _avatar4.default, size: 'large' })
109 128
         ),
110 129
         _react2.default.createElement(
111
-          "div",
112
-          { className: "right" },
130
+          'div',
131
+          { className: 'right' },
113 132
           _react2.default.createElement(
114
-            "div",
115
-            { className: "name" },
133
+            'div',
134
+            { className: 'name' },
116 135
             _react2.default.createElement(
117
-              "a",
118
-              { href: "/" + content.user_id },
119
-              content.user_name || "暂无昵称"
136
+              'a',
137
+              { href: '/' + content.user_id },
138
+              content.user_name || '暂无昵称'
120 139
             ),
121 140
             _react2.default.createElement(
122
-              "span",
141
+              'span',
123 142
               { style: { marginLeft: 10 } },
124
-              (0, _dayjs2.default)(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")
143
+              _react2.default.createElement(
144
+                _tooltip2.default,
145
+                {
146
+                  placement: 'top',
147
+                  title: (0, _dayjs2.default)(content.created * 1000).format('YYYY-MM-DD HH:mm:ss')
148
+                },
149
+                (0, _dayjs2.default)(content.created * 1000).fromNow()
150
+              )
125 151
             )
126 152
           ),
127
-          _react2.default.createElement("div", {
128
-            className: "content",
153
+          _react2.default.createElement('div', {
154
+            className: 'content',
129 155
             dangerouslySetInnerHTML: {
130 156
               __html: (0, _helper.renderContent)(this.renderTextWithReply(content.content, content))
131 157
             }
132 158
           }),
133 159
           _react2.default.createElement(
134
-            "div",
135
-            { className: "bottom" },
136
-            isComment && content.reply_count ? _react2.default.createElement(
137
-              "div",
160
+            'div',
161
+            { className: 'bottom' },
162
+            content.reply_count ? _react2.default.createElement(
163
+              'div',
138 164
               null,
139 165
               _react2.default.createElement(
140
-                "a",
166
+                'a',
141 167
                 {
142
-                  className: "itemLeft",
168
+                  className: 'itemLeft',
143 169
                   onClick: onShowReply,
144
-                  style: { userSelect: "none" }
170
+                  style: { userSelect: 'none' }
145 171
                 },
146 172
                 content.reply_count,
147
-                " \u6761\u56DE\u590D",
148
-                showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
173
+                ' \u6761\u56DE\u590D',
174
+                showReply ? _react2.default.createElement(_icon2.default, { type: 'up' }) : _react2.default.createElement(_icon2.default, { type: 'down' })
149 175
               )
150 176
             ) : null,
151 177
             _react2.default.createElement(
152
-              "a",
153
-              { onClick: this.handleToggleInput, className: "itemRight" },
154
-              "\xA0 \u56DE\u590D"
178
+              'a',
179
+              { onClick: this.handleToggleInput, className: 'itemRight' },
180
+              '\xA0 \u56DE\u590D'
155 181
             ),
156 182
             _react2.default.createElement(
157
-              "div",
183
+              'div',
158 184
               {
159
-                className: "itemRight",
160
-                style: { cursor: "pointer" },
185
+                className: 'itemRight',
186
+                style: { cursor: 'pointer' },
161 187
                 onClick: function onClick() {
162
-                  return app.sCommentFavor(content.id, content.favored);
188
+                  if (replyId) {
189
+                    // 如果有 replyId,则说明是评论的回复
190
+                    app.sReplyFavor(content.id, commentId, content.favored);
191
+                    return;
192
+                  }
193
+                  app.sCommentFavor(content.id, content.favored);
163 194
                 }
164 195
               },
165 196
               _react2.default.createElement(_icon2.default, {
166
-                type: "like-o",
167
-                className: content.favored ? "favored" : ""
197
+                type: 'like-o',
198
+                className: content.favored ? 'favored' : ''
168 199
               }),
169
-              "\xA0",
200
+              '\xA0',
170 201
               content.favor_count
171 202
             )
172
-          ),
173
-          isShowInput ? _react2.default.createElement(_CommentInput2.default, {
174
-            type: type,
175
-            replyId: replyId,
176
-            commentId: commentId,
177
-            handleToggleInput: this.handleToggleInput
178
-          }) : null
179
-        )
203
+          )
204
+        ),
205
+        showInput && _react2.default.createElement(_CommentInput2.default, {
206
+          content: app.children,
207
+          action: action,
208
+          replyId: replyId,
209
+          commentId: commentId,
210
+          callback: this.handleToggleInput
211
+        })
180 212
       );
181 213
     }
182 214
   }]);
@@ -187,13 +219,14 @@ var CommentItem = function (_Component) {
187 219
 CommentItem.propTypes = {
188 220
   content: _propTypes2.default.object.isRequired,
189 221
   // comment 评论
190
-  // reply 回复
191
-  type: _propTypes2.default.oneOf(["comment", "reply"]),
222
+  // reply 评论的回复
223
+  // replyToReply 回复的回复
224
+  action: _propTypes2.default.oneOf(['comment', 'reply', 'replyToReply']),
192 225
   onShowReply: _propTypes2.default.func
193 226
 };
194 227
 
195 228
 CommentItem.defaultProps = {
196
-  type: "comment",
229
+  action: 'comment',
197 230
   onShowReply: function onShowReply() {}
198 231
 };
199 232
 

+ 1
- 1
lib/components/ContentItem/index.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 27
- 27
lib/components/Editor/Emoji.js Näytä tiedosto

@@ -1,24 +1,24 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _carousel = require("antd/es/carousel");
7
+var _carousel = require('antd/es/carousel');
8 8
 
9 9
 var _carousel2 = _interopRequireDefault(_carousel);
10 10
 
11
-require("antd/es/carousel/style/css");
11
+require('antd/es/carousel/style/css');
12 12
 
13
-var _react = require("react");
13
+var _react = require('react');
14 14
 
15 15
 var _react2 = _interopRequireDefault(_react);
16 16
 
17
-var _emoji = require("../../emoji");
17
+var _emoji = require('../../emoji');
18 18
 
19 19
 var _emoji2 = _interopRequireDefault(_emoji);
20 20
 
21
-require("./Emoji.css");
21
+require('./Emoji.css');
22 22
 
23 23
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 24
 
@@ -45,17 +45,17 @@ var Emoji = function Emoji(_ref) {
45 45
     _carousel2.default,
46 46
     null,
47 47
     _react2.default.createElement(
48
-      "div",
48
+      'div',
49 49
       null,
50 50
       content[0].map(function (item, index) {
51 51
         return _react2.default.createElement(
52
-          "div",
53
-          { className: "item", key: item.value },
54
-          _react2.default.createElement("span", { className: "helper" }),
55
-          _react2.default.createElement("img", {
56
-            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
52
+          'div',
53
+          { className: 'item', key: item.value },
54
+          _react2.default.createElement('span', { className: 'helper' }),
55
+          _react2.default.createElement('img', {
56
+            src: '' + _emoji.prefixUrl + item.value + '.' + _emoji.ext,
57 57
             alt: item.title,
58
-            style: { display: "inline-block" },
58
+            style: { display: 'inline-block' },
59 59
             onClick: function onClick() {
60 60
               return _onClick(item.title);
61 61
             }
@@ -64,17 +64,17 @@ var Emoji = function Emoji(_ref) {
64 64
       })
65 65
     ),
66 66
     _react2.default.createElement(
67
-      "div",
67
+      'div',
68 68
       null,
69 69
       content[1].map(function (item, index) {
70 70
         return _react2.default.createElement(
71
-          "div",
72
-          { className: "item", key: item.value },
73
-          _react2.default.createElement("span", { className: "helper" }),
74
-          _react2.default.createElement("img", {
75
-            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
71
+          'div',
72
+          { className: 'item', key: item.value },
73
+          _react2.default.createElement('span', { className: 'helper' }),
74
+          _react2.default.createElement('img', {
75
+            src: '' + _emoji.prefixUrl + item.value + '.' + _emoji.ext,
76 76
             alt: item.title,
77
-            style: { display: "inline-block" },
77
+            style: { display: 'inline-block' },
78 78
             onClick: function onClick() {
79 79
               return _onClick(item.title);
80 80
             }
@@ -83,17 +83,17 @@ var Emoji = function Emoji(_ref) {
83 83
       })
84 84
     ),
85 85
     _react2.default.createElement(
86
-      "div",
86
+      'div',
87 87
       null,
88 88
       content[2].map(function (item) {
89 89
         return _react2.default.createElement(
90
-          "div",
91
-          { className: "item", key: item.value },
92
-          _react2.default.createElement("span", { className: "helper" }),
93
-          _react2.default.createElement("img", {
94
-            src: "" + _emoji.prefixUrl + item.value + "." + _emoji.ext,
90
+          'div',
91
+          { className: 'item', key: item.value },
92
+          _react2.default.createElement('span', { className: 'helper' }),
93
+          _react2.default.createElement('img', {
94
+            src: '' + _emoji.prefixUrl + item.value + '.' + _emoji.ext,
95 95
             alt: item.title,
96
-            style: { display: "inline-block" },
96
+            style: { display: 'inline-block' },
97 97
             onClick: function onClick() {
98 98
               return _onClick(item.title);
99 99
             }

+ 1
- 1
lib/components/Editor/Emoji.js.map Näytä tiedosto

@@ -1 +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;;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\n// class Emoji\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"]}
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;;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\n// class Emoji\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"]}

+ 32
- 34
lib/components/Editor/Upload.js Näytä tiedosto

@@ -1,54 +1,54 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _modal = require("antd/es/modal");
7
+var _modal = require('antd/es/modal');
8 8
 
9 9
 var _modal2 = _interopRequireDefault(_modal);
10 10
 
11
-var _upload = require("antd/es/upload");
11
+var _upload = require('antd/es/upload');
12 12
 
13 13
 var _upload2 = _interopRequireDefault(_upload);
14 14
 
15
-var _icon = require("antd/es/icon");
15
+var _icon = require('antd/es/icon');
16 16
 
17 17
 var _icon2 = _interopRequireDefault(_icon);
18 18
 
19
-var _message2 = require("antd/es/message");
19
+var _message2 = require('antd/es/message');
20 20
 
21 21
 var _message3 = _interopRequireDefault(_message2);
22 22
 
23 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 24
 
25
-require("antd/es/modal/style/css");
25
+require('antd/es/modal/style/css');
26 26
 
27
-require("antd/es/upload/style/css");
27
+require('antd/es/upload/style/css');
28 28
 
29
-require("antd/es/icon/style/css");
29
+require('antd/es/icon/style/css');
30 30
 
31
-require("antd/es/message/style/css");
31
+require('antd/es/message/style/css');
32 32
 
33
-var _react = require("react");
33
+var _react = require('react');
34 34
 
35 35
 var _react2 = _interopRequireDefault(_react);
36 36
 
37
-var _dayjs = require("dayjs");
37
+var _dayjs = require('dayjs');
38 38
 
39 39
 var _dayjs2 = _interopRequireDefault(_dayjs);
40 40
 
41
-var _shortid = require("shortid");
41
+var _shortid = require('shortid');
42 42
 
43 43
 var _shortid2 = _interopRequireDefault(_shortid);
44 44
 
45
-var _constant = require("../../constant");
45
+var _constant = require('../../constant');
46 46
 
47
-var _Comment = require("../../Comment");
47
+var _Comment = require('../../Comment');
48 48
 
49 49
 var _Comment2 = _interopRequireDefault(_Comment);
50 50
 
51
-require("./Upload.css");
51
+require('./Upload.css');
52 52
 
53 53
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54 54
 
@@ -57,8 +57,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
57 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 58
 
59 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 60
 
63 61
 var client = function client(oss) {
64 62
   return new window.OSS.Wrapper({
@@ -71,7 +69,7 @@ var client = function client(oss) {
71 69
 };
72 70
 
73 71
 var uploadPath = function uploadPath(path, file) {
74
-  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
72
+  return path + '/' + (0, _dayjs2.default)().format('YYYYMMDD') + '/' + _shortid2.default.generate() + '.' + file.type.split('/')[1];
75 73
 };
76 74
 
77 75
 var UploadToOss = function UploadToOss(oss, path, file) {
@@ -95,7 +93,7 @@ var App = function (_React$Component) {
95 93
 
96 94
     _this.state = {
97 95
       previewVisible: false,
98
-      previewImage: ""
96
+      previewImage: ''
99 97
     };
100 98
     _this.handleCancel = _this.handleCancel.bind(_this);
101 99
     _this.handlePreview = _this.handlePreview.bind(_this);
@@ -105,17 +103,17 @@ var App = function (_React$Component) {
105 103
   }
106 104
 
107 105
   _createClass(App, [{
108
-    key: "componentDidMount",
106
+    key: 'componentDidMount',
109 107
     value: function componentDidMount() {
110 108
       this.props.app.sOssSts();
111 109
     }
112 110
   }, {
113
-    key: "handleCancel",
111
+    key: 'handleCancel',
114 112
     value: function handleCancel() {
115 113
       this.setState({ previewVisible: false });
116 114
     }
117 115
   }, {
118
-    key: "handlePreview",
116
+    key: 'handlePreview',
119 117
     value: function handlePreview(file) {
120 118
       this.setState({
121 119
         previewImage: file.url || file.thumbUrl,
@@ -123,14 +121,14 @@ var App = function (_React$Component) {
123 121
       });
124 122
     }
125 123
   }, {
126
-    key: "handleChange",
124
+    key: 'handleChange',
127 125
     value: function handleChange(_ref) {
128 126
       var fileList = _ref.fileList;
129 127
 
130 128
       this.props.onChangeFileList(fileList);
131 129
     }
132 130
   }, {
133
-    key: "customRequest",
131
+    key: 'customRequest',
134 132
     value: function customRequest(info) {
135 133
       var _this2 = this;
136 134
 
@@ -153,7 +151,7 @@ var App = function (_React$Component) {
153 151
       };
154 152
     }
155 153
   }, {
156
-    key: "render",
154
+    key: 'render',
157 155
     value: function render() {
158 156
       var _state = this.state,
159 157
           previewVisible = _state.previewVisible,
@@ -161,23 +159,23 @@ var App = function (_React$Component) {
161 159
       var fileList = this.props.fileList;
162 160
 
163 161
       var uploadButton = _react2.default.createElement(
164
-        "div",
162
+        'div',
165 163
         null,
166
-        _react2.default.createElement(_icon2.default, { type: "plus" }),
164
+        _react2.default.createElement(_icon2.default, { type: 'plus' }),
167 165
         _react2.default.createElement(
168
-          "div",
169
-          { className: "ant-upload-text" },
170
-          "\u4E0A\u4F20"
166
+          'div',
167
+          { className: 'ant-upload-text' },
168
+          '\u4E0A\u4F20'
171 169
         )
172 170
       );
173 171
       return _react2.default.createElement(
174
-        "div",
172
+        'div',
175 173
         null,
176 174
         _react2.default.createElement(
177 175
           _upload2.default,
178 176
           {
179
-            accept: "image/jpg,image/jpeg,image/png,image/bmp",
180
-            listType: "picture-card",
177
+            accept: 'image/jpg,image/jpeg,image/png,image/bmp',
178
+            listType: 'picture-card',
181 179
             fileList: fileList,
182 180
             customRequest: this.customRequest,
183 181
             onPreview: this.handlePreview,
@@ -192,7 +190,7 @@ var App = function (_React$Component) {
192 190
             footer: null,
193 191
             onCancel: this.handleCancel
194 192
           },
195
-          _react2.default.createElement("img", { alt: "upload", style: { width: "100%" }, src: previewImage })
193
+          _react2.default.createElement('img', { alt: 'upload', style: { width: '100%' }, src: previewImage })
196 194
         )
197 195
       );
198 196
     }

+ 1
- 1
lib/components/Editor/Upload.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 1
- 1
lib/components/Editor/index.css Näytä tiedosto

@@ -30,7 +30,7 @@
30 30
   box-shadow: none;
31 31
   border-bottom: 1px solid #eee;
32 32
 }
33
-.editor [contentEditable="true"]:empty:not(:focus):before {
33
+.editor [contentEditable='true']:empty:not(:focus):before {
34 34
   content: attr(data-text);
35 35
   color: #bfbfbf;
36 36
 }

+ 199
- 93
lib/components/Editor/index.js Näytä tiedosto

@@ -1,56 +1,54 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
5 5
 });
6 6
 
7
-var _button = require("antd/es/button");
7
+var _button = require('antd/es/button');
8 8
 
9 9
 var _button2 = _interopRequireDefault(_button);
10 10
 
11
-var _popover = require("antd/es/popover");
11
+var _popover = require('antd/es/popover');
12 12
 
13 13
 var _popover2 = _interopRequireDefault(_popover);
14 14
 
15
-var _icon = require("antd/es/icon");
15
+var _icon = require('antd/es/icon');
16 16
 
17 17
 var _icon2 = _interopRequireDefault(_icon);
18 18
 
19
-var _input = require("antd/es/input");
19
+var _input = require('antd/es/input');
20 20
 
21 21
 var _input2 = _interopRequireDefault(_input);
22 22
 
23
-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; };
24
-
25 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; }; }();
26 24
 
27
-require("antd/es/button/style/css");
25
+require('antd/es/button/style/css');
28 26
 
29
-require("antd/es/popover/style/css");
27
+require('antd/es/popover/style/css');
30 28
 
31
-require("antd/es/icon/style/css");
29
+require('antd/es/icon/style/css');
32 30
 
33
-require("antd/es/input/style/css");
31
+require('antd/es/input/style/css');
34 32
 
35
-var _react = require("react");
33
+var _react = require('react');
36 34
 
37 35
 var _react2 = _interopRequireDefault(_react);
38 36
 
39
-var _propTypes = require("prop-types");
37
+var _propTypes = require('prop-types');
40 38
 
41 39
 var _propTypes2 = _interopRequireDefault(_propTypes);
42 40
 
43
-var _constant = require("../../constant");
41
+var _constant = require('../../constant');
44 42
 
45
-var _Upload = require("./Upload");
43
+var _Upload = require('./Upload');
46 44
 
47 45
 var _Upload2 = _interopRequireDefault(_Upload);
48 46
 
49
-var _Emoji = require("./Emoji");
47
+var _Emoji = require('./Emoji');
50 48
 
51 49
 var _Emoji2 = _interopRequireDefault(_Emoji);
52 50
 
53
-require("./index.css");
51
+require('./index.css');
54 52
 
55 53
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
56 54
 
@@ -61,19 +59,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
61 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; }
62 60
 
63 61
 var TextArea = _input2.default.TextArea;
64
-// 设置 Editor 组件的默认值
65
-// 不能在 Editor.defaultProps 中设置
66
-// 因为 Editor 在 ComponentInput 中调用
67
-// 在 ComponentInput 中,需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
68
-
69
-var EditorDefaultProps = {
70
-  rows: 5,
71
-  placeholder: "说点什么吧...",
72
-  showEmoji: true,
73
-  showUpload: true,
74
-  submitText: "发表",
75
-  onChange: function onChange() {}
76
-};
77 62
 
78 63
 var Editor = function (_React$Component) {
79 64
   _inherits(Editor, _React$Component);
@@ -84,81 +69,172 @@ var Editor = function (_React$Component) {
84 69
     var _this = _possibleConstructorReturn(this, (Editor.__proto__ || Object.getPrototypeOf(Editor)).call(this, props));
85 70
 
86 71
     _this.state = {
87
-      showUpload: false
72
+      showUpload: false,
73
+      value: '', // 编辑器里面的值
74
+
75
+      fileList: [], // 图片列表
76
+      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
88 77
     };
78
+    _this.handleChange = _this.handleChange.bind(_this);
89 79
     _this.handleClickEmoji = _this.handleClickEmoji.bind(_this);
80
+    _this.handleChangeFileList = _this.handleChangeFileList.bind(_this);
90 81
     _this.handleShowUpload = _this.handleShowUpload.bind(_this);
82
+    _this.handleUpload = _this.handleUpload.bind(_this);
83
+    _this.handleSubmit = _this.handleSubmit.bind(_this);
91 84
     return _this;
92 85
   }
93 86
 
94 87
   _createClass(Editor, [{
95
-    key: "componentDidMount",
88
+    key: 'componentDidMount',
96 89
     value: function componentDidMount() {}
90
+
91
+    /**
92
+     * 编辑器的值改变事件
93
+     * 将最新的值存储到 state 中
94
+     * @param {string} value 输入的值
95
+     */
96
+
97
+  }, {
98
+    key: 'handleChange',
99
+    value: function handleChange(value) {
100
+      this.setState({ value: value });
101
+      if (this.props.onChange) {
102
+        this.props.onChange(value);
103
+      }
104
+    }
105
+
106
+    /**
107
+     * 点击 emoji 的事件
108
+     * 点击后,需要将改 emoji 插入到编辑器中
109
+     * 插入的值为 [emoji chinese name]
110
+     * 参数 emoji 即为 emoji chinese name
111
+     * @param {string}} emoji emoji 的中文,如 微笑
112
+     */
113
+
97 114
   }, {
98
-    key: "handleClickEmoji",
99
-    value: function handleClickEmoji(emojiId) {
100
-      this.props.onChangeEmoji(emojiId);
115
+    key: 'handleClickEmoji',
116
+    value: function handleClickEmoji(emoji) {
117
+      var value = this.state.value;
118
+
119
+      value += '[' + emoji + ']';
120
+      this.handleChange(value);
101 121
     }
122
+
123
+    /**
124
+     * 监听文件列表改变事件
125
+     * @param {Array} fileList 文件列表
126
+     */
127
+
102 128
   }, {
103
-    key: "handleShowUpload",
129
+    key: 'handleChangeFileList',
130
+    value: function handleChangeFileList(fileList) {
131
+      this.setState({ fileList: fileList });
132
+    }
133
+
134
+    /**
135
+     * 控制上传 Popover 的显示和隐藏
136
+     * @param {boolean} showUpload 是否显示上传的 Popover
137
+     */
138
+
139
+  }, {
140
+    key: 'handleShowUpload',
104 141
     value: function handleShowUpload(showUpload) {
105
-      if (typeof showUpload === "boolean") {
142
+      if (typeof showUpload === 'boolean') {
106 143
         this.setState({ showUpload: showUpload });
107 144
       } else {
108 145
         this.setState({ showUpload: !this.state.showUpload });
109 146
       }
110 147
     }
148
+
149
+    /**
150
+     * 上传文件 TODO:
151
+     * @param {object} param 文件对象
152
+     */
153
+
111 154
   }, {
112
-    key: "render",
113
-    value: function render() {
114
-      var _this2 = this;
155
+    key: 'handleUpload',
156
+    value: function handleUpload(_ref) {
157
+      var uid = _ref.uid,
158
+          path = _ref.path;
159
+      var fileMap = this.state.fileMap;
160
+
161
+      fileMap[uid] = path;
162
+      this.setState({ fileMap: fileMap });
163
+    }
115 164
 
116
-      var props = _extends({}, EditorDefaultProps, this.props);
117
-      var value = props.value,
118
-          _onChange = props.onChange,
119
-          onSubmit = props.onSubmit,
120
-          loading = props.loading,
121
-          placeholder = props.placeholder,
122
-          fileList = props.fileList,
123
-          onChangeFileList = props.onChangeFileList,
124
-          rows = props.rows,
125
-          onUpload = props.onUpload,
126
-          showEmoji = props.showEmoji,
127
-          showUpload = props.showUpload,
128
-          submitText = props.submitText;
165
+    /**
166
+     * 提交编辑器内容
167
+     * 提交功能,交给父组件来实现
168
+     * 需要父组件传入 onSubmit
169
+     */
129 170
 
171
+  }, {
172
+    key: 'handleSubmit',
173
+    value: function handleSubmit() {
174
+      var _state = this.state,
175
+          value = _state.value,
176
+          fileMap = _state.fileMap,
177
+          fileList = _state.fileList;
178
+
179
+      if (fileList.length) {
180
+        value += '<br/>';
181
+        fileList.forEach(function (item) {
182
+          value += '[' + _constant.OSS_LINK + fileMap[item.uid] + ']';
183
+        });
184
+      }
185
+      this.props.onSubmit(value);
186
+    }
187
+  }, {
188
+    key: 'render',
189
+    value: function render() {
190
+      var _this2 = this;
130 191
 
192
+      var _props = this.props,
193
+          value = _props.value,
194
+          placeholder = _props.placeholder,
195
+          rows = _props.rows,
196
+          showEmoji = _props.showEmoji,
197
+          showUpload = _props.showUpload,
198
+          btnSubmitText = _props.btnSubmitText,
199
+          btnLoading = _props.btnLoading,
200
+          btnDisabled = _props.btnDisabled,
201
+          button = _props.button,
202
+          emojiToolIcon = _props.emojiToolIcon,
203
+          imageToolIcon = _props.imageToolIcon;
204
+
205
+
206
+      var handleSubmit = this.handleSubmit;
131 207
       return _react2.default.createElement(
132
-        "div",
133
-        { className: "editor" },
208
+        'div',
209
+        { className: 'editor' },
134 210
         _react2.default.createElement(TextArea, {
135
-          value: value,
211
+          value: value || this.state.value,
136 212
           onChange: function onChange(e) {
137
-            return _onChange(e.target.value);
213
+            return _this2.handleChange(e.target.value);
138 214
           },
139 215
           rows: rows,
140 216
           placeholder: placeholder
141 217
         }),
142 218
         _react2.default.createElement(
143
-          "div",
144
-          { className: "toolbar" },
219
+          'div',
220
+          { className: 'toolbar' },
145 221
           _react2.default.createElement(
146
-            "div",
147
-            { style: { float: "left", margin: "8px 11px" } },
222
+            'div',
223
+            { style: { float: 'left', margin: '8px 11px' } },
148 224
             showEmoji && _react2.default.createElement(
149 225
               _popover2.default,
150 226
               {
151
-                trigger: "click",
152
-                placement: "bottomLeft",
227
+                trigger: 'click',
228
+                placement: 'bottomLeft',
153 229
                 autoAdjustOverflow: false,
154 230
                 content: _react2.default.createElement(
155
-                  "div",
231
+                  'div',
156 232
                   { style: { width: 200 } },
157 233
                   _react2.default.createElement(_Emoji2.default, { onClick: this.handleClickEmoji })
158 234
                 ),
159
-                overlayClassName: "feed"
235
+                overlayClassName: 'feed'
160 236
               },
161
-              _react2.default.createElement(_icon2.default, { type: "smile-o", className: "icon" })
237
+              emojiToolIcon || _react2.default.createElement(_icon2.default, { type: 'smile-o', className: 'icon' })
162 238
             ),
163 239
             showUpload && _react2.default.createElement(
164 240
               _popover2.default,
@@ -166,48 +242,52 @@ var Editor = function (_React$Component) {
166 242
                 visible: this.state.showUpload,
167 243
                 overlayStyle: { zIndex: 999 },
168 244
                 content: _react2.default.createElement(
169
-                  "div",
245
+                  'div',
170 246
                   {
171 247
                     style: { width: 112 * _constant.MAX_UPLOAD_NUMBER, minHeight: 100 }
172 248
                   },
173 249
                   _react2.default.createElement(_Upload2.default, {
174
-                    onChangeFileList: onChangeFileList,
175
-                    onUpload: onUpload,
176
-                    fileList: fileList
250
+                    onChangeFileList: this.handleChangeFileList,
251
+                    onUpload: this.handleUpload,
252
+                    fileList: this.state.fileList
177 253
                   })
178 254
                 ),
179
-                placement: "bottomLeft",
255
+                placement: 'bottomLeft',
180 256
                 title: _react2.default.createElement(
181
-                  "div",
182
-                  { style: { margin: "5px auto" } },
257
+                  'div',
258
+                  { style: { margin: '5px auto' } },
183 259
                   _react2.default.createElement(
184
-                    "span",
260
+                    'span',
185 261
                     null,
186
-                    "\u4E0A\u4F20\u56FE\u7247",
262
+                    '\u4E0A\u4F20\u56FE\u7247',
187 263
                     _react2.default.createElement(
188
-                      "span",
189
-                      { style: { color: "#666", fontWeight: 400 } },
190
-                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
191
-                      _constant.MAX_UPLOAD_NUMBER - fileList.length,
192
-                      "\u5F20\u56FE\u7247)"
264
+                      'span',
265
+                      { style: { color: '#666', fontWeight: 400 } },
266
+                      '(\u60A8\u8FD8\u80FD\u4E0A\u4F20',
267
+                      _constant.MAX_UPLOAD_NUMBER - this.state.fileList.length,
268
+                      '\u5F20\u56FE\u7247)'
193 269
                     )
194 270
                   ),
195 271
                   _react2.default.createElement(_icon2.default, {
196
-                    type: "close",
272
+                    type: 'close',
197 273
                     onClick: function onClick() {
198 274
                       return _this2.handleShowUpload(false);
199 275
                     },
200 276
                     style: {
201
-                      float: "right",
202
-                      cursor: "pointer",
277
+                      float: 'right',
278
+                      cursor: 'pointer',
203 279
                       marginTop: 4
204 280
                     }
205 281
                   })
206 282
                 )
207 283
               },
208
-              _react2.default.createElement(_icon2.default, {
209
-                type: "picture",
210
-                className: "icon",
284
+              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
285
+                onClick: function onClick() {
286
+                  return _this2.handleShowUpload(true);
287
+                }
288
+              }) : _react2.default.createElement(_icon2.default, {
289
+                type: 'picture',
290
+                className: 'icon',
211 291
                 style: { marginLeft: 10 },
212 292
                 onClick: function onClick() {
213 293
                   return _this2.handleShowUpload(true);
@@ -216,12 +296,21 @@ var Editor = function (_React$Component) {
216 296
             )
217 297
           ),
218 298
           _react2.default.createElement(
219
-            "div",
220
-            { style: { float: "right", margin: "5px 11px" } },
221
-            _react2.default.createElement(
299
+            'div',
300
+            { style: { float: 'right', margin: '5px 11px' } },
301
+            button ? _react2.default.cloneElement(button, {
302
+              onClick: button.props.onClick || handleSubmit
303
+            }) : _react2.default.createElement(
222 304
               _button2.default,
223
-              { onClick: onSubmit, type: "primary", loading: loading },
224
-              submitText
305
+              {
306
+                onClick: function onClick() {
307
+                  return _this2.handleSubmit();
308
+                },
309
+                type: 'primary',
310
+                loading: btnLoading,
311
+                disabled: btnDisabled
312
+              },
313
+              btnSubmitText
225 314
             )
226 315
           )
227 316
         )
@@ -237,8 +326,25 @@ Editor.propTypes = {
237 326
   placeholder: _propTypes2.default.string,
238 327
   showEmoji: _propTypes2.default.bool,
239 328
   showUpload: _propTypes2.default.bool,
240
-  submitText: _propTypes2.default.string,
241
-  onChange: _propTypes2.default.func
329
+  value: _propTypes2.default.string,
330
+  onChange: _propTypes2.default.func,
331
+  onSubmit: _propTypes2.default.func,
332
+  btnSubmitText: _propTypes2.default.string,
333
+  btnLoading: _propTypes2.default.bool,
334
+  btnDisabled: _propTypes2.default.bool,
335
+  button: _propTypes2.default.node,
336
+  emojiToolIcon: _propTypes2.default.node,
337
+  imageToolIcon: _propTypes2.default.node
338
+};
339
+
340
+Editor.defaultProps = {
341
+  rows: 5,
342
+  placeholder: '说点什么吧...',
343
+  showEmoji: true,
344
+  showUpload: true,
345
+  btnSubmitText: '发表',
346
+  btnLoading: false,
347
+  btnDisabled: false
242 348
 };
243 349
 
244 350
 exports.default = Editor;

+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 8
- 6
lib/constant.js Näytä tiedosto

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

+ 1
- 1
lib/constant.js.map Näytä tiedosto

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP"],"mappings":";;;;;AAAO,IAAMA,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 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"]}
1
+{"version":3,"sources":["../src/constant.js"],"names":["ERROR_DEFAULT","LIMIT","OSS_ENDPOINT","OSS_BUCKET","DRIVER_LICENSE_PATH","OSS_LINK","MAX_UPLOAD_NUMBER","REGEXP","AVATAR"],"mappings":";;;;;AAAO,IAAMA,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;;AAEA,IAAMC,0BAAS,EAAf","file":"constant.js","sourcesContent":["export 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\nexport const AVATAR = '';\n"]}

+ 111
- 111
lib/emoji.js Näytä tiedosto

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

+ 1
- 1
lib/emoji.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 7
- 7
lib/helper.js Näytä tiedosto

@@ -1,4 +1,4 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
@@ -8,16 +8,16 @@ exports.isUrl = isUrl;
8 8
 exports.arrayToObject = arrayToObject;
9 9
 exports.renderContent = renderContent;
10 10
 
11
-var _constant = require("./constant");
11
+var _constant = require('./constant');
12 12
 
13
-var _emoji = require("./emoji");
13
+var _emoji = require('./emoji');
14 14
 
15 15
 var _emoji2 = _interopRequireDefault(_emoji);
16 16
 
17 17
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 18
 
19 19
 function isFunction(functionToCheck) {
20
-  return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
20
+  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
21 21
 }
22 22
 
23 23
 function isUrl(userInput) {
@@ -47,11 +47,11 @@ function renderContent(content, onClick) {
47 47
   return content.replace(_constant.REGEXP, function (a, b) {
48 48
     var src = a.slice(1, -1);
49 49
     if (isUrl(src)) {
50
-      return "<img src=\"" + src + "\" alt=\"" + src + "\" style=\"max-width: 300px\" />";
50
+      return '<img src="' + src + '" alt="' + src + '" style="max-width: 300px" />';
51 51
     }
52
-    var emojiObejct = arrayToObject(_emoji2.default, "title");
52
+    var emojiObejct = arrayToObject(_emoji2.default, 'title');
53 53
     var value = emojiObejct[src].value;
54
-    return "<img src=\"" + _emoji.prefixUrl + value + "." + _emoji.ext + "\" alt=\"" + value + "\" />";
54
+    return '<img src="' + _emoji.prefixUrl + value + '.' + _emoji.ext + '" alt="' + value + '" />';
55 55
   });
56 56
 }
57 57
 //# sourceMappingURL=helper.js.map

+ 1
- 1
lib/helper.js.map Näytä tiedosto

@@ -1 +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"]}
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,4BAAoBA,GAApB,eAAiCA,GAAjC;AACD;AACD,QAAME,cAActB,cAAcuB,eAAd,EAAqB,OAArB,CAApB;AACA,QAAMC,QAAQF,YAAYF,GAAZ,EAAiBI,KAA/B;AACA,0BAAoBC,gBAApB,GAAgCD,KAAhC,SAAyCE,UAAzC,eAAsDF,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"]}

+ 102
- 24
lib/index.js Näytä tiedosto

@@ -1,41 +1,119 @@
1
-"use strict";
1
+'use strict';
2 2
 
3
-var _react = require("react");
3
+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; }; }();
4
+
5
+var _react = require('react');
4 6
 
5 7
 var _react2 = _interopRequireDefault(_react);
6 8
 
7
-var _reactDom = require("react-dom");
9
+var _reactDom = require('react-dom');
8 10
 
9 11
 var _reactDom2 = _interopRequireDefault(_reactDom);
10 12
 
11
-var _App = require("./App");
13
+var _App = require('./App');
12 14
 
13 15
 var _App2 = _interopRequireDefault(_App);
14 16
 
15
-var _registerServiceWorker = require("./registerServiceWorker");
17
+var _registerServiceWorker = require('./registerServiceWorker');
16 18
 
17 19
 var _registerServiceWorker2 = _interopRequireDefault(_registerServiceWorker);
18 20
 
19 21
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 22
 
21
-var props = {
22
-  type: 1,
23
-  businessId: "1",
24
-  API: "http://api.links123.net/comment/v1",
25
-  showList: false
26
-};
27
-
28
-var editorProps = {
29
-  showEmoji: true,
30
-  placeholder: "说点什么吧",
31
-  rows: 5
32
-  // onSubmit={v => console.log()} // TODO...
33
-};
34
-
35
-_reactDom2.default.render(_react2.default.createElement(
36
-  _App2.default,
37
-  props,
38
-  _react2.default.createElement(_App.Editor, editorProps)
39
-), document.getElementById("root-comment"));
23
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
24
+
25
+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; }
26
+
27
+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; }
28
+
29
+var Index = function (_Component) {
30
+  _inherits(Index, _Component);
31
+
32
+  function Index(props) {
33
+    _classCallCheck(this, Index);
34
+
35
+    var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
36
+
37
+    _this.state = {
38
+      value: ''
39
+    };
40
+    _this.handleChangeValue = _this.handleChangeValue.bind(_this);
41
+    _this.handleChangeSubmit = _this.handleChangeSubmit.bind(_this);
42
+    return _this;
43
+  }
44
+
45
+  _createClass(Index, [{
46
+    key: 'handleChangeValue',
47
+    value: function handleChangeValue(value) {
48
+      this.setState({ value: value });
49
+      console.log('handleChangeValue value: ', value);
50
+    }
51
+  }, {
52
+    key: 'handleChangeSubmit',
53
+    value: function handleChangeSubmit(value) {
54
+      var _this2 = this;
55
+
56
+      this.setState({ loading: true }, function () {
57
+        setTimeout(function () {
58
+          _this2.setState({ loading: false });
59
+        }, 2000);
60
+      });
61
+      console.log('submit value: ', value);
62
+    }
63
+  }, {
64
+    key: 'render',
65
+    value: function render() {
66
+      // 最简单的用法
67
+      return _react2.default.createElement(
68
+        _App2.default,
69
+        { type: 1, businessId: 'test' },
70
+        _react2.default.createElement(_App.Editor, null)
71
+      );
72
+
73
+      // 复杂的用户法
74
+      // const props = {
75
+      //   type: 1,
76
+      //   businessId: "1",
77
+      //   API: "http://api.links123.net/comment/v1",
78
+      //   showList: true
79
+      // };
80
+
81
+      // const editorProps = {
82
+      //   showEmoji: true,
83
+      //   placeholder: "说点什么吧",
84
+      //   rows: 5,
85
+      //   btnLoading: this.state.loading,
86
+      //   btnDisable: this.state.loading,
87
+      //   btnSubmitText: "提交",
88
+      //   value: this.state.value,
89
+      //   onChange: v => this.handleChangeValue(v),
90
+      //   onSubmit: v => this.handleChangeSubmit(v),
91
+      //   button: (
92
+      //     <Button
93
+      //       type="primary"
94
+      //       ghost
95
+      //       // onClick={() => console.log('click btn: ', this.state.value)}
96
+      //     >
97
+      //       自定义按钮
98
+      //     </Button>
99
+      //   ),
100
+      //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
101
+      //   imageToolIcon: (
102
+      //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
103
+      //   )
104
+      // };
105
+
106
+      // return (
107
+      //   <App {...props}>
108
+      //     <Editor {...editorProps} />
109
+      //   </App>
110
+      // );
111
+    }
112
+  }]);
113
+
114
+  return Index;
115
+}(_react.Component);
116
+
117
+_reactDom2.default.render(_react2.default.createElement(Index, null), document.getElementById('root-comment'));
40 118
 (0, _registerServiceWorker2.default)();
41 119
 //# sourceMappingURL=index.js.map

+ 1
- 1
lib/index.js.map Näytä tiedosto

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["props","type","businessId","API","showList","editorProps","showEmoji","placeholder","rows","ReactDOM","render","document","getElementById"],"mappings":";;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,QAAQ;AACZC,QAAM,CADM;AAEZC,cAAY,GAFA;AAGZC,OAAK,oCAHO;AAIZC,YAAU;AAJE,CAAd;;AAOA,IAAMC,cAAc;AAClBC,aAAW,IADO;AAElBC,eAAa,OAFK;AAGlBC,QAAM;AACN;AAJkB,CAApB;;AAOAC,mBAASC,MAAT,CACE;AAAC,eAAD;AAASV,OAAT;AACE,gCAAC,WAAD,EAAYK,WAAZ;AADF,CADF,EAIEM,SAASC,cAAT,CAAwB,cAAxB,CAJF;AAMA","file":"index.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App, { Editor } from \"./App\";\nimport registerServiceWorker from \"./registerServiceWorker\";\n\nconst props = {\n  type: 1,\n  businessId: \"1\",\n  API: \"http://api.links123.net/comment/v1\",\n  showList: false\n};\n\nconst editorProps = {\n  showEmoji: true,\n  placeholder: \"说点什么吧\",\n  rows: 5\n  // onSubmit={v => console.log()} // TODO...\n};\n\nReactDOM.render(\n  <App {...props}>\n    <Editor {...editorProps} />\n  </App>,\n  document.getElementById(\"root-comment\")\n);\nregisterServiceWorker();\n"]}
1
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","loading","setTimeout","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAEA;;;;AACA;;;;;;;;;;;;IAEMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;uCAEkBA,K,EAAO;AAAA;;AACxB,WAAKI,QAAL,CAAc,EAAEG,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKJ,QAAL,CAAc,EAAEG,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BN,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA,UAAK,MAAM,CAAX,EAAc,YAAW,MAAzB;AACE,sCAAC,WAAD;AADF,OADF;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EAtEiBS,gB;;AAyEpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Button, Icon } from 'antd';\nimport App, { Editor } from './App';\nimport registerServiceWorker from './registerServiceWorker';\n\nclass Index extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: '',\n    };\n    this.handleChangeValue = this.handleChangeValue.bind(this);\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\n  }\n\n  handleChangeValue(value) {\n    this.setState({ value });\n    console.log('handleChangeValue value: ', value);\n  }\n\n  handleChangeSubmit(value) {\n    this.setState({ loading: true }, () => {\n      setTimeout(() => {\n        this.setState({ loading: false });\n      }, 2000);\n    });\n    console.log('submit value: ', value);\n  }\n\n  render() {\n    // 最简单的用法\n    return (\n      <App type={1} businessId=\"test\">\n        <Editor />\n      </App>\n    );\n\n    // 复杂的用户法\n    // const props = {\n    //   type: 1,\n    //   businessId: \"1\",\n    //   API: \"http://api.links123.net/comment/v1\",\n    //   showList: true\n    // };\n\n    // const editorProps = {\n    //   showEmoji: true,\n    //   placeholder: \"说点什么吧\",\n    //   rows: 5,\n    //   btnLoading: this.state.loading,\n    //   btnDisable: this.state.loading,\n    //   btnSubmitText: \"提交\",\n    //   value: this.state.value,\n    //   onChange: v => this.handleChangeValue(v),\n    //   onSubmit: v => this.handleChangeSubmit(v),\n    //   button: (\n    //     <Button\n    //       type=\"primary\"\n    //       ghost\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\n    //     >\n    //       自定义按钮\n    //     </Button>\n    //   ),\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\n    //   imageToolIcon: (\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\n    //   )\n    // };\n\n    // return (\n    //   <App {...props}>\n    //     <Editor {...editorProps} />\n    //   </App>\n    // );\n  }\n}\n\nReactDOM.render(<Index />, document.getElementById('root-comment'));\nregisterServiceWorker();\n"]}

+ 11
- 10
lib/lang/index.js Näytä tiedosto

@@ -1,4 +1,4 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
6 6
 // 语言包
7 7
 // 英文短语和中文提示的对应
8 8
 var data = {
9
-  "auth failed": "请先登录",
10
-  "create comment failed": "创建评论失败",
11
-  "comment favor failed": "评论点赞失败",
12
-  "delete comment favor failed": "评论取消点赞失败",
13
-  "get comments failed": "获取评论列表失败",
14
-  "create reply failed": "创建回复失败",
15
-  "reply favor failed": "回复点赞失败",
16
-  "delete reply favor failed": "删除回复点赞失败",
17
-  "get replies failed": "获取回复列表失败"
9
+  'not found': '没有数据',
10
+  'auth failed': '请先登录',
11
+  'create comment failed': '创建评论失败',
12
+  'comment favor failed': '评论点赞失败',
13
+  'delete comment favor failed': '评论取消点赞失败',
14
+  'get comments failed': '获取评论列表失败',
15
+  'create reply failed': '创建回复失败',
16
+  'reply favor failed': '回复点赞失败',
17
+  'delete reply favor failed': '删除回复点赞失败',
18
+  'get replies failed': '获取回复列表失败'
18 19
 };
19 20
 
20 21
 exports.default = data;

+ 1
- 1
lib/lang/index.js.map Näytä tiedosto

@@ -1 +1 @@
1
-{"version":3,"sources":["../../src/lang/index.js"],"names":["data"],"mappings":";;;;;AAAA;AACA;AACA,IAAMA,OAAO;AACX,iBAAe,MADJ;AAEX,2BAAyB,QAFd;AAGX,0BAAwB,QAHb;AAIX,iCAA+B,UAJpB;AAKX,yBAAuB,UALZ;AAMX,yBAAuB,QANZ;AAOX,wBAAsB,QAPX;AAQX,+BAA6B,UARlB;AASX,wBAAsB;AATX,CAAb;;kBAYeA,I","file":"index.js","sourcesContent":["// 语言包\n// 英文短语和中文提示的对应\nconst data = {\n  \"auth failed\": \"请先登录\",\n  \"create comment failed\": \"创建评论失败\",\n  \"comment favor failed\": \"评论点赞失败\",\n  \"delete comment favor failed\": \"评论取消点赞失败\",\n  \"get comments failed\": \"获取评论列表失败\",\n  \"create reply failed\": \"创建回复失败\",\n  \"reply favor failed\": \"回复点赞失败\",\n  \"delete reply favor failed\": \"删除回复点赞失败\",\n  \"get replies failed\": \"获取回复列表失败\"\n};\n\nexport default data;\n"]}
1
+{"version":3,"sources":["../../src/lang/index.js"],"names":["data"],"mappings":";;;;;AAAA;AACA;AACA,IAAMA,OAAO;AACX,eAAa,MADF;AAEX,iBAAe,MAFJ;AAGX,2BAAyB,QAHd;AAIX,0BAAwB,QAJb;AAKX,iCAA+B,UALpB;AAMX,yBAAuB,UANZ;AAOX,yBAAuB,QAPZ;AAQX,wBAAsB,QARX;AASX,+BAA6B,UATlB;AAUX,wBAAsB;AAVX,CAAb;;kBAaeA,I","file":"index.js","sourcesContent":["// 语言包\n// 英文短语和中文提示的对应\nconst data = {\n  'not found': '没有数据',\n  'auth failed': '请先登录',\n  'create comment failed': '创建评论失败',\n  'comment favor failed': '评论点赞失败',\n  'delete comment favor failed': '评论取消点赞失败',\n  'get comments failed': '获取评论列表失败',\n  'create reply failed': '创建回复失败',\n  'reply favor failed': '回复点赞失败',\n  'delete reply favor failed': '删除回复点赞失败',\n  'get replies failed': '获取回复列表失败',\n};\n\nexport default data;\n"]}

+ 25
- 25
lib/mock.js Näytä tiedosto

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

+ 1
- 1
lib/mock.js.map Näytä tiedosto

@@ -1 +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"]}
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"]}

+ 14
- 14
lib/registerServiceWorker.js Näytä tiedosto

@@ -1,4 +1,4 @@
1
-"use strict";
1
+'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4 4
   value: true
@@ -15,14 +15,14 @@ exports.unregister = unregister;
15 15
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
16 16
 // This link also includes instructions on opting out of this behavior.
17 17
 
18
-var isLocalhost = Boolean(window.location.hostname === "localhost" ||
18
+var isLocalhost = Boolean(window.location.hostname === 'localhost' ||
19 19
 // [::1] is the IPv6 localhost address.
20
-window.location.hostname === "[::1]" ||
20
+window.location.hostname === '[::1]' ||
21 21
 // 127.0.0.1/8 is considered localhost for IPv4.
22 22
 window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
23 23
 
24 24
 function register() {
25
-  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
25
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
26 26
     // The URL constructor is available in all browsers that support SW.
27 27
     var publicUrl = new URL(process.env.PUBLIC_URL, window.location);
28 28
     if (publicUrl.origin !== window.location.origin) {
@@ -32,8 +32,8 @@ function register() {
32 32
       return;
33 33
     }
34 34
 
35
-    window.addEventListener("load", function () {
36
-      var swUrl = process.env.PUBLIC_URL + "/service-worker.js";
35
+    window.addEventListener('load', function () {
36
+      var swUrl = process.env.PUBLIC_URL + '/service-worker.js';
37 37
 
38 38
       if (isLocalhost) {
39 39
         // This is running on localhost. Lets check if a service worker still exists or not.
@@ -42,7 +42,7 @@ function register() {
42 42
         // Add some additional logging to localhost, pointing developers to the
43 43
         // service worker/PWA documentation.
44 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");
45
+          console.log('This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://goo.gl/SC7cgQ');
46 46
         });
47 47
       } else {
48 48
         // Is not local host. Just register service worker
@@ -57,24 +57,24 @@ function registerValidSW(swUrl) {
57 57
     registration.onupdatefound = function () {
58 58
       var installingWorker = registration.installing;
59 59
       installingWorker.onstatechange = function () {
60
-        if (installingWorker.state === "installed") {
60
+        if (installingWorker.state === 'installed') {
61 61
           if (navigator.serviceWorker.controller) {
62 62
             // At this point, the old content will have been purged and
63 63
             // the fresh content will have been added to the cache.
64 64
             // It's the perfect time to display a "New content is
65 65
             // available; please refresh." message in your web app.
66
-            console.log("New content is available; please refresh.");
66
+            console.log('New content is available; please refresh.');
67 67
           } else {
68 68
             // At this point, everything has been precached.
69 69
             // It's the perfect time to display a
70 70
             // "Content is cached for offline use." message.
71
-            console.log("Content is cached for offline use.");
71
+            console.log('Content is cached for offline use.');
72 72
           }
73 73
         }
74 74
       };
75 75
     };
76 76
   }).catch(function (error) {
77
-    console.error("Error during service worker registration:", error);
77
+    console.error('Error during service worker registration:', error);
78 78
   });
79 79
 }
80 80
 
@@ -82,7 +82,7 @@ function checkValidServiceWorker(swUrl) {
82 82
   // Check if the service worker can be found. If it can't reload the page.
83 83
   fetch(swUrl).then(function (response) {
84 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) {
85
+    if (response.status === 404 || response.headers.get('content-type').indexOf('javascript') === -1) {
86 86
       // No service worker found. Probably a different app. Reload the page.
87 87
       navigator.serviceWorker.ready.then(function (registration) {
88 88
         registration.unregister().then(function () {
@@ -94,12 +94,12 @@ function checkValidServiceWorker(swUrl) {
94 94
       registerValidSW(swUrl);
95 95
     }
96 96
   }).catch(function () {
97
-    console.log("No internet connection found. App is running in offline mode.");
97
+    console.log('No internet connection found. App is running in offline mode.');
98 98
   });
99 99
 }
100 100
 
101 101
 function unregister() {
102
-  if ("serviceWorker" in navigator) {
102
+  if ('serviceWorker' in navigator) {
103 103
     navigator.serviceWorker.ready.then(function (registration) {
104 104
       registration.unregister();
105 105
     });

+ 1
- 1
lib/registerServiceWorker.js.map
File diff suppressed because it is too large
Näytä tiedosto


+ 1
- 1
package.json Näytä tiedosto

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

+ 13
- 0
src/App.css Näytä tiedosto

@@ -7,3 +7,16 @@
7 7
   position: fixed;
8 8
   top: 45%;
9 9
 }
10
+.comment-header-tag {
11
+  border: 1px solid #cecece;
12
+  border-radius: 0;
13
+  color: #666;
14
+}
15
+.comment-header-tip {
16
+  color: #5198eb;
17
+  margin-right: 15px;
18
+  margin-left: 5px;
19
+}
20
+.comment-header-text {
21
+  color: #666;
22
+}

+ 14
- 5
src/App.js Näytä tiedosto

@@ -1,6 +1,6 @@
1 1
 import React, { Component } from "react";
2 2
 import PropTypes from "prop-types";
3
-import { message } from "antd";
3
+import { message, Tag } from "antd";
4 4
 import axios from "./axios";
5 5
 import { ERROR_DEFAULT, LIMIT } from "./constant";
6 6
 import { CommentContext } from "./Comment";
@@ -128,8 +128,6 @@ class App extends Component {
128 128
           }
129 129
           return item;
130 130
         });
131
-        console.log("list: ", list);
132
-
133 131
         this.setState({ list });
134 132
       })
135 133
       .catch(error => {
@@ -350,6 +348,15 @@ class App extends Component {
350 348
     return (
351 349
       <CommentContext.Provider value={value}>
352 350
         <div className="comment">
351
+          {this.props.showHeader && (
352
+            <div style={{ marginBottom: 15 }}>
353
+              <Tag className="comment-header-tag">留言</Tag>
354
+              <span className="comment-header-tip">口碑</span>
355
+              <span className="comment-header-text">
356
+                (全站挑出毛病或提出合理建议,奖励10到100元红包)
357
+              </span>
358
+            </div>
359
+          )}
353 360
           {this.props.showEditor && (
354 361
             <CommentInput content={this.props.children} />
355 362
           )}
@@ -369,13 +376,15 @@ App.propTypes = {
369 376
   businessId: PropTypes.string.isRequired, // 评论的 business_id
370 377
   API: PropTypes.string, // 评论的 API 前缀
371 378
   showList: PropTypes.bool, // 是否显示评论列表
372
-  showEditor: PropTypes.bool // 是否显示评论输入框
379
+  showEditor: PropTypes.bool, // 是否显示评论输入框
380
+  showHeader: PropTypes.bool // 是否显示评论顶部的提示
373 381
 };
374 382
 
375 383
 App.defaultProps = {
376 384
   API: "http://api.links123.net/comment/v1",
377 385
   showList: true,
378
-  showEditor: true
386
+  showEditor: true,
387
+  showHeader: true
379 388
 };
380 389
 
381 390
 export { Editor };

+ 0
- 12
src/CHANGELOG.md Näytä tiedosto

@@ -1,12 +0,0 @@
1
-# CHANGELOG
2
-
3
-
4
-## 0.1.0
5
-
6
-- [x] 不兼容更新。
7
-- [x] 添加了很多 `Props`
8
-- [x] 组件导出为 `Comment` 和 `Editor`
9
-
10
-
11
-
12
-

+ 11
- 10
src/components/CommentBox/index.css Näytä tiedosto

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

+ 2
- 2
src/components/CommentBox/index.js Näytä tiedosto

@@ -59,11 +59,11 @@ class CommentBox extends Component {
59 59
                   content={item}
60 60
                   action="replyToReply" // 回复的回复
61 61
                 />,
62
-                <div className="moreBox" key="show_more_button">
62
+                <div className="comment-more-box" key="show_more_button">
63 63
                   {!isNoMoreReply &&
64 64
                     replyCount !== len && (
65 65
                       <span
66
-                        className="showMore"
66
+                        className="comment-show-more"
67 67
                         onClick={() => this.handleGetMoreReply(commentId)}
68 68
                       >
69 69
                         查看更多回复

+ 2
- 2
src/components/CommentList/index.css Näytä tiedosto

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

+ 2
- 2
src/components/CommentList/index.js Näytä tiedosto

@@ -30,7 +30,7 @@ class CommentList extends Component {
30 30
     return (
31 31
       <div>
32 32
         <Spin spinning={spinning}>
33
-          <div>共{total} 条评论</div>
33
+          <div>共 {total} 条评论</div>
34 34
           {list.map(item => (
35 35
             <CommentBox content={item} key={item.id} commentId={item.id} />
36 36
           ))}
@@ -38,7 +38,7 @@ class CommentList extends Component {
38 38
           {!isNoMoreComment &&
39 39
             list.length !== total && (
40 40
               <div
41
-                className="showMore"
41
+                className="comment-list-show-more"
42 42
                 onClick={() => sGetComment({ page: page + 1 })}
43 43
               >
44 44
                 <span>查看更多评论</span>

+ 19
- 17
src/components/ContentItem/index.css Näytä tiedosto

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

+ 27
- 17
src/components/ContentItem/index.js Näytä tiedosto

@@ -1,13 +1,18 @@
1 1
 import React, { Component } from "react";
2 2
 import PropTypes from "prop-types";
3
-import { Avatar, Icon } from "antd";
3
+import { Avatar, Icon, Tooltip } from "antd";
4 4
 import dayjs from "dayjs";
5
+import "dayjs/locale/zh-cn";
6
+import relativeTime from "dayjs/plugin/relativeTime";
5 7
 import Comment from "../../Comment";
6 8
 import CommentInput from "../CommentInput";
7 9
 import avatar from "../../avatar";
8 10
 import { renderContent } from "../../helper";
9 11
 import "./index.css";
10 12
 
13
+dayjs.locale("zh-cn");
14
+dayjs.extend(relativeTime);
15
+
11 16
 class CommentItem extends Component {
12 17
   constructor(props) {
13 18
     super(props);
@@ -50,48 +55,53 @@ class CommentItem extends Component {
50 55
     const { showInput } = this.state;
51 56
 
52 57
     return (
53
-      <div className="box">
54
-        <div className="left">
58
+      <div className="comment-item-box">
59
+        <div className="comment-item-left">
55 60
           <Avatar src={content.user_avatar || avatar} size="large" />
56 61
         </div>
57
-        <div className="right">
58
-          <div className="name">
62
+        <div className="comment-item-right">
63
+          <div>
59 64
             <a href={`/${content.user_id}`}>
60 65
               {content.user_name || "暂无昵称"}
61 66
             </a>
62 67
 
63 68
             <span style={{ marginLeft: 10 }}>
64
-              {dayjs(content.created * 1000).format("YYYY-MM-DD HH:mm:ss")}
69
+              <Tooltip
70
+                placement="top"
71
+                title={dayjs(content.created * 1000).format(
72
+                  "YYYY-MM-DD HH:mm:ss"
73
+                )}
74
+              >
75
+                {dayjs(content.created * 1000).fromNow()}
76
+              </Tooltip>
65 77
             </span>
66 78
           </div>
67 79
           <div
68
-            className="content"
80
+            className="comment-item-content"
69 81
             dangerouslySetInnerHTML={{
70 82
               __html: renderContent(
71 83
                 this.renderTextWithReply(content.content, content)
72 84
               )
73 85
             }}
74 86
           />
75
-          <div className="bottom">
87
+          <div className="comment-item-bottom">
76 88
             {content.reply_count ? (
77 89
               <div>
78
-                <a
79
-                  className="itemLeft"
80
-                  onClick={onShowReply}
81
-                  style={{ userSelect: "none" }}
82
-                >
90
+                <a className="comment-item-bottom-left" onClick={onShowReply}>
83 91
                   {content.reply_count} 条回复
84 92
                   {showReply ? <Icon type="up" /> : <Icon type="down" />}
85 93
                 </a>
86 94
               </div>
87 95
             ) : null}
88 96
 
89
-            <a onClick={this.handleToggleInput} className="itemRight">
97
+            <a
98
+              onClick={this.handleToggleInput}
99
+              className="comment-item-bottom-right"
100
+            >
90 101
               &nbsp; 回复
91 102
             </a>
92 103
             <div
93
-              className="itemRight"
94
-              style={{ cursor: "pointer" }}
104
+              className="comment-item-bottom-right"
95 105
               onClick={() => {
96 106
                 if (replyId) {
97 107
                   // 如果有 replyId,则说明是评论的回复
@@ -103,7 +113,7 @@ class CommentItem extends Component {
103 113
             >
104 114
               <Icon
105 115
                 type="like-o"
106
-                className={content.favored ? "favored" : ""}
116
+                className={content.favored ? "comment-favored" : ""}
107 117
               />
108 118
               &nbsp;{content.favor_count}
109 119
             </div>

+ 23
- 29
src/components/Editor/index.css Näytä tiedosto

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

+ 9
- 7
src/components/Editor/index.js Näytä tiedosto

@@ -117,7 +117,7 @@ class Editor extends React.Component {
117 117
 
118 118
     const handleSubmit = this.handleSubmit;
119 119
     return (
120
-      <div className="editor">
120
+      <div className="comment-editor">
121 121
         <TextArea
122 122
           value={value || this.state.value}
123 123
           onChange={e => this.handleChange(e.target.value)}
@@ -125,8 +125,8 @@ class Editor extends React.Component {
125 125
           placeholder={placeholder}
126 126
         />
127 127
 
128
-        <div className="toolbar">
129
-          <div style={{ float: "left", margin: "8px 11px" }}>
128
+        <div className="comment-toolbar">
129
+          <div className="comment-toolbar-left">
130 130
             {showEmoji && (
131 131
               <Popover
132 132
                 trigger="click"
@@ -137,9 +137,11 @@ class Editor extends React.Component {
137 137
                     <Emoji onClick={this.handleClickEmoji} />
138 138
                   </div>
139 139
                 }
140
-                overlayClassName="feed"
140
+                overlayClassName="comment-emoji-popover"
141 141
               >
142
-                {emojiToolIcon || <Icon type="smile-o" className="icon" />}
142
+                {emojiToolIcon || (
143
+                  <Icon type="smile-o" className="comment-toolbar-icon" />
144
+                )}
143 145
               </Popover>
144 146
             )}
145 147
 
@@ -187,7 +189,7 @@ class Editor extends React.Component {
187 189
                 ) : (
188 190
                   <Icon
189 191
                     type="picture"
190
-                    className="icon"
192
+                    className="comment-toolbar-icon"
191 193
                     style={{ marginLeft: 10 }}
192 194
                     onClick={() => this.handleShowUpload(true)}
193 195
                   />
@@ -196,7 +198,7 @@ class Editor extends React.Component {
196 198
             )}
197 199
           </div>
198 200
 
199
-          <div style={{ float: "right", margin: "5px 11px" }}>
201
+          <div className="comment-toolbar-right">
200 202
             {button ? (
201 203
               React.cloneElement(button, {
202 204
                 onClick: button.props.onClick || handleSubmit

+ 0
- 72
src/mock.js Näytä tiedosto

@@ -1,72 +0,0 @@
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
-};