ReactCSSTransitionGroup

ReactCSSTransitionGroup实现子节点挂载、添加、移除时的css动画。

 

'use strict';

var _assign = require('object-assign');

// 构造函数作为普通函数调用报错
function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
  } 
}

// subClass继承superClass时使用，self为subClass实例，call为superClass作为普通函数执行后的返回值
//    且以subClass实例为上下文，使得subClass继承superClass的静态属性和方法
// superClass作为普通函数调用时有返回值，输出该返回值；无，输出subClass实例
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; 
}

// subClass继承superClass的原型属性
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; 
}

var React = require('./React');

// 渲染子组件的同时，并管控子组件样式类切换时机
var ReactTransitionGroup = require('./ReactTransitionGroup');

// 实现子组件样式切换的机制
var ReactCSSTransitionGroupChild = require('./ReactCSSTransitionGroupChild');

// props.transitionAppear设为真值时，校验props.transitionAppearTimeout不为null或undefined、且为数值型等
function createTransitionTimeoutPropValidator(transitionType) {
  var timeoutPropName = 'transition' + transitionType + 'Timeout';
  var enabledPropName = 'transition' + transitionType;

  return function (props) {
    if (props[enabledPropName]) {
      if (props[timeoutPropName] == null) {
        return new Error(timeoutPropName + ' wasn\'t supplied to ReactCSSTransitionGroup: ' 
          + 'this can cause unreliable animations and won\'t be supported in ' 
          + 'a future version of React. See ' 
          + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.');

      } else if (typeof props[timeoutPropName] !== 'number') {
        return new Error(timeoutPropName + ' must be a number (in milliseconds)');
      }
    }
  };
}

var ReactCSSTransitionGroup = function (_React$Component) {
  _inherits(ReactCSSTransitionGroup, _React$Component);

  function ReactCSSTransitionGroup() {
    var _temp, _this, _ret;

    _classCallCheck(this, ReactCSSTransitionGroup);

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

    // 逗号运算符
    return _ret = (
        _temp = (
          _this = _possibleConstructorReturn(
            this, 
            // ReactComponent作为普通函数调用，以当前实例this为上下文，赋值this.props|context|updater等
            // 返回值为undefined，_possibleConstructorReturn函数最终输出为ReactCSSTransitionGroup实例this
            _React$Component.call.apply(_React$Component, [this].concat(args))
          ), 
          _this
        ), 

        // 劫持渲染子节点的工厂函数，通过ReactCSSTransitionGroupChild组件实现样式类切换机制
        _this._wrapChild = function (child) {
          return React.createElement(ReactCSSTransitionGroupChild, {
            // 设定子节点的样式类名称appear、enter、leave
            name: _this.props.transitionName,

            // 是否要启动appear、enter、leave状况下的css动画效果
            appear: _this.props.transitionAppear,
            enter: _this.props.transitionEnter,
            leave: _this.props.transitionLeave,

            // appear、enter、leave状况下的css动画持续时间
            appearTimeout: _this.props.transitionAppearTimeout,
            enterTimeout: _this.props.transitionEnterTimeout,
            leaveTimeout: _this.props.transitionLeaveTimeout
          }, child);
        }, 
        _temp
      ), 
      _possibleConstructorReturn(_this, _ret);
  }

  // 通过ReactTransitionGroup组件渲染子组件的同时，管控子组件样式类切换时机
  ReactCSSTransitionGroup.prototype.render = function render() {
    return React.createElement(ReactTransitionGroup, _assign({}, this.props, { childFactory: this._wrapChild }));
  };

  return ReactCSSTransitionGroup;
}(React.Component);

ReactCSSTransitionGroup.displayName = 'ReactCSSTransitionGroup';
ReactCSSTransitionGroup.propTypes = {
  // 字符串或对象形式设定appear、enter、leave样式类
  transitionName: ReactCSSTransitionGroupChild.propTypes.name,

  // 是否启用appear、enter、leave样式类切换
  transitionAppear: React.PropTypes.bool,
  transitionEnter: React.PropTypes.bool,
  transitionLeave: React.PropTypes.bool,

  // appear、enter、leave样式类样式类的持续时间
  transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'),
  transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
  transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave')
};
ReactCSSTransitionGroup.defaultProps = {
  transitionAppear: false,
  transitionEnter: true,
  transitionLeave: true
};

// 调用ReactTransitionGroup劫持渲染组件元素，调用ReactCSSTransitionGroupChild渲染子节点
// 控制子节点挂载appear、添加enter、移除leave时的动画样式
module.exports = ReactCSSTransitionGroup;