d2-ui/lib/pagination/Pagination.component.js

d2-ui

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; }; }();

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; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from 'classnames';
import { config } from 'd2/lib/d2';

var noop = function noop() {};

config.i18n.strings.add('of_page');

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

    function Pagination(props, context) {
        _classCallCheck(this, Pagination);

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

        var i18n = _this.context.d2.i18n;
        _this.getTranslation = i18n.getTranslation.bind(i18n);
        return _this;
    }

    _createClass(Pagination, [{
        key: 'render',
        value: function render() {
            var _props = this.props,
                hasPreviousPage = _props.hasPreviousPage,
                hasNextPage = _props.hasNextPage,
                onPreviousPageClick = _props.onPreviousPageClick,
                onNextPageClick = _props.onNextPageClick,
                currentlyShown = _props.currentlyShown,
                total = _props.total;

            var pagerButtonClasses = ['material-icons', 'waves-effect'];

            var previousPageClasses = classes(pagerButtonClasses, { 'data-table-pager--previous-page__disabled': !hasPreviousPage() });
            var nextPageClasses = classes(pagerButtonClasses, { 'data-table-pager--next-page__disabled': !hasNextPage() });

            return React.createElement(
                'div',
                { className: 'data-table-pager' },
                React.createElement(
                    'ul',
                    { className: 'data-table-pager--buttons' },
                    total ? React.createElement(
                        'li',
                        { className: 'data-table-pager--page-info' },
                        React.createElement(
                            'span',
                            null,
                            currentlyShown,
                            ' ',
                            '' + this.getTranslation('of_page'),
                            ' ',
                            total
                        )
                    ) : '',
                    React.createElement(
                        'li',
                        { className: 'data-table-pager--previous-page' },
                        React.createElement(
                            'i',
                            {
                                className: previousPageClasses,
                                onClick: hasPreviousPage() ? onPreviousPageClick : noop
                            },
                            'navigate_before'
                        )
                    ),
                    React.createElement(
                        'li',
                        { className: 'data-table-pager--next-page' },
                        React.createElement(
                            'i',
                            {
                                className: nextPageClasses,
                                onClick: hasNextPage() ? onNextPageClick : noop
                            },
                            'navigate_next'
                        )
                    )
                )
            );
        }
    }]);

    return Pagination;
}(Component);

Pagination.propTypes = {
    hasPreviousPage: PropTypes.func,
    hasNextPage: PropTypes.func,
    onPreviousPageClick: PropTypes.func,
    onNextPageClick: PropTypes.func,
    total: PropTypes.number,
    currentlyShown: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

Pagination.defaultProps = {
    hasPreviousPage: noop,
    hasNextPage: noop,
    onPreviousPageClick: noop,
    onNextPageClick: noop,
    total: 0,
    currentlyShown: 0
};

Pagination.contextTypes = {
    d2: PropTypes.object
};

export default Pagination;