189 lines
6.4 KiB
JavaScript
189 lines
6.4 KiB
JavaScript
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; |