You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ExpandTransitionChild.js 6.1 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _reactDom = require('react-dom');
  26. var _reactDom2 = _interopRequireDefault(_reactDom);
  27. var _transitions = require('../styles/transitions');
  28. var _transitions2 = _interopRequireDefault(_transitions);
  29. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  30. var reflow = function reflow(elem) {
  31. return elem.offsetHeight;
  32. };
  33. var ExpandTransitionChild = function (_Component) {
  34. (0, _inherits3.default)(ExpandTransitionChild, _Component);
  35. function ExpandTransitionChild() {
  36. (0, _classCallCheck3.default)(this, ExpandTransitionChild);
  37. return (0, _possibleConstructorReturn3.default)(this, (ExpandTransitionChild.__proto__ || (0, _getPrototypeOf2.default)(ExpandTransitionChild)).apply(this, arguments));
  38. }
  39. (0, _createClass3.default)(ExpandTransitionChild, [{
  40. key: 'componentWillUnmount',
  41. value: function componentWillUnmount() {
  42. clearTimeout(this.enterTimer);
  43. clearTimeout(this.enteredTimer);
  44. clearTimeout(this.leaveTimer);
  45. }
  46. }, {
  47. key: 'componentWillAppear',
  48. value: function componentWillAppear(callback) {
  49. this.open();
  50. callback();
  51. }
  52. }, {
  53. key: 'componentDidAppear',
  54. value: function componentDidAppear() {
  55. this.setAutoHeight();
  56. }
  57. }, {
  58. key: 'componentWillEnter',
  59. value: function componentWillEnter(callback) {
  60. var _this2 = this;
  61. var _props = this.props,
  62. enterDelay = _props.enterDelay,
  63. transitionDelay = _props.transitionDelay,
  64. transitionDuration = _props.transitionDuration;
  65. var element = _reactDom2.default.findDOMNode(this);
  66. element.style.height = 0;
  67. this.enterTimer = setTimeout(function () {
  68. return _this2.open();
  69. }, enterDelay);
  70. this.enteredTimer = setTimeout(function () {
  71. return callback();
  72. }, enterDelay + transitionDelay + transitionDuration);
  73. }
  74. }, {
  75. key: 'componentDidEnter',
  76. value: function componentDidEnter() {
  77. this.setAutoHeight();
  78. }
  79. }, {
  80. key: 'componentWillLeave',
  81. value: function componentWillLeave(callback) {
  82. var _props2 = this.props,
  83. transitionDelay = _props2.transitionDelay,
  84. transitionDuration = _props2.transitionDuration;
  85. var element = _reactDom2.default.findDOMNode(this);
  86. // Set fixed height first for animated property value
  87. element.style.height = this.refs.wrapper.clientHeight + 'px';
  88. reflow(element);
  89. element.style.transitionDuration = transitionDuration + 'ms';
  90. element.style.height = 0;
  91. this.leaveTimer = setTimeout(function () {
  92. return callback();
  93. }, transitionDelay + transitionDuration);
  94. }
  95. }, {
  96. key: 'setAutoHeight',
  97. value: function setAutoHeight() {
  98. var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this),
  99. style = _ReactDOM$findDOMNode.style;
  100. style.transitionDuration = 0;
  101. style.height = 'auto';
  102. }
  103. }, {
  104. key: 'open',
  105. value: function open() {
  106. var element = _reactDom2.default.findDOMNode(this);
  107. element.style.height = this.refs.wrapper.clientHeight + 'px';
  108. }
  109. }, {
  110. key: 'render',
  111. value: function render() {
  112. var _props3 = this.props,
  113. children = _props3.children,
  114. enterDelay = _props3.enterDelay,
  115. style = _props3.style,
  116. transitionDelay = _props3.transitionDelay,
  117. transitionDuration = _props3.transitionDuration,
  118. other = (0, _objectWithoutProperties3.default)(_props3, ['children', 'enterDelay', 'style', 'transitionDelay', 'transitionDuration']);
  119. var prepareStyles = this.context.muiTheme.prepareStyles;
  120. var mergedRootStyles = (0, _simpleAssign2.default)({
  121. position: 'relative',
  122. height: 0,
  123. width: '100%',
  124. top: 0,
  125. left: 0,
  126. overflow: 'hidden',
  127. transition: _transitions2.default.easeOut(transitionDuration + 'ms', ['height'], transitionDelay + 'ms')
  128. }, style);
  129. return _react2.default.createElement(
  130. 'div',
  131. (0, _extends3.default)({}, other, { style: prepareStyles(mergedRootStyles) }),
  132. _react2.default.createElement(
  133. 'div',
  134. { ref: 'wrapper' },
  135. children
  136. )
  137. );
  138. }
  139. }]);
  140. return ExpandTransitionChild;
  141. }(_react.Component);
  142. ExpandTransitionChild.defaultProps = {
  143. enterDelay: 0,
  144. transitionDelay: 0,
  145. transitionDuration: 450
  146. };
  147. ExpandTransitionChild.contextTypes = {
  148. muiTheme: _propTypes2.default.object.isRequired
  149. };
  150. ExpandTransitionChild.propTypes = process.env.NODE_ENV !== "production" ? {
  151. children: _propTypes2.default.node,
  152. enterDelay: _propTypes2.default.number,
  153. style: _propTypes2.default.object,
  154. transitionDelay: _propTypes2.default.number,
  155. transitionDuration: _propTypes2.default.number
  156. } : {};
  157. exports.default = ExpandTransitionChild;