|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
- import React from 'react';
- import ReactDOM from 'react-dom';
- import PropTypes from 'prop-types';
- import cssAnimate, { isCssAnimationSupported } from 'css-animation';
- import animUtil from './util/animate';
-
- var transitionMap = {
- enter: 'transitionEnter',
- appear: 'transitionAppear',
- leave: 'transitionLeave'
- };
-
- var AnimateChild = function (_React$Component) {
- _inherits(AnimateChild, _React$Component);
-
- function AnimateChild() {
- _classCallCheck(this, AnimateChild);
-
- return _possibleConstructorReturn(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).apply(this, arguments));
- }
-
- _createClass(AnimateChild, [{
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- this.stop();
- }
- }, {
- key: 'componentWillEnter',
- value: function componentWillEnter(done) {
- if (animUtil.isEnterSupported(this.props)) {
- this.transition('enter', done);
- } else {
- done();
- }
- }
- }, {
- key: 'componentWillAppear',
- value: function componentWillAppear(done) {
- if (animUtil.isAppearSupported(this.props)) {
- this.transition('appear', done);
- } else {
- done();
- }
- }
- }, {
- key: 'componentWillLeave',
- value: function componentWillLeave(done) {
- if (animUtil.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 = ReactDOM.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 ((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 = cssAnimate(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;
- }(React.Component);
-
- AnimateChild.propTypes = {
- children: PropTypes.any,
- animation: PropTypes.any,
- transitionName: PropTypes.any
- };
- export default AnimateChild;
|