fk-react-ui-components/lib/Paginator/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.PageSizeSelector = exports.PageNavigator = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _PageNavigator = require('./PageNavigator');

var _PageNavigator2 = _interopRequireDefault(_PageNavigator);

var _PageSizeSelector = require('./PageSizeSelector');

var _PageSizeSelector2 = _interopRequireDefault(_PageSizeSelector);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Paginator = function (_Component) {
    _inherits(Paginator, _Component);

    function Paginator(props) {
        _classCallCheck(this, Paginator);

        var _this = _possibleConstructorReturn(this, (Paginator.__proto__ || Object.getPrototypeOf(Paginator)).call(this, props));

        _initialiseProps.call(_this);

        var pageNo = _this.props.pageNo;
        var pageSize = _this.props.pageSize;

        _this.state = {
            startItem: pageSize * pageNo - pageSize + 1,
            pageSize: pageSize,
            endItem: pageSize > _this.props.totalItems ? _this.props.totalItems : pageSize,
            totalPages: Math.ceil(_this.props.totalItems / pageSize),
            totalItems: _this.props.totalItems,
            currentPage: pageNo
        };
        return _this;
    }

    _createClass(Paginator, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (!_lodash2.default.isEqual(nextProps, this.props)) {
                var pageSize = nextProps.pageSize;
                var startItem = pageSize * (nextProps.pageNo || this.state.currentPage) - pageSize + 1;
                var totalPages = Math.ceil(nextProps.totalItems / pageSize);

                if (nextProps.totalItems === 0) {
                    startItem = 0;
                    totalPages = 1;
                }

                this.setState({
                    startItem: startItem,
                    currentPage: nextProps.pageNo || this.state.currentPage,
                    pageSize: pageSize,
                    endItem: this.state.currentPage * pageSize > nextProps.totalItems ? nextProps.totalItems : this.state.currentPage * pageSize,
                    totalPages: totalPages,
                    totalItems: nextProps.totalItems
                });
            }
        }
    }, {
        key: 'processChildren',
        value: function processChildren() {
            var _this2 = this;

            return _react2.default.Children.map(this.props.children, function (child) {
                if (child.type === _PageSizeSelector2.default) {
                    return _react2.default.cloneElement(child, {
                        pageSize: _this2.state.pageSize,
                        startItem: _this2.state.startItem,
                        endItem: _this2.state.endItem,
                        totalItems: _this2.state.totalItems,
                        onPageSizeChange: _this2.onPageSizeChange
                    });
                } else if (child.type === _PageNavigator2.default) {
                    return _react2.default.cloneElement(child, {
                        currentPage: _this2.state.currentPage,
                        totalPages: _this2.state.totalPages,
                        onPreviousPage: _this2.onPreviousPage,
                        onNextPage: _this2.onNextPage,
                        onCurrentPageChange: _this2.onCurrentPageChange
                    });
                }
                return child;
            });
        }
    }, {
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                this.processChildren()
            );
        }
    }]);

    return Paginator;
}(_react.Component);

var _initialiseProps = function _initialiseProps() {
    var _this3 = this;

    this.onPreviousPage = function () {
        var pageSize = _this3.props.pageSize;
        var prevPage = _this3.state.currentPage - 1;
        if (_this3.state.currentPage > 1) {
            var currentPage = _this3.state.currentPage - 1;
            _this3.setState(function (state) {
                return {
                    startItem: pageSize * prevPage - pageSize + 1,
                    endItem: state.startItem - 1,
                    currentPage: currentPage
                };
            });
            _this3.props.onChange({ pageNo: currentPage, pageSize: pageSize });
        }
    };

    this.onNextPage = function () {
        var pageSize = _this3.props.pageSize;
        var nextPage = _this3.state.currentPage + 1;
        if (_this3.state.currentPage < _this3.state.totalPages) {
            var currentPage = _this3.state.currentPage + 1;
            _this3.setState(function (state) {
                return {
                    startItem: pageSize * nextPage - pageSize + 1,
                    endItem: state.endItem + state.pageSize > state.totalItems ? state.totalItems : state.endItem + state.pageSize,
                    currentPage: currentPage
                };
            });
            _this3.props.onChange({ pageNo: currentPage, pageSize: pageSize });
        }
    };

    this.onPageSizeChange = function (e) {
        var pageSize = parseInt(e.target.value);
        _this3.setState({
            startItem: 1,
            endItem: pageSize > _this3.state.totalItems ? _this3.state.totalItems : pageSize,
            currentPage: 1,
            pageSize: pageSize,
            totalPages: Math.ceil(_this3.props.totalItems / pageSize)
        });
        _this3.props.onChange({ pageNo: 1, pageSize: pageSize });
    };

    this.onCurrentPageChange = function (currentPage) {
        var isCurrentPageWithinRange = currentPage >= 1 && currentPage <= _this3.state.totalPages;
        var pageNo = 1;

        if (isCurrentPageWithinRange) {
            pageNo = currentPage;
        }

        _this3.setState({ currentPage: pageNo });
        _this3.props.onChange({ pageNo: pageNo, pageSize: _this3.state.pageSize });
    };
};

Paginator.propTypes = {
    pageNo: _propTypes2.default.number,
    pageSize: _propTypes2.default.number,
    totalItems: _propTypes2.default.number,
    onChange: _propTypes2.default.func,
    children: _propTypes2.default.node.isRequired
};

Paginator.defaultProps = {
    pageNo: 1,
    pageSize: 10,
    totalItems: 0,
    onChange: undefined
};

exports.default = Paginator;
exports.PageNavigator = _PageNavigator2.default;
exports.PageSizeSelector = _PageSizeSelector2.default;