123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- "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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
- 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(_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
- };
- };
-
- _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 _react.default.createElement(_TransitionGroupContext.default.Provider, {
- value: contextValue
- }, children);
- }
-
- return _react.default.createElement(_TransitionGroupContext.default.Provider, {
- value: contextValue
- }, _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"];
|