react-fantastic/libs/Pagination.js

Fantastic react component library

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const objectWithoutProperties = function(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 const propTypes = {
    className: PropTypes.string,
    total: PropTypes.number.isRequired,
    numRows: PropTypes.number.isRequired,
    onItemClick: PropTypes.func,
    prevText: PropTypes.string,
    nextText: PropTypes.string
};
const defaultProps = {
    total: 10,
    numRows: 5,
    prevText: 'Prev',
    nextText: 'Next'
};
class Pagination extends Component {
    render() {
        const { className } = this.props;
        const classes = classNames('pagination', className);
        return React.createElement(
            'ul', Object.assign({},
                objectWithoutProperties(this.props, Object.keys(propTypes).filter(e => e !== 'children')),
                {
                    className: classes
                }
            ),
            React.createElement(
                PaginationItem, 
                {...this.props}
            )
        );
    };
};
Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;

class PaginationItem extends Component {
    constructor() {
        super();
        this.state = {
            activePage: 1
        };
        this.onItemClick = this.onItemClick.bind(this);
        this.onPrevClick = this.onPrevClick.bind(this);
        this.onNextClick = this.onNextClick.bind(this);
    }
    onItemClick(e) {
        const { onItemClick } = this.props;
        this.setState({activePage: e}, () => 
            onItemClick(this.state.activePage)
        );
    };
    onPrevClick(e) {
        e.preventDefault();
        const { onItemClick } = this.props;
        if(this.state.activePage > 1) {
            this.setState({activePage: this.state.activePage-1}, () => 
                onItemClick(this.state.activePage)
            );
        }
    };
    onNextClick(e) {
        e.preventDefault();
        const { total, numRows, onItemClick } = this.props;
        const columns = Math.ceil(total/numRows);
        if(this.state.activePage < columns) {
            this.setState({activePage: this.state.activePage+1}, () => 
                onItemClick(this.state.activePage)
            );
        }
    };
    render() {
        const { total, numRows, prevText, nextText } = this.props, {activePage} = this.state;
        const items = [];
        const columns = Math.ceil(total/numRows);
        for(let i = 1; i < columns+1; i++) {
            items.push(
                React.createElement(
                    'li', Object.assign({},
                        objectWithoutProperties(this.props, Object.keys(propTypes).filter(e => e !== 'children')),
                        {
                            className: activePage === i ? 'active' : '',
                            onClick: () => this.onItemClick(i)
                        }
                    )
                )
            );
        }
        if(columns >= 3) {
            items.unshift(
                React.createElement(
                    'li', Object.assign({},
                        objectWithoutProperties(this.props, Object.keys(propTypes).filter(e => e !== 'children')),
                            {
                                onClick: this.onPrevClick
                            }
                        ),
                    prevText
                )
            );
            items.push(
                React.createElement(
                    'li', Object.assign({},
                        objectWithoutProperties(this.props, Object.keys(propTypes).filter(e => e !== 'children')),
                        {
                            onClick: this.onNextClick
                        }
                    ),
                    nextText
                )
            );
        }
        return items;
    };
};
export default Pagination;