146 lines
4.3 KiB
JavaScript
146 lines
4.3 KiB
JavaScript
'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 _reactDom = require('react-dom');
|
|
|
|
var _reactDom2 = _interopRequireDefault(_reactDom);
|
|
|
|
var _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var _cssAnimation = require('css-animation');
|
|
|
|
var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
|
|
|
|
var _animate = require('./util/animate');
|
|
|
|
var _animate2 = _interopRequireDefault(_animate);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var transitionMap = {
|
|
enter: 'transitionEnter',
|
|
appear: 'transitionAppear',
|
|
leave: 'transitionLeave'
|
|
};
|
|
|
|
var AnimateChild = function (_React$Component) {
|
|
(0, _inherits3['default'])(AnimateChild, _React$Component);
|
|
|
|
function AnimateChild() {
|
|
(0, _classCallCheck3['default'])(this, AnimateChild);
|
|
return (0, _possibleConstructorReturn3['default'])(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).apply(this, arguments));
|
|
}
|
|
|
|
(0, _createClass3['default'])(AnimateChild, [{
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
this.stop();
|
|
}
|
|
}, {
|
|
key: 'componentWillEnter',
|
|
value: function componentWillEnter(done) {
|
|
if (_animate2['default'].isEnterSupported(this.props)) {
|
|
this.transition('enter', done);
|
|
} else {
|
|
done();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillAppear',
|
|
value: function componentWillAppear(done) {
|
|
if (_animate2['default'].isAppearSupported(this.props)) {
|
|
this.transition('appear', done);
|
|
} else {
|
|
done();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillLeave',
|
|
value: function componentWillLeave(done) {
|
|
if (_animate2['default'].isLeaveSupported(this.props)) {
|
|
this.transition('leave', done);
|
|
} else {
|
|
// always sync, do not interupt with react component life cycle
|
|
// update hidden -> animate hidden ->
|
|
// didUpdate -> animate leave -> unmount (if animate is none)
|
|
done();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'transition',
|
|
value: function transition(animationType, finishCallback) {
|
|
var _this2 = this;
|
|
|
|
var node = _reactDom2['default'].findDOMNode(this);
|
|
var props = this.props;
|
|
var transitionName = props.transitionName;
|
|
var nameIsObj = typeof transitionName === 'object';
|
|
this.stop();
|
|
var end = function end() {
|
|
_this2.stopper = null;
|
|
finishCallback();
|
|
};
|
|
if ((_cssAnimation.isCssAnimationSupported || !props.animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
|
|
var name = nameIsObj ? transitionName[animationType] : transitionName + '-' + animationType;
|
|
var activeName = name + '-active';
|
|
if (nameIsObj && transitionName[animationType + 'Active']) {
|
|
activeName = transitionName[animationType + 'Active'];
|
|
}
|
|
this.stopper = (0, _cssAnimation2['default'])(node, {
|
|
name: name,
|
|
active: activeName
|
|
}, end);
|
|
} else {
|
|
this.stopper = props.animation[animationType](node, end);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'stop',
|
|
value: function stop() {
|
|
var stopper = this.stopper;
|
|
if (stopper) {
|
|
this.stopper = null;
|
|
stopper.stop();
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
return this.props.children;
|
|
}
|
|
}]);
|
|
return AnimateChild;
|
|
}(_react2['default'].Component);
|
|
|
|
AnimateChild.propTypes = {
|
|
children: _propTypes2['default'].any,
|
|
animation: _propTypes2['default'].any,
|
|
transitionName: _propTypes2['default'].any
|
|
};
|
|
exports['default'] = AnimateChild;
|
|
module.exports = exports['default']; |