通用评论

App.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.RenderText = exports.Editor = undefined;
  6. var _message2 = require("antd/es/message");
  7. var _message3 = _interopRequireDefault(_message2);
  8. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  9. 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. require("antd/es/message/style/css");
  11. var _react = require("react");
  12. var _react2 = _interopRequireDefault(_react);
  13. var _propTypes = require("prop-types");
  14. var _propTypes2 = _interopRequireDefault(_propTypes);
  15. var _axios = require("axios");
  16. var _axios2 = _interopRequireDefault(_axios);
  17. var _constant = require("./constant");
  18. var _Comment = require("./Comment");
  19. var _helper = require("./helper");
  20. var _CommentInput = require("./components/CommentInput");
  21. var _CommentInput2 = _interopRequireDefault(_CommentInput);
  22. var _CommentList = require("./components/CommentList");
  23. var _CommentList2 = _interopRequireDefault(_CommentList);
  24. var _Editor = require("./components/Editor");
  25. var _Editor2 = _interopRequireDefault(_Editor);
  26. var _RenderText = require("./components/RenderText");
  27. var _RenderText2 = _interopRequireDefault(_RenderText);
  28. var _lang = require("./lang");
  29. var _lang2 = _interopRequireDefault(_lang);
  30. require("./App.css");
  31. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  32. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  33. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  34. 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; }
  35. // import styles from "./App.module.css";
  36. var App = function (_Component) {
  37. _inherits(App, _Component);
  38. function App(props) {
  39. _classCallCheck(this, App);
  40. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  41. _this.state = {
  42. loading: {},
  43. // oss 配置
  44. oss: {},
  45. // 评论数据
  46. list: [],
  47. page: 1,
  48. total: 0,
  49. // 是否没有更多评论了
  50. isNoMoreComment: false
  51. };
  52. _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
  53. _this.sCreateComment = _this.sCreateComment.bind(_this);
  54. _this.sDeleteComment = _this.sDeleteComment.bind(_this);
  55. _this.sCommentFavor = _this.sCommentFavor.bind(_this);
  56. _this.sCreateReply = _this.sCreateReply.bind(_this);
  57. _this.sDeleteReply = _this.sDeleteReply.bind(_this);
  58. _this.errorHandler = _this.errorHandler.bind(_this);
  59. _this.sGetComment = _this.sGetComment.bind(_this);
  60. _this.sReplyFavor = _this.sReplyFavor.bind(_this);
  61. _this.sGetReply = _this.sGetReply.bind(_this);
  62. _this.sOssSts = _this.sOssSts.bind(_this);
  63. return _this;
  64. }
  65. _createClass(App, [{
  66. key: "componentWillMount",
  67. value: function componentWillMount() {
  68. this.axios = _axios2.default;
  69. this.axios.defaults.withCredentials = true;
  70. if (this.props.token) {
  71. this.axios.defaults.headers.common["Authorization"] = "Bearer " + this.props.token;
  72. }
  73. }
  74. }, {
  75. key: "componentDidMount",
  76. value: function componentDidMount() {}
  77. }, {
  78. key: "error",
  79. value: function error(msg) {
  80. var info = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  81. if (this.props.showError) {
  82. _message3.default.error(msg);
  83. }
  84. if (this.props.onError) {
  85. this.props.onError(msg, info);
  86. }
  87. }
  88. }, {
  89. key: "errorHandler",
  90. value: function errorHandler(error) {
  91. if (error.response && error.response.data && error.response.data.msg) {
  92. this.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT, {
  93. response: error.response
  94. });
  95. return;
  96. }
  97. this.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT, {
  98. response: error.response
  99. });
  100. }
  101. /**
  102. * 改变 loading 状态
  103. * @param {string} key key
  104. * @param {string} value value
  105. */
  106. }, {
  107. key: "handleChangeLoading",
  108. value: function handleChangeLoading(key, value) {
  109. var loading = this.state.loading;
  110. loading[key] = value;
  111. this.setState({ loading: loading });
  112. }
  113. /**
  114. * 获取评论列表
  115. */
  116. }, {
  117. key: "sGetComment",
  118. value: function sGetComment() {
  119. var _this2 = this;
  120. var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  121. _ref$page = _ref.page,
  122. page = _ref$page === undefined ? 1 : _ref$page;
  123. var pageType = this.props.pageType;
  124. this.handleChangeLoading("sGetComment", true);
  125. var _props = this.props,
  126. API = _props.API,
  127. type = _props.type,
  128. businessId = _props.businessId,
  129. limit = _props.limit;
  130. this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + limit).then(function (response) {
  131. var _response$data = response.data,
  132. list = _response$data.list,
  133. page = _response$data.page,
  134. total = _response$data.total;
  135. if (list) {
  136. var newList = list;
  137. var oldList = _this2.state.list;
  138. if (pageType === "more") {
  139. if (page > 1) {
  140. // 删除临时数据
  141. oldList = oldList.filter(function (o) {
  142. return !o.isTemporary;
  143. });
  144. newList = oldList.concat(newList);
  145. }
  146. } else if (pageType === "pagination") {
  147. // TODO 滚动到顶部
  148. window.scrollTo(0, 0);
  149. }
  150. _this2.setState({
  151. list: newList,
  152. page: page,
  153. total: total
  154. });
  155. } else {
  156. _message3.default.info("没有更多评论了");
  157. _this2.setState({
  158. isNoMoreComment: true
  159. });
  160. }
  161. }).catch(this.errorHandler).finally(function () {
  162. _this2.handleChangeLoading("sGetComment", false);
  163. });
  164. }
  165. /**
  166. * 获取更多回复
  167. */
  168. }, {
  169. key: "sGetReply",
  170. value: function sGetReply() {
  171. var _this3 = this;
  172. var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  173. commentId = _ref2.commentId,
  174. _ref2$page = _ref2.page,
  175. page = _ref2$page === undefined ? 1 : _ref2$page;
  176. this.handleChangeLoading("sGetReply", true);
  177. var _props2 = this.props,
  178. API = _props2.API,
  179. limit = _props2.limit;
  180. this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + limit).then(function (response) {
  181. if (!response.data.list) {
  182. _message3.default.info("没有更多数据了!");
  183. }
  184. var list = _this3.state.list.map(function (item) {
  185. if (item.id === commentId) {
  186. if (!item.replies) item.replies = [];
  187. if (response.data.list) {
  188. if (page === 1) {
  189. // 如果当前页数为第一页,则清空当前所有的 replies
  190. // 并将获取到的 replies 存放在 state
  191. item.replies = response.data.list;
  192. } else {
  193. item.replies = item.replies.filter(function (o) {
  194. return !o.isTemporary;
  195. }).concat(response.data.list);
  196. // 如果当前页数非第一页,则合并 replies
  197. }
  198. item.reply_count = response.data.total;
  199. item.reply_page = response.data.page;
  200. } else {
  201. item.isNoMoreReply = true;
  202. }
  203. }
  204. return item;
  205. });
  206. _this3.setState({ list: list });
  207. }).catch(this.errorHandler).finally(function () {
  208. _this3.handleChangeLoading("sGetReply", false);
  209. });
  210. }
  211. /**
  212. * 添加评论
  213. * @param {object} {content} comment content
  214. */
  215. }, {
  216. key: "sCreateComment",
  217. value: function sCreateComment() {
  218. var _this4 = this;
  219. var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  220. content = _ref3.content;
  221. var cb = arguments[1];
  222. if (!content) return this.error("评论内容不能为空 ");
  223. this.handleChangeLoading("sCreateComment", true);
  224. var _props3 = this.props,
  225. API = _props3.API,
  226. type = _props3.type,
  227. businessId = _props3.businessId;
  228. this.axios(API + "/comments", {
  229. method: "post",
  230. data: {
  231. type: type,
  232. business_id: businessId,
  233. content: content
  234. },
  235. withCredentials: true
  236. }).then(function (response) {
  237. if (_this4.props.showAlertComment) {
  238. _message3.default.success("评论成功!");
  239. }
  240. if ((0, _helper.isFunction)(cb)) cb();
  241. // 将数据写入到 list 中
  242. // 临时插入
  243. // 等到获取数据之后,删除临时数据
  244. var _state = _this4.state,
  245. list = _state.list,
  246. total = _state.total;
  247. list.unshift(_extends({}, response.data, {
  248. isTemporary: true // 临时的数据
  249. }));
  250. _this4.setState({ list: list, total: total + 1 });
  251. }).catch(this.errorHandler).finally(function () {
  252. _this4.handleChangeLoading("sCreateComment", false);
  253. });
  254. }
  255. /**
  256. * 删除评论
  257. */
  258. }, {
  259. key: "sDeleteComment",
  260. value: function sDeleteComment(commentId) {
  261. var _this5 = this;
  262. this.handleChangeLoading("sDeleteComment", true);
  263. var API = this.props.API;
  264. this.axios(API + "/comments/" + commentId, {
  265. method: "delete",
  266. withCredentials: true
  267. }).then(function () {
  268. var _state2 = _this5.state,
  269. list = _state2.list,
  270. total = _state2.total;
  271. var res = list.filter(function (item) {
  272. return item.id !== commentId;
  273. });
  274. _this5.setState({ list: res, total: total - 1 });
  275. _this5.props.onDelete(_constant.COMMENT_TYPE.COMMENT);
  276. }).catch(this.errorHandler).finally(function () {
  277. _this5.handleChangeLoading("sDeleteComment", false);
  278. });
  279. }
  280. /**
  281. * 添加回复
  282. * 回复评论/回复回复
  283. * @param {object} data { comment_id, content, [reply_id] }
  284. */
  285. }, {
  286. key: "sCreateReply",
  287. value: function sCreateReply(data, cb) {
  288. var _this6 = this;
  289. if (!data.content) return this.error("回复内容不能为空 ");
  290. this.handleChangeLoading("sCreateReply", true);
  291. var API = this.props.API;
  292. this.axios(API + "/replies", {
  293. method: "post",
  294. data: data,
  295. withCredentials: true
  296. }).then(function (response) {
  297. if (_this6.props.showAlertReply) {
  298. _message3.default.success("回复成功!");
  299. }
  300. if ((0, _helper.isFunction)(cb)) cb();
  301. // 将数据写入到 list 中
  302. // 临时插入
  303. // 等到获取数据之后,删除临时数据
  304. var list = _this6.state.list.map(function (item) {
  305. if (item.id === data.comment_id) {
  306. if (!item.replies) item.replies = [];
  307. item.replies.push(_extends({}, response.data, {
  308. isTemporary: true // 临时的数据
  309. }));
  310. item.reply_count += 1;
  311. }
  312. return item;
  313. });
  314. _this6.setState({ list: list });
  315. }).catch(this.errorHandler).finally(function () {
  316. _this6.handleChangeLoading("sCreateReply", false);
  317. });
  318. }
  319. /**
  320. * 删除回复
  321. * @param {*} replyId
  322. * @param {*} commentId
  323. */
  324. }, {
  325. key: "sDeleteReply",
  326. value: function sDeleteReply(replyId, commentId) {
  327. var _this7 = this;
  328. this.handleChangeLoading("sDeleteReply", true);
  329. var API = this.props.API;
  330. this.axios(API + "/replies/" + replyId + "?CommentID=" + commentId, {
  331. method: "delete",
  332. withCredentials: true
  333. }).then(function () {
  334. var list = _this7.state.list.map(function (item) {
  335. if (item.id === commentId) {
  336. var replies = item.replies.filter(function (item) {
  337. return item.id !== replyId;
  338. });
  339. item.replies = replies;
  340. item.reply_count -= 1;
  341. }
  342. return item;
  343. });
  344. _this7.setState({ list: list });
  345. _this7.props.onDelete(_constant.COMMENT_TYPE.REPLY);
  346. }).catch(this.errorHandler).finally(function () {
  347. _this7.handleChangeLoading("sDeleteReply", false);
  348. });
  349. }
  350. /**
  351. * 评论 点赞/取消点赞
  352. * @param {string} commentId { commentId }
  353. * @param {boolean} favored 是否已经点过赞
  354. */
  355. }, {
  356. key: "sCommentFavor",
  357. value: function sCommentFavor(commentId, favored) {
  358. var _this8 = this;
  359. this.handleChangeLoading("sCommentFavor", true);
  360. var API = this.props.API;
  361. this.axios(API + "/comments/" + commentId + "/favor", {
  362. method: favored ? "delete" : "put",
  363. withCredentials: true
  364. }).then(function (response) {
  365. if (_this8.props.showAlertFavor) {
  366. _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
  367. }
  368. // 更新 list 中的该项数据的 favored
  369. var list = _this8.state.list.map(function (item) {
  370. if (item.id === commentId) {
  371. item.favored = !favored;
  372. item.favor_count += favored ? -1 : 1;
  373. }
  374. return item;
  375. });
  376. _this8.setState({ list: list });
  377. }).catch(this.errorHandler).finally(function () {
  378. _this8.handleChangeLoading("sCommentFavor", false);
  379. });
  380. }
  381. /**
  382. * 回复 点赞/取消点赞
  383. * @param {string} replyId replyId
  384. * @param {string} commentId commentId
  385. * @param {boolean} favored 是否已经点过赞
  386. */
  387. }, {
  388. key: "sReplyFavor",
  389. value: function sReplyFavor(replyId, commentId, favored) {
  390. var _this9 = this;
  391. this.handleChangeLoading("sReplyFavor", true);
  392. var API = this.props.API;
  393. this.axios(API + "/replies/" + replyId + "/favor", {
  394. method: favored ? "delete" : "put",
  395. data: {
  396. comment_id: commentId
  397. },
  398. withCredentials: true
  399. }).then(function (response) {
  400. _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
  401. // 更新 list 中的该项数据的 favored
  402. var list = _this9.state.list.map(function (item) {
  403. if (item.id === commentId) {
  404. item.replies = item.replies.map(function (r) {
  405. if (r.id === replyId) {
  406. r.favored = !favored;
  407. // r.favor_count = response.data.favor_count;
  408. // 点赞数 +1,而不是使用后端返回的点赞数
  409. // 不然如果返回的不是增加 1,用户可能以为程序错误
  410. r.favor_count += favored ? -1 : 1;
  411. }
  412. return r;
  413. });
  414. }
  415. return item;
  416. });
  417. _this9.setState({ list: list });
  418. }).catch(this.errorHandler).finally(function () {
  419. _this9.handleChangeLoading("sReplyFavor", false);
  420. });
  421. }
  422. /**
  423. * 获取 OSS 上传的参数
  424. */
  425. }, {
  426. key: "sOssSts",
  427. value: function sOssSts() {
  428. var _this10 = this;
  429. this.handleChangeLoading("sOssSts", true);
  430. var API = this.props.API;
  431. this.axios.get(API + "/oss/sts").then(function (response) {
  432. _this10.setState({ oss: _extends({}, response.data) });
  433. }).catch(this.errorHandler).finally(function () {
  434. _this10.handleChangeLoading("sOssSts", false);
  435. });
  436. }
  437. }, {
  438. key: "render",
  439. value: function render() {
  440. // 添加到 Context 的数据
  441. var value = _extends({}, this.state, this.props, {
  442. sCreateComment: this.sCreateComment,
  443. sGetComment: this.sGetComment,
  444. sCommentFavor: this.sCommentFavor,
  445. sReplyFavor: this.sReplyFavor,
  446. sCreateReply: this.sCreateReply,
  447. sGetReply: this.sGetReply,
  448. sOssSts: this.sOssSts,
  449. sDeleteComment: this.sDeleteComment,
  450. sDeleteReply: this.sDeleteReply
  451. });
  452. return _react2.default.createElement(
  453. _Comment.CommentContext.Provider,
  454. { value: value },
  455. _react2.default.createElement(
  456. "div",
  457. { className: "comment" },
  458. this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
  459. this.props.showList && _react2.default.createElement(
  460. "div",
  461. { style: { marginTop: 20 } },
  462. _react2.default.createElement(_CommentList2.default, null)
  463. )
  464. )
  465. );
  466. }
  467. }]);
  468. return App;
  469. }(_react.Component);
  470. App.propTypes = {
  471. type: _propTypes2.default.number.isRequired, // 评论的 type
  472. businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
  473. API: _propTypes2.default.string, // 评论的 API 前缀
  474. showList: _propTypes2.default.bool, // 是否显示评论列表
  475. showEditor: _propTypes2.default.bool, // 是否显示评论输入框
  476. showAlertComment: _propTypes2.default.bool, // 评论成功之后,是否通过 Antd 的 Message 组件进行提示
  477. showAlertReply: _propTypes2.default.bool, // 回复成功之后,是否通过 Antd 的 Message 组件进行提示
  478. showAlertFavor: _propTypes2.default.bool, // 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示
  479. showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
  480. onError: _propTypes2.default.func, // 错误回调, 出错了会被调用
  481. userId: _propTypes2.default.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
  482. pageType: _propTypes2.default.string, // 分页类型
  483. page: _propTypes2.default.number, // 页码
  484. limit: _propTypes2.default.number, // 一次加载评论数量
  485. onPageChange: _propTypes2.default.func, // 页码变化回调
  486. onGetMoreBtnClick: _propTypes2.default.func, // 点击查看更多按钮回调
  487. onDelete: _propTypes2.default.func
  488. };
  489. App.defaultProps = {
  490. API: "//api.links123.net/comment/v1",
  491. showList: true,
  492. showEditor: true,
  493. showAlertComment: false,
  494. showAlertReply: false,
  495. showAlertFavor: false,
  496. showError: true,
  497. pageType: "more",
  498. limit: _constant.LIMIT,
  499. onGetMoreBtnClick: function onGetMoreBtnClick() {},
  500. onPageChange: function onPageChange(page) {},
  501. onDelete: function onDelete() {}
  502. };
  503. exports.Editor = _Editor2.default;
  504. exports.RenderText = _RenderText2.default;
  505. exports.default = App;
  506. //# sourceMappingURL=App.js.map