205 lines
7.5 KiB
JavaScript
205 lines
7.5 KiB
JavaScript
"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; |