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.
		
		
		
		
		
			
		
			
				
					189 lines
				
				6.4 KiB
			
		
		
			
		
	
	
					189 lines
				
				6.4 KiB
			| 
											3 years ago
										 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | ||
|  | import _extends from "@babel/runtime/helpers/esm/extends"; | ||
|  | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized"; | ||
|  | import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose"; | ||
|  | import PropTypes from 'prop-types'; | ||
|  | import React from 'react'; | ||
|  | import TransitionGroupContext from './TransitionGroupContext'; | ||
|  | import { getChildMapping, getInitialChildMapping, getNextChildMapping } from './utils/ChildMapping'; | ||
|  | 
 | ||
|  | 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 ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited), | ||
|  |       firstRender: false | ||
|  |     }; | ||
|  |   } // node is `undefined` when user provided `nodeRef` prop
 | ||
|  |   ; | ||
|  | 
 | ||
|  |   _proto.handleExited = function handleExited(child, node) { | ||
|  |     var currentChildMapping = 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.createElement(TransitionGroupContext.Provider, { | ||
|  |         value: contextValue | ||
|  |       }, children); | ||
|  |     } | ||
|  | 
 | ||
|  |     return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, { | ||
|  |       value: contextValue | ||
|  |     }, /*#__PURE__*/React.createElement(Component, props, children)); | ||
|  |   }; | ||
|  | 
 | ||
|  |   return TransitionGroup; | ||
|  | }(React.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.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.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.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.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.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.func | ||
|  | } : {}; | ||
|  | TransitionGroup.defaultProps = defaultProps; | ||
|  | export default TransitionGroup; |