ReactTablePagination

ReactTablePagination.jsx

import React from 'react';
import cn from 'classnames';

import Select from 'react-islands/components/Select';
import Item from 'react-islands/components/Item';
import Input from 'react-islands/components/TextInput';

import './ReactTablePagination.styl';

export default React.createClass({
    propTypes: {
        page: React.PropTypes.any,
        pages: React.PropTypes.any,
        onPageChange: React.PropTypes.any,
        previousComponent: React.PropTypes.any,
        nextComponent: React.PropTypes.any,
        paginationClassName: React.PropTypes.any,
        paginationStyle: React.PropTypes.any,
        previousText: React.PropTypes.any,
        pageText: React.PropTypes.any,
        ofText: React.PropTypes.any,
        rowsText: React.PropTypes.any,
        nextText: React.PropTypes.any,
        showPageSizeOptions: React.PropTypes.any,
        pageSizeOptions: React.PropTypes.any,
        pageSize: React.PropTypes.any,
        showPageJump: React.PropTypes.any,
        canPrevious: React.PropTypes.any,
        canNext: React.PropTypes.any,
        onPageSizeChange: React.PropTypes.any
    },

    getInitialState () {
        return {
            page: this.props.page
        }
    },
    componentWillReceiveProps (nextProps) {
        this.setState({page: nextProps.page})
    },
    getSafePage (page) {
        return Math.min(Math.max(page, 0), this.props.pages - 1)
    },
    changePage (page) {
        page = this.getSafePage(page);
        this.setState({page});
        this.props.onPageChange(page);
    },
    applyPage (e) {
        e && e.preventDefault()
        const page = this.state.page
        this.changePage(page === '' ? this.props.page : page)
    },
    render () {
        const {
            page,
            pages,
            showPageSizeOptions,
            pageSizeOptions,
            pageSize,
            showPageJump,
            canPrevious,
            canNext,
            onPageSizeChange,
            rowsText,
            pageText
        } = this.props;

        return <div className='react-table-pagination'>
            {
                showPageSizeOptions && (
                    <div className='react-table-pagination__page-size-options'>
                        <Select
                            theme='islands'
                            size='m'
                            value={ [pageSize] }
                            mode='radio'
                            onChange={ value => onPageSizeChange(Number(value[0])) }>
                            {
                                pageSizeOptions.map((option, i) => (
                                    <Item value={ option } key={ i }>
                                        { option } { rowsText }
                                    </Item>
                                ))
                            }
                        </Select>
                    </div>
                )
            }
            <div className={ cn('react-table-pagination__page-jump', {
                'react-table-pagination__page-jump_disabled': pages === 1
            }) }>
                { pageText }
                {
                    showPageJump ? (
                        <form onSubmit={ this.applyPage }>
                            <Input
                                theme='islands'
                                size='m'
                                value={ this.state.page === '' ? '' : String(this.state.page + 1) }
                                onChange={ val => {
                                    const page = parseInt(val) - 1;
                                    if (val === '') {
                                        return this.setState({ page: val });
                                    }
                                    this.setState({ page: this.getSafePage(page) });
                                }} />
                        </form>
                    )
                    : (
                       <span className="react-table-pagination__current-page">
                           { page + 1 }
                       </span>
                    )
                }
                { this.props.ofText } <span className='react-table-pagination__total-pages'>{ pages }</span>
            </div>
            <div className='react-table-pagination__page-navigation'>
                <div className={
                        cn('react-table-pagination__page-navigation-item', {
                            'react-table-pagination__page-navigation-item_disabled': !canPrevious
                        })
                    }
                    onClick={() => {
                        if (!canPrevious) return;
                        this.changePage(page - 1);
                    }}>
                    <svg className='ydf-icon icon-left-arrow'><use xlinkHref='#icon-left-arrow'></use></svg>
                </div>
                <div className={
                        cn('react-table-pagination__page-navigation-item', {
                            'react-table-pagination__page-navigation-item_disabled': !canNext
                        })
                    }
                    onClick={() => {
                        if (!canNext) return;
                        this.changePage(page + 1);
                    }}>
                    <svg className='ydf-icon icon-right-arrow'><use xlinkHref='#icon-left-arrow'></use></svg>
                </div>
            </div>
        </div>;
    }
});