antd-mobile-alita/lib/tab-bar/index.js

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

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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 _getDataAttr = require('../_util/getDataAttr');

var _getDataAttr2 = _interopRequireDefault(_getDataAttr);

var _tabs = require('../tabs');

var _tabs2 = _interopRequireDefault(_tabs);

var _Tab = require('./Tab');

var _Tab2 = _interopRequireDefault(_Tab);

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 Item = exports.Item = function (_React$Component) {
    (0, _inherits3['default'])(Item, _React$Component);

    function Item() {
        (0, _classCallCheck3['default'])(this, Item);
        return (0, _possibleConstructorReturn3['default'])(this, (Item.__proto__ || Object.getPrototypeOf(Item)).apply(this, arguments));
    }

    (0, _createClass3['default'])(Item, [{
        key: 'render',
        value: function render() {
            var _props = this.props,
                prefixCls = _props.prefixCls,
                style = _props.style;

            return React.createElement(
                'div',
                { className: prefixCls, style: style },
                this.props.children
            );
        }
    }]);
    return Item;
}(React.Component);

Item.defaultProps = {
    prefixCls: 'am-tab-bar-item',
    title: ''
};

var AntTabBar = function (_React$Component2) {
    (0, _inherits3['default'])(AntTabBar, _React$Component2);

    function AntTabBar() {
        (0, _classCallCheck3['default'])(this, AntTabBar);

        var _this2 = (0, _possibleConstructorReturn3['default'])(this, (AntTabBar.__proto__ || Object.getPrototypeOf(AntTabBar)).apply(this, arguments));

        _this2.getTabs = function () {
            var tabs = [];
            React.Children.forEach(_this2.props.children, function (c) {
                if (c) {
                    tabs.push((0, _extends3['default'])({}, c.props));
                }
            });
            return tabs;
        };
        _this2.renderTabBar = function () {
            var _this2$props = _this2.props,
                barTintColor = _this2$props.barTintColor,
                prefixCls = _this2$props.prefixCls,
                tintColor = _this2$props.tintColor,
                unselectedTintColor = _this2$props.unselectedTintColor,
                hidden = _this2$props.hidden,
                tabBarPosition = _this2$props.tabBarPosition;

            var tabsData = _this2.getTabs();
            var content = Array.isArray(tabsData) ? tabsData.map(function (cProps, index) {
                return React.createElement(_Tab2['default'], { key: index, prefixCls: _this2.props.prefixCls + '-tab', badge: cProps.badge, dot: cProps.dot, selected: cProps.selected, icon: cProps.icon, selectedIcon: cProps.selectedIcon, title: cProps.title, tintColor: tintColor, unselectedTintColor: unselectedTintColor, dataAttrs: (0, _getDataAttr2['default'])(cProps), onClick: function onClick() {
                        return cProps.onPress && cProps.onPress();
                    } });
            }) : null;
            var cls = prefixCls + '-bar';
            if (hidden) {
                cls += ' ' + prefixCls + '-bar-hidden-' + tabBarPosition;
            }
            return React.createElement(
                'div',
                { className: cls, style: { backgroundColor: barTintColor } },
                content
            );
        };
        return _this2;
    }

    (0, _createClass3['default'])(AntTabBar, [{
        key: 'render',
        value: function render() {
            var _props2 = this.props,
                prefixCls = _props2.prefixCls,
                children = _props2.children,
                animated = _props2.animated,
                swipeable = _props2.swipeable,
                noRenderContent = _props2.noRenderContent,
                prerenderingSiblingsNumber = _props2.prerenderingSiblingsNumber,
                tabBarPosition = _props2.tabBarPosition;

            var tabs = this.getTabs();
            var activeIndex = 0;
            if (Array.isArray(tabs)) {
                tabs.forEach(function (tab, index) {
                    if (tab.selected) {
                        activeIndex = index;
                    }
                });
            }
            return React.createElement(
                'div',
                { className: prefixCls },
                React.createElement(
                    _tabs2['default'],
                    { tabs: tabs, renderTabBar: this.renderTabBar, tabBarPosition: tabBarPosition, page: activeIndex < 0 ? undefined : activeIndex, animated: animated, swipeable: swipeable, noRenderContent: noRenderContent, prerenderingSiblingsNumber: prerenderingSiblingsNumber },
                    children
                )
            );
        }
    }]);
    return AntTabBar;
}(React.Component);

AntTabBar.defaultProps = {
    prefixCls: 'am-tab-bar',
    barTintColor: 'white',
    tintColor: '#108ee9',
    hidden: false,
    unselectedTintColor: '#888',
    placeholder: '正在加载',
    animated: false,
    swipeable: false,
    prerenderingSiblingsNumber: 1,
    tabBarPosition: 'bottom'
};
AntTabBar.Item = Item;
exports['default'] = AntTabBar;