25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AnimateChild.js 4.3 KiB

3 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  6. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  7. var _createClass2 = require('babel-runtime/helpers/createClass');
  8. var _createClass3 = _interopRequireDefault(_createClass2);
  9. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  10. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  11. var _inherits2 = require('babel-runtime/helpers/inherits');
  12. var _inherits3 = _interopRequireDefault(_inherits2);
  13. var _react = require('react');
  14. var _react2 = _interopRequireDefault(_react);
  15. var _reactDom = require('react-dom');
  16. var _reactDom2 = _interopRequireDefault(_reactDom);
  17. var _propTypes = require('prop-types');
  18. var _propTypes2 = _interopRequireDefault(_propTypes);
  19. var _cssAnimation = require('css-animation');
  20. var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
  21. var _animate = require('./util/animate');
  22. var _animate2 = _interopRequireDefault(_animate);
  23. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  24. var transitionMap = {
  25. enter: 'transitionEnter',
  26. appear: 'transitionAppear',
  27. leave: 'transitionLeave'
  28. };
  29. var AnimateChild = function (_React$Component) {
  30. (0, _inherits3['default'])(AnimateChild, _React$Component);
  31. function AnimateChild() {
  32. (0, _classCallCheck3['default'])(this, AnimateChild);
  33. return (0, _possibleConstructorReturn3['default'])(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).apply(this, arguments));
  34. }
  35. (0, _createClass3['default'])(AnimateChild, [{
  36. key: 'componentWillUnmount',
  37. value: function componentWillUnmount() {
  38. this.stop();
  39. }
  40. }, {
  41. key: 'componentWillEnter',
  42. value: function componentWillEnter(done) {
  43. if (_animate2['default'].isEnterSupported(this.props)) {
  44. this.transition('enter', done);
  45. } else {
  46. done();
  47. }
  48. }
  49. }, {
  50. key: 'componentWillAppear',
  51. value: function componentWillAppear(done) {
  52. if (_animate2['default'].isAppearSupported(this.props)) {
  53. this.transition('appear', done);
  54. } else {
  55. done();
  56. }
  57. }
  58. }, {
  59. key: 'componentWillLeave',
  60. value: function componentWillLeave(done) {
  61. if (_animate2['default'].isLeaveSupported(this.props)) {
  62. this.transition('leave', done);
  63. } else {
  64. // always sync, do not interupt with react component life cycle
  65. // update hidden -> animate hidden ->
  66. // didUpdate -> animate leave -> unmount (if animate is none)
  67. done();
  68. }
  69. }
  70. }, {
  71. key: 'transition',
  72. value: function transition(animationType, finishCallback) {
  73. var _this2 = this;
  74. var node = _reactDom2['default'].findDOMNode(this);
  75. var props = this.props;
  76. var transitionName = props.transitionName;
  77. var nameIsObj = typeof transitionName === 'object';
  78. this.stop();
  79. var end = function end() {
  80. _this2.stopper = null;
  81. finishCallback();
  82. };
  83. if ((_cssAnimation.isCssAnimationSupported || !props.animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
  84. var name = nameIsObj ? transitionName[animationType] : transitionName + '-' + animationType;
  85. var activeName = name + '-active';
  86. if (nameIsObj && transitionName[animationType + 'Active']) {
  87. activeName = transitionName[animationType + 'Active'];
  88. }
  89. this.stopper = (0, _cssAnimation2['default'])(node, {
  90. name: name,
  91. active: activeName
  92. }, end);
  93. } else {
  94. this.stopper = props.animation[animationType](node, end);
  95. }
  96. }
  97. }, {
  98. key: 'stop',
  99. value: function stop() {
  100. var stopper = this.stopper;
  101. if (stopper) {
  102. this.stopper = null;
  103. stopper.stop();
  104. }
  105. }
  106. }, {
  107. key: 'render',
  108. value: function render() {
  109. return this.props.children;
  110. }
  111. }]);
  112. return AnimateChild;
  113. }(_react2['default'].Component);
  114. AnimateChild.propTypes = {
  115. children: _propTypes2['default'].any,
  116. animation: _propTypes2['default'].any,
  117. transitionName: _propTypes2['default'].any
  118. };
  119. exports['default'] = AnimateChild;
  120. module.exports = exports['default'];