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;
							 |