@chemzqm/rc-animate/lib/Animate.js

css-transition ui component for react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _ChildrenUtils = require('./ChildrenUtils');

var _AnimateChild = require('./AnimateChild');

var _AnimateChild2 = _interopRequireDefault(_AnimateChild);

var _util = require('./util');

var _util2 = _interopRequireDefault(_util);

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

var defaultKey = 'rc_animate_' + Date.now();


function getChildrenFromProps(props) {
  var children = props.children;
  if (_react2["default"].isValidElement(children)) {
    if (!children.key) {
      return _react2["default"].cloneElement(children, {
        key: defaultKey
      });
    }
  }
  return children;
}

function noop() {}

var Animate = _react2["default"].createClass({
  displayName: 'Animate',

  propTypes: {
    component: _react2["default"].PropTypes.any,
    animation: _react2["default"].PropTypes.object,
    transitionName: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.string, _react2["default"].PropTypes.object]),
    transitionEnter: _react2["default"].PropTypes.bool,
    transitionAppear: _react2["default"].PropTypes.bool,
    exclusive: _react2["default"].PropTypes.bool,
    transitionLeave: _react2["default"].PropTypes.bool,
    onEnd: _react2["default"].PropTypes.func,
    onEnter: _react2["default"].PropTypes.func,
    onLeave: _react2["default"].PropTypes.func,
    onAppear: _react2["default"].PropTypes.func
  },

  getDefaultProps: function getDefaultProps() {
    return {
      animation: {},
      component: 'span',
      transitionEnter: true,
      transitionLeave: true,
      transitionAppear: false,
      onEnd: noop,
      onEnter: noop,
      onLeave: noop,
      onAppear: noop
    };
  },
  getInitialState: function getInitialState() {
    this.currentlyAnimatingKeys = {};
    this.keysToEnter = [];
    this.keysToLeave = [];
    var children = this.currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props));
    return {
      children: children
    };
  },
  componentDidMount: function componentDidMount() {
    var _this = this;

    var children = this.state.children;
    children.forEach(function (child) {
      _this.performAppear(child.key);
    });
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    var _this2 = this;

    var nextChildren = this.currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(nextProps));
    var props = this.props;
    // exclusive needs immediate response
    if (props.exclusive) {
      Object.keys(this.currentlyAnimatingKeys).forEach(function (key) {
        _this2.stop(key);
      });
    }
    var currentlyAnimatingKeys = this.currentlyAnimatingKeys;
    // last props children if exclusive
    var currentChildren = this.state.children;
    var newChildren = [];
    newChildren = (0, _ChildrenUtils.mergeChildren)(currentChildren, nextChildren);

    // need render to avoid update
    this.setState({
      children: newChildren
    });

    nextChildren.forEach(function (child) {
      var key = child.key;
      if (currentlyAnimatingKeys[key]) {
        return;
      }
      var hasPrev = (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key);
      if (!hasPrev) {
        _this2.keysToEnter.push(key);
      }
    });

    currentChildren.forEach(function (child) {
      var key = child.key;
      if (currentlyAnimatingKeys[key]) {
        return;
      }
      var hasNext = (0, _ChildrenUtils.findChildInChildrenByKey)(nextChildren, key);
      if (!hasNext) {
        _this2.keysToLeave.push(key);
      }
    });
  },
  componentDidUpdate: function componentDidUpdate() {
    if (this.isMounted()) {
      var keysToEnter = this.keysToEnter;
      this.keysToEnter = [];
      keysToEnter.forEach(this.performEnter);
      var keysToLeave = this.keysToLeave;
      this.keysToLeave = [];
      keysToLeave.forEach(this.performLeave);
    }
  },
  performEnter: function performEnter(key) {
    // may already remove by exclusive
    if (this.refs[key]) {
      this.currentlyAnimatingKeys[key] = true;
      this.refs[key].componentWillEnter(this.handleDoneAdding.bind(this, key, 'enter'));
    }
  },
  performAppear: function performAppear(key) {
    if (this.refs[key]) {
      this.currentlyAnimatingKeys[key] = true;
      this.refs[key].componentWillAppear(this.handleDoneAdding.bind(this, key, 'appear'));
    }
  },
  handleDoneAdding: function handleDoneAdding(key, type) {
    var props = this.props;
    delete this.currentlyAnimatingKeys[key];
    // if update on exclusive mode, skip check
    if (props.exclusive) return;
    if (!this.isValidChildByKey(this.currentChildren, key)) {
      // exclusive will not need this
      this.performLeave(key);
    } else {
      if (type === 'appear') {
        if (_util2["default"].allowAppearCallback(props)) {
          props.onAppear(key);
          props.onEnd(key, true);
        }
      } else {
        if (_util2["default"].allowEnterCallback(props)) {
          props.onEnter(key);
          props.onEnd(key, true);
        }
      }
    }
  },
  performLeave: function performLeave(key) {
    // may already remove by exclusive
    if (this.refs[key]) {
      this.currentlyAnimatingKeys[key] = true;
      this.refs[key].componentWillLeave(this.handleDoneLeaving.bind(this, key));
    }
  },
  handleDoneLeaving: function handleDoneLeaving(key) {
    var props = this.props;
    delete this.currentlyAnimatingKeys[key];
    // if update on exclusive mode, skip check
    if (props.exclusive) return;
    // in case state change is too fast
    if (this.isValidChildByKey(this.currentChildren, key)) {
      this.performEnter(key);
    } else {
      if (_util2["default"].allowLeaveCallback(props)) {
        props.onLeave(key);
        props.onEnd(key, false);
      }
      if (this.isMounted()) {
        this.setState({
          children: this.currentChildren
        });
      }
    }
  },
  isValidChildByKey: function isValidChildByKey(currentChildren, key) {
    return (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key);
  },
  stop: function stop(key) {
    delete this.currentlyAnimatingKeys[key];
    var component = this.refs[key];
    if (component) {
      component.stop();
    }
  },
  render: function render() {
    var props = this.props;
    var stateChildren = this.state.children;
    var children = null;
    if (stateChildren) {
      children = stateChildren.map(function (child) {
        if (child === null) {
          return child;
        }
        if (!child.key) {
          throw new Error('must set key for <rc-animate> children');
        }
        return _react2["default"].createElement(
          _AnimateChild2["default"],
          {
            key: child.key,
            ref: child.key,
            animation: props.animation,
            transitionName: props.transitionName,
            transitionEnter: props.transitionEnter,
            transitionAppear: props.transitionAppear,
            transitionLeave: props.transitionLeave },
          child
        );
      });
    }
    var Component = props.component;
    if (Component) {
      return _react2["default"].createElement(
        Component,
        this.props,
        children
      );
    }
    return children[0] || null;
  }
});

exports["default"] = Animate;
module.exports = exports['default'];