Gecko [ gandhischool.edu.np ]

Name	Size	Permission
Alert.tsx	2.75 KB	-rw-r--r--
DynamicInput.tsx	5.14 KB	-rw-r--r--
Image.tsx	542 B	-rw-r--r--
Pagination.tsx	3.49 KB	-rw-r--r--
index.tsx	86 B	-rw-r--r--
style.css	3.11 KB	-rw-r--r--

Code Editor : Pagination.tsx

import * as React from "react";

interface AddAssignmentComponentProps {
    pages: number,
    page: number,
    PageButtonComponent: any,
    onPageChange: any,
    previousText: string,
    nextText: string
}

interface AddAssignmentComponentState {
    [key: string]: any;
}

const defaultButton = props => <button {...props}>{props.children}</button>;

class Pagination extends React.Component<AddAssignmentComponentProps, AddAssignmentComponentState> {

constructor(props) {
    super(props);

this.changePage = this.changePage.bind(this);

this.state = {
      visiblePages: this.getVisiblePages(null, props.pages)
    };
  }

public componentWillReceiveProps(nextProps) {
    if (this.props.pages !== nextProps.pages) {
      this.setState({
        visiblePages: this.getVisiblePages(null, nextProps.pages)
      });
      this.changePage(nextProps.page + 1);
    }
  }

private filterPages = (visiblePages, totalPages) => {
    return visiblePages.filter(page => page <= totalPages);
  };

private getVisiblePages = (page, total) => {
    if (total < 7) {
      return this.filterPages([1, 2, 3, 4, 5, 6], total);
    } else {
      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
        return [1, page - 1, page, page + 1, total];
      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
        return [1, total - 3, total - 2, total - 1, total];
      } else {
        return [1, 2, 3, 4, 5, total];
      }
    }
  };

private changePage(page) {
    const activePage = this.props.page + 1;

if (page === activePage) {
      return;
    }

const visiblePages = this.getVisiblePages(page, this.props.pages);

this.setState({
      visiblePages: this.filterPages(visiblePages, this.props.pages)
    });

this.props.onPageChange(page - 1);
  }

public render() {
    const { PageButtonComponent = defaultButton } = this.props;
    const { visiblePages } = this.state;
    const activePage = this.props.page + 1;

return (
      <div className="Table__pagination">
        <div className="Table__prevPageWrapper">
          <PageButtonComponent
            className="Table__pageButton"
            onClick={(e) => {
              e.preventDefault();
              if (activePage === 1) return;
              this.changePage(activePage - 1);
            }}
            disabled={activePage === 1}
          >
            {this.props.previousText}
          </PageButtonComponent>
        </div>
        <div className="Table__visiblePagesWrapper">
          {visiblePages.map((page, index, array) => {
            return (
              <PageButtonComponent
                key={page}
                className={
                  activePage === page
                    ? "Table__pageButton Table__pageButton--active"
                    : "Table__pageButton"
                }
                onClick={this.changePage.bind(null, page)}
              >
                {array[index - 1] + 2 < page ? `...${page}` : page}
              </PageButtonComponent>
            );
          })}
        </div>
        <div className="Table__nextPageWrapper">
          <PageButtonComponent
            className="Table__pageButton"
            onClick={(e) => {
              e.preventDefault();
              if (activePage === this.props.pages) return;
              this.changePage(activePage + 1);
            }}
            disabled={activePage === this.props.pages}
          >
            {this.props.nextText}
          </PageButtonComponent>
        </div>
      </div>
    );
  }
}

export default Pagination;

${this.title}

Code Editor : Pagination.tsx