*
*
* {"I'll receive my-node-* classes"}
*
*
*
*
* );
* }
* ```
*
* 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 = false ? undefined : {};
var _default = CSSTransition;
exports.default = _default;
module.exports = exports["default"];
/***/ }),
/***/ "T5bk":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _toArray; });
/* harmony import */ var _babel_runtime_helpers_esm_arrayWithHoles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("DSFK");
/* harmony import */ var _babel_runtime_helpers_esm_iterableToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("25BE");
/* harmony import */ var _babel_runtime_helpers_esm_unsupportedIterableToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("BsWD");
/* harmony import */ var _babel_runtime_helpers_esm_nonIterableRest__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("PYwp");
function _toArray(arr) {
return Object(_babel_runtime_helpers_esm_arrayWithHoles__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(arr) || Object(_babel_runtime_helpers_esm_iterableToArray__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"])(arr) || Object(_babel_runtime_helpers_esm_unsupportedIterableToArray__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"])(arr) || Object(_babel_runtime_helpers_esm_nonIterableRest__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"])();
}
/***/ }),
/***/ "TSYQ":
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( true && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
return classNames;
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
}());
/***/ }),
/***/ "TqRt":
/***/ (function(module, exports) {
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
module.exports = _interopRequireDefault;
/***/ }),
/***/ "Tqx9":
/***/ (function(module, exports) {
(function() { module.exports = this["wp"]["primitives"]; }());
/***/ }),
/***/ "U8pU":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _typeof; });
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function _typeof(obj) {
return typeof obj;
};
} else {
_typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
/***/ }),
/***/ "UnXY":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(__webpack_require__("17x9"));
var _react = _interopRequireDefault(__webpack_require__("cDcd"));
var _reactLifecyclesCompat = __webpack_require__("VCL8");
var _ChildMapping = __webpack_require__("8PcY");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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 `