ReplaceTransition.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  2. import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  3. import PropTypes from 'prop-types';
  4. import React from 'react';
  5. import ReactDOM from 'react-dom';
  6. import TransitionGroup from './TransitionGroup';
  7. /**
  8. * The `<ReplaceTransition>` component is a specialized `Transition` component
  9. * that animates between two children.
  10. *
  11. * ```jsx
  12. * <ReplaceTransition in>
  13. * <Fade><div>I appear first</div></Fade>
  14. * <Fade><div>I replace the above</div></Fade>
  15. * </ReplaceTransition>
  16. * ```
  17. */
  18. var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
  19. _inheritsLoose(ReplaceTransition, _React$Component);
  20. function ReplaceTransition() {
  21. var _this;
  22. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  23. _args[_key] = arguments[_key];
  24. }
  25. _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
  26. _this.handleEnter = function () {
  27. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  28. args[_key2] = arguments[_key2];
  29. }
  30. return _this.handleLifecycle('onEnter', 0, args);
  31. };
  32. _this.handleEntering = function () {
  33. for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  34. args[_key3] = arguments[_key3];
  35. }
  36. return _this.handleLifecycle('onEntering', 0, args);
  37. };
  38. _this.handleEntered = function () {
  39. for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
  40. args[_key4] = arguments[_key4];
  41. }
  42. return _this.handleLifecycle('onEntered', 0, args);
  43. };
  44. _this.handleExit = function () {
  45. for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
  46. args[_key5] = arguments[_key5];
  47. }
  48. return _this.handleLifecycle('onExit', 1, args);
  49. };
  50. _this.handleExiting = function () {
  51. for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
  52. args[_key6] = arguments[_key6];
  53. }
  54. return _this.handleLifecycle('onExiting', 1, args);
  55. };
  56. _this.handleExited = function () {
  57. for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
  58. args[_key7] = arguments[_key7];
  59. }
  60. return _this.handleLifecycle('onExited', 1, args);
  61. };
  62. return _this;
  63. }
  64. var _proto = ReplaceTransition.prototype;
  65. _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
  66. var _child$props;
  67. var children = this.props.children;
  68. var child = React.Children.toArray(children)[idx];
  69. if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
  70. if (this.props[handler]) {
  71. var maybeNode = child.props.nodeRef ? undefined : ReactDOM.findDOMNode(this);
  72. this.props[handler](maybeNode);
  73. }
  74. };
  75. _proto.render = function render() {
  76. var _this$props = this.props,
  77. children = _this$props.children,
  78. inProp = _this$props.in,
  79. props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
  80. var _React$Children$toArr = React.Children.toArray(children),
  81. first = _React$Children$toArr[0],
  82. second = _React$Children$toArr[1];
  83. delete props.onEnter;
  84. delete props.onEntering;
  85. delete props.onEntered;
  86. delete props.onExit;
  87. delete props.onExiting;
  88. delete props.onExited;
  89. return /*#__PURE__*/React.createElement(TransitionGroup, props, inProp ? React.cloneElement(first, {
  90. key: 'first',
  91. onEnter: this.handleEnter,
  92. onEntering: this.handleEntering,
  93. onEntered: this.handleEntered
  94. }) : React.cloneElement(second, {
  95. key: 'second',
  96. onEnter: this.handleExit,
  97. onEntering: this.handleExiting,
  98. onEntered: this.handleExited
  99. }));
  100. };
  101. return ReplaceTransition;
  102. }(React.Component);
  103. ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? {
  104. in: PropTypes.bool.isRequired,
  105. children: function children(props, propName) {
  106. if (React.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
  107. return null;
  108. }
  109. } : {};
  110. export default ReplaceTransition;