364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
|
|
|
var _addClass = _interopRequireDefault(require("dom-helpers/class/addClass"));
|
|
|
|
var _removeClass = _interopRequireDefault(require("dom-helpers/class/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 _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
|
|
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; }
|
|
|
|
var addClass = function addClass(node, classes) {
|
|
return node && classes && classes.split(' ').forEach(function (c) {
|
|
return (0, _addClass.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 CSSS 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**.
|
|
*/
|
|
|
|
|
|
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.onEnter = function (node, appearing) {
|
|
var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),
|
|
className = _this$getClassNames.className;
|
|
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
addClass(node, className);
|
|
|
|
if (_this.props.onEnter) {
|
|
_this.props.onEnter(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntering = function (node, appearing) {
|
|
var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),
|
|
activeClassName = _this$getClassNames2.activeClassName;
|
|
|
|
_this.reflowAndAddClass(node, activeClassName);
|
|
|
|
if (_this.props.onEntering) {
|
|
_this.props.onEntering(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onEntered = function (node, appearing) {
|
|
var appearClassName = _this.getClassNames('appear').doneClassName;
|
|
|
|
var enterClassName = _this.getClassNames('enter').doneClassName;
|
|
|
|
var doneClassName = appearing ? appearClassName + " " + enterClassName : enterClassName;
|
|
|
|
_this.removeClasses(node, appearing ? 'appear' : 'enter');
|
|
|
|
addClass(node, doneClassName);
|
|
|
|
if (_this.props.onEntered) {
|
|
_this.props.onEntered(node, appearing);
|
|
}
|
|
};
|
|
|
|
_this.onExit = function (node) {
|
|
var _this$getClassNames3 = _this.getClassNames('exit'),
|
|
className = _this$getClassNames3.className;
|
|
|
|
_this.removeClasses(node, 'appear');
|
|
|
|
_this.removeClasses(node, 'enter');
|
|
|
|
addClass(node, className);
|
|
|
|
if (_this.props.onExit) {
|
|
_this.props.onExit(node);
|
|
}
|
|
};
|
|
|
|
_this.onExiting = function (node) {
|
|
var _this$getClassNames4 = _this.getClassNames('exit'),
|
|
activeClassName = _this$getClassNames4.activeClassName;
|
|
|
|
_this.reflowAndAddClass(node, activeClassName);
|
|
|
|
if (_this.props.onExiting) {
|
|
_this.props.onExiting(node);
|
|
}
|
|
};
|
|
|
|
_this.onExited = function (node) {
|
|
var _this$getClassNames5 = _this.getClassNames('exit'),
|
|
doneClassName = _this$getClassNames5.doneClassName;
|
|
|
|
_this.removeClasses(node, 'exit');
|
|
|
|
addClass(node, doneClassName);
|
|
|
|
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 className = isStringClassNames ? prefix + type : classNames[type];
|
|
var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];
|
|
var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];
|
|
return {
|
|
className: className,
|
|
activeClassName: activeClassName,
|
|
doneClassName: doneClassName
|
|
};
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = CSSTransition.prototype;
|
|
|
|
_proto.removeClasses = function removeClasses(node, type) {
|
|
var _this$getClassNames6 = this.getClassNames(type),
|
|
className = _this$getClassNames6.className,
|
|
activeClassName = _this$getClassNames6.activeClassName,
|
|
doneClassName = _this$getClassNames6.doneClassName;
|
|
|
|
className && removeClass(node, className);
|
|
activeClassName && removeClass(node, activeClassName);
|
|
doneClassName && removeClass(node, doneClassName);
|
|
};
|
|
|
|
_proto.reflowAndAddClass = function reflowAndAddClass(node, className) {
|
|
// This is for to force a repaint,
|
|
// which is necessary in order to transition styles when adding a class name.
|
|
if (className) {
|
|
/* eslint-disable no-unused-expressions */
|
|
node && node.scrollTop;
|
|
/* eslint-enable no-unused-expressions */
|
|
|
|
addClass(node, className);
|
|
}
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var props = _extends({}, this.props);
|
|
|
|
delete 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 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-enter`, `fade-enter-active`,
|
|
* `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
|
|
* `fade-appear`, `fade-appear-active`, and `fade-appear-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.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'enter-active' or
|
|
* 'appear-active' class is applied.
|
|
*
|
|
* @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.
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntered: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit' class is
|
|
* applied.
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExit: PropTypes.func,
|
|
|
|
/**
|
|
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
|
|
*
|
|
* @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.
|
|
*
|
|
* @type Function(node: HtmlElement)
|
|
*/
|
|
onExited: PropTypes.func
|
|
}) : {};
|
|
var _default = CSSTransition;
|
|
exports.default = _default;
|
|
module.exports = exports["default"]; |