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.
 
 
 
 

208 lines
7.3 KiB

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