1 line
21 KiB
JSON
1 line
21 KiB
JSON
|
{"ast":null,"code":"import _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\n\nvar _leaveRenders, _enterRenders;\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { ENTERED, ENTERING, EXITING } from './Transition';\nimport TransitionGroupContext from './TransitionGroupContext';\n\nfunction areChildrenDifferent(oldChildren, newChildren) {\n if (oldChildren === newChildren) return false;\n\n if (React.isValidElement(oldChildren) && React.isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {\n return false;\n }\n\n return true;\n}\n/**\n * Enum of modes for SwitchTransition component\n * @enum { string }\n */\n\n\nexport var modes = {\n out: 'out-in',\n in: 'in-out'\n};\n\nvar callHook = function callHook(element, name, cb) {\n return function () {\n var _element$props;\n\n element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);\n cb();\n };\n};\n\nvar leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {\n var current = _ref.current,\n changeState = _ref.changeState;\n return React.cloneElement(current, {\n in: false,\n onExited: callHook(current, 'onExited', function () {\n changeState(ENTERING, null);\n })\n });\n}, _leaveRenders[modes.in] = function (_ref2) {\n var current = _ref2.current,\n changeState = _ref2.changeState,\n children = _ref2.children;\n return [current, React.cloneElement(children, {\n in: true,\n onEntered: callHook(children, 'onEntered', function () {\n changeState(ENTERING);\n })\n })];\n}, _leaveRenders);\nvar enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {\n var children = _ref3.children,\n changeState = _ref3.changeState;\n return React.cloneElement(children, {\n in: true,\n onEntered: callHook(children, 'onEntered', function () {\n changeState(ENTERED, React.cloneElement(children, {\n in: true\n }));\n })\n });\n}, _enterRenders[modes.in] = function (_ref4) {\n var current = _ref4.current,\n children = _ref4.children,\n changeState = _ref4.changeState;\n return [React.cloneElement(current, {\n in: false,\n onExited: callHook(current, 'onExited', function () {\n changeState(ENTERED, React.cloneElement(children, {\n in: true\n }));\n })\n }), React.cloneElement(children, {\n in: true\n })];\n}, _enterRenders);\n/**\n * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).\n * You can use it when you want to control the render between state transitions.\n * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.\n *\n * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.\n * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.\n *\n * **Note**: If you want the animation to happen simultaneously\n * (that is, to have the old child removed and a new child inserted **at the same time**),\n * you should use\n * [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)\n * instead.\n *\n * ```jsx\n * function App() {\n * const [state, setState] = useState(false);\n * return (\n * <SwitchTransition>\n * <CSSTransition\n * key={state ? \"Goodbye, world!\" : \"Hello, world!\"}\n * addEndListener={(node, done) => node.addEventListener(\"transitionend\", done, false)}\n * classNames='fade'\n * >\n * <button onClick={() => setState(state => !state)}>\n * {state ? \"Goodbye, world!\" : \"Hello, world!\"}\n * </button>\n * </CSSTransition>\n * </SwitchTransition>\n * );\n * }\n * ```\n *\n * ```css\n * .fade-enter{\n * opacity: 0;\n * }\n * .f
|