123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- import React, { Component } from "react";
- import { Spin, Pagination, Checkbox } from "antd";
- import intl from "react-intl-universal";
- import Comment from "../../Comment";
- import CommentBox from "../CommentBox";
- import "./index.css";
-
- class CommentList extends Component {
- constructor(props) {
- super(props);
- this.state = {
- filterSpeak: 0
- };
- }
-
- componentWillMount() {
- this.props.app.sGetComment({ page: this.props.app.page });
- }
-
- renderPagination() {
- const {
- list,
- total,
- page,
- pageType,
- limit,
- isNoMoreComment,
- sGetComment,
- onPageChange,
- onGetMoreBtnClick
- } = this.props.app;
- const { filterSpeak } = this.state;
- if (pageType === "slice") {
- // 截断多余评论,通过点击查看更多跳转
- return (
- <div className="comment-list-show-more" onClick={onGetMoreBtnClick}>
- <span>查看更多</span>
- </div>
- );
- } else if (pageType === "more") {
- if (!isNoMoreComment && list.length !== total) {
- return (
- <div
- className="comment-list-show-more"
- onClick={() => {
- sGetComment({ page: page + 1, filterSpeak });
- onPageChange(page + 1);
- }}
- >
- <span>{intl.get("comment.moreComment")}</span>
- </div>
- );
- } else {
- return null;
- }
- } else if (pageType === "pagination") {
- return (
- <div className="comment-list-pagination">
- <Pagination
- pageSize={limit}
- current={page}
- total={total}
- onChange={p => {
- sGetComment({ page: p, filterSpeak });
- onPageChange(p);
- }}
- />
- </div>
- );
- }
- }
-
- render() {
- const {
- list,
- total,
- loading,
- isSpeak,
- sGetComment,
- onPageChange
- } = this.props.app;
-
- const spinning = Boolean(
- loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
- );
- return (
- <div>
- <Spin spinning={spinning}>
- {/* <div>共 {total} 条评论</div> */}
- <div>
- {intl.get("comment.totalComment", { total })}
- {isSpeak && (
- <Checkbox
- className="comment-list-filter-speak"
- onChange={e => {
- this.setState({
- filterSpeak: e.target.checked ? 1 : 0
- });
- sGetComment({
- page: 1,
- filterSpeak: e.target.checked ? 1 : 0
- });
- onPageChange(1);
- }}
- >
- {intl.get("comment.filterSpeak")}
- </Checkbox>
- )}
- </div>
- {list.map(item => (
- <CommentBox
- content={item}
- user_id={item.user_id}
- key={item.id}
- commentId={item.id}
- />
- ))}
- {this.renderPagination()}
- </Spin>
- </div>
- );
- }
- }
-
- CommentList.propTypes = {};
-
- export default Comment(CommentList);
|