react-jam-ui/components/Pager/index.js

React JAM UI components

import React from 'react'

import './styles.styl'

/* type Props = {
    page: number.isRequired,
    pages: number,
    total: number,
    size: number,
    onChange: func,
    maxViewPages: number
}; */

export default class Pager extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            
        };
    }

    componentWillReceiveProps(nextProps) {
    }

    onClickCapture = e => {
        const page = e.target.closest('.pager-item').dataset.page;

        if(this.props.onChange) this.props.onChange(page)
    }
    onPrevCapture = () => {
        const page = this.props.page > 1 ? this.props.page - 1 : this.props.page;

        if(this.props.onChange) this.props.onChange(page)
    }
    onNextCapture = () => {
        const size = this.props.size || this.props.perPage
        const pagesLength = Math.ceil(this.props.total/size)
        const page = this.props.page < pagesLength ? this.props.page + 1 : pagesLength;
        if(this.props.onChange) this.props.onChange(page)
    }

    render() {
        const pages = [];
        const size = this.props.size || this.props.perPage
        const pagesLength = Math.ceil(this.props.total/size);
        const page = this.props.page;
        const number = this.props.number || 5;
        const l = Math.ceil(number/2) - 1;
        const r = Math.floor(number/2);
        const max = Math.min(number, pagesLength);
        const start = page - l > 0 ? page - l : 1;
        const end = page + r > pagesLength ? pagesLength : page + r < max ? max : page + r;

        for (var i = start; i <= end; i++) {
            pages.push(<div
                key={`page-${i}`}
                onClick={ this.onClickCapture }
                className={'pager-item' + (page == i ? ' active' : '')}
                data-page={ i }
            >
                { i }
            </div>);
        }

        return (
            pagesLength > 1 &&
            <div className='pager'>
                <div
                    className={'pager-item' + (page == 1 ? ' disabled' : '')}
                    onClick={ this.onPrevCapture }
                >Prev</div>
                { pages }
                <div
                    className={'pager-item' + (this.props.total <= page*this.props.size ? ' disabled' : '')}
                    onClick={ this.onNextCapture }
                >Next</div>
            </div>
        )
    }
}

/*
<Pager
    page={ 1 }
    total={ 500 }
    size={ 50 }
    onChange={ this.onChangePage }
    number={ 5 } 
/>
*/