react-pagination-semantic-ui

gistfile1.txt

import React, { Component } from 'react'
import { Menu, Icon } from 'semantic-ui-react'
import _ from 'lodash'
import PropTypes from 'prop-types'; // ES6

export default class Pagination extends Component {
  constructor() {
    super();

    this.state = {
      pager: {
        totalItems: 0,
        currentPage: '1',
        pageSize: 0,
        totalPages: 0,
        startPage: 0,
        endPage: 0,
        startIndex: 0,
        endIndex: 0,
        pages: []
      },
      prev: '0'
    };


  }
  static propTypes = {
    getPager: PropTypes.func,
    setPager: PropTypes.func,
    onChangePage: PropTypes.func
  }
  getPager = (totalItems, currentPage, pageSize) => {
    currentPage = currentPage || 1;

    pageSize = pageSize || 10;

    var totalPages = Math.ceil(totalItems / pageSize);

    var startPage, endPage;

    startPage = currentPage - 1;
    endPage = currentPage + 1;
    if (endPage > totalPages) {
      endPage = totalPages;
      startPage = startPage - 1;
    }
    if (startPage <= 0) {
      startPage = 1
      if (endPage <= totalPages) {
        endPage = endPage + 1
      }
    }

    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    var pages = _.range(startPage, endPage + 1).map(String);

    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages
    };
  }
  setPager = (currentPage) => {
    if (this.props.items > 0) {
      if (currentPage > this.state.pager.totalPages) {
        currentPage = this.state.pager.totalPages;
      } else if (currentPage < 1) {
        currentPage = 1
      }
      if (currentPage != this.state.prev) {
        let pagers=this.getPager(this.props.items, currentPage, this.props.pageSize)
        this.setState({ pager:pagers});
        this.props.onChangePage(pagers);
      }
      this.setState({ prev: currentPage });

    }
  }

  componentWillMount() {
    this.setPager(this.state.currentPage);
  }

  componentDidUpdate(prevProps, prevState) {

  }
  componentDidMount() {

  }




  handleItemClick = (e, { name }) => {
    console.log(name);

    switch (name) {
      case 'prev':
        this.setPager(parseInt(this.state.pager.currentPage) - 1);
        break;
      case 'next':
        this.setPager(parseInt(this.state.pager.currentPage) + 1);
        break;
      default:
        this.setPager(parseInt(name));
    }
  }

  render() {
    const activeItem = (this.state.pager.currentPage).toString();
    const pagesList = this.state.pager.pages.map((page, index) => {
      return <Menu.Item key={page} name={page} active={activeItem === page} onClick={this.handleItemClick} />
    })

    console.log(pagesList)

    return (
      <Menu pagination>
        <Menu.Item name='prev' onClick={this.handleItemClick}><Icon size='large' name='triangle left' /></Menu.Item>
        {pagesList}
        <Menu.Item name='next' onClick={this.handleItemClick}><Icon size='large' name='triangle right' /></Menu.Item>
      </Menu>
    )
  }
}