zent/lib/loading/Loading.js

一套前端设计语言和基于React的实现

'use strict';

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

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 _react2 = _interopRequireDefault(_react);

var _getPosition = require('./getPosition');

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

var Loading = function (_ref) {
  (0, _inherits3['default'])(Loading, _ref);

  function Loading() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, Loading);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = Loading.__proto__ || Object.getPrototypeOf(Loading)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      show: _this.props.show
    }, _this.show = function (info) {
      // Do not add this optimization, setState is an async operation
      // Assume this.state.show is false,
      // show({show: true}); show({show: false})
      // will not set show to false if we add these lines.
      //
      // if (info.show === this.state.show) {
      //   return;
      // }

      if (info.show) {
        var target = _this.props.target;
        if (target) {
          _this.style = {
            left: (0, _getPosition.getElementLeft)(target),
            top: (0, _getPosition.getElementTop)(target),
            width: target.offsetWidth,
            height: target.offsetHeight
          };
        }
      }

      _this.setState({
        show: info.show
      });
    }, _this.setPosition = function () {
      if (!_this.wrapper) {
        return;
      }

      _this.wrapper.style.zIndex = _this.props.zIndex;

      if (_this.style) {
        _this.wrapper.style.top = _this.style.top + 'px';
        _this.wrapper.style.left = _this.style.left + 'px';
        _this.wrapper.style.width = _this.style.width + 'px';
        _this.wrapper.style.height = _this.style.height + 'px';
      } else {
        _this.wrapper.style.position = 'fixed';
      }
    }, _this.setWrapperRef = function (el) {
      _this.wrapper = el;
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(Loading, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.setPosition();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.setPosition();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        show: nextProps.show
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          prefix = _props.prefix,
          className = _props.className,
          containerClass = _props.containerClass;


      if (!this.props.float) {
        return _react2['default'].createElement(
          'div',
          {
            className: prefix + '-loading-container ' + prefix + '-loading-container-static ' + containerClass,
            style: {
              height: this.props.children || !this.state.show ? 'initial' : this.props.height
            }
          },
          this.props.children,
          this.state.show && _react2['default'].createElement(
            'div',
            { className: prefix + '-page-loading ' + className },
            _react2['default'].createElement('div', { className: prefix + '-page-mask' })
          )
        );
      }

      return this.state.show && _react2['default'].createElement(
        'div',
        {
          className: prefix + '-page-loading ' + className,
          ref: this.setWrapperRef
        },
        _react2['default'].createElement('div', { className: prefix + '-page-mask' })
      );
    }
  }]);
  return Loading;
}(_react.PureComponent || _react.Component);

exports['default'] = Loading;