TransitionGroup.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _propTypes = _interopRequireDefault(require("prop-types"));
  5. var _react = _interopRequireDefault(require("react"));
  6. var _TransitionGroupContext = _interopRequireDefault(require("./TransitionGroupContext"));
  7. var _ChildMapping = require("./utils/ChildMapping");
  8. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  9. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  10. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  11. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  12. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  13. var values = Object.values || function (obj) {
  14. return Object.keys(obj).map(function (k) {
  15. return obj[k];
  16. });
  17. };
  18. var defaultProps = {
  19. component: 'div',
  20. childFactory: function childFactory(child) {
  21. return child;
  22. }
  23. };
  24. /**
  25. * The `<TransitionGroup>` component manages a set of transition components
  26. * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
  27. * components, `<TransitionGroup>` is a state machine for managing the mounting
  28. * and unmounting of components over time.
  29. *
  30. * Consider the example below. As items are removed or added to the TodoList the
  31. * `in` prop is toggled automatically by the `<TransitionGroup>`.
  32. *
  33. * Note that `<TransitionGroup>` does not define any animation behavior!
  34. * Exactly _how_ a list item animates is up to the individual transition
  35. * component. This means you can mix and match animations across different list
  36. * items.
  37. */
  38. var TransitionGroup = /*#__PURE__*/function (_React$Component) {
  39. _inheritsLoose(TransitionGroup, _React$Component);
  40. function TransitionGroup(props, context) {
  41. var _this;
  42. _this = _React$Component.call(this, props, context) || this;
  43. var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
  44. _this.state = {
  45. contextValue: {
  46. isMounting: true
  47. },
  48. handleExited: handleExited,
  49. firstRender: true
  50. };
  51. return _this;
  52. }
  53. var _proto = TransitionGroup.prototype;
  54. _proto.componentDidMount = function componentDidMount() {
  55. this.mounted = true;
  56. this.setState({
  57. contextValue: {
  58. isMounting: false
  59. }
  60. });
  61. };
  62. _proto.componentWillUnmount = function componentWillUnmount() {
  63. this.mounted = false;
  64. };
  65. TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
  66. var prevChildMapping = _ref.children,
  67. handleExited = _ref.handleExited,
  68. firstRender = _ref.firstRender;
  69. return {
  70. children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),
  71. firstRender: false
  72. };
  73. } // node is `undefined` when user provided `nodeRef` prop
  74. ;
  75. _proto.handleExited = function handleExited(child, node) {
  76. var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children);
  77. if (child.key in currentChildMapping) return;
  78. if (child.props.onExited) {
  79. child.props.onExited(node);
  80. }
  81. if (this.mounted) {
  82. this.setState(function (state) {
  83. var children = _extends({}, state.children);
  84. delete children[child.key];
  85. return {
  86. children: children
  87. };
  88. });
  89. }
  90. };
  91. _proto.render = function render() {
  92. var _this$props = this.props,
  93. Component = _this$props.component,
  94. childFactory = _this$props.childFactory,
  95. props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
  96. var contextValue = this.state.contextValue;
  97. var children = values(this.state.children).map(childFactory);
  98. delete props.appear;
  99. delete props.enter;
  100. delete props.exit;
  101. if (Component === null) {
  102. return /*#__PURE__*/_react.default.createElement(_TransitionGroupContext.default.Provider, {
  103. value: contextValue
  104. }, children);
  105. }
  106. return /*#__PURE__*/_react.default.createElement(_TransitionGroupContext.default.Provider, {
  107. value: contextValue
  108. }, /*#__PURE__*/_react.default.createElement(Component, props, children));
  109. };
  110. return TransitionGroup;
  111. }(_react.default.Component);
  112. TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  113. /**
  114. * `<TransitionGroup>` renders a `<div>` by default. You can change this
  115. * behavior by providing a `component` prop.
  116. * If you use React v16+ and would like to avoid a wrapping `<div>` element
  117. * you can pass in `component={null}`. This is useful if the wrapping div
  118. * borks your css styles.
  119. */
  120. component: _propTypes.default.any,
  121. /**
  122. * A set of `<Transition>` components, that are toggled `in` and out as they
  123. * leave. the `<TransitionGroup>` will inject specific transition props, so
  124. * remember to spread them through if you are wrapping the `<Transition>` as
  125. * with our `<Fade>` example.
  126. *
  127. * While this component is meant for multiple `Transition` or `CSSTransition`
  128. * children, sometimes you may want to have a single transition child with
  129. * content that you want to be transitioned out and in when you change it
  130. * (e.g. routes, images etc.) In that case you can change the `key` prop of
  131. * the transition child as you change its content, this will cause
  132. * `TransitionGroup` to transition the child out and back in.
  133. */
  134. children: _propTypes.default.node,
  135. /**
  136. * A convenience prop that enables or disables appear animations
  137. * for all children. Note that specifying this will override any defaults set
  138. * on individual children Transitions.
  139. */
  140. appear: _propTypes.default.bool,
  141. /**
  142. * A convenience prop that enables or disables enter animations
  143. * for all children. Note that specifying this will override any defaults set
  144. * on individual children Transitions.
  145. */
  146. enter: _propTypes.default.bool,
  147. /**
  148. * A convenience prop that enables or disables exit animations
  149. * for all children. Note that specifying this will override any defaults set
  150. * on individual children Transitions.
  151. */
  152. exit: _propTypes.default.bool,
  153. /**
  154. * You may need to apply reactive updates to a child as it is exiting.
  155. * This is generally done by using `cloneElement` however in the case of an exiting
  156. * child the element has already been removed and not accessible to the consumer.
  157. *
  158. * If you do need to update a child as it leaves you can provide a `childFactory`
  159. * to wrap every child, even the ones that are leaving.
  160. *
  161. * @type Function(child: ReactElement) -> ReactElement
  162. */
  163. childFactory: _propTypes.default.func
  164. } : {};
  165. TransitionGroup.defaultProps = defaultProps;
  166. var _default = TransitionGroup;
  167. exports.default = _default;
  168. module.exports = exports.default;