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.
		
		
		
		
		
			
		
			
				
					269 lines
				
				7.6 KiB
			
		
		
			
		
	
	
					269 lines
				
				7.6 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.__esModule = true;
							 | 
						||
| 
								 | 
							
								exports.default = exports.modes = void 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _react = _interopRequireDefault(require("react"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _propTypes = _interopRequireDefault(require("prop-types"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _Transition = require("./Transition");
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _TransitionGroupContext = _interopRequireDefault(require("./TransitionGroupContext"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _leaveRenders, _enterRenders;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function areChildrenDifferent(oldChildren, newChildren) {
							 | 
						||
| 
								 | 
							
								  if (oldChildren === newChildren) return false;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (_react.default.isValidElement(oldChildren) && _react.default.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
							 | 
						||
| 
								 | 
							
								    return false;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return true;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * Enum of modes for SwitchTransition component
							 | 
						||
| 
								 | 
							
								 * @enum { string }
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var modes = {
							 | 
						||
| 
								 | 
							
								  out: 'out-in',
							 | 
						||
| 
								 | 
							
								  in: 'in-out'
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								exports.modes = modes;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var callHook = function callHook(element, name, cb) {
							 | 
						||
| 
								 | 
							
								  return function () {
							 | 
						||
| 
								 | 
							
								    var _element$props;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
							 | 
						||
| 
								 | 
							
								    cb();
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
							 | 
						||
| 
								 | 
							
								  var current = _ref.current,
							 | 
						||
| 
								 | 
							
								      changeState = _ref.changeState;
							 | 
						||
| 
								 | 
							
								  return _react.default.cloneElement(current, {
							 | 
						||
| 
								 | 
							
								    in: false,
							 | 
						||
| 
								 | 
							
								    onExited: callHook(current, 'onExited', function () {
							 | 
						||
| 
								 | 
							
								      changeState(_Transition.ENTERING, null);
							 | 
						||
| 
								 | 
							
								    })
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								}, _leaveRenders[modes.in] = function (_ref2) {
							 | 
						||
| 
								 | 
							
								  var current = _ref2.current,
							 | 
						||
| 
								 | 
							
								      changeState = _ref2.changeState,
							 | 
						||
| 
								 | 
							
								      children = _ref2.children;
							 | 
						||
| 
								 | 
							
								  return [current, _react.default.cloneElement(children, {
							 | 
						||
| 
								 | 
							
								    in: true,
							 | 
						||
| 
								 | 
							
								    onEntered: callHook(children, 'onEntered', function () {
							 | 
						||
| 
								 | 
							
								      changeState(_Transition.ENTERING);
							 | 
						||
| 
								 | 
							
								    })
							 | 
						||
| 
								 | 
							
								  })];
							 | 
						||
| 
								 | 
							
								}, _leaveRenders);
							 | 
						||
| 
								 | 
							
								var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
							 | 
						||
| 
								 | 
							
								  var children = _ref3.children,
							 | 
						||
| 
								 | 
							
								      changeState = _ref3.changeState;
							 | 
						||
| 
								 | 
							
								  return _react.default.cloneElement(children, {
							 | 
						||
| 
								 | 
							
								    in: true,
							 | 
						||
| 
								 | 
							
								    onEntered: callHook(children, 'onEntered', function () {
							 | 
						||
| 
								 | 
							
								      changeState(_Transition.ENTERED, _react.default.cloneElement(children, {
							 | 
						||
| 
								 | 
							
								        in: true
							 | 
						||
| 
								 | 
							
								      }));
							 | 
						||
| 
								 | 
							
								    })
							 | 
						||
| 
								 | 
							
								  });
							 | 
						||
| 
								 | 
							
								}, _enterRenders[modes.in] = function (_ref4) {
							 | 
						||
| 
								 | 
							
								  var current = _ref4.current,
							 | 
						||
| 
								 | 
							
								      children = _ref4.children,
							 | 
						||
| 
								 | 
							
								      changeState = _ref4.changeState;
							 | 
						||
| 
								 | 
							
								  return [_react.default.cloneElement(current, {
							 | 
						||
| 
								 | 
							
								    in: false,
							 | 
						||
| 
								 | 
							
								    onExited: callHook(current, 'onExited', function () {
							 | 
						||
| 
								 | 
							
								      changeState(_Transition.ENTERED, _react.default.cloneElement(children, {
							 | 
						||
| 
								 | 
							
								        in: true
							 | 
						||
| 
								 | 
							
								      }));
							 | 
						||
| 
								 | 
							
								    })
							 | 
						||
| 
								 | 
							
								  }), _react.default.cloneElement(children, {
							 | 
						||
| 
								 | 
							
								    in: true
							 | 
						||
| 
								 | 
							
								  })];
							 | 
						||
| 
								 | 
							
								}, _enterRenders);
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
							 | 
						||
| 
								 | 
							
								 * You can use it when you want to control the render between state transitions.
							 | 
						||
| 
								 | 
							
								 * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
							 | 
						||
| 
								 | 
							
								 * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * **Note**: If you want the animation to happen simultaneously
							 | 
						||
| 
								 | 
							
								 * (that is, to have the old child removed and a new child inserted **at the same time**),
							 | 
						||
| 
								 | 
							
								 * you should use
							 | 
						||
| 
								 | 
							
								 * [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
							 | 
						||
| 
								 | 
							
								 * instead.
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * ```jsx
							 | 
						||
| 
								 | 
							
								 * function App() {
							 | 
						||
| 
								 | 
							
								 *  const [state, setState] = useState(false);
							 | 
						||
| 
								 | 
							
								 *  return (
							 | 
						||
| 
								 | 
							
								 *    <SwitchTransition>
							 | 
						||
| 
								 | 
							
								 *      <CSSTransition
							 | 
						||
| 
								 | 
							
								 *        key={state ? "Goodbye, world!" : "Hello, world!"}
							 | 
						||
| 
								 | 
							
								 *        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
							 | 
						||
| 
								 | 
							
								 *        classNames='fade'
							 | 
						||
| 
								 | 
							
								 *      >
							 | 
						||
| 
								 | 
							
								 *        <button onClick={() => setState(state => !state)}>
							 | 
						||
| 
								 | 
							
								 *          {state ? "Goodbye, world!" : "Hello, world!"}
							 | 
						||
| 
								 | 
							
								 *        </button>
							 | 
						||
| 
								 | 
							
								 *      </CSSTransition>
							 | 
						||
| 
								 | 
							
								 *    </SwitchTransition>
							 | 
						||
| 
								 | 
							
								 *  );
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * ```
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * ```css
							 | 
						||
| 
								 | 
							
								 * .fade-enter{
							 | 
						||
| 
								 | 
							
								 *    opacity: 0;
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * .fade-exit{
							 | 
						||
| 
								 | 
							
								 *    opacity: 1;
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * .fade-enter-active{
							 | 
						||
| 
								 | 
							
								 *    opacity: 1;
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * .fade-exit-active{
							 | 
						||
| 
								 | 
							
								 *    opacity: 0;
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * .fade-enter-active,
							 | 
						||
| 
								 | 
							
								 * .fade-exit-active{
							 | 
						||
| 
								 | 
							
								 *    transition: opacity 500ms;
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 * ```
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var SwitchTransition = /*#__PURE__*/function (_React$Component) {
							 | 
						||
| 
								 | 
							
								  _inheritsLoose(SwitchTransition, _React$Component);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  function SwitchTransition() {
							 | 
						||
| 
								 | 
							
								    var _this;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
							 | 
						||
| 
								 | 
							
								      args[_key] = arguments[_key];
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
							 | 
						||
| 
								 | 
							
								    _this.state = {
							 | 
						||
| 
								 | 
							
								      status: _Transition.ENTERED,
							 | 
						||
| 
								 | 
							
								      current: null
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								    _this.appeared = false;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    _this.changeState = function (status, current) {
							 | 
						||
| 
								 | 
							
								      if (current === void 0) {
							 | 
						||
| 
								 | 
							
								        current = _this.state.current;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      _this.setState({
							 | 
						||
| 
								 | 
							
								        status: status,
							 | 
						||
| 
								 | 
							
								        current: current
							 | 
						||
| 
								 | 
							
								      });
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return _this;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var _proto = SwitchTransition.prototype;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  _proto.componentDidMount = function componentDidMount() {
							 | 
						||
| 
								 | 
							
								    this.appeared = true;
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
							 | 
						||
| 
								 | 
							
								    if (props.children == null) {
							 | 
						||
| 
								 | 
							
								      return {
							 | 
						||
| 
								 | 
							
								        current: null
							 | 
						||
| 
								 | 
							
								      };
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (state.status === _Transition.ENTERING && props.mode === modes.in) {
							 | 
						||
| 
								 | 
							
								      return {
							 | 
						||
| 
								 | 
							
								        status: _Transition.ENTERING
							 | 
						||
| 
								 | 
							
								      };
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (state.current && areChildrenDifferent(state.current, props.children)) {
							 | 
						||
| 
								 | 
							
								      return {
							 | 
						||
| 
								 | 
							
								        status: _Transition.EXITING
							 | 
						||
| 
								 | 
							
								      };
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return {
							 | 
						||
| 
								 | 
							
								      current: _react.default.cloneElement(props.children, {
							 | 
						||
| 
								 | 
							
								        in: true
							 | 
						||
| 
								 | 
							
								      })
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  _proto.render = function render() {
							 | 
						||
| 
								 | 
							
								    var _this$props = this.props,
							 | 
						||
| 
								 | 
							
								        children = _this$props.children,
							 | 
						||
| 
								 | 
							
								        mode = _this$props.mode,
							 | 
						||
| 
								 | 
							
								        _this$state = this.state,
							 | 
						||
| 
								 | 
							
								        status = _this$state.status,
							 | 
						||
| 
								 | 
							
								        current = _this$state.current;
							 | 
						||
| 
								 | 
							
								    var data = {
							 | 
						||
| 
								 | 
							
								      children: children,
							 | 
						||
| 
								 | 
							
								      current: current,
							 | 
						||
| 
								 | 
							
								      changeState: this.changeState,
							 | 
						||
| 
								 | 
							
								      status: status
							 | 
						||
| 
								 | 
							
								    };
							 | 
						||
| 
								 | 
							
								    var component;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    switch (status) {
							 | 
						||
| 
								 | 
							
								      case _Transition.ENTERING:
							 | 
						||
| 
								 | 
							
								        component = enterRenders[mode](data);
							 | 
						||
| 
								 | 
							
								        break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      case _Transition.EXITING:
							 | 
						||
| 
								 | 
							
								        component = leaveRenders[mode](data);
							 | 
						||
| 
								 | 
							
								        break;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      case _Transition.ENTERED:
							 | 
						||
| 
								 | 
							
								        component = current;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return /*#__PURE__*/_react.default.createElement(_TransitionGroupContext.default.Provider, {
							 | 
						||
| 
								 | 
							
								      value: {
							 | 
						||
| 
								 | 
							
								        isMounting: !this.appeared
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }, component);
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return SwitchTransition;
							 | 
						||
| 
								 | 
							
								}(_react.default.Component);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								SwitchTransition.propTypes = process.env.NODE_ENV !== "production" ? {
							 | 
						||
| 
								 | 
							
								  /**
							 | 
						||
| 
								 | 
							
								   * Transition modes.
							 | 
						||
| 
								 | 
							
								   * `out-in`: Current element transitions out first, then when complete, the new element transitions in.
							 | 
						||
| 
								 | 
							
								   * `in-out`: New element transitions in first, then when complete, the current element transitions out.
							 | 
						||
| 
								 | 
							
								   *
							 | 
						||
| 
								 | 
							
								   * @type {'out-in'|'in-out'}
							 | 
						||
| 
								 | 
							
								   */
							 | 
						||
| 
								 | 
							
								  mode: _propTypes.default.oneOf([modes.in, modes.out]),
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  /**
							 | 
						||
| 
								 | 
							
								   * Any `Transition` or `CSSTransition` component.
							 | 
						||
| 
								 | 
							
								   */
							 | 
						||
| 
								 | 
							
								  children: _propTypes.default.oneOfType([_propTypes.default.element.isRequired])
							 | 
						||
| 
								 | 
							
								} : {};
							 | 
						||
| 
								 | 
							
								SwitchTransition.defaultProps = {
							 | 
						||
| 
								 | 
							
								  mode: modes.out
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								var _default = SwitchTransition;
							 | 
						||
| 
								 | 
							
								exports.default = _default;
							 |