antd-mobile/lib/pagination/index.js

基于 React 的移动设计规范实现

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports["default"] = undefined;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _reactNative = require('react-native');

var _flex = require('../flex');

var _flex2 = _interopRequireDefault(_flex);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _index = require('./style/index');

var _index2 = _interopRequireDefault(_index);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }

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

var Pagination = function (_React$Component) {
    (0, _inherits3["default"])(Pagination, _React$Component);

    function Pagination(props) {
        (0, _classCallCheck3["default"])(this, Pagination);

        var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));

        _this.state = {
            current: props.current
        };
        _this.onPrev = _this.onPrev.bind(_this);
        _this.onNext = _this.onNext.bind(_this);
        return _this;
    }

    Pagination.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        this.setState({
            current: nextProps.current
        });
    };

    Pagination.prototype._hasPrev = function _hasPrev() {
        return this.state.current > 0;
    };

    Pagination.prototype._hasNext = function _hasNext() {
        return this.state.current < this.props.total;
    };

    Pagination.prototype._handleChange = function _handleChange(p) {
        this.setState({
            current: p
        });
        this.props.onChange(p);
        return p;
    };

    Pagination.prototype.onPrev = function onPrev() {
        this._handleChange(this.state.current - 1);
    };

    Pagination.prototype.onNext = function onNext() {
        this._handleChange(this.state.current + 1);
    };

    Pagination.prototype.getIndexes = function getIndexes(count) {
        var arr = [];
        for (var i = 0; i < count; i++) {
            arr.push(i);
        }
        return arr;
    };

    Pagination.prototype.render = function render() {
        var _props = this.props;
        var mode = _props.mode;
        var style = _props.style;
        var simple = _props.simple;
        var total = _props.total;
        var prevText = _props.prevText;
        var nextText = _props.nextText;

        var current = this.state.current;
        var markup = void 0;
        switch (mode) {
            case 'button':
                markup = React.createElement(
                    _flex2["default"],
                    null,
                    React.createElement(
                        _flex2["default"].Item,
                        null,
                        React.createElement(
                            _button2["default"],
                            { inline: true, disabled: current <= 0, onClick: this.onPrev },
                            prevText
                        )
                    ),
                    !simple ? React.createElement(
                        _flex2["default"].Item,
                        null,
                        React.createElement(
                            _reactNative.View,
                            { style: [_index2["default"].numberStyle] },
                            React.createElement(
                                _reactNative.Text,
                                { style: [_index2["default"].activeTextStyle] },
                                current + 1
                            ),
                            React.createElement(
                                _reactNative.Text,
                                { style: [_index2["default"].totalStyle] },
                                '/',
                                total
                            )
                        )
                    ) : React.createElement(_flex2["default"].Item, null),
                    React.createElement(
                        _flex2["default"].Item,
                        null,
                        React.createElement(
                            _button2["default"],
                            { disabled: current >= total - 1, inline: true, onClick: this.onNext },
                            nextText
                        )
                    )
                );
                break;
            case 'number':
                markup = React.createElement(
                    _reactNative.View,
                    { style: [_index2["default"].numberStyle] },
                    React.createElement(
                        _reactNative.Text,
                        { style: [_index2["default"].activeTextStyle] },
                        current + 1
                    ),
                    React.createElement(
                        _reactNative.Text,
                        { style: [_index2["default"].totalStyle] },
                        '/',
                        total
                    )
                );
                break;
            case 'pointer':
                var indexes = this.getIndexes(total);
                var pointer = indexes.map(function (index) {
                    var activeStyle = index === current ? _index2["default"].pointActiveStyle : null;
                    return React.createElement(_reactNative.View, { style: [_index2["default"].pointStyle, _index2["default"].spaceStyle, activeStyle], key: 'point-' + index });
                });
                markup = React.createElement(
                    _reactNative.View,
                    { style: [_index2["default"].indicatorStyle] },
                    pointer
                );
                break;
            default:
                markup = false;
                break;
        }
        return React.createElement(
            _reactNative.View,
            { style: [_index2["default"].container, style] },
            markup
        );
    };

    return Pagination;
}(React.Component);

exports["default"] = Pagination;

Pagination.defaultProps = {
    mode: 'button',
    current: 0,
    simple: false,
    prevText: 'Prev',
    nextText: 'Next',
    onChange: function onChange() {}
};
module.exports = exports['default'];