通用评论

App.js 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851
  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");
  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 _jsCookie = require("js-cookie");
  18. var _jsCookie2 = _interopRequireDefault(_jsCookie);
  19. var _reactIntlUniversal = require("react-intl-universal");
  20. var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
  21. var _constant = require("./constant");
  22. var _Comment = require("./Comment");
  23. var _helper = require("./helper");
  24. var _CommentInput = require("./components/CommentInput");
  25. var _CommentInput2 = _interopRequireDefault(_CommentInput);
  26. var _CommentList = require("./components/CommentList");
  27. var _CommentList2 = _interopRequireDefault(_CommentList);
  28. var _Editor = require("./components/Editor");
  29. var _Editor2 = _interopRequireDefault(_Editor);
  30. var _RenderText = require("./components/RenderText");
  31. var _RenderText2 = _interopRequireDefault(_RenderText);
  32. var _EditComment = require("./components/EditComment/EditComment");
  33. var _EditComment2 = _interopRequireDefault(_EditComment);
  34. var _lang = require("./lang");
  35. require("./App.css");
  36. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  37. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  38. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  39. 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; }
  40. 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; }
  41. var App = function (_Component) {
  42. _inherits(App, _Component);
  43. function App(props) {
  44. _classCallCheck(this, App);
  45. var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
  46. _this.state = {
  47. loading: {},
  48. // oss 配置
  49. oss: {},
  50. // 评论数据
  51. list: [],
  52. page: 1,
  53. total: 0,
  54. // 是否没有更多评论了
  55. isNoMoreComment: false,
  56. initDone: false,
  57. locale: "zh-CN",
  58. editModalVisible: false,
  59. action: "",
  60. replyId: "",
  61. commentId: "",
  62. userId: "",
  63. content: "",
  64. replyPage: 1,
  65. emojiList: []
  66. };
  67. _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
  68. _this.sCreateComment = _this.sCreateComment.bind(_this);
  69. _this.sUpdateComment = _this.sUpdateComment.bind(_this);
  70. _this.sDeleteComment = _this.sDeleteComment.bind(_this);
  71. _this.sCommentFavor = _this.sCommentFavor.bind(_this);
  72. _this.sCreateReply = _this.sCreateReply.bind(_this);
  73. _this.sDeleteReply = _this.sDeleteReply.bind(_this);
  74. _this.errorHandler = _this.errorHandler.bind(_this);
  75. _this.sGetComment = _this.sGetComment.bind(_this);
  76. _this.sReplyFavor = _this.sReplyFavor.bind(_this);
  77. _this.sGetReply = _this.sGetReply.bind(_this);
  78. _this.sUpdateReply = _this.sUpdateReply.bind(_this);
  79. _this.sOssSts = _this.sOssSts.bind(_this);
  80. _this.handleEdit = _this.handleEdit.bind(_this);
  81. _this.handleClose = _this.handleClose.bind(_this);
  82. return _this;
  83. }
  84. _createClass(App, [{
  85. key: "componentWillMount",
  86. value: function componentWillMount() {
  87. this.axios = _axios2.default;
  88. this.axios.defaults.withCredentials = true;
  89. if (this.props.token) {
  90. this.axios.defaults.headers.common["Authorization"] = "Bearer " + this.props.token;
  91. }
  92. }
  93. }, {
  94. key: "componentDidMount",
  95. value: function componentDidMount() {
  96. this.loadLocales();
  97. this.loadEmoji();
  98. }
  99. /**
  100. * 加载语言包
  101. * 只能根据url或者传入的props来确定加载哪个语言包
  102. * 优先级:传入的props > url
  103. */
  104. }, {
  105. key: "loadLocales",
  106. value: function loadLocales() {
  107. var _this2 = this;
  108. var currentLocale = this.props.locales;
  109. var cookieLang = _jsCookie2.default.get("lnk_lang");
  110. if (!currentLocale) {
  111. currentLocale = cookieLang || _reactIntlUniversal2.default.determineLocale({
  112. urlLocaleKey: "lang"
  113. });
  114. }
  115. currentLocale = _lang.SUPPORT_LOCALES.find(function (item) {
  116. return item.value === currentLocale;
  117. }) ? currentLocale : "zh-CN";
  118. var version = require("./version.json").hash;
  119. // 使用绝对路径
  120. var languageURL = _constant.LANGUAGE_LINK + "/" + currentLocale + ".json?v=" + version;
  121. return fetch(languageURL).then(function (response) {
  122. if (response.status >= 400) {
  123. throw new Error("Bad response from server");
  124. }
  125. return response.json();
  126. }).then(function (data) {
  127. // console.log('data: ', data);
  128. _reactIntlUniversal2.default.init({
  129. currentLocale: currentLocale,
  130. locales: _defineProperty({}, currentLocale, data)
  131. }).then(function () {
  132. _this2.setState({ initDone: true, locale: currentLocale });
  133. });
  134. });
  135. }
  136. /**
  137. * 加载表情包
  138. */
  139. }, {
  140. key: "loadEmoji",
  141. value: function loadEmoji() {
  142. var _this3 = this;
  143. this.axios.get(this.props.emojiAPI + "/emoticons").then(function (response) {
  144. var emojiMap = {};
  145. response.data.list.forEach(function (item) {
  146. emojiMap[item.name] = item.url;
  147. });
  148. window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
  149. _this3.setState({ emojiList: response.data.list });
  150. }).catch(this.errorHandler);
  151. }
  152. }, {
  153. key: "handleEdit",
  154. value: function handleEdit(_ref) {
  155. var replyId = _ref.replyId,
  156. commentId = _ref.commentId,
  157. userId = _ref.userId,
  158. content = _ref.content,
  159. replyPage = _ref.replyPage;
  160. this.setState({
  161. editModalVisible: true,
  162. action: content.replies ? "comment" : content.reply ? "replyToReply" : "reply",
  163. replyId: replyId,
  164. commentId: commentId,
  165. userId: userId,
  166. content: content,
  167. replyPage: replyPage
  168. });
  169. }
  170. }, {
  171. key: "handleClose",
  172. value: function handleClose() {
  173. this.setState({
  174. editModalVisible: false
  175. });
  176. }
  177. }, {
  178. key: "error",
  179. value: function error(msg) {
  180. var info = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  181. if (this.props.showError) {
  182. _message3.default.error(msg);
  183. }
  184. if (this.props.onError) {
  185. this.props.onError(msg, info);
  186. }
  187. }
  188. }, {
  189. key: "errorHandler",
  190. value: function errorHandler(error) {
  191. var locale = this.state.locale;
  192. var localResponse = _lang.LOCALES_RESPONSE[locale];
  193. if (error.response && error.response.data && error.response.data.msg) {
  194. this.error(localResponse[error.response.data.msg] || _constant.ERROR_DEFAULT, {
  195. response: error.response
  196. });
  197. return;
  198. }
  199. this.error(localResponse[error.response.data.msg] || _constant.ERROR_DEFAULT, {
  200. response: error.response
  201. });
  202. }
  203. /**
  204. * 改变 loading 状态
  205. * @param {string} key key
  206. * @param {string} value value
  207. */
  208. }, {
  209. key: "handleChangeLoading",
  210. value: function handleChangeLoading(key, value) {
  211. var loading = this.state.loading;
  212. loading[key] = value;
  213. this.setState({ loading: loading });
  214. }
  215. /**
  216. * 获取评论列表
  217. */
  218. }, {
  219. key: "sGetComment",
  220. value: function sGetComment() {
  221. var _this4 = this;
  222. var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  223. _ref2$page = _ref2.page,
  224. page = _ref2$page === undefined ? 1 : _ref2$page,
  225. _ref2$filterSpeak = _ref2.filterSpeak,
  226. filterSpeak = _ref2$filterSpeak === undefined ? 0 : _ref2$filterSpeak;
  227. var pageType = this.props.pageType;
  228. this.handleChangeLoading("sGetComment", true);
  229. var _props = this.props,
  230. API = _props.API,
  231. type = _props.type,
  232. businessId = _props.businessId,
  233. limit = _props.limit;
  234. this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&is_speak=" + filterSpeak + "&page=" + page + "&limit=" + limit).then(function (response) {
  235. var _response$data = response.data,
  236. list = _response$data.list,
  237. page = _response$data.page,
  238. total = _response$data.total;
  239. if (list) {
  240. var newList = list;
  241. var oldList = _this4.state.list;
  242. if (pageType === "more") {
  243. if (page > 1) {
  244. // 删除临时数据
  245. oldList = oldList.filter(function (o) {
  246. return !o.isTemporary;
  247. });
  248. newList = oldList.concat(newList);
  249. }
  250. } else if (pageType === "pagination") {
  251. // TODO 滚动到顶部
  252. window.scrollTo(0, 0);
  253. }
  254. _this4.setState({
  255. list: newList,
  256. page: page,
  257. total: total
  258. });
  259. _this4.props.onCountChange(total);
  260. } else {
  261. _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
  262. _this4.setState({
  263. isNoMoreComment: true
  264. });
  265. }
  266. }).catch(this.errorHandler).finally(function () {
  267. _this4.handleChangeLoading("sGetComment", false);
  268. });
  269. }
  270. /**
  271. * 获取更多回复
  272. */
  273. }, {
  274. key: "sGetReply",
  275. value: function sGetReply() {
  276. var _this5 = this;
  277. var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  278. commentId = _ref3.commentId,
  279. _ref3$page = _ref3.page,
  280. page = _ref3$page === undefined ? 1 : _ref3$page;
  281. this.handleChangeLoading("sGetReply", true);
  282. var _props2 = this.props,
  283. API = _props2.API,
  284. limit = _props2.limit;
  285. this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + limit).then(function (response) {
  286. if (!response.data.list) {
  287. _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreData"));
  288. }
  289. var list = _this5.state.list.map(function (item) {
  290. if (item.id === commentId) {
  291. if (!item.replies) item.replies = [];
  292. if (response.data.list) {
  293. if (page === 1) {
  294. // 如果当前页数为第一页,则清空当前所有的 replies
  295. // 并将获取到的 replies 存放在 state
  296. item.replies = response.data.list;
  297. } else {
  298. item.replies = item.replies.filter(function (o) {
  299. return !o.isTemporary;
  300. }).concat(response.data.list);
  301. // 如果当前页数非第一页,则合并 replies
  302. }
  303. item.reply_count = response.data.total;
  304. item.reply_page = response.data.page;
  305. } else {
  306. item.isNoMoreReply = true;
  307. }
  308. }
  309. return item;
  310. });
  311. _this5.setState({ list: list });
  312. }).catch(this.errorHandler).finally(function () {
  313. _this5.handleChangeLoading("sGetReply", false);
  314. });
  315. }
  316. /**
  317. * 添加评论
  318. * @param {object} {content} comment content
  319. */
  320. }, {
  321. key: "sCreateComment",
  322. value: function sCreateComment() {
  323. var _this6 = this;
  324. var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  325. content = _ref4.content;
  326. var cb = arguments[1];
  327. if (!content) return this.error(_reactIntlUniversal2.default.get("message.notNull"));
  328. this.handleChangeLoading("sCreateComment", true);
  329. var _props3 = this.props,
  330. API = _props3.API,
  331. type = _props3.type,
  332. businessId = _props3.businessId,
  333. businessUserId = _props3.businessUserId;
  334. this.axios(API + "/comments", {
  335. method: "post",
  336. data: {
  337. type: type,
  338. business_id: businessId,
  339. business_user_id: businessUserId,
  340. content: content
  341. },
  342. withCredentials: true
  343. }).then(function (response) {
  344. if (_this6.props.showAlertComment) {
  345. _message3.default.success(_reactIntlUniversal2.default.get("message.success"));
  346. }
  347. if ((0, _helper.isFunction)(cb)) cb(response.data);
  348. // 将数据写入到 list 中
  349. // 临时插入
  350. // 等到获取数据之后,删除临时数据
  351. var _state = _this6.state,
  352. list = _state.list,
  353. total = _state.total;
  354. list.unshift(_extends({}, response.data, {
  355. replies: [],
  356. isTemporary: true // 临时的数据
  357. }));
  358. _this6.setState({ list: list, total: total + 1 });
  359. _this6.props.onCountChange(total + 1);
  360. }).catch(function (error) {
  361. _this6.props.onCommentFail(error.response.status, error.response.data);
  362. _this6.errorHandler(error);
  363. }).finally(function () {
  364. _this6.handleChangeLoading("sCreateComment", false);
  365. });
  366. }
  367. /**
  368. * 删除评论
  369. */
  370. }, {
  371. key: "sDeleteComment",
  372. value: function sDeleteComment(commentId) {
  373. var _this7 = this;
  374. this.handleChangeLoading("sDeleteComment", true);
  375. var API = this.props.API;
  376. this.axios(API + "/comments/" + commentId, {
  377. method: "delete",
  378. withCredentials: true
  379. }).then(function () {
  380. var _state2 = _this7.state,
  381. list = _state2.list,
  382. total = _state2.total;
  383. var res = list.filter(function (item) {
  384. return item.id !== commentId;
  385. });
  386. var deletedItem = list.find(function (item) {
  387. return item.id === commentId;
  388. });
  389. _this7.setState({ list: res, total: total - 1 });
  390. _this7.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
  391. _this7.props.onCountChange(total - 1);
  392. }).catch(this.errorHandler).finally(function () {
  393. _this7.handleChangeLoading("sDeleteComment", false);
  394. });
  395. }
  396. /**
  397. * 更新评论
  398. * @param {object} {content} comment content
  399. */
  400. }, {
  401. key: "sUpdateComment",
  402. value: function sUpdateComment(_ref5) {
  403. var _this8 = this;
  404. var commentId = _ref5.commentId,
  405. content = _ref5.content,
  406. successCallback = _ref5.successCallback;
  407. this.handleChangeLoading("sUpdateComment", true);
  408. var API = this.props.API;
  409. this.axios(API + "/comments/" + commentId, {
  410. method: "post",
  411. data: {
  412. content: content
  413. },
  414. withCredentials: true
  415. }).then(function () {
  416. var list = _this8.state.list;
  417. list = list.map(function (it) {
  418. if (it.id === commentId) {
  419. return _extends({}, it, {
  420. content: content
  421. });
  422. }
  423. return it;
  424. });
  425. _this8.props.onUpdateComment("comment");
  426. _this8.setState({ list: list });
  427. if (successCallback) {
  428. successCallback();
  429. }
  430. }).catch(function (error) {
  431. _this8.props.onCommentFail(error.response.status, error.response.data);
  432. _this8.errorHandler(error);
  433. }).finally(function () {
  434. _this8.handleChangeLoading("sUpdateComment", false);
  435. });
  436. }
  437. /**
  438. * 添加回复
  439. * 回复评论/回复回复
  440. * @param {object} data { comment_id, content, [reply_id] }
  441. */
  442. }, {
  443. key: "sCreateReply",
  444. value: function sCreateReply(data, cb) {
  445. var _this9 = this;
  446. if (!data.content) return this.error(_reactIntlUniversal2.default.get("message.replyNoNull"));
  447. this.handleChangeLoading("sCreateReply", true);
  448. var API = this.props.API;
  449. this.axios(API + "/replies", {
  450. method: "post",
  451. data: data,
  452. withCredentials: true
  453. }).then(function (response) {
  454. if (_this9.props.showAlertReply) {
  455. _message3.default.success(_reactIntlUniversal2.default.get("message.replySuccess"));
  456. }
  457. if ((0, _helper.isFunction)(cb)) cb(response.data);
  458. // 将数据写入到 list 中
  459. // 临时插入
  460. // 等到获取数据之后,删除临时数据
  461. var list = _this9.state.list.map(function (item) {
  462. if (item.id === data.comment_id) {
  463. if (!item.replies) item.replies = [];
  464. item.replies.push(_extends({}, response.data, {
  465. isTemporary: true // 临时的数据
  466. }));
  467. item.reply_count += 1;
  468. }
  469. return item;
  470. });
  471. _this9.setState({ list: list });
  472. }).catch(function (error) {
  473. _this9.props.onCommentFail(error.response.status, error.response.data);
  474. _this9.errorHandler(error);
  475. }).finally(function () {
  476. _this9.handleChangeLoading("sCreateReply", false);
  477. });
  478. }
  479. /**
  480. * 删除回复
  481. * @param {*} replyId
  482. * @param {*} commentId
  483. */
  484. }, {
  485. key: "sDeleteReply",
  486. value: function sDeleteReply(replyId, commentId) {
  487. var _this10 = this;
  488. this.handleChangeLoading("sDeleteReply", true);
  489. var API = this.props.API;
  490. this.axios(API + "/replies/" + replyId + "?CommentID=" + commentId, {
  491. method: "delete",
  492. withCredentials: true
  493. }).then(function () {
  494. var deletedItem = null;
  495. var list = _this10.state.list.map(function (item) {
  496. if (item.id === commentId) {
  497. var replies = item.replies.filter(function (item) {
  498. return item.id !== replyId;
  499. });
  500. deletedItem = item.replies.find(function (item) {
  501. return item.id === replyId;
  502. });
  503. item.replies = replies;
  504. item.reply_count -= 1;
  505. }
  506. return item;
  507. });
  508. _this10.setState({ list: list });
  509. _this10.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
  510. }).catch(this.errorHandler).finally(function () {
  511. _this10.handleChangeLoading("sDeleteReply", false);
  512. });
  513. }
  514. /**
  515. * 更新回复
  516. * 回复评论/回复回复
  517. * @param {object} data { comment_id, content, reply_id }
  518. */
  519. }, {
  520. key: "sUpdateReply",
  521. value: function sUpdateReply(_ref6) {
  522. var _this11 = this;
  523. var commentId = _ref6.commentId,
  524. content = _ref6.content,
  525. replyId = _ref6.replyId,
  526. replyPage = _ref6.replyPage,
  527. successCallback = _ref6.successCallback;
  528. this.handleChangeLoading("sUpdateReply", true);
  529. var API = this.props.API;
  530. this.axios(API + "/replies/" + replyId, {
  531. method: "post",
  532. data: {
  533. comment_id: commentId,
  534. content: content
  535. },
  536. withCredentials: true
  537. }).then(function () {
  538. for (var i = 1; i <= replyPage; i++) {
  539. _this11.sGetReply({ commentId: commentId, page: i });
  540. }
  541. if (successCallback) {
  542. successCallback();
  543. }
  544. _this11.props.onUpdateComment("reply");
  545. }).catch(function (error) {
  546. _this11.props.onCommentFail(error.response.status, error.response.data);
  547. _this11.errorHandler(error);
  548. }).finally(function () {
  549. _this11.handleChangeLoading("sUpdateReply", false);
  550. });
  551. }
  552. /**
  553. * 评论 点赞/取消点赞
  554. * @param {string} commentId { commentId }
  555. * @param {boolean} favored 是否已经点过赞
  556. */
  557. }, {
  558. key: "sCommentFavor",
  559. value: function sCommentFavor(commentId, favored) {
  560. var _this12 = this;
  561. this.handleChangeLoading("sCommentFavor", true);
  562. var API = this.props.API;
  563. this.axios(API + "/comments/" + commentId + "/favor", {
  564. method: favored ? "delete" : "put",
  565. withCredentials: true
  566. }).then(function (response) {
  567. if (_this12.props.showAlertFavor) {
  568. _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
  569. }
  570. // 更新 list 中的该项数据的 favored
  571. var list = _this12.state.list.map(function (item) {
  572. if (item.id === commentId) {
  573. item.favored = !favored;
  574. item.favor_count += favored ? -1 : 1;
  575. }
  576. return item;
  577. });
  578. _this12.setState({ list: list });
  579. }).catch(this.errorHandler).finally(function () {
  580. _this12.handleChangeLoading("sCommentFavor", false);
  581. });
  582. }
  583. /**
  584. * 回复 点赞/取消点赞
  585. * @param {string} replyId replyId
  586. * @param {string} commentId commentId
  587. * @param {boolean} favored 是否已经点过赞
  588. */
  589. }, {
  590. key: "sReplyFavor",
  591. value: function sReplyFavor(replyId, commentId, favored) {
  592. var _this13 = this;
  593. this.handleChangeLoading("sReplyFavor", true);
  594. var API = this.props.API;
  595. this.axios(API + "/replies/" + replyId + "/favor", {
  596. method: favored ? "delete" : "put",
  597. data: {
  598. comment_id: commentId
  599. },
  600. withCredentials: true
  601. }).then(function (response) {
  602. _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
  603. // 更新 list 中的该项数据的 favored
  604. var list = _this13.state.list.map(function (item) {
  605. if (item.id === commentId) {
  606. item.replies = item.replies.map(function (r) {
  607. if (r.id === replyId) {
  608. r.favored = !favored;
  609. // r.favor_count = response.data.favor_count;
  610. // 点赞数 +1,而不是使用后端返回的点赞数
  611. // 不然如果返回的不是增加 1,用户可能以为程序错误
  612. r.favor_count += favored ? -1 : 1;
  613. }
  614. return r;
  615. });
  616. }
  617. return item;
  618. });
  619. _this13.setState({ list: list });
  620. }).catch(this.errorHandler).finally(function () {
  621. _this13.handleChangeLoading("sReplyFavor", false);
  622. });
  623. }
  624. /**
  625. * 获取 OSS 上传的参数
  626. */
  627. }, {
  628. key: "sOssSts",
  629. value: function sOssSts() {
  630. var _this14 = this;
  631. this.handleChangeLoading("sOssSts", true);
  632. var API = this.props.API;
  633. this.axios.get(API + "/oss/sts").then(function (response) {
  634. _this14.setState({ oss: _extends({}, response.data) });
  635. }).catch(this.errorHandler).finally(function () {
  636. _this14.handleChangeLoading("sOssSts", false);
  637. });
  638. }
  639. }, {
  640. key: "render",
  641. value: function render() {
  642. // 添加到 Context 的数据
  643. var value = _extends({}, this.state, this.props, {
  644. sCreateComment: this.sCreateComment,
  645. sGetComment: this.sGetComment,
  646. sCommentFavor: this.sCommentFavor,
  647. sReplyFavor: this.sReplyFavor,
  648. sCreateReply: this.sCreateReply,
  649. sGetReply: this.sGetReply,
  650. sOssSts: this.sOssSts,
  651. sDeleteComment: this.sDeleteComment,
  652. sDeleteReply: this.sDeleteReply,
  653. sUpdateReply: this.sUpdateReply,
  654. sUpdateComment: this.sUpdateComment,
  655. handleEdit: this.handleEdit
  656. });
  657. return this.state.initDone && _react2.default.createElement(
  658. _Comment.CommentContext.Provider,
  659. { value: value },
  660. _react2.default.createElement(
  661. "div",
  662. { className: "comment" },
  663. this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
  664. this.props.showList && _react2.default.createElement(
  665. "div",
  666. { style: { marginTop: 20 } },
  667. _react2.default.createElement(_CommentList2.default, null)
  668. )
  669. ),
  670. this.state.editModalVisible && _react2.default.createElement(_EditComment2.default, {
  671. visible: this.state.editModalVisible,
  672. action: this.state.action,
  673. replyId: this.state.replyId,
  674. replyPage: this.state.replyPage,
  675. commentId: this.state.commentId,
  676. userId: this.state.content.user_id,
  677. content: this.state.content,
  678. handleClose: this.handleClose,
  679. preRenderValue: this.props.preRenderValue
  680. })
  681. );
  682. }
  683. }]);
  684. return App;
  685. }(_react.Component);
  686. App.propTypes = {
  687. type: _propTypes2.default.number.isRequired, // 评论的 type
  688. businessId: _propTypes2.default.string.isRequired, // 评论的 business_id
  689. businessUserId: _propTypes2.default.number,
  690. API: _propTypes2.default.string, // 评论的 API 前缀
  691. showList: _propTypes2.default.bool, // 是否显示评论列表
  692. showEditor: _propTypes2.default.bool, // 是否显示评论输入框
  693. showAlertComment: _propTypes2.default.bool, // 评论成功之后,是否通过 Antd 的 Message 组件进行提示
  694. showAlertReply: _propTypes2.default.bool, // 回复成功之后,是否通过 Antd 的 Message 组件进行提示
  695. showAlertFavor: _propTypes2.default.bool, // 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示
  696. showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
  697. onError: _propTypes2.default.func, // 错误回调, 出错了会被调用
  698. userId: _propTypes2.default.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
  699. pageType: _propTypes2.default.string, // 分页类型
  700. page: _propTypes2.default.number, // 页码
  701. limit: _propTypes2.default.number, // 一次加载评论数量
  702. onPageChange: _propTypes2.default.func, // 页码变化回调
  703. onGetMoreBtnClick: _propTypes2.default.func, // 点击查看更多按钮回调
  704. onDelete: _propTypes2.default.func,
  705. onUpdateComment: _propTypes2.default.func,
  706. locales: _propTypes2.default.string, // 传入的语言环境, en-US/zh-CN
  707. onCountChange: _propTypes2.default.func, // 评论数量变更时的回调
  708. onCommentFail: _propTypes2.default.func, // 评论失败时的回调
  709. preRenderValue: _propTypes2.default.func // 编辑器渲染前对值需要做的工作
  710. };
  711. App.defaultProps = {
  712. businessUserId: 0,
  713. API: "//api.links123.net/comment/v1",
  714. emojiAPI: "//api.links123.net/link/v1",
  715. LOGINLINK: process.env.RUN_MOD === "production" ? "https://passport.links123.com/login" : "http://test.links123.net:5050/login",
  716. showList: true,
  717. showEditor: true,
  718. showAlertComment: false,
  719. showAlertReply: false,
  720. showAlertFavor: false,
  721. showError: true,
  722. showEdit: false,
  723. pageType: "more",
  724. limit: _constant.LIMIT,
  725. onGetMoreBtnClick: function onGetMoreBtnClick() {},
  726. onPageChange: function onPageChange(page) {},
  727. onDelete: function onDelete() {},
  728. onUpdateComment: function onUpdateComment() {},
  729. onBeforeUpdateComment: function onBeforeUpdateComment() {},
  730. onCountChange: function onCountChange() {},
  731. onCommentFail: function onCommentFail() {},
  732. preRenderValue: function preRenderValue(v) {
  733. return v;
  734. }
  735. };
  736. exports.Editor = _Editor2.default;
  737. exports.RenderText = _RenderText2.default;
  738. exports.default = App;
  739. //# sourceMappingURL=App.js.map