373 lines
12 KiB
JavaScript
373 lines
12 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _addClass2 = _interopRequireDefault(require("dom-helpers/addClass"));
|
|
|
|
var _removeClass = _interopRequireDefault(require("dom-helpers/removeClass"));
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _Transition = _interopRequireDefault(require("./Transition"));
|
|
|
|
var _PropTypes = require("./utils/PropTypes");
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
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 _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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
var _addClass = function addClass(node, classes) {
|
|
return node && classes && classes.split(' ').forEach(function (c) {
|
|
return (0, _addClass2.default)(node, c);
|
|
});
|
|
};
|
|
|
|
var removeClass = function removeClass(node, classes) {
|
|
return node && classes && classes.split(' ').forEach(function (c) {
|
|
return (0, _removeClass.default)(node, c);
|
|
});
|
|
};
|
|
/**
|
|
* A transition component inspired by the excellent
|
|
* [ng-animate](http://www.nganimate.org/) 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**.
|
|
*
|
|
* **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 (node, appearing) {
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
_this.addClass(node, appearing ? 'appear' : 'enter', 'base');
|
|
|
|
if (_this.props.onEnter) {
|
|
_this.props.onEnter(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntering = function (node, appearing) {
|
|
var type = appearing ? 'appear' : 'enter';
|
|
|
|
_this.addClass(node, type, 'active');
|
|
|
|
if (_this.props.onEntering) {
|
|
_this.props.onEntering(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntered = function (node, appearing) {
|
|
var type = appearing ? 'appear' : 'enter';
|
|
|
|
_this.removeClasses(node, type);
|
|
|
|
_this.addClass(node, type, 'done');
|
|
|
|
if (_this.props.onEntered) {
|
|
_this.props.onEntered(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onExit = function (node) {
|
|
_this.removeClasses(node, 'appear');
|
|
|
|
_this.removeClasses(node, 'enter');
|
|
|
|
_this.addClass(node, 'exit', 'base');
|
|
|
|
if (_this.props.onExit) {
|
|
_this.props.onExit(node);
|
|
}
|
|
};
|
|
|
|
_this.onExiting = function (node) {
|
|
_this.addClass(node, 'exit', 'active');
|
|
|
|
if (_this.props.onExiting) {
|
|
_this.props.onExiting(node);
|
|
}
|
|
};
|
|
|
|
_this.onExited = function (node) {
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
_this.addClass(node, 'exit', 'done');
|
|
|
|
if (_this.props.onExited) {
|
|
_this.props.onExited(node);
|
|
}
|
|
};
|
|
|
|
_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"];
|
|
|
|
if (type === 'appear' && phase === 'done') {
|
|
className += " " + this.getClassNames('enter').doneClassName;
|
|
} // This is for to force a repaint,
|
|
// which is necessary in order to transition styles when adding a class name.
|
|
|
|
|
|
if (phase === 'active') {
|
|
/* eslint-disable no-unused-expressions */
|
|
node && node.scrollTop;
|
|
}
|
|
|
|
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 _react.default.createElement(_Transition.default, _extends({}, props, {
|
|
onEnter: this.onEnter,
|
|
onEntered: this.onEntered,
|
|
onEntering: this.onEntering,
|
|
onExit: this.onExit,
|
|
onExiting: this.onExiting,
|
|
onExited: this.onExited
|
|
}));
|
|
};
|
|
|
|
return CSSTransition;
|
|
}(_react.default.Component);
|
|
|
|
CSSTransition.defaultProps = {
|
|
classNames: ''
|
|
};
|
|
CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _Transition.default.propTypes, {
|
|
/**
|
|
* The animation classNames applied to the component as it appears, enters,
|
|
* exits or has finished the transition. A single name can be provided and it
|
|
* 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`, and `fade-exit-done`.
|
|
*
|
|
* **Note**: `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: _PropTypes.classNamesShape,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
|
|
* applied.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEnter: _propTypes.default.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter-active' or
|
|
* 'appear-active' class is applied.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntering: _propTypes.default.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter' or
|
|
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntered: _propTypes.default.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit' class is
|
|
* applied.
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExit: _propTypes.default.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExiting: _propTypes.default.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit' classes
|
|
* are **removed** and the `exit-done` class is added to the DOM node.
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExited: _propTypes.default.func
|
|
}) : {};
|
|
var _default = CSSTransition;
|
|
exports.default = _default;
|
|
module.exports = exports["default"]; |