nuke-tabbar/lib/view/content.js

带导航切换的tab组件

'use strict';

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

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 _rax = require('rax');

var _nukeView = require('nuke-view');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeEnv = require('nuke-env');

var _nukeUtil = require('nuke-util');

var _nukeUtil2 = _interopRequireDefault(_nukeUtil);

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; } /** @jsx createElement */

var WIDTH = '750rem';

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

  function Wrapper() {
    _classCallCheck(this, Wrapper);

    return _possibleConstructorReturn(this, (Wrapper.__proto__ || Object.getPrototypeOf(Wrapper)).apply(this, arguments));
  }

  _createClass(Wrapper, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return this.props.shouldUpdate;
    }
  }, {
    key: 'render',
    value: function render() {
      return (0, _rax.createElement)(
        _nukeView2.default,
        { style: { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 } },
        this.props.children
      );
    }
  }]);

  return Wrapper;
}(_rax.Component);

var Content = function (_Component2) {
  _inherits(Content, _Component2);

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

    var _this2 = _possibleConstructorReturn(this, (Content.__proto__ || Object.getPrototypeOf(Content)).call(this, props));

    _this2.state = { hasBeenSelected: false };
    return _this2;
  }

  _createClass(Content, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      if (this.props.selected) {
        this.setState({
          hasBeenSelected: true
        });
      }
      if (this.props.src) {
        return;
      }
      // embed模式下不会注入changeTo
      var method = this.props.customMethod.changeTo || 'changeTo';
      // hack reference，挂载subComponents实例引用
      if (!this.props.children.ref) {
        this.props.children.ref = Math.random().toString(36);
      }
      this.props.children.type.prototype[method] = this.props.handleTouchTap;
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      // wpo.speed(1, rec(this.t), true);
      // console.log('p1 [sub-tabbar] componentDidMount');
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // embed模式下不会触发onFocus事件
      if (!this.props.src && this.props.selected !== nextProps.selected) {
        var method = this.props.customMethod.focus || 'onFocus';
        var child = this.props.children;
        /**
         * _owner._instance may cause bug on production.
         */
        var context = child._owner._instance.refs[child.ref];
        context && child.type.prototype[method] && child.type.prototype[method].call(context, nextProps.selected);
      }
      if (this.state.hasBeenSelected || nextProps.selected) {
        this.setState({
          hasBeenSelected: true
        });
      }
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     return this.props.asFramework ? true : nextProps.selected !== this.props.selected;
    // }

    // navTo(param){

    // Navigator.push(param.url, null,false);
    // }

  }, {
    key: 'render',
    value: function render() {
      var style = {
        width: WIDTH,
        position: 'absolute',
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        visibility: 'visible'
      };
      var _props = this.props,
          _props$webUrl = _props.webUrl,
          webUrl = _props$webUrl === undefined ? null : _props$webUrl,
          selected = _props.selected,
          slider = _props.slider,
          asFramework = _props.asFramework,
          children = _props.children;
      var src = this.props.src;

      if (src) {
        !selected && Object.assign(style, { visibility: 'hidden' });
        if (_nukeEnv.isWeb) {
          // debugger;
          if (webUrl) {
            src = webUrl;
          } else {
            var options = {};
            if (window.__QAP__ && window.__QAP__.package && window.__QAP__.package.config && window.__QAP__.package.config.WebRootPath) {
              options.webRootPath = window.__QAP__.package.config.WebRootPath;
            }
            /**
             * 千牛 feature
             * add in 2017.5.17
             * _is_qap_=true 是一个需要持续传递到每一层页面的参数，用于指明此处为 h5 降级的 qap 容器。
             */
            if (window.location.href.indexOf('_is_qap_=true') > 0) {
              options.contextQuery = '_is_qap_=true';
            }
            src = _nukeUtil2.default.urlHandler(src, options);
            if (src.indexOf('://') < 0) {
              src = window.location.protocol + '//' + src;
            }
          }

          return (0, _rax.createElement)('iframe', { src: src, style: [style, { height: '100%' }], frameBorder: '0' });
        }
        return (0, _rax.createElement)('embed', { src: src, style: [{ visibility: 'visible' }, style], type: 'weex' });
        // }
      }
      if (slider) {
        return (0, _rax.createElement)(
          _nukeView2.default,
          { style: [style, this.props.style] },
          children
        );
      }
      !selected && Object.assign(style, {
        left: '-' + WIDTH,
        visibility: 'hidden',
        overflow: 'hidden'
      });
      return this.state.hasBeenSelected ? (0, _rax.createElement)(
        _nukeView2.default,
        { style: [style, this.props.style] },
        (0, _rax.createElement)(
          Wrapper,
          { shouldUpdate: asFramework },
          children
        )
      ) : (0, _rax.createElement)(_nukeView2.default, null);
    }
  }]);

  return Content;
}(_rax.Component);

exports.default = Content;
module.exports = exports['default'];