weex-nuke/lib/Tabbar/view/tabbar.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _class, _temp; /** @jsx createElement */


var _rax = require('rax');

var _nukeView = require('../../View/index.js');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeScrollView = require('../../ScrollView/index.js');

var _nukeScrollView2 = _interopRequireDefault(_nukeScrollView);

var _nukeDimensions = require('../../Dimensions/index.js');

var _nukeDimensions2 = _interopRequireDefault(_nukeDimensions);

var _nukeEnv = require('../../Env/index.js');

var _item = require('./item.js');

var _item2 = _interopRequireDefault(_item);

var _content = require('./content.js');

var _content2 = _interopRequireDefault(_content);

var _nukeThemeProvider = require('../../ThemeProvider/index.js');

var _styles = require('../styles/index.js');

var _styles2 = _interopRequireDefault(_styles);

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

// import wpo from './log/log.js';
var WIDTH = '750rem';

// 0 tabbar 完全渲染完毕
// 2/3 tabbar 切换tab渲染完毕(普通模式/embed模式)

// const rec = t => Date.now() - t;

var Tabbar = (_temp = _class = function (_Component) {
  _inherits(Tabbar, _Component);

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

    // wpo.setConfig({
    //     sample : 1,
    //     spmId  : 'nuke.perf',
    //     request: stream.fetch
    // });
    // this.t = Date.now();
    // 兼容代码，旧api为activeKey为string，新api为obj
    var _this = _possibleConstructorReturn(this, (Tabbar.__proto__ || Object.getPrototypeOf(Tabbar)).call(this, props));

    _this.handleTouchTap = function (tabKey) {
      var needChangeState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

      // this.t = Date.now()
      needChangeState && _this.props.onChange && _this.props.onChange({ prev: _this.getKey(), next: tabKey });
      needChangeState && _this.setState({ selectedKey: tabKey });
      _this.keyObj ? _this.props.activeKey.key = tabKey : _this.props.activeKey = tabKey;
    };

    _this.getStyles = function () {
      var _this$props = _this.props,
          _this$props$navTop = _this$props.navTop,
          navTop = _this$props$navTop === undefined ? false : _this$props$navTop,
          _this$props$capsule = _this$props.capsule,
          capsule = _this$props$capsule === undefined ? false : _this$props$capsule,
          _this$props$iconBar = _this$props.iconBar,
          iconBar = _this$props$iconBar === undefined ? false : _this$props$iconBar,
          themeStyle = _this$props.themeStyle;
      var _this$props$itemStyle = _this.props.itemStyle,
          itemStyle = _this$props$itemStyle === undefined ? {} : _this$props$itemStyle;

      if (itemStyle.height) {
        itemStyle.height = parseInt(itemStyle.height, 10);
      }
      if (itemStyle.width) {
        itemStyle.width = parseInt(itemStyle.width, 10);
      }
      var barWrapperStyle = Object.assign({}, _extends({ width: WIDTH }, itemStyle, { position: 'absolute' }), navTop || capsule ? { top: 0 } : { bottom: 0 });
      var barHeight = themeStyle.navBar.height;
      if (capsule) {
        barHeight = themeStyle.navCapsule.height;
      }
      if (iconBar) {
        barHeight = themeStyle['nav-item-has-icon'].height;
      }
      if (itemStyle.height) {
        barHeight = itemStyle.height + 'rem';
      }
      var barStyle = Object.assign({}, themeStyle.navBar, { backgroundColor: barWrapperStyle.backgroundColor || '#ffffff' }, iconBar ? themeStyle['nav-item-has-icon'] : {}, capsule ? themeStyle.navCapsule : { width: itemStyle.width || '750rem' }, { height: barHeight
        // capsule ? { height: itemStyle.height || null }
      });
      return {
        barWrapperStyle: barWrapperStyle,
        barStyle: barStyle
      };
    };

    _this.keyObj = props.activeKey.key !== undefined;
    _this.state = {
      selectedKey: _this.getKey(props)
    };
    _this._control = { switch: true };
    _this.asFramework = props.asContainer === false || props.asFramework;
    return _this;
  }

  _createClass(Tabbar, [{
    key: 'getKey',
    value: function getKey(thisProps) {
      var props = thisProps || this.props;
      return this.keyObj ? props.activeKey.key : props.activeKey;
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // this.t = Date.now()
      // 屏蔽掉来自item press事件的state中activeKey的变更，render中将不处理，并且同步本地的activeKey值
      if (!this._control.switch) {
        this.keyObj ? nextProps.activeKey.key = this.props.activeKey.key : nextProps.activeKey = this.props.activeKey;
      } else {
        // 主动change state后不会产生onchange
        this.setState({
          selectedKey: this.keyObj ? nextProps.activeKey.key : nextProps.activeKey
        });
      }
    }
  }, {
    key: 'getTabs',
    value: function getTabs() {
      var tabs = [];
      if (this.props.children && Array.isArray(this.props.children)) {
        this.props.children.map(function (tab) {
          if ((0, _rax.isValidElement)(tab)) {
            tabs.push(tab);
          }
        });
        return tabs;
      }
      tabs.push(this.props.children);
      return tabs;
    }
  }, {
    key: 'renderTabNav',
    value: function renderTabNav(tabs) {
      var _props = this.props,
          _props$itemStyle = _props.itemStyle,
          itemStyle = _props$itemStyle === undefined ? {} : _props$itemStyle,
          _props$navTop = _props.navTop,
          navTop = _props$navTop === undefined ? false : _props$navTop,
          _props$capsule = _props.capsule,
          capsule = _props$capsule === undefined ? false : _props$capsule,
          _props$iconBar = _props.iconBar,
          iconBar = _props$iconBar === undefined ? false : _props$iconBar;
      /*
       * 修改导航条及content为绝对定位，以避免在embed模式下weex渲染遮挡问题。
       */

      var _getStyles = this.getStyles(),
          barWrapperStyle = _getStyles.barWrapperStyle,
          barStyle = _getStyles.barStyle;

      if (this.props.navScrollable) {
        return (0, _rax.createElement)(
          _nukeView2.default,
          { className: 'bar-wrapper', style: barWrapperStyle },
          (0, _rax.createElement)(
            _nukeScrollView2.default,
            {
              horizontal: 'true',
              showsHorizontalScrollIndicator: false,
              className: 'tab-nav',
              style: [barStyle, _nukeEnv.isWeb ? {
                flexBasis: 'auto'
              } : {}],
              contentContainerStyle: _nukeEnv.isWeb ? { flexBasis: 'auto' } : {}
            },
            tabs
          )
        );
      }
      return (0, _rax.createElement)(
        _nukeView2.default,
        { className: 'bar-wrapper', style: barWrapperStyle },
        (0, _rax.createElement)(
          _nukeView2.default,
          { className: 'tab-nav', style: barStyle },
          tabs
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var tabContent = [];

      var _getStyles2 = this.getStyles(),
          barStyle = _getStyles2.barStyle;

      var themeStyle = this.props.themeStyle;
      var tabs = this.getTabs().map(function (tab, index) {
        if (tab.props.children || tab.props.src) {
          tabContent.push((0, _rax.createElement)(_content2.default, {
            src: tab.props.src || null,
            asFramework: _this2.asFramework,
            customMethod: {
              focus: _this2.props.customFocus,
              changeTo: _this2.props.customChange
            },
            key: index,
            webUrl: tab.props.webUrl || null,
            tabKey: tab.props.tabKey,
            selected: _this2.state.selectedKey === tab.props.tabKey,
            handleTouchTap: _this2.handleTouchTap
          }, tab.props.children));
        }

        return (0, _rax.cloneElement)(tab, {
          _control: _this2._control,
          asFramework: _this2.asFramework,
          navStyle: _this2.props.navStyle,
          index: index,
          style: Object.assign({}, tab.props.style, { height: barStyle.height }),
          tabKey: tab.props.tabKey,
          capsule: _this2.props.capsule,
          navTop: _this2.props.navTop,
          iconBar: _this2.props.iconBar,
          navScrollable: _this2.props.navScrollable,
          selected: _this2.state.selectedKey === tab.props.tabKey,
          selectedColor: _this2.props.selectedColor,
          selectedIcon: tab.props.selectedIcon,
          handleTouchTap: _this2.handleTouchTap
        });
      });
      var tabContainerStyle = Object.assign({}, themeStyle.tabContainer, this.props.style);
      // var barStyle = Object.assign({},styles.navBar,this.props.itemStyle);
      // if(this.props.iconBar){
      //     Object.assign(barStyle, styles['nav-item-has-icon'])
      // }
      var autoStyleHeight = _nukeDimensions2.default.get('window').height;

      var tabContentStyle = this.props.navTop || this.props.capsule ? Object.assign({}, themeStyle.tabContent, {
        marginTop: barStyle.height
      }) : Object.assign({}, themeStyle.tabContent, {
        marginBottom: barStyle.height
      });
      // console.log('this.state.selectedKey', this.state.selectedKey);
      var index = Number(this.state.selectedKey) || 0;
      var contentStyle = this.props.contentStyle;
      if (this.props.navTop || this.props.capsule) {
        return (0, _rax.createElement)(
          _nukeView2.default,
          { className: 'tab-container', style: tabContainerStyle },
          this.renderTabNav(tabs),
          tabContent.length ? (0, _rax.createElement)(
            _nukeView2.default,
            { className: 'tab-content', style: [tabContentStyle, contentStyle] },
            tabContent
          ) : null
        );
      }
      return (0, _rax.createElement)(
        _nukeView2.default,
        { className: 'tab-container', style: tabContainerStyle },
        tabContent.length ? (0, _rax.createElement)(
          _nukeView2.default,
          { className: 'tab-content', style: [tabContentStyle, contentStyle] },
          tabContent
        ) : null,
        this.renderTabNav(tabs)
      );
    }
  }]);

  return Tabbar;
}(_rax.Component), _class.Item = _item2.default, _temp);

Tabbar.defaultProps = {
  asFramework: true,
  themeStyle: {}
};
Tabbar.displayName = 'Tabbar';

exports.default = (0, _nukeThemeProvider.connectStyle)(_styles2.default)(Tabbar);
module.exports = exports['default'];