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