Buckets:
| 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; |
Xet Storage Details
- Size:
- 6.55 kB
- Xet hash:
- a5ad311db398e3cd50c2cdcbcee4e3d80c04671019663a8ec900f29ff980a2df
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.