fk-react-ui-components/components/Paginator/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by sarunathan.s
 */
import React from "react";
import {PaginatorContainer,PageContainer,ItemsContainer,SelectContainer} from "./style.js";
import Icon from "../StyleComponents/icon";
import Select from "../FormElements/Select/Select";
import _ from "lodash";

class Paginator extends React.Component {
    
    constructor(props) {
        super(props);
        this.prevPage = this.prevPage.bind(this);
        this.nextPage = this.nextPage.bind(this);
        this.pageResize = this.pageResize.bind(this);
        let pageSize = this.props.pageSize || 10;
        this.state = {
            startItem: 1,
            pageSize: pageSize,
            endItem:
                pageSize > this.props.totalItems
                    ? this.props.totalItems
                    : pageSize,
            totalPages: Math.ceil(this.props.totalItems / pageSize),
            totalItems: this.props.totalItems,
            currentPage: this.props.initialPageNo || 1
        };
    }

    prevPage(){
      if(this.state.currentPage > 1){
          this.setState((state => {
            return {
              startItem : state.startItem - state.pageSize,
              endItem : state.startItem-1,
              currentPage : --state.currentPage
            }
          }))
      }
    }

    nextPage(){
      if(this.state.currentPage < this.state.totalPages){
        this.setState((state => {
          return {
            startItem : state.startItem + state.pageSize,
            endItem : (state.endItem + state.pageSize > state.totalItems )? state.totalItems :state.endItem + state.pageSize,
            currentPage : ++state.currentPage
          }
        }))
      }
    }

    pageResize(e){
      let pageSize = parseInt(e.target.value);
      this.setState({
        startItem : 1,
        endItem : pageSize > this.state.totalItems ? this.state.totalItems : pageSize ,
        currentPage : 1,
        pageSize : pageSize,
        totalPages : Math.ceil(this.props.totalItems/pageSize),
      })
    }

    render() {
        return (
            <div className="list-with-paginator"> 
              {this.props.children}
              <PaginatorContainer className="paginator-container">
                  <SelectContainer>
                    <Select onChange={this.pageResize} value = {this.state.pageSize} initialValue={this.props.pageSize} className= "page-size-selector">
                      <option value={10}>10</option>
                      <option value={20}>20</option>
                      <option value={50}>50</option>
                    </Select> Items per page
                  </SelectContainer>  
                  <i className="seperator">|</i>
                  <ItemsContainer>{this.state.startItem} - {this.state.endItem} of {this.state.totalItems} items</ItemsContainer>
                  <PageContainer>{this.state.currentPage} of {this.state.totalPages} pages</PageContainer>
                  <Icon onClick = {this.prevPage} className="fa fa-angle-left left-pagination"/>
                  <Icon onClick = {this.nextPage} className="fa fa-angle-right right-pagination"/>
              </PaginatorContainer>
            </div>
        )
    }

    componentDidMount(){
      this.props.onChange({
        pageNo : this.state.currentPage,
        pageSize : this.state.pageSize
      });
    }

    componentWillReceiveProps(nextProps){
        if (!_.isEqual(nextProps, this.props)) {
            const pageSize = nextProps.pageSize || 10;
            this.setState({
                pageSize,
                endItem: this.state.currentPage * pageSize > nextProps.totalItems ? nextProps.totalItems : this.state.currentPage*pageSize,
                totalPages: Math.ceil(nextProps.totalItems / pageSize),
                totalItems: nextProps.totalItems
            })
        }
    }   

    componentDidUpdate(prevProps, prevState) {
        if (!_.isEqual(prevState, this.state) && this.props.onChange) {
            this.props.onChange({
                pageNo: this.state.currentPage,
                pageSize: this.state.pageSize
            });
        }
    }
}

export default Paginator