{"size": 2996, "ext": "js", "max_stars_repo_path": "src/component/chapter-list.js", "max_stars_repo_name": "FanWorldBegin/book", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/component/chapter-list.js", "max_issues_repo_name": "FanWorldBegin/book", "max_issues_repo_issues_event_min_datetime": "2021-03-09T19:00:08.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T18:25:52.000Z", "max_forks_repo_path": "src/component/chapter-list.js", "max_forks_repo_name": "FanWorldBegin/book", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 25.8275862069, "max_line_length": 74, "alphanum_fraction": 0.3918558077}
import React, { Component } from "react";
import { Link } from "gatsby";

export class ChapterList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageIndex: 1,
    };
  }

  componentDidMount() {}

  // 分割数组
  sliceChapter(arr, size) {
    let chapterList = {};
    var index = 0;
    for (var i = 0; i < arr.length; i = i + size) {
      chapterList[index] = arr.slice(i, i + size);
      chapterList.length = index;
      index += 1;
    }
    return chapterList;
  }
  render() {
    const {
      List = [],
      total = 0,
      query,
      queryType,
      loading,
      backToCatalog,
    } = this.props;
    let { pageIndex } = this.state;
    let silceList = this.sliceChapter(List, 20);
    let nowList = silceList[pageIndex - 1];
    return (
      <div className="list-items">
        {(nowList || []).map(item => {
          return (
            <div key={item.ID} className="list-item">
              <Link
                to={`/novelPage/`}
                state={{
                  ID: item.ID,
                }}
                partiallyActive={true}
              >
                <span className="name">{item.ChapterName}</span>{" "}
              </Link>
            </div>
          );
        })}
        <div className="paging-container">
          <div
            className="paging-item "
            onClick={e => {
              this.setState(
                {
                  pageIndex: pageIndex > 1 ? pageIndex - 1 : 1,
                },
                () => {
                  if (pageIndex != 1) {
                    let { pageIndex } = this.state;
                    query({ queryType, pageIndex });
                  }
                }
              );
            }}
          >
            上页
          </div>
          <div
            className="paging-item paging-item2"
            onClick={e => {
              this.setState(
                {
                  pageIndex:
                    pageIndex < Math.ceil(total / 20)
                      ? pageIndex + 1
                      : Math.ceil(total / 20),
                },
                () => {
                  // let { pageIndex } = this.state;
                  // query({ queryType, pageIndex })
                }
              );
            }}
          >
            下页
          </div>
          <div
            className="paging-item paging-item2"
            onClick={e => {
              this.setState(
                {
                  pageIndex: Math.ceil(total / 20),
                },
                () => {
                  query({ queryType, pageIndex: Math.ceil(total / 20) });
                }
              );
            }}
          >
            尾页
          </div>
        </div>
        <div className="paging-describe">
          <div className="paging-item">共{Math.ceil(total / 20)}页</div>
          <div className="paging-item paging-item2">当前 第{pageIndex}页</div>
        </div>
      </div>
    );
  }
}
