thing.js

var React = require('react'),
    { ButtonGroup, Button } = require('react-bootstrap'),

    ResultPaging = React.createClass({
        displayName: 'ResultPaging',
        propTypes: {
            page: React.PropTypes.number,
            pageSize: React.PropTypes.number,
            totalCount: React.PropTypes.number,
            changePage: React.PropTypes.func
        },
        getDefaultProps: function() {
            return {
                page: 1,
                pageSize: 10,
                totalCount: 1
            };
        },
        handleClick: function(value, e) {
            e.preventDefault();
            if (value !== this.props.page) {
                this.props.changePage(value);
            }
        },
        render: function() {
            var totalPages = Math.ceil(this.props.totalCount / this.props.pageSize),
                pages = [],
                minPageRange = Math.max(this.props.page - 3, 1),
                maxPageRange = Math.min(minPageRange + 6, totalPages),
                diff = maxPageRange - minPageRange;

            // make sure we always show at least 7 pages.
            if (diff > 0 && diff < 6 && minPageRange > diff && totalPages > 6) {
                minPageRange -= (6 - diff);
            } else if (totalPages <= 6) {
                minPageRange = 1;
                maxPageRange = totalPages;
            }

            // go back
            pages.push(<Button
                            key={0}
                            onClick={this.handleClick.bind(this, 1)}
                            disabled={(this.props.page - 1) <= 0}>
                                <i className='fa fa-angle-double-left fa-lg' />
                            </Button>);

            for (let i = minPageRange; i <= maxPageRange; i++) {
                pages.push(<Button
                                key={i}
                                onClick={this.handleClick.bind(this, i)}
                                className = { (i === this.props.page) ? 'selected-button' : ''}>
                                {i}
                            </Button>);
            }

            // go forward
            pages.push(<Button
                            key={totalPages + 1}
                            onClick={this.handleClick.bind(this, totalPages)}
                            disabled={this.props.page === maxPageRange}>
                                <i className='fa fa-angle-double-right fa-lg' />
                        </Button>);

            return (
                <ButtonGroup className='c-result-paging'>
                    {pages}
                </ButtonGroup>
            );
        }
    });

module.exports = ResultPaging;