'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); 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 _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _unsafeLifecyclesPolyfill = require('rc-util/lib/unsafeLifecyclesPolyfill'); var _unsafeLifecyclesPolyfill2 = _interopRequireDefault(_unsafeLifecyclesPolyfill); var _ChildrenUtils = require('./ChildrenUtils'); var _AnimateChild = require('./AnimateChild'); var _AnimateChild2 = _interopRequireDefault(_AnimateChild); var _animate = require('./util/animate'); var _animate2 = _interopRequireDefault(_animate); 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 = function (_React$Component) { (0, _inherits3['default'])(Animate, _React$Component); // eslint-disable-line function Animate(props) { (0, _classCallCheck3['default'])(this, Animate); var _this = (0, _possibleConstructorReturn3['default'])(this, (Animate.__proto__ || Object.getPrototypeOf(Animate)).call(this, props)); _initialiseProps.call(_this); _this.currentlyAnimatingKeys = {}; _this.keysToEnter = []; _this.keysToLeave = []; _this.state = { children: (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)) }; _this.childrenRefs = {}; return _this; } (0, _createClass3['default'])(Animate, [{ key: 'componentDidMount', value: function componentDidMount() { var _this2 = this; var showProp = this.props.showProp; var children = this.state.children; if (showProp) { children = children.filter(function (child) { return !!child.props[showProp]; }); } children.forEach(function (child) { if (child) { _this2.performAppear(child.key); } }); } }, { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { var _this3 = this; this.nextProps = nextProps; var nextChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(nextProps)); var props = this.props; // exclusive needs immediate response if (props.exclusive) { Object.keys(this.currentlyAnimatingKeys).forEach(function (key) { _this3.stop(key); }); } var showProp = props.showProp; var currentlyAnimatingKeys = this.currentlyAnimatingKeys; // last props children if exclusive var currentChildren = props.exclusive ? (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)) : this.state.children; // in case destroy in showProp mode var newChildren = []; if (showProp) { currentChildren.forEach(function (currentChild) { var nextChild = currentChild && (0, _ChildrenUtils.findChildInChildrenByKey)(nextChildren, currentChild.key); var newChild = void 0; if ((!nextChild || !nextChild.props[showProp]) && currentChild.props[showProp]) { newChild = _react2['default'].cloneElement(nextChild || currentChild, (0, _defineProperty3['default'])({}, showProp, true)); } else { newChild = nextChild; } if (newChild) { newChildren.push(newChild); } }); nextChildren.forEach(function (nextChild) { if (!nextChild || !(0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, nextChild.key)) { newChildren.push(nextChild); } }); } else { newChildren = (0, _ChildrenUtils.mergeChildren)(currentChildren, nextChildren); } // need render to avoid update this.setState({ children: newChildren }); nextChildren.forEach(function (child) { var key = child && child.key; if (child && currentlyAnimatingKeys[key]) { return; } var hasPrev = child && (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key); if (showProp) { var showInNext = child.props[showProp]; if (hasPrev) { var showInNow = (0, _ChildrenUtils.findShownChildInChildrenByKey)(currentChildren, key, showProp); if (!showInNow && showInNext) { _this3.keysToEnter.push(key); } } else if (showInNext) { _this3.keysToEnter.push(key); } } else if (!hasPrev) { _this3.keysToEnter.push(key); } }); currentChildren.forEach(function (child) { var key = child && child.key; if (child && currentlyAnimatingKeys[key]) { return; } var hasNext = child && (0, _ChildrenUtils.findChildInChildrenByKey)(nextChildren, key); if (showProp) { var showInNow = child.props[showProp]; if (hasNext) { var showInNext = (0, _ChildrenUtils.findShownChildInChildrenByKey)(nextChildren, key, showProp); if (!showInNext && showInNow) { _this3.keysToLeave.push(key); } } else if (showInNow) { _this3.keysToLeave.push(key); } } else if (!hasNext) { _this3.keysToLeave.push(key); } }); } }, { key: 'componentDidUpdate', value: function componentDidUpdate() { var keysToEnter = this.keysToEnter; this.keysToEnter = []; keysToEnter.forEach(this.performEnter); var keysToLeave = this.keysToLeave; this.keysToLeave = []; keysToLeave.forEach(this.performLeave); } }, { key: 'isValidChildByKey', value: function isValidChildByKey(currentChildren, key) { var showProp = this.props.showProp; if (showProp) { return (0, _ChildrenUtils.findShownChildInChildrenByKey)(currentChildren, key, showProp); } return (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key); } }, { key: 'stop', value: function stop(key) { delete this.currentlyAnimatingKeys[key]; var component = this.childrenRefs[key]; if (component) { component.stop(); } } }, { key: 'render', value: function render() { var _this4 = this; var props = this.props; this.nextProps = props; var stateChildren = this.state.children; var children = null; if (stateChildren) { children = stateChildren.map(function (child) { if (child === null || child === undefined) { return child; } if (!child.key) { throw new Error('must set key for children'); } return _react2['default'].createElement( _AnimateChild2['default'], { key: child.key, ref: function ref(node) { _this4.childrenRefs[child.key] = node; }, animation: props.animation, transitionName: props.transitionName, transitionEnter: props.transitionEnter, transitionAppear: props.transitionAppear, transitionLeave: props.transitionLeave }, child ); }); } var Component = props.component; if (Component) { var passedProps = props; if (typeof Component === 'string') { passedProps = (0, _extends3['default'])({ className: props.className, style: props.style }, props.componentProps); } return _react2['default'].createElement( Component, passedProps, children ); } return children[0] || null; } }]); return Animate; }(_react2['default'].Component); Animate.isAnimate = true; Animate.propTypes = { className: _propTypes2['default'].string, style: _propTypes2['default'].object, component: _propTypes2['default'].any, componentProps: _propTypes2['default'].object, animation: _propTypes2['default'].object, transitionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]), transitionEnter: _propTypes2['default'].bool, transitionAppear: _propTypes2['default'].bool, exclusive: _propTypes2['default'].bool, transitionLeave: _propTypes2['default'].bool, onEnd: _propTypes2['default'].func, onEnter: _propTypes2['default'].func, onLeave: _propTypes2['default'].func, onAppear: _propTypes2['default'].func, showProp: _propTypes2['default'].string, children: _propTypes2['default'].node }; Animate.defaultProps = { animation: {}, component: 'span', componentProps: {}, transitionEnter: true, transitionLeave: true, transitionAppear: false, onEnd: noop, onEnter: noop, onLeave: noop, onAppear: noop }; var _initialiseProps = function _initialiseProps() { var _this5 = this; this.performEnter = function (key) { // may already remove by exclusive if (_this5.childrenRefs[key]) { _this5.currentlyAnimatingKeys[key] = true; _this5.childrenRefs[key].componentWillEnter(_this5.handleDoneAdding.bind(_this5, key, 'enter')); } }; this.performAppear = function (key) { if (_this5.childrenRefs[key]) { _this5.currentlyAnimatingKeys[key] = true; _this5.childrenRefs[key].componentWillAppear(_this5.handleDoneAdding.bind(_this5, key, 'appear')); } }; this.handleDoneAdding = function (key, type) { var props = _this5.props; delete _this5.currentlyAnimatingKeys[key]; // if update on exclusive mode, skip check if (props.exclusive && props !== _this5.nextProps) { return; } var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)); if (!_this5.isValidChildByKey(currentChildren, key)) { // exclusive will not need this _this5.performLeave(key); } else if (type === 'appear') { if (_animate2['default'].allowAppearCallback(props)) { props.onAppear(key); props.onEnd(key, true); } } else if (_animate2['default'].allowEnterCallback(props)) { props.onEnter(key); props.onEnd(key, true); } }; this.performLeave = function (key) { // may already remove by exclusive if (_this5.childrenRefs[key]) { _this5.currentlyAnimatingKeys[key] = true; _this5.childrenRefs[key].componentWillLeave(_this5.handleDoneLeaving.bind(_this5, key)); } }; this.handleDoneLeaving = function (key) { var props = _this5.props; delete _this5.currentlyAnimatingKeys[key]; // if update on exclusive mode, skip check if (props.exclusive && props !== _this5.nextProps) { return; } var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)); // in case state change is too fast if (_this5.isValidChildByKey(currentChildren, key)) { _this5.performEnter(key); } else { var end = function end() { if (_animate2['default'].allowLeaveCallback(props)) { props.onLeave(key); props.onEnd(key, false); } }; if (!(0, _ChildrenUtils.isSameChildren)(_this5.state.children, currentChildren, props.showProp)) { _this5.setState({ children: currentChildren }, end); } else { end(); } } }; }; exports['default'] = (0, _unsafeLifecyclesPolyfill2['default'])(Animate); module.exports = exports['default'];