application/components/common/paginator.js

import React from 'react';
import {Link} from 'react-router';
import Request from './../../util/request';
import URI from 'urijs';

/**
 * Pagination component. Currently, updates the URL for each
 * page change. Use the onPaginate parameter to watch for changes.
 * Expects pagination property to be API standard.
 */
class Paginator extends React.Component {

    constructor(props) {
        super(props);

        this.onPaginate = this.onPaginate.bind(this);
    }

    onPaginate(...params) {
        if (this.props.onPaginate) {
            this.props.onPaginate(...params);
        }
    }

    render() {
        if (!this.props.data.size) {
            return (
                <ul className="pagination"></ul>
            );
        }

        let pages = [];
        let url = '';

        if (this.props.url) {
            url = this.props.url;
        } else {
            url = Request.getPath();
        }

        let previousClass = 'waves-effect';
        if (parseInt(this.props.data.get('before')) === parseInt(this.props.data.get('current'))) {
            previousClass = 'disabled';
        }
        let nextClass = '';
        if (parseInt(this.props.data.get('current')) === parseInt(this.props.data.get('last'))) {
            nextClass = 'disabled';
        }

        const prevQuery = Request.setQuery({'page': this.props.data.get('before')});
        const nextQuery = Request.setQuery({'page': this.props.data.get('next')});

        const previous = (
            <li className={previousClass}>
                <Link to={url + '?' + prevQuery} onClick={this.onPaginate.bind(this, this.props.data.get('before'))}><i className='fa fa-chevron-left'></i></Link>
            </li>
        );
        const next = (
            <li className={nextClass}>
                <Link to={url + '?' + nextQuery} onClick={this.onPaginate.bind(this, this.props.data.get('next'))}><i className='fa fa-chevron-right'></i></Link>
            </li>
        );

        const total = parseInt(this.props.data.get('total_pages'));
        const current = parseInt(this.props.data.get('current'));
        if (total <= 8) {
            for (let i = 0; i < total; i++) {
                const newQuery = Request.setQuery({'page': (i+1)});
                pages.push((
                    <li key={(i+1)} className={((i+1) === current) ? 'active' : 'waves-effect'}>
                        <Link to={url + '?' + newQuery} onClick={this.onPaginate.bind(this, (i+1))}>{(i+1)}</Link>
                    </li>
                ));
            }
        } else {
            let start = 1;
            if (current > 6) {
                start = current - 5;
            }
            let max = start+10;
            if (total <= 10) {
                max = total;
            }
            for (let i = start; i < max; i++) {
                const newQuery = Request.setQuery({'page': i});
                pages.push((
                    <li key={i} className={(i === current) ? 'active' : 'waves-effect'}>
                        <Link to={url + '?' + newQuery} onClick={this.onPaginate.bind(this, i)}>{i}</Link>
                    </li>
                ));
            }
        }

        return (
            <ul className="pagination">
                {previous}
                {pages}
                {next}
            </ul>
        );

    }
}

export default Paginator;