PaginationDeluxe.js

import React, { Component, PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite';

class Pagination extends Component {
    constructor(props){
        super(props);
        this.state = {
            pageNodes: [],
        }
        this._paginationBuilder = this._paginationBuilder.bind(this);
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.pageCount !== this.props.pageCount){
            this._paginationBuilder(nextProps.pageCount, nextProps.active);
        }
    }
        
    componentDidMount() {
        this._paginationBuilder(this.props.pageCount, this.props.active);
    }
    
    _ellipsesHandler(pageCount, active){
        let pageNodes = [];
        pageNodes.push(active - 3)
        pageNodes.push(active  - 2)
        pageNodes.push(active  - 1)
        pageNodes.push(active)
        pageNodes.push(active + 1)
        pageNodes.push(active + 2)
        pageNodes.push(active + 3)
        pageNodes = pageNodes.filter((d) => d > 0 && d <= pageCount)
        this.setState({pageNodes});
    }
    _formatPagination(pageCount, active){
        let pageNodes = [];

        for(var i = 0; i < pageCount; i++){
            pageNodes.push(i + 1);
        }
        
        this.setState({ pageNodes });
    }
    _paginationBuilder(pageCount, active){
        if(pageCount > 8){
           this._ellipsesHandler(pageCount, active);
        }else{
            this._formatPagination(pageCount, active);
        }
    }
    _paginate(number){
        this.props.handlePagination(number);
    }
    render() {
        const {handlePagination, pageCount, active, ...props} = this.props;
        return (
            <div className={css(styles.paginationWrapper)}>
                <div className={css(styles.pageNode)} onClick={()=>{handlePagination('prev');  active-1 <= this.state.pageNodes[0] ? this._paginationBuilder(pageCount, this.state.pageNodes[0]) : null }}>{"\u3008"}</div>
                {pageCount > 8 ? <div className={css(styles.pageNode)} onClick={()=>{this._paginationBuilder(pageCount, active - 1 )}}>...</div> : null}
                    {this.state.pageNodes.map((item, i)=>{
                            return (
                                <div className={css(styles.pageNode, active == item ? styles.disableNode : null)} key={i} onClick={()=>{this._paginate(item); console.log("ITEM: ", item)} }>{item}</div>
                                )
                    })}
                {pageCount > 8 ? <div className={css(styles.pageNode)} onClick={()=>{this._paginationBuilder(pageCount, active + 1)}}>...</div> : null}
                <div className={css(styles.pageNode)} onClick={()=>{handlePagination('next');  active+1 >= this.state.pageNodes.slice(-1)[0] ? this._paginationBuilder(pageCount, this.state.pageNodes.slice(-1)[0]) : null }}>{"\u3009"}</div>
            </div>
        );
    }
}

export default Pagination;

Pagination.propTypes = {
    handlePagination: PropTypes.func.isRequired,
    pageCount: PropTypes.number,
    active: PropTypes.number,
};

const styles = StyleSheet.create({
    paginationWrapper:{
        background: "transparent",
        display:'flex',
        justifyContent: 'center',
        height: "40px",
        marginBottom: "10px",
        minWidth: "400px",
    },
    pageNode: {
        lineHeight: "40px",
        borderRadius: "3px",
        background: "#FFFFFF",
        border: "1px solid #e3e3e3",
        width: "35px",
        color: "#90C73E",
        cursor: "pointer",
    },
    disableNode:{
        pointerEvents: "none",
        background: "#90C73E",
        border: "1px solid #90C73E",
        color: "#FFFFFF",
        cursor: "disabled",
    }
})