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