weex-nuke/lib/Modal/view/toast-component.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 _rax = require('rax');

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

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeText = require('../../Text/index.js');

var _nukeText2 = _interopRequireDefault(_nukeText);

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

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

var _nukeIcon = require('../../Icon/index.js');

var _nukeIcon2 = _interopRequireDefault(_nukeIcon);

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


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

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

    var _this = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this));

    _this.timer = null;
    _this.state = {
      visible: true
    };
    _this.displayName = 'Toast';
    return _this;
  }

  _createClass(Toast, [{
    key: 'componentDidMount',
    value: function componentDidMount() {}
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate() {
      if (_nukeEnv.isWeex) {
        return true;
      }
      return false;
    }
  }, {
    key: 'getIcon',
    value: function getIcon() {
      var _props = this.props,
          message = _props.message,
          icon = _props.icon,
          others = _props.others;

      var styles = this.props.themeStyle;
      if (!icon) return;
      if (icon.name) {
        return (0, _rax.createElement)(_nukeIcon2.default, { size: 'large', style: [styles.iconfont, icon.style], name: icon.name });
      }
      return (0, _rax.createElement)(_nukeIcon2.default, { style: icon.style, src: icon.source });
    }
    // 启动这计时器

  }, {
    key: 'startTimer',
    value: function startTimer() {
      var that = this;

      // 先清掉计时器
      clearTimeout(that.timer);

      var duration = that.props.duration;
      if (duration <= 0) return;

      that.timer = setTimeout(function () {
        that.setState({ visible: false });
        that.props.onClose && that.props.onClose();
      }, duration);
    }
  }, {
    key: 'render',
    value: function render() {
      this.startTimer();
      var _props2 = this.props,
          message = _props2.message,
          icon = _props2.icon,
          others = _props2.others;

      var styles = this.props.themeStyle;
      var bodyStyle = Object.assign({}, styles.body, icon ? styles['body-with-icon'] : {});
      // console.log(bodyStyle);
      return this.state.visible ? (0, _rax.createElement)(
        _nukeView2.default,
        _extends({ style: styles.mask }, others),
        (0, _rax.createElement)(
          _nukeView2.default,
          { style: bodyStyle },
          this.getIcon(),
          (0, _rax.createElement)(
            _nukeText2.default,
            { style: [styles.text, icon ? styles['text-with-icon'] : {}] },
            message
          )
        )
      ) : null;
    }
  }]);

  return Toast;
}(_rax.Component);

Toast.propTypes = {
  // 持续时间, 如果<=0表示一直存在
  duration: _rax.PropTypes.number,
  // 是否显示
  visible: _rax.PropTypes.bool,
  defaultVisible: _rax.PropTypes.bool,
  onClose: _rax.PropTypes.func
};

Toast.defaultProps = {
  duration: 0,
  hasMask: false
};
var StyledToast = (0, _nukeThemeProvider.connectStyle)(_styles2.default)(Toast);

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