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 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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 _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. contextValue: {
  48. isMounting: true
  49. },
  50. handleExited: handleExited,
  51. firstRender: true
  52. };
  53. return _this;
  54. }
  55. var _proto = TransitionGroup.prototype;
  56. _proto.componentDidMount = function componentDidMount() {
  57. this.mounted = true;
  58. this.setState({
  59. contextValue: {
  60. isMounting: false
  61. }
  62. });
  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 contextValue = this.state.contextValue;
  98. var children = values(this.state.children).map(childFactory);
  99. delete props.appear;
  100. delete props.enter;
  101. delete props.exit;
  102. if (Component === null) {
  103. return _react.default.createElement(_TransitionGroupContext.default.Provider, {
  104. value: contextValue
  105. }, children);
  106. }
  107. return _react.default.createElement(_TransitionGroupContext.default.Provider, {
  108. value: contextValue
  109. }, _react.default.createElement(Component, props, children));
  110. };
  111. return TransitionGroup;
  112. }(_react.default.Component);
  113. TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  114. /**
  115. * `<TransitionGroup>` renders a `<div>` by default. You can change this
  116. * behavior by providing a `component` prop.
  117. * If you use React v16+ and would like to avoid a wrapping `<div>` element
  118. * you can pass in `component={null}`. This is useful if the wrapping div
  119. * borks your css styles.
  120. */
  121. component: _propTypes.default.any,
  122. /**
  123. * A set of `<Transition>` components, that are toggled `in` and out as they
  124. * leave. the `<TransitionGroup>` will inject specific transition props, so
  125. * remember to spread them through if you are wrapping the `<Transition>` as
  126. * with our `<Fade>` example.
  127. *
  128. * While this component is meant for multiple `Transition` or `CSSTransition`
  129. * children, sometimes you may want to have a single transition child with
  130. * content that you want to be transitioned out and in when you change it
  131. * (e.g. routes, images etc.) In that case you can change the `key` prop of
  132. * the transition child as you change its content, this will cause
  133. * `TransitionGroup` to transition the child out and back in.
  134. */
  135. children: _propTypes.default.node,
  136. /**
  137. * A convenience prop that enables or disables appear animations
  138. * for all children. Note that specifying this will override any defaults set
  139. * on individual children Transitions.
  140. */
  141. appear: _propTypes.default.bool,
  142. /**
  143. * A convenience prop that enables or disables enter animations
  144. * for all children. Note that specifying this will override any defaults set
  145. * on individual children Transitions.
  146. */
  147. enter: _propTypes.default.bool,
  148. /**
  149. * A convenience prop that enables or disables exit animations
  150. * for all children. Note that specifying this will override any defaults set
  151. * on individual children Transitions.
  152. */
  153. exit: _propTypes.default.bool,
  154. /**
  155. * You may need to apply reactive updates to a child as it is exiting.
  156. * This is generally done by using `cloneElement` however in the case of an exiting
  157. * child the element has already been removed and not accessible to the consumer.
  158. *
  159. * If you do need to update a child as it leaves you can provide a `childFactory`
  160. * to wrap every child, even the ones that are leaving.
  161. *
  162. * @type Function(child: ReactElement) -> ReactElement
  163. */
  164. childFactory: _propTypes.default.func
  165. } : {};
  166. TransitionGroup.defaultProps = defaultProps;
  167. var _default = TransitionGroup;
  168. exports.default = _default;
  169. module.exports = exports["default"];