Dashboard sipadu mbip
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.

TransitionGroup.js 6.4KB

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