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.
		
		
		
		
		
			
		
			
				
					136 lines
				
				4.3 KiB
			
		
		
			
		
	
	
					136 lines
				
				4.3 KiB
			| 
											3 years ago
										 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | ||
|  | import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose"; | ||
|  | import PropTypes from 'prop-types'; | ||
|  | import React from 'react'; | ||
|  | import ReactDOM from 'react-dom'; | ||
|  | import TransitionGroup from './TransitionGroup'; | ||
|  | /** | ||
|  |  * The `<ReplaceTransition>` component is a specialized `Transition` component | ||
|  |  * that animates between two children. | ||
|  |  * | ||
|  |  * ```jsx
 | ||
|  |  * <ReplaceTransition in> | ||
|  |  *   <Fade><div>I appear first</div></Fade> | ||
|  |  *   <Fade><div>I replace the above</div></Fade> | ||
|  |  * </ReplaceTransition> | ||
|  |  * ```
 | ||
|  |  */ | ||
|  | 
 | ||
|  | var ReplaceTransition = /*#__PURE__*/function (_React$Component) { | ||
|  |   _inheritsLoose(ReplaceTransition, _React$Component); | ||
|  | 
 | ||
|  |   function ReplaceTransition() { | ||
|  |     var _this; | ||
|  | 
 | ||
|  |     for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
|  |       _args[_key] = arguments[_key]; | ||
|  |     } | ||
|  | 
 | ||
|  |     _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this; | ||
|  | 
 | ||
|  |     _this.handleEnter = function () { | ||
|  |       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
|  |         args[_key2] = arguments[_key2]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onEnter', 0, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     _this.handleEntering = function () { | ||
|  |       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
|  |         args[_key3] = arguments[_key3]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onEntering', 0, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     _this.handleEntered = function () { | ||
|  |       for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
|  |         args[_key4] = arguments[_key4]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onEntered', 0, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     _this.handleExit = function () { | ||
|  |       for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
|  |         args[_key5] = arguments[_key5]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onExit', 1, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     _this.handleExiting = function () { | ||
|  |       for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) { | ||
|  |         args[_key6] = arguments[_key6]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onExiting', 1, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     _this.handleExited = function () { | ||
|  |       for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) { | ||
|  |         args[_key7] = arguments[_key7]; | ||
|  |       } | ||
|  | 
 | ||
|  |       return _this.handleLifecycle('onExited', 1, args); | ||
|  |     }; | ||
|  | 
 | ||
|  |     return _this; | ||
|  |   } | ||
|  | 
 | ||
|  |   var _proto = ReplaceTransition.prototype; | ||
|  | 
 | ||
|  |   _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) { | ||
|  |     var _child$props; | ||
|  | 
 | ||
|  |     var children = this.props.children; | ||
|  |     var child = React.Children.toArray(children)[idx]; | ||
|  |     if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs); | ||
|  | 
 | ||
|  |     if (this.props[handler]) { | ||
|  |       var maybeNode = child.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); | ||
|  |       this.props[handler](maybeNode); | ||
|  |     } | ||
|  |   }; | ||
|  | 
 | ||
|  |   _proto.render = function render() { | ||
|  |     var _this$props = this.props, | ||
|  |         children = _this$props.children, | ||
|  |         inProp = _this$props.in, | ||
|  |         props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]); | ||
|  | 
 | ||
|  |     var _React$Children$toArr = React.Children.toArray(children), | ||
|  |         first = _React$Children$toArr[0], | ||
|  |         second = _React$Children$toArr[1]; | ||
|  | 
 | ||
|  |     delete props.onEnter; | ||
|  |     delete props.onEntering; | ||
|  |     delete props.onEntered; | ||
|  |     delete props.onExit; | ||
|  |     delete props.onExiting; | ||
|  |     delete props.onExited; | ||
|  |     return /*#__PURE__*/React.createElement(TransitionGroup, props, inProp ? React.cloneElement(first, { | ||
|  |       key: 'first', | ||
|  |       onEnter: this.handleEnter, | ||
|  |       onEntering: this.handleEntering, | ||
|  |       onEntered: this.handleEntered | ||
|  |     }) : React.cloneElement(second, { | ||
|  |       key: 'second', | ||
|  |       onEnter: this.handleExit, | ||
|  |       onEntering: this.handleExiting, | ||
|  |       onEntered: this.handleExited | ||
|  |     })); | ||
|  |   }; | ||
|  | 
 | ||
|  |   return ReplaceTransition; | ||
|  | }(React.Component); | ||
|  | 
 | ||
|  | ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? { | ||
|  |   in: PropTypes.bool.isRequired, | ||
|  |   children: function children(props, propName) { | ||
|  |     if (React.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components."); | ||
|  |     return null; | ||
|  |   } | ||
|  | } : {}; | ||
|  | export default ReplaceTransition; |