412 lines
13 KiB
JavaScript
412 lines
13 KiB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
import PropTypes from 'prop-types';
|
|
import addOneClass from 'dom-helpers/addClass';
|
|
import removeOneClass from 'dom-helpers/removeClass';
|
|
import React from 'react';
|
|
import Transition from './Transition';
|
|
import { classNamesShape } from './utils/PropTypes';
|
|
import { forceReflow } from './utils/reflow';
|
|
|
|
var _addClass = function addClass(node, classes) {
|
|
return node && classes && classes.split(' ').forEach(function (c) {
|
|
return addOneClass(node, c);
|
|
});
|
|
};
|
|
|
|
var removeClass = function removeClass(node, classes) {
|
|
return node && classes && classes.split(' ').forEach(function (c) {
|
|
return removeOneClass(node, c);
|
|
});
|
|
};
|
|
/**
|
|
* A transition component inspired by the excellent
|
|
* [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should
|
|
* use it if you're using CSS transitions or animations. It's built upon the
|
|
* [`Transition`](https://reactcommunity.org/react-transition-group/transition)
|
|
* component, so it inherits all of its props.
|
|
*
|
|
* `CSSTransition` applies a pair of class names during the `appear`, `enter`,
|
|
* and `exit` states of the transition. The first class is applied and then a
|
|
* second `*-active` class in order to activate the CSS transition. After the
|
|
* transition, matching `*-done` class names are applied to persist the
|
|
* transition state.
|
|
*
|
|
* ```jsx
|
|
* function App() {
|
|
* const [inProp, setInProp] = useState(false);
|
|
* return (
|
|
* <div>
|
|
* <CSSTransition in={inProp} timeout={200} classNames="my-node">
|
|
* <div>
|
|
* {"I'll receive my-node-* classes"}
|
|
* </div>
|
|
* </CSSTransition>
|
|
* <button type="button" onClick={() => setInProp(true)}>
|
|
* Click to Enter
|
|
* </button>
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*
|
|
* When the `in` prop is set to `true`, the child component will first receive
|
|
* the class `example-enter`, then the `example-enter-active` will be added in
|
|
* the next tick. `CSSTransition` [forces a
|
|
* reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
|
|
* between before adding the `example-enter-active`. This is an important trick
|
|
* because it allows us to transition between `example-enter` and
|
|
* `example-enter-active` even though they were added immediately one after
|
|
* another. Most notably, this is what makes it possible for us to animate
|
|
* _appearance_.
|
|
*
|
|
* ```css
|
|
* .my-node-enter {
|
|
* opacity: 0;
|
|
* }
|
|
* .my-node-enter-active {
|
|
* opacity: 1;
|
|
* transition: opacity 200ms;
|
|
* }
|
|
* .my-node-exit {
|
|
* opacity: 1;
|
|
* }
|
|
* .my-node-exit-active {
|
|
* opacity: 0;
|
|
* transition: opacity 200ms;
|
|
* }
|
|
* ```
|
|
*
|
|
* `*-active` classes represent which styles you want to animate **to**, so it's
|
|
* important to add `transition` declaration only to them, otherwise transitions
|
|
* might not behave as intended! This might not be obvious when the transitions
|
|
* are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in
|
|
* the example above (minus `transition`), but it becomes apparent in more
|
|
* complex transitions.
|
|
*
|
|
* **Note**: If you're using the
|
|
* [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
|
|
* prop, make sure to define styles for `.appear-*` classes as well.
|
|
*/
|
|
|
|
|
|
var CSSTransition = /*#__PURE__*/function (_React$Component) {
|
|
_inheritsLoose(CSSTransition, _React$Component);
|
|
|
|
function CSSTransition() {
|
|
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.appliedClasses = {
|
|
appear: {},
|
|
enter: {},
|
|
exit: {}
|
|
};
|
|
|
|
_this.onEnter = function (maybeNode, maybeAppearing) {
|
|
var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
node = _this$resolveArgument[0],
|
|
appearing = _this$resolveArgument[1];
|
|
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
_this.addClass(node, appearing ? 'appear' : 'enter', 'base');
|
|
|
|
if (_this.props.onEnter) {
|
|
_this.props.onEnter(maybeNode, maybeAppearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntering = function (maybeNode, maybeAppearing) {
|
|
var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
node = _this$resolveArgument2[0],
|
|
appearing = _this$resolveArgument2[1];
|
|
|
|
var type = appearing ? 'appear' : 'enter';
|
|
|
|
_this.addClass(node, type, 'active');
|
|
|
|
if (_this.props.onEntering) {
|
|
_this.props.onEntering(maybeNode, maybeAppearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntered = function (maybeNode, maybeAppearing) {
|
|
var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),
|
|
node = _this$resolveArgument3[0],
|
|
appearing = _this$resolveArgument3[1];
|
|
|
|
var type = appearing ? 'appear' : 'enter';
|
|
|
|
_this.removeClasses(node, type);
|
|
|
|
_this.addClass(node, type, 'done');
|
|
|
|
if (_this.props.onEntered) {
|
|
_this.props.onEntered(maybeNode, maybeAppearing);
|
|
}
|
|
};
|
|
|
|
_this.onExit = function (maybeNode) {
|
|
var _this$resolveArgument4 = _this.resolveArguments(maybeNode),
|
|
node = _this$resolveArgument4[0];
|
|
|
|
_this.removeClasses(node, 'appear');
|
|
|
|
_this.removeClasses(node, 'enter');
|
|
|
|
_this.addClass(node, 'exit', 'base');
|
|
|
|
if (_this.props.onExit) {
|
|
_this.props.onExit(maybeNode);
|
|
}
|
|
};
|
|
|
|
_this.onExiting = function (maybeNode) {
|
|
var _this$resolveArgument5 = _this.resolveArguments(maybeNode),
|
|
node = _this$resolveArgument5[0];
|
|
|
|
_this.addClass(node, 'exit', 'active');
|
|
|
|
if (_this.props.onExiting) {
|
|
_this.props.onExiting(maybeNode);
|
|
}
|
|
};
|
|
|
|
_this.onExited = function (maybeNode) {
|
|
var _this$resolveArgument6 = _this.resolveArguments(maybeNode),
|
|
node = _this$resolveArgument6[0];
|
|
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
_this.addClass(node, 'exit', 'done');
|
|
|
|
if (_this.props.onExited) {
|
|
_this.props.onExited(maybeNode);
|
|
}
|
|
};
|
|
|
|
_this.resolveArguments = function (maybeNode, maybeAppearing) {
|
|
return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
|
|
: [maybeNode, maybeAppearing];
|
|
};
|
|
|
|
_this.getClassNames = function (type) {
|
|
var classNames = _this.props.classNames;
|
|
var isStringClassNames = typeof classNames === 'string';
|
|
var prefix = isStringClassNames && classNames ? classNames + "-" : '';
|
|
var baseClassName = isStringClassNames ? "" + prefix + type : classNames[type];
|
|
var activeClassName = isStringClassNames ? baseClassName + "-active" : classNames[type + "Active"];
|
|
var doneClassName = isStringClassNames ? baseClassName + "-done" : classNames[type + "Done"];
|
|
return {
|
|
baseClassName: baseClassName,
|
|
activeClassName: activeClassName,
|
|
doneClassName: doneClassName
|
|
};
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = CSSTransition.prototype;
|
|
|
|
_proto.addClass = function addClass(node, type, phase) {
|
|
var className = this.getClassNames(type)[phase + "ClassName"];
|
|
|
|
var _this$getClassNames = this.getClassNames('enter'),
|
|
doneClassName = _this$getClassNames.doneClassName;
|
|
|
|
if (type === 'appear' && phase === 'done' && doneClassName) {
|
|
className += " " + doneClassName;
|
|
} // This is to force a repaint,
|
|
// which is necessary in order to transition styles when adding a class name.
|
|
|
|
|
|
if (phase === 'active') {
|
|
if (node) forceReflow(node);
|
|
}
|
|
|
|
if (className) {
|
|
this.appliedClasses[type][phase] = className;
|
|
|
|
_addClass(node, className);
|
|
}
|
|
};
|
|
|
|
_proto.removeClasses = function removeClasses(node, type) {
|
|
var _this$appliedClasses$ = this.appliedClasses[type],
|
|
baseClassName = _this$appliedClasses$.base,
|
|
activeClassName = _this$appliedClasses$.active,
|
|
doneClassName = _this$appliedClasses$.done;
|
|
this.appliedClasses[type] = {};
|
|
|
|
if (baseClassName) {
|
|
removeClass(node, baseClassName);
|
|
}
|
|
|
|
if (activeClassName) {
|
|
removeClass(node, activeClassName);
|
|
}
|
|
|
|
if (doneClassName) {
|
|
removeClass(node, doneClassName);
|
|
}
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _this$props = this.props,
|
|
_ = _this$props.classNames,
|
|
props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
|
|
|
|
return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onEntering: this.onEntering,
|
|
onExit: this.onExit,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
}));
|
|
};
|
|
|
|
return CSSTransition;
|
|
}(React.Component);
|
|
|
|
CSSTransition.defaultProps = {
|
|
classNames: ''
|
|
};
|
|
CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, Transition.propTypes, {
|
|
/**
|
|
* The animation classNames applied to the component as it appears, enters,
|
|
* exits or has finished the transition. A single name can be provided, which
|
|
* will be suffixed for each stage, e.g. `classNames="fade"` applies:
|
|
*
|
|
* - `fade-appear`, `fade-appear-active`, `fade-appear-done`
|
|
* - `fade-enter`, `fade-enter-active`, `fade-enter-done`
|
|
* - `fade-exit`, `fade-exit-active`, `fade-exit-done`
|
|
*
|
|
* A few details to note about how these classes are applied:
|
|
*
|
|
* 1. They are _joined_ with the ones that are already defined on the child
|
|
* component, so if you want to add some base styles, you can use
|
|
* `className` without worrying that it will be overridden.
|
|
*
|
|
* 2. If the transition component mounts with `in={false}`, no classes are
|
|
* applied yet. You might be expecting `*-exit-done`, but if you think
|
|
* about it, a component cannot finish exiting if it hasn't entered yet.
|
|
*
|
|
* 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This
|
|
* allows you to define different behavior for when appearing is done and
|
|
* when regular entering is done, using selectors like
|
|
* `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply
|
|
* an epic entrance animation when element first appears in the DOM using
|
|
* [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
|
|
* simply use `fade-enter-done` for defining both cases.
|
|
*
|
|
* Each individual classNames can also be specified independently like:
|
|
*
|
|
* ```js
|
|
* classNames={{
|
|
* appear: 'my-appear',
|
|
* appearActive: 'my-active-appear',
|
|
* appearDone: 'my-done-appear',
|
|
* enter: 'my-enter',
|
|
* enterActive: 'my-active-enter',
|
|
* enterDone: 'my-done-enter',
|
|
* exit: 'my-exit',
|
|
* exitActive: 'my-active-exit',
|
|
* exitDone: 'my-done-exit',
|
|
* }}
|
|
* ```
|
|
*
|
|
* If you want to set these classes using CSS Modules:
|
|
*
|
|
* ```js
|
|
* import styles from './styles.css';
|
|
* ```
|
|
*
|
|
* you might want to use camelCase in your CSS file, that way could simply
|
|
* spread them instead of listing them one by one:
|
|
*
|
|
* ```js
|
|
* classNames={{ ...styles }}
|
|
* ```
|
|
*
|
|
* @type {string | {
|
|
* appear?: string,
|
|
* appearActive?: string,
|
|
* appearDone?: string,
|
|
* enter?: string,
|
|
* enterActive?: string,
|
|
* enterDone?: string,
|
|
* exit?: string,
|
|
* exitActive?: string,
|
|
* exitDone?: string,
|
|
* }}
|
|
*/
|
|
classNames: classNamesShape,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
|
|
* applied.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEnter: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter-active' or
|
|
* 'appear-active' class is applied.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntering: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter' or
|
|
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntered: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit' class is
|
|
* applied.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExit: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExiting: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit' classes
|
|
* are **removed** and the `exit-done` class is added to the DOM node.
|
|
*
|
|
* **Note**: when `nodeRef` prop is passed, `node` is not passed
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExited: PropTypes.func
|
|
}) : {};
|
|
export default CSSTransition; |