Gecko [ gandhischool.edu.np ]

Name	Size	Permission	Action
index.css	429 B	-rw-rw-r--
index.tsx	3.92 KB	-rw-rw-r--

Code Editor : index.tsx

import * as React from 'react';
import './index.css';

interface IndexProps {
  pages: number;
  page: number;
  data: any;
  PageButtonComponent: any;
  onPageChange: any;
  previousText: string;
  nextText: string;
}

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

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

class Index extends React.Component<IndexProps, IndexState> {
  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 (
      <React.Fragment>
        {this.props.pages > 1 && (
          <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} */}
                <span aria-hidden="true">«</span>
              </PageButtonComponent>
            </div>
            <div className="Table__visiblePagesWrapper">
              {visiblePages.map((page, index, array) => {
                return (
                  <React.Fragment key={index}>
                    <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>
                  </React.Fragment>
                );
              })}
            </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} */}
                <span aria-hidden="true">»</span>
              </PageButtonComponent>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
}

export default Index;

${this.title}

Code Editor : index.tsx