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.
		
		
		
		
		
			
		
			
				
					205 lines
				
				7.5 KiB
			
		
		
			
		
	
	
					205 lines
				
				7.5 KiB
			| 
											3 years ago
										 | "use strict"; | ||
|  | 
 | ||
|  | exports.__esModule = true; | ||
|  | exports.default = void 0; | ||
|  | 
 | ||
|  | var _propTypes = _interopRequireDefault(require("prop-types")); | ||
|  | 
 | ||
|  | var _react = _interopRequireDefault(require("react")); | ||
|  | 
 | ||
|  | var _TransitionGroupContext = _interopRequireDefault(require("./TransitionGroupContext")); | ||
|  | 
 | ||
|  | var _ChildMapping = require("./utils/ChildMapping"); | ||
|  | 
 | ||
|  | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
|  | 
 | ||
|  | 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; } | ||
|  | 
 | ||
|  | 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); } | ||
|  | 
 | ||
|  | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
|  | 
 | ||
|  | function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } | ||
|  | 
 | ||
|  | var values = Object.values || function (obj) { | ||
|  |   return Object.keys(obj).map(function (k) { | ||
|  |     return obj[k]; | ||
|  |   }); | ||
|  | }; | ||
|  | 
 | ||
|  | var defaultProps = { | ||
|  |   component: 'div', | ||
|  |   childFactory: function childFactory(child) { | ||
|  |     return child; | ||
|  |   } | ||
|  | }; | ||
|  | /** | ||
|  |  * The `<TransitionGroup>` component manages a set of transition components | ||
|  |  * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition | ||
|  |  * components, `<TransitionGroup>` is a state machine for managing the mounting | ||
|  |  * and unmounting of components over time. | ||
|  |  * | ||
|  |  * Consider the example below. As items are removed or added to the TodoList the | ||
|  |  * `in` prop is toggled automatically by the `<TransitionGroup>`. | ||
|  |  * | ||
|  |  * Note that `<TransitionGroup>`  does not define any animation behavior! | ||
|  |  * Exactly _how_ a list item animates is up to the individual transition | ||
|  |  * component. This means you can mix and match animations across different list | ||
|  |  * items. | ||
|  |  */ | ||
|  | 
 | ||
|  | var TransitionGroup = /*#__PURE__*/function (_React$Component) { | ||
|  |   _inheritsLoose(TransitionGroup, _React$Component); | ||
|  | 
 | ||
|  |   function TransitionGroup(props, context) { | ||
|  |     var _this; | ||
|  | 
 | ||
|  |     _this = _React$Component.call(this, props, context) || this; | ||
|  | 
 | ||
|  |     var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
 | ||
|  | 
 | ||
|  | 
 | ||
|  |     _this.state = { | ||
|  |       contextValue: { | ||
|  |         isMounting: true | ||
|  |       }, | ||
|  |       handleExited: handleExited, | ||
|  |       firstRender: true | ||
|  |     }; | ||
|  |     return _this; | ||
|  |   } | ||
|  | 
 | ||
|  |   var _proto = TransitionGroup.prototype; | ||
|  | 
 | ||
|  |   _proto.componentDidMount = function componentDidMount() { | ||
|  |     this.mounted = true; | ||
|  |     this.setState({ | ||
|  |       contextValue: { | ||
|  |         isMounting: false | ||
|  |       } | ||
|  |     }); | ||
|  |   }; | ||
|  | 
 | ||
|  |   _proto.componentWillUnmount = function componentWillUnmount() { | ||
|  |     this.mounted = false; | ||
|  |   }; | ||
|  | 
 | ||
|  |   TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) { | ||
|  |     var prevChildMapping = _ref.children, | ||
|  |         handleExited = _ref.handleExited, | ||
|  |         firstRender = _ref.firstRender; | ||
|  |     return { | ||
|  |       children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited), | ||
|  |       firstRender: false | ||
|  |     }; | ||
|  |   } // node is `undefined` when user provided `nodeRef` prop
 | ||
|  |   ; | ||
|  | 
 | ||
|  |   _proto.handleExited = function handleExited(child, node) { | ||
|  |     var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children); | ||
|  |     if (child.key in currentChildMapping) return; | ||
|  | 
 | ||
|  |     if (child.props.onExited) { | ||
|  |       child.props.onExited(node); | ||
|  |     } | ||
|  | 
 | ||
|  |     if (this.mounted) { | ||
|  |       this.setState(function (state) { | ||
|  |         var children = _extends({}, state.children); | ||
|  | 
 | ||
|  |         delete children[child.key]; | ||
|  |         return { | ||
|  |           children: children | ||
|  |         }; | ||
|  |       }); | ||
|  |     } | ||
|  |   }; | ||
|  | 
 | ||
|  |   _proto.render = function render() { | ||
|  |     var _this$props = this.props, | ||
|  |         Component = _this$props.component, | ||
|  |         childFactory = _this$props.childFactory, | ||
|  |         props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]); | ||
|  | 
 | ||
|  |     var contextValue = this.state.contextValue; | ||
|  |     var children = values(this.state.children).map(childFactory); | ||
|  |     delete props.appear; | ||
|  |     delete props.enter; | ||
|  |     delete props.exit; | ||
|  | 
 | ||
|  |     if (Component === null) { | ||
|  |       return /*#__PURE__*/_react.default.createElement(_TransitionGroupContext.default.Provider, { | ||
|  |         value: contextValue | ||
|  |       }, children); | ||
|  |     } | ||
|  | 
 | ||
|  |     return /*#__PURE__*/_react.default.createElement(_TransitionGroupContext.default.Provider, { | ||
|  |       value: contextValue | ||
|  |     }, /*#__PURE__*/_react.default.createElement(Component, props, children)); | ||
|  |   }; | ||
|  | 
 | ||
|  |   return TransitionGroup; | ||
|  | }(_react.default.Component); | ||
|  | 
 | ||
|  | TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? { | ||
|  |   /** | ||
|  |    * `<TransitionGroup>` renders a `<div>` by default. You can change this | ||
|  |    * behavior by providing a `component` prop. | ||
|  |    * If you use React v16+ and would like to avoid a wrapping `<div>` element | ||
|  |    * you can pass in `component={null}`. This is useful if the wrapping div | ||
|  |    * borks your css styles. | ||
|  |    */ | ||
|  |   component: _propTypes.default.any, | ||
|  | 
 | ||
|  |   /** | ||
|  |    * A set of `<Transition>` components, that are toggled `in` and out as they | ||
|  |    * leave. the `<TransitionGroup>` will inject specific transition props, so | ||
|  |    * remember to spread them through if you are wrapping the `<Transition>` as | ||
|  |    * with our `<Fade>` example. | ||
|  |    * | ||
|  |    * While this component is meant for multiple `Transition` or `CSSTransition` | ||
|  |    * children, sometimes you may want to have a single transition child with | ||
|  |    * content that you want to be transitioned out and in when you change it | ||
|  |    * (e.g. routes, images etc.) In that case you can change the `key` prop of | ||
|  |    * the transition child as you change its content, this will cause | ||
|  |    * `TransitionGroup` to transition the child out and back in. | ||
|  |    */ | ||
|  |   children: _propTypes.default.node, | ||
|  | 
 | ||
|  |   /** | ||
|  |    * A convenience prop that enables or disables appear animations | ||
|  |    * for all children. Note that specifying this will override any defaults set | ||
|  |    * on individual children Transitions. | ||
|  |    */ | ||
|  |   appear: _propTypes.default.bool, | ||
|  | 
 | ||
|  |   /** | ||
|  |    * A convenience prop that enables or disables enter animations | ||
|  |    * for all children. Note that specifying this will override any defaults set | ||
|  |    * on individual children Transitions. | ||
|  |    */ | ||
|  |   enter: _propTypes.default.bool, | ||
|  | 
 | ||
|  |   /** | ||
|  |    * A convenience prop that enables or disables exit animations | ||
|  |    * for all children. Note that specifying this will override any defaults set | ||
|  |    * on individual children Transitions. | ||
|  |    */ | ||
|  |   exit: _propTypes.default.bool, | ||
|  | 
 | ||
|  |   /** | ||
|  |    * You may need to apply reactive updates to a child as it is exiting. | ||
|  |    * This is generally done by using `cloneElement` however in the case of an exiting | ||
|  |    * child the element has already been removed and not accessible to the consumer. | ||
|  |    * | ||
|  |    * If you do need to update a child as it leaves you can provide a `childFactory` | ||
|  |    * to wrap every child, even the ones that are leaving. | ||
|  |    * | ||
|  |    * @type Function(child: ReactElement) -> ReactElement | ||
|  |    */ | ||
|  |   childFactory: _propTypes.default.func | ||
|  | } : {}; | ||
|  | TransitionGroup.defaultProps = defaultProps; | ||
|  | var _default = TransitionGroup; | ||
|  | exports.default = _default; | ||
|  | module.exports = exports.default; |