1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"ast":null,"code":"\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar PropTypes = _interopRequireWildcard(require(\"prop-types\"));\n\nvar _addClass = _interopRequireDefault(require(\"dom-helpers/class/addClass\"));\n\nvar _removeClass = _interopRequireDefault(require(\"dom-helpers/class/removeClass\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _Transition = _interopRequireDefault(require(\"./Transition\"));\n\nvar _PropTypes = require(\"./utils/PropTypes\");\n\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\n\nfunction _interopRequireWildcard(obj) {\n if (obj && obj.__esModule) {\n return obj;\n } else {\n var newObj = {};\n\n if (obj != null) {\n for (var key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};\n\n if (desc.get || desc.set) {\n Object.defineProperty(newObj, key, desc);\n } else {\n newObj[key] = obj[key];\n }\n }\n }\n }\n\n newObj.default = obj;\n return newObj;\n }\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nvar addClass = function addClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return (0, _addClass.default)(node, c);\n });\n};\n\nvar removeClass = function removeClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return (0, _removeClass.default)(node, c);\n });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](http://www.nganimate.org/) library, you should use it if you're\n * using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * <div>\n * <CSSTransition in={inProp} timeout={200} classNames=\"my-node\">\n * <div>\n * {\"I'll receive my-node-* classes\"}\n * </div>\n * </CSSTransition>\n * <button type=\"button\" onClick={() => setInProp(true)}>\n * Click to Enter\n * </button>\n * </div>\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity: 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n\n _this.onEnter = function (node, appearing) {\n var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),\n className = _this$getClassNames.className;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, className);\n\n if (_this.props.onEnter) {\n _this.props.onEnter(node, appearing);\n }\n };\n\n _this.onEntering = function (node, appearing) {\n var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),\n activeClassName = _this$getClassNames2.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onEntering) {\n _this.props.onEntering(node, appearing);\n }\n };\n\n _this.onEntered = function (node, appearing) {\n var appearClassName = _this.getClassNames('appear').doneClassName;\n\n var enterClassName = _this.getClassNames('enter').doneClassName;\n\n var doneClassName = appearing ? appearClassName + \" \" + enterClassName : enterClassName;\n\n _this.removeClasses(node, appearing ? 'appear' : 'enter');\n\n addClass(node, doneClassName);\n\n if (_this.props.onEntered) {\n _this.props.onEntered(node, appearing);\n }\n };\n\n _this.onExit = function (node) {\n var _this$getClassNames3 = _this.getClassNames('exit'),\n className = _this$getClassNames3.className;\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n addClass(node, className);\n\n if (_this.props.onExit) {\n _this.props.onExit(node);\n }\n };\n\n _this.onExiting = function (node) {\n var _this$getClassNames4 = _this.getClassNames('exit'),\n activeClassName = _this$getClassNames4.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onExiting) {\n _this.props.onExiting(node);\n }\n };\n\n _this.onExited = function (node) {\n var _this$getClassNames5 = _this.getClassNames('exit'),\n doneClassName = _this$getClassNames5.doneClassName;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, doneClassName);\n\n if (_this.props.onExited) {\n _this.props.onExited(node);\n }\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + '-' : '';\n var className = isStringClassNames ? prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];\n var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];\n return {\n className: className,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$getClassNames6 = this.getClassNames(type),\n className = _this$getClassNames6.className,\n activeClassName = _this$getClassNames6.activeClassName,\n doneClassName = _this$getClassNames6.doneClassName;\n\n className && removeClass(node, className);\n activeClassName && removeClass(node, activeClassName);\n doneClassName && removeClass(node, doneClassName);\n };\n\n _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {\n // This is for to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n if (className) {\n /* eslint-disable no-unused-expressions */\n node && node.scrollTop;\n /* eslint-enable no-unused-expressions */\n\n addClass(node, className);\n }\n };\n\n _proto.render = function render() {\n var props = _extends({}, this.props);\n\n delete props.classNames;\n return _react.default.createElement(_Transition.default, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(_react.default.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, _Transition.default.propTypes, {\n /**\n * The animation classNames applied to the component as it enters, exits or\n * has finished the transition. A single name can be provided and it will be\n * suffixed for each stage: e.g.\n *\n * `classNames=\"fade\"` applies `fade-enter`, `fade-enter-active`,\n * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,\n * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.\n *\n * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.\n * This allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an\n * epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: _PropTypes.classNamesShape,\n\n /**\n * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is\n * applied.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEnter: PropTypes.func,\n\n /**\n * A `<Transition>` callback fired immediately after the 'enter-active' or\n * 'appear-active' class is applied.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * A `<Transition>` callback fired immediately after the 'enter' or\n * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntered: PropTypes.func,\n\n /**\n * A `<Transition>` callback fired immediately after the 'exit' class is\n * applied.\n *\n * @type Function(node: HtmlElement)\n */\n onExit: PropTypes.func,\n\n /**\n * A `<Transition>` callback fired immediately after the 'exit-active' is applied.\n *\n * @type Function(node: HtmlElement)\n */\n onExiting: PropTypes.func,\n\n /**\n * A `<Transition>` callback fired immediately after the 'exit' classes\n * are **removed** and the `exit-done` class is added to the DOM node.\n *\n * @type Function(node: HtmlElement)\n */\n onExited: PropTypes.func\n}) : {};\nvar _default = CSSTransition;\nexports.default = _default;\nmodule.exports = exports[\"default\"];","map":null,"metadata":{},"sourceType":"script"} |