Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

2420 строки
80 KiB

  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
  3. typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
  4. (global = global || self, factory(global.ReactTransitionGroup = {}, global.React, global.ReactDOM));
  5. }(this, function (exports, React, ReactDOM) { 'use strict';
  6. var React__default = 'default' in React ? React['default'] : React;
  7. var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM;
  8. function _extends() {
  9. _extends = Object.assign || function (target) {
  10. for (var i = 1; i < arguments.length; i++) {
  11. var source = arguments[i];
  12. for (var key in source) {
  13. if (Object.prototype.hasOwnProperty.call(source, key)) {
  14. target[key] = source[key];
  15. }
  16. }
  17. }
  18. return target;
  19. };
  20. return _extends.apply(this, arguments);
  21. }
  22. function _inheritsLoose(subClass, superClass) {
  23. subClass.prototype = Object.create(superClass.prototype);
  24. subClass.prototype.constructor = subClass;
  25. subClass.__proto__ = superClass;
  26. }
  27. function unwrapExports (x) {
  28. return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
  29. }
  30. function createCommonjsModule(fn, module) {
  31. return module = { exports: {} }, fn(module, module.exports), module.exports;
  32. }
  33. /*
  34. object-assign
  35. (c) Sindre Sorhus
  36. @license MIT
  37. */
  38. /* eslint-disable no-unused-vars */
  39. var getOwnPropertySymbols = Object.getOwnPropertySymbols;
  40. var hasOwnProperty = Object.prototype.hasOwnProperty;
  41. var propIsEnumerable = Object.prototype.propertyIsEnumerable;
  42. function toObject(val) {
  43. if (val === null || val === undefined) {
  44. throw new TypeError('Object.assign cannot be called with null or undefined');
  45. }
  46. return Object(val);
  47. }
  48. function shouldUseNative() {
  49. try {
  50. if (!Object.assign) {
  51. return false;
  52. }
  53. // Detect buggy property enumeration order in older V8 versions.
  54. // https://bugs.chromium.org/p/v8/issues/detail?id=4118
  55. var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
  56. test1[5] = 'de';
  57. if (Object.getOwnPropertyNames(test1)[0] === '5') {
  58. return false;
  59. }
  60. // https://bugs.chromium.org/p/v8/issues/detail?id=3056
  61. var test2 = {};
  62. for (var i = 0; i < 10; i++) {
  63. test2['_' + String.fromCharCode(i)] = i;
  64. }
  65. var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
  66. return test2[n];
  67. });
  68. if (order2.join('') !== '0123456789') {
  69. return false;
  70. }
  71. // https://bugs.chromium.org/p/v8/issues/detail?id=3056
  72. var test3 = {};
  73. 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
  74. test3[letter] = letter;
  75. });
  76. if (Object.keys(Object.assign({}, test3)).join('') !==
  77. 'abcdefghijklmnopqrst') {
  78. return false;
  79. }
  80. return true;
  81. } catch (err) {
  82. // We don't expect any of the above to throw, but better to be safe.
  83. return false;
  84. }
  85. }
  86. var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
  87. var from;
  88. var to = toObject(target);
  89. var symbols;
  90. for (var s = 1; s < arguments.length; s++) {
  91. from = Object(arguments[s]);
  92. for (var key in from) {
  93. if (hasOwnProperty.call(from, key)) {
  94. to[key] = from[key];
  95. }
  96. }
  97. if (getOwnPropertySymbols) {
  98. symbols = getOwnPropertySymbols(from);
  99. for (var i = 0; i < symbols.length; i++) {
  100. if (propIsEnumerable.call(from, symbols[i])) {
  101. to[symbols[i]] = from[symbols[i]];
  102. }
  103. }
  104. }
  105. }
  106. return to;
  107. };
  108. /**
  109. * Copyright (c) 2013-present, Facebook, Inc.
  110. *
  111. * This source code is licensed under the MIT license found in the
  112. * LICENSE file in the root directory of this source tree.
  113. */
  114. var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
  115. var ReactPropTypesSecret_1 = ReactPropTypesSecret;
  116. var printWarning = function() {};
  117. {
  118. var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
  119. var loggedTypeFailures = {};
  120. printWarning = function(text) {
  121. var message = 'Warning: ' + text;
  122. if (typeof console !== 'undefined') {
  123. console.error(message);
  124. }
  125. try {
  126. // --- Welcome to debugging React ---
  127. // This error was thrown as a convenience so that you can use this stack
  128. // to find the callsite that caused this warning to fire.
  129. throw new Error(message);
  130. } catch (x) {}
  131. };
  132. }
  133. /**
  134. * Assert that the values match with the type specs.
  135. * Error messages are memorized and will only be shown once.
  136. *
  137. * @param {object} typeSpecs Map of name to a ReactPropType
  138. * @param {object} values Runtime values that need to be type-checked
  139. * @param {string} location e.g. "prop", "context", "child context"
  140. * @param {string} componentName Name of the component for error messages.
  141. * @param {?Function} getStack Returns the component stack.
  142. * @private
  143. */
  144. function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
  145. {
  146. for (var typeSpecName in typeSpecs) {
  147. if (typeSpecs.hasOwnProperty(typeSpecName)) {
  148. var error;
  149. // Prop type validation may throw. In case they do, we don't want to
  150. // fail the render phase where it didn't fail before. So we log it.
  151. // After these have been cleaned up, we'll let them throw.
  152. try {
  153. // This is intentionally an invariant that gets caught. It's the same
  154. // behavior as without this statement except with a better message.
  155. if (typeof typeSpecs[typeSpecName] !== 'function') {
  156. var err = Error(
  157. (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
  158. 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
  159. );
  160. err.name = 'Invariant Violation';
  161. throw err;
  162. }
  163. error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
  164. } catch (ex) {
  165. error = ex;
  166. }
  167. if (error && !(error instanceof Error)) {
  168. printWarning(
  169. (componentName || 'React class') + ': type specification of ' +
  170. location + ' `' + typeSpecName + '` is invalid; the type checker ' +
  171. 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
  172. 'You may have forgotten to pass an argument to the type checker ' +
  173. 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
  174. 'shape all require an argument).'
  175. );
  176. }
  177. if (error instanceof Error && !(error.message in loggedTypeFailures)) {
  178. // Only monitor this failure once because there tends to be a lot of the
  179. // same error.
  180. loggedTypeFailures[error.message] = true;
  181. var stack = getStack ? getStack() : '';
  182. printWarning(
  183. 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
  184. );
  185. }
  186. }
  187. }
  188. }
  189. }
  190. var checkPropTypes_1 = checkPropTypes;
  191. var printWarning$1 = function() {};
  192. {
  193. printWarning$1 = function(text) {
  194. var message = 'Warning: ' + text;
  195. if (typeof console !== 'undefined') {
  196. console.error(message);
  197. }
  198. try {
  199. // --- Welcome to debugging React ---
  200. // This error was thrown as a convenience so that you can use this stack
  201. // to find the callsite that caused this warning to fire.
  202. throw new Error(message);
  203. } catch (x) {}
  204. };
  205. }
  206. function emptyFunctionThatReturnsNull() {
  207. return null;
  208. }
  209. var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
  210. /* global Symbol */
  211. var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
  212. var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
  213. /**
  214. * Returns the iterator method function contained on the iterable object.
  215. *
  216. * Be sure to invoke the function with the iterable as context:
  217. *
  218. * var iteratorFn = getIteratorFn(myIterable);
  219. * if (iteratorFn) {
  220. * var iterator = iteratorFn.call(myIterable);
  221. * ...
  222. * }
  223. *
  224. * @param {?object} maybeIterable
  225. * @return {?function}
  226. */
  227. function getIteratorFn(maybeIterable) {
  228. var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
  229. if (typeof iteratorFn === 'function') {
  230. return iteratorFn;
  231. }
  232. }
  233. /**
  234. * Collection of methods that allow declaration and validation of props that are
  235. * supplied to React components. Example usage:
  236. *
  237. * var Props = require('ReactPropTypes');
  238. * var MyArticle = React.createClass({
  239. * propTypes: {
  240. * // An optional string prop named "description".
  241. * description: Props.string,
  242. *
  243. * // A required enum prop named "category".
  244. * category: Props.oneOf(['News','Photos']).isRequired,
  245. *
  246. * // A prop named "dialog" that requires an instance of Dialog.
  247. * dialog: Props.instanceOf(Dialog).isRequired
  248. * },
  249. * render: function() { ... }
  250. * });
  251. *
  252. * A more formal specification of how these methods are used:
  253. *
  254. * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
  255. * decl := ReactPropTypes.{type}(.isRequired)?
  256. *
  257. * Each and every declaration produces a function with the same signature. This
  258. * allows the creation of custom validation functions. For example:
  259. *
  260. * var MyLink = React.createClass({
  261. * propTypes: {
  262. * // An optional string or URI prop named "href".
  263. * href: function(props, propName, componentName) {
  264. * var propValue = props[propName];
  265. * if (propValue != null && typeof propValue !== 'string' &&
  266. * !(propValue instanceof URI)) {
  267. * return new Error(
  268. * 'Expected a string or an URI for ' + propName + ' in ' +
  269. * componentName
  270. * );
  271. * }
  272. * }
  273. * },
  274. * render: function() {...}
  275. * });
  276. *
  277. * @internal
  278. */
  279. var ANONYMOUS = '<<anonymous>>';
  280. // Important!
  281. // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
  282. var ReactPropTypes = {
  283. array: createPrimitiveTypeChecker('array'),
  284. bool: createPrimitiveTypeChecker('boolean'),
  285. func: createPrimitiveTypeChecker('function'),
  286. number: createPrimitiveTypeChecker('number'),
  287. object: createPrimitiveTypeChecker('object'),
  288. string: createPrimitiveTypeChecker('string'),
  289. symbol: createPrimitiveTypeChecker('symbol'),
  290. any: createAnyTypeChecker(),
  291. arrayOf: createArrayOfTypeChecker,
  292. element: createElementTypeChecker(),
  293. instanceOf: createInstanceTypeChecker,
  294. node: createNodeChecker(),
  295. objectOf: createObjectOfTypeChecker,
  296. oneOf: createEnumTypeChecker,
  297. oneOfType: createUnionTypeChecker,
  298. shape: createShapeTypeChecker,
  299. exact: createStrictShapeTypeChecker,
  300. };
  301. /**
  302. * inlined Object.is polyfill to avoid requiring consumers ship their own
  303. * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
  304. */
  305. /*eslint-disable no-self-compare*/
  306. function is(x, y) {
  307. // SameValue algorithm
  308. if (x === y) {
  309. // Steps 1-5, 7-10
  310. // Steps 6.b-6.e: +0 != -0
  311. return x !== 0 || 1 / x === 1 / y;
  312. } else {
  313. // Step 6.a: NaN == NaN
  314. return x !== x && y !== y;
  315. }
  316. }
  317. /*eslint-enable no-self-compare*/
  318. /**
  319. * We use an Error-like object for backward compatibility as people may call
  320. * PropTypes directly and inspect their output. However, we don't use real
  321. * Errors anymore. We don't inspect their stack anyway, and creating them
  322. * is prohibitively expensive if they are created too often, such as what
  323. * happens in oneOfType() for any type before the one that matched.
  324. */
  325. function PropTypeError(message) {
  326. this.message = message;
  327. this.stack = '';
  328. }
  329. // Make `instanceof Error` still work for returned errors.
  330. PropTypeError.prototype = Error.prototype;
  331. function createChainableTypeChecker(validate) {
  332. {
  333. var manualPropTypeCallCache = {};
  334. var manualPropTypeWarningCount = 0;
  335. }
  336. function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
  337. componentName = componentName || ANONYMOUS;
  338. propFullName = propFullName || propName;
  339. if (secret !== ReactPropTypesSecret_1) {
  340. if (throwOnDirectAccess) {
  341. // New behavior only for users of `prop-types` package
  342. var err = new Error(
  343. 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
  344. 'Use `PropTypes.checkPropTypes()` to call them. ' +
  345. 'Read more at http://fb.me/use-check-prop-types'
  346. );
  347. err.name = 'Invariant Violation';
  348. throw err;
  349. } else if (typeof console !== 'undefined') {
  350. // Old behavior for people using React.PropTypes
  351. var cacheKey = componentName + ':' + propName;
  352. if (
  353. !manualPropTypeCallCache[cacheKey] &&
  354. // Avoid spamming the console because they are often not actionable except for lib authors
  355. manualPropTypeWarningCount < 3
  356. ) {
  357. printWarning$1(
  358. 'You are manually calling a React.PropTypes validation ' +
  359. 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
  360. 'and will throw in the standalone `prop-types` package. ' +
  361. 'You may be seeing this warning due to a third-party PropTypes ' +
  362. 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
  363. );
  364. manualPropTypeCallCache[cacheKey] = true;
  365. manualPropTypeWarningCount++;
  366. }
  367. }
  368. }
  369. if (props[propName] == null) {
  370. if (isRequired) {
  371. if (props[propName] === null) {
  372. return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
  373. }
  374. return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
  375. }
  376. return null;
  377. } else {
  378. return validate(props, propName, componentName, location, propFullName);
  379. }
  380. }
  381. var chainedCheckType = checkType.bind(null, false);
  382. chainedCheckType.isRequired = checkType.bind(null, true);
  383. return chainedCheckType;
  384. }
  385. function createPrimitiveTypeChecker(expectedType) {
  386. function validate(props, propName, componentName, location, propFullName, secret) {
  387. var propValue = props[propName];
  388. var propType = getPropType(propValue);
  389. if (propType !== expectedType) {
  390. // `propValue` being instance of, say, date/regexp, pass the 'object'
  391. // check, but we can offer a more precise error message here rather than
  392. // 'of type `object`'.
  393. var preciseType = getPreciseType(propValue);
  394. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
  395. }
  396. return null;
  397. }
  398. return createChainableTypeChecker(validate);
  399. }
  400. function createAnyTypeChecker() {
  401. return createChainableTypeChecker(emptyFunctionThatReturnsNull);
  402. }
  403. function createArrayOfTypeChecker(typeChecker) {
  404. function validate(props, propName, componentName, location, propFullName) {
  405. if (typeof typeChecker !== 'function') {
  406. return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
  407. }
  408. var propValue = props[propName];
  409. if (!Array.isArray(propValue)) {
  410. var propType = getPropType(propValue);
  411. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
  412. }
  413. for (var i = 0; i < propValue.length; i++) {
  414. var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
  415. if (error instanceof Error) {
  416. return error;
  417. }
  418. }
  419. return null;
  420. }
  421. return createChainableTypeChecker(validate);
  422. }
  423. function createElementTypeChecker() {
  424. function validate(props, propName, componentName, location, propFullName) {
  425. var propValue = props[propName];
  426. if (!isValidElement(propValue)) {
  427. var propType = getPropType(propValue);
  428. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
  429. }
  430. return null;
  431. }
  432. return createChainableTypeChecker(validate);
  433. }
  434. function createInstanceTypeChecker(expectedClass) {
  435. function validate(props, propName, componentName, location, propFullName) {
  436. if (!(props[propName] instanceof expectedClass)) {
  437. var expectedClassName = expectedClass.name || ANONYMOUS;
  438. var actualClassName = getClassName(props[propName]);
  439. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
  440. }
  441. return null;
  442. }
  443. return createChainableTypeChecker(validate);
  444. }
  445. function createEnumTypeChecker(expectedValues) {
  446. if (!Array.isArray(expectedValues)) {
  447. printWarning$1('Invalid argument supplied to oneOf, expected an instance of array.');
  448. return emptyFunctionThatReturnsNull;
  449. }
  450. function validate(props, propName, componentName, location, propFullName) {
  451. var propValue = props[propName];
  452. for (var i = 0; i < expectedValues.length; i++) {
  453. if (is(propValue, expectedValues[i])) {
  454. return null;
  455. }
  456. }
  457. var valuesString = JSON.stringify(expectedValues);
  458. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
  459. }
  460. return createChainableTypeChecker(validate);
  461. }
  462. function createObjectOfTypeChecker(typeChecker) {
  463. function validate(props, propName, componentName, location, propFullName) {
  464. if (typeof typeChecker !== 'function') {
  465. return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
  466. }
  467. var propValue = props[propName];
  468. var propType = getPropType(propValue);
  469. if (propType !== 'object') {
  470. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
  471. }
  472. for (var key in propValue) {
  473. if (propValue.hasOwnProperty(key)) {
  474. var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
  475. if (error instanceof Error) {
  476. return error;
  477. }
  478. }
  479. }
  480. return null;
  481. }
  482. return createChainableTypeChecker(validate);
  483. }
  484. function createUnionTypeChecker(arrayOfTypeCheckers) {
  485. if (!Array.isArray(arrayOfTypeCheckers)) {
  486. printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.');
  487. return emptyFunctionThatReturnsNull;
  488. }
  489. for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
  490. var checker = arrayOfTypeCheckers[i];
  491. if (typeof checker !== 'function') {
  492. printWarning$1(
  493. 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
  494. 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
  495. );
  496. return emptyFunctionThatReturnsNull;
  497. }
  498. }
  499. function validate(props, propName, componentName, location, propFullName) {
  500. for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
  501. var checker = arrayOfTypeCheckers[i];
  502. if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
  503. return null;
  504. }
  505. }
  506. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
  507. }
  508. return createChainableTypeChecker(validate);
  509. }
  510. function createNodeChecker() {
  511. function validate(props, propName, componentName, location, propFullName) {
  512. if (!isNode(props[propName])) {
  513. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
  514. }
  515. return null;
  516. }
  517. return createChainableTypeChecker(validate);
  518. }
  519. function createShapeTypeChecker(shapeTypes) {
  520. function validate(props, propName, componentName, location, propFullName) {
  521. var propValue = props[propName];
  522. var propType = getPropType(propValue);
  523. if (propType !== 'object') {
  524. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
  525. }
  526. for (var key in shapeTypes) {
  527. var checker = shapeTypes[key];
  528. if (!checker) {
  529. continue;
  530. }
  531. var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
  532. if (error) {
  533. return error;
  534. }
  535. }
  536. return null;
  537. }
  538. return createChainableTypeChecker(validate);
  539. }
  540. function createStrictShapeTypeChecker(shapeTypes) {
  541. function validate(props, propName, componentName, location, propFullName) {
  542. var propValue = props[propName];
  543. var propType = getPropType(propValue);
  544. if (propType !== 'object') {
  545. return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
  546. }
  547. // We need to check all keys in case some are required but missing from
  548. // props.
  549. var allKeys = objectAssign({}, props[propName], shapeTypes);
  550. for (var key in allKeys) {
  551. var checker = shapeTypes[key];
  552. if (!checker) {
  553. return new PropTypeError(
  554. 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
  555. '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
  556. '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
  557. );
  558. }
  559. var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
  560. if (error) {
  561. return error;
  562. }
  563. }
  564. return null;
  565. }
  566. return createChainableTypeChecker(validate);
  567. }
  568. function isNode(propValue) {
  569. switch (typeof propValue) {
  570. case 'number':
  571. case 'string':
  572. case 'undefined':
  573. return true;
  574. case 'boolean':
  575. return !propValue;
  576. case 'object':
  577. if (Array.isArray(propValue)) {
  578. return propValue.every(isNode);
  579. }
  580. if (propValue === null || isValidElement(propValue)) {
  581. return true;
  582. }
  583. var iteratorFn = getIteratorFn(propValue);
  584. if (iteratorFn) {
  585. var iterator = iteratorFn.call(propValue);
  586. var step;
  587. if (iteratorFn !== propValue.entries) {
  588. while (!(step = iterator.next()).done) {
  589. if (!isNode(step.value)) {
  590. return false;
  591. }
  592. }
  593. } else {
  594. // Iterator will provide entry [k,v] tuples rather than values.
  595. while (!(step = iterator.next()).done) {
  596. var entry = step.value;
  597. if (entry) {
  598. if (!isNode(entry[1])) {
  599. return false;
  600. }
  601. }
  602. }
  603. }
  604. } else {
  605. return false;
  606. }
  607. return true;
  608. default:
  609. return false;
  610. }
  611. }
  612. function isSymbol(propType, propValue) {
  613. // Native Symbol.
  614. if (propType === 'symbol') {
  615. return true;
  616. }
  617. // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
  618. if (propValue['@@toStringTag'] === 'Symbol') {
  619. return true;
  620. }
  621. // Fallback for non-spec compliant Symbols which are polyfilled.
  622. if (typeof Symbol === 'function' && propValue instanceof Symbol) {
  623. return true;
  624. }
  625. return false;
  626. }
  627. // Equivalent of `typeof` but with special handling for array and regexp.
  628. function getPropType(propValue) {
  629. var propType = typeof propValue;
  630. if (Array.isArray(propValue)) {
  631. return 'array';
  632. }
  633. if (propValue instanceof RegExp) {
  634. // Old webkits (at least until Android 4.0) return 'function' rather than
  635. // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
  636. // passes PropTypes.object.
  637. return 'object';
  638. }
  639. if (isSymbol(propType, propValue)) {
  640. return 'symbol';
  641. }
  642. return propType;
  643. }
  644. // This handles more types than `getPropType`. Only used for error messages.
  645. // See `createPrimitiveTypeChecker`.
  646. function getPreciseType(propValue) {
  647. if (typeof propValue === 'undefined' || propValue === null) {
  648. return '' + propValue;
  649. }
  650. var propType = getPropType(propValue);
  651. if (propType === 'object') {
  652. if (propValue instanceof Date) {
  653. return 'date';
  654. } else if (propValue instanceof RegExp) {
  655. return 'regexp';
  656. }
  657. }
  658. return propType;
  659. }
  660. // Returns a string that is postfixed to a warning about an invalid type.
  661. // For example, "undefined" or "of type array"
  662. function getPostfixForTypeWarning(value) {
  663. var type = getPreciseType(value);
  664. switch (type) {
  665. case 'array':
  666. case 'object':
  667. return 'an ' + type;
  668. case 'boolean':
  669. case 'date':
  670. case 'regexp':
  671. return 'a ' + type;
  672. default:
  673. return type;
  674. }
  675. }
  676. // Returns class name of the object, if any.
  677. function getClassName(propValue) {
  678. if (!propValue.constructor || !propValue.constructor.name) {
  679. return ANONYMOUS;
  680. }
  681. return propValue.constructor.name;
  682. }
  683. ReactPropTypes.checkPropTypes = checkPropTypes_1;
  684. ReactPropTypes.PropTypes = ReactPropTypes;
  685. return ReactPropTypes;
  686. };
  687. var propTypes = createCommonjsModule(function (module) {
  688. /**
  689. * Copyright (c) 2013-present, Facebook, Inc.
  690. *
  691. * This source code is licensed under the MIT license found in the
  692. * LICENSE file in the root directory of this source tree.
  693. */
  694. {
  695. var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
  696. Symbol.for &&
  697. Symbol.for('react.element')) ||
  698. 0xeac7;
  699. var isValidElement = function(object) {
  700. return typeof object === 'object' &&
  701. object !== null &&
  702. object.$$typeof === REACT_ELEMENT_TYPE;
  703. };
  704. // By explicitly using `prop-types` you are opting into new development behavior.
  705. // http://fb.me/prop-types-in-prod
  706. var throwOnDirectAccess = true;
  707. module.exports = factoryWithTypeCheckers(isValidElement, throwOnDirectAccess);
  708. }
  709. });
  710. var propTypes_1 = propTypes.object;
  711. var propTypes_2 = propTypes.oneOfType;
  712. var propTypes_3 = propTypes.element;
  713. var propTypes_4 = propTypes.bool;
  714. var propTypes_5 = propTypes.func;
  715. var interopRequireDefault = createCommonjsModule(function (module) {
  716. function _interopRequireDefault(obj) {
  717. return obj && obj.__esModule ? obj : {
  718. default: obj
  719. };
  720. }
  721. module.exports = _interopRequireDefault;
  722. });
  723. unwrapExports(interopRequireDefault);
  724. var hasClass_1 = createCommonjsModule(function (module, exports) {
  725. exports.__esModule = true;
  726. exports.default = hasClass;
  727. function hasClass(element, className) {
  728. if (element.classList) return !!className && element.classList.contains(className);else return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
  729. }
  730. module.exports = exports["default"];
  731. });
  732. unwrapExports(hasClass_1);
  733. var addClass_1 = createCommonjsModule(function (module, exports) {
  734. exports.__esModule = true;
  735. exports.default = addClass;
  736. var _hasClass = interopRequireDefault(hasClass_1);
  737. function addClass(element, className) {
  738. if (element.classList) element.classList.add(className);else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);
  739. }
  740. module.exports = exports["default"];
  741. });
  742. var addOneClass = unwrapExports(addClass_1);
  743. function replaceClassName(origClass, classToRemove) {
  744. return origClass.replace(new RegExp('(^|\\s)' + classToRemove + '(?:\\s|$)', 'g'), '$1').replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, '');
  745. }
  746. var removeClass = function removeClass(element, className) {
  747. if (element.classList) element.classList.remove(className);else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className);else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
  748. };
  749. function _objectWithoutPropertiesLoose(source, excluded) {
  750. if (source == null) return {};
  751. var target = {};
  752. var sourceKeys = Object.keys(source);
  753. var key, i;
  754. for (i = 0; i < sourceKeys.length; i++) {
  755. key = sourceKeys[i];
  756. if (excluded.indexOf(key) >= 0) continue;
  757. target[key] = source[key];
  758. }
  759. return target;
  760. }
  761. /**
  762. * Copyright (c) 2013-present, Facebook, Inc.
  763. *
  764. * This source code is licensed under the MIT license found in the
  765. * LICENSE file in the root directory of this source tree.
  766. */
  767. function componentWillMount() {
  768. // Call this.constructor.gDSFP to support sub-classes.
  769. var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
  770. if (state !== null && state !== undefined) {
  771. this.setState(state);
  772. }
  773. }
  774. function componentWillReceiveProps(nextProps) {
  775. // Call this.constructor.gDSFP to support sub-classes.
  776. // Use the setState() updater to ensure state isn't stale in certain edge cases.
  777. function updater(prevState) {
  778. var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
  779. return state !== null && state !== undefined ? state : null;
  780. }
  781. // Binding "this" is important for shallow renderer support.
  782. this.setState(updater.bind(this));
  783. }
  784. function componentWillUpdate(nextProps, nextState) {
  785. try {
  786. var prevProps = this.props;
  787. var prevState = this.state;
  788. this.props = nextProps;
  789. this.state = nextState;
  790. this.__reactInternalSnapshotFlag = true;
  791. this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
  792. prevProps,
  793. prevState
  794. );
  795. } finally {
  796. this.props = prevProps;
  797. this.state = prevState;
  798. }
  799. }
  800. // React may warn about cWM/cWRP/cWU methods being deprecated.
  801. // Add a flag to suppress these warnings for this special case.
  802. componentWillMount.__suppressDeprecationWarning = true;
  803. componentWillReceiveProps.__suppressDeprecationWarning = true;
  804. componentWillUpdate.__suppressDeprecationWarning = true;
  805. function polyfill(Component) {
  806. var prototype = Component.prototype;
  807. if (!prototype || !prototype.isReactComponent) {
  808. throw new Error('Can only polyfill class components');
  809. }
  810. if (
  811. typeof Component.getDerivedStateFromProps !== 'function' &&
  812. typeof prototype.getSnapshotBeforeUpdate !== 'function'
  813. ) {
  814. return Component;
  815. }
  816. // If new component APIs are defined, "unsafe" lifecycles won't be called.
  817. // Error if any of these lifecycles are present,
  818. // Because they would work differently between older and newer (16.3+) versions of React.
  819. var foundWillMountName = null;
  820. var foundWillReceivePropsName = null;
  821. var foundWillUpdateName = null;
  822. if (typeof prototype.componentWillMount === 'function') {
  823. foundWillMountName = 'componentWillMount';
  824. } else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
  825. foundWillMountName = 'UNSAFE_componentWillMount';
  826. }
  827. if (typeof prototype.componentWillReceiveProps === 'function') {
  828. foundWillReceivePropsName = 'componentWillReceiveProps';
  829. } else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
  830. foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
  831. }
  832. if (typeof prototype.componentWillUpdate === 'function') {
  833. foundWillUpdateName = 'componentWillUpdate';
  834. } else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
  835. foundWillUpdateName = 'UNSAFE_componentWillUpdate';
  836. }
  837. if (
  838. foundWillMountName !== null ||
  839. foundWillReceivePropsName !== null ||
  840. foundWillUpdateName !== null
  841. ) {
  842. var componentName = Component.displayName || Component.name;
  843. var newApiName =
  844. typeof Component.getDerivedStateFromProps === 'function'
  845. ? 'getDerivedStateFromProps()'
  846. : 'getSnapshotBeforeUpdate()';
  847. throw Error(
  848. 'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
  849. componentName +
  850. ' uses ' +
  851. newApiName +
  852. ' but also contains the following legacy lifecycles:' +
  853. (foundWillMountName !== null ? '\n ' + foundWillMountName : '') +
  854. (foundWillReceivePropsName !== null
  855. ? '\n ' + foundWillReceivePropsName
  856. : '') +
  857. (foundWillUpdateName !== null ? '\n ' + foundWillUpdateName : '') +
  858. '\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
  859. 'https://fb.me/react-async-component-lifecycle-hooks'
  860. );
  861. }
  862. // React <= 16.2 does not support static getDerivedStateFromProps.
  863. // As a workaround, use cWM and cWRP to invoke the new static lifecycle.
  864. // Newer versions of React will ignore these lifecycles if gDSFP exists.
  865. if (typeof Component.getDerivedStateFromProps === 'function') {
  866. prototype.componentWillMount = componentWillMount;
  867. prototype.componentWillReceiveProps = componentWillReceiveProps;
  868. }
  869. // React <= 16.2 does not support getSnapshotBeforeUpdate.
  870. // As a workaround, use cWU to invoke the new lifecycle.
  871. // Newer versions of React will ignore that lifecycle if gSBU exists.
  872. if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
  873. if (typeof prototype.componentDidUpdate !== 'function') {
  874. throw new Error(
  875. 'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
  876. );
  877. }
  878. prototype.componentWillUpdate = componentWillUpdate;
  879. var componentDidUpdate = prototype.componentDidUpdate;
  880. prototype.componentDidUpdate = function componentDidUpdatePolyfill(
  881. prevProps,
  882. prevState,
  883. maybeSnapshot
  884. ) {
  885. // 16.3+ will not execute our will-update method;
  886. // It will pass a snapshot value to did-update though.
  887. // Older versions will require our polyfilled will-update value.
  888. // We need to handle both cases, but can't just check for the presence of "maybeSnapshot",
  889. // Because for <= 15.x versions this might be a "prevContext" object.
  890. // We also can't just check "__reactInternalSnapshot",
  891. // Because get-snapshot might return a falsy value.
  892. // So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.
  893. var snapshot = this.__reactInternalSnapshotFlag
  894. ? this.__reactInternalSnapshot
  895. : maybeSnapshot;
  896. componentDidUpdate.call(this, prevProps, prevState, snapshot);
  897. };
  898. }
  899. return Component;
  900. }
  901. var timeoutsShape = propTypes.oneOfType([propTypes.number, propTypes.shape({
  902. enter: propTypes.number,
  903. exit: propTypes.number,
  904. appear: propTypes.number
  905. }).isRequired]);
  906. var classNamesShape = propTypes.oneOfType([propTypes.string, propTypes.shape({
  907. enter: propTypes.string,
  908. exit: propTypes.string,
  909. active: propTypes.string
  910. }), propTypes.shape({
  911. enter: propTypes.string,
  912. enterDone: propTypes.string,
  913. enterActive: propTypes.string,
  914. exit: propTypes.string,
  915. exitDone: propTypes.string,
  916. exitActive: propTypes.string
  917. })]);
  918. var UNMOUNTED = 'unmounted';
  919. var EXITED = 'exited';
  920. var ENTERING = 'entering';
  921. var ENTERED = 'entered';
  922. var EXITING = 'exiting';
  923. /**
  924. * The Transition component lets you describe a transition from one component
  925. * state to another _over time_ with a simple declarative API. Most commonly
  926. * it's used to animate the mounting and unmounting of a component, but can also
  927. * be used to describe in-place transition states as well.
  928. *
  929. * ---
  930. *
  931. * **Note**: `Transition` is a platform-agnostic base component. If you're using
  932. * transitions in CSS, you'll probably want to use
  933. * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
  934. * instead. It inherits all the features of `Transition`, but contains
  935. * additional features necessary to play nice with CSS transitions (hence the
  936. * name of the component).
  937. *
  938. * ---
  939. *
  940. * By default the `Transition` component does not alter the behavior of the
  941. * component it renders, it only tracks "enter" and "exit" states for the
  942. * components. It's up to you to give meaning and effect to those states. For
  943. * example we can add styles to a component when it enters or exits:
  944. *
  945. * ```jsx
  946. * import { Transition } from 'react-transition-group';
  947. *
  948. * const duration = 300;
  949. *
  950. * const defaultStyle = {
  951. * transition: `opacity ${duration}ms ease-in-out`,
  952. * opacity: 0,
  953. * }
  954. *
  955. * const transitionStyles = {
  956. * entering: { opacity: 0 },
  957. * entered: { opacity: 1 },
  958. * };
  959. *
  960. * const Fade = ({ in: inProp }) => (
  961. * <Transition in={inProp} timeout={duration}>
  962. * {state => (
  963. * <div style={{
  964. * ...defaultStyle,
  965. * ...transitionStyles[state]
  966. * }}>
  967. * I'm a fade Transition!
  968. * </div>
  969. * )}
  970. * </Transition>
  971. * );
  972. * ```
  973. *
  974. * There are 4 main states a Transition can be in:
  975. * - `'entering'`
  976. * - `'entered'`
  977. * - `'exiting'`
  978. * - `'exited'`
  979. *
  980. * Transition state is toggled via the `in` prop. When `true` the component
  981. * begins the "Enter" stage. During this stage, the component will shift from
  982. * its current transition state, to `'entering'` for the duration of the
  983. * transition and then to the `'entered'` stage once it's complete. Let's take
  984. * the following example (we'll use the
  985. * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):
  986. *
  987. * ```jsx
  988. * function App() {
  989. * const [inProp, setInProp] = useState(false);
  990. * return (
  991. * <div>
  992. * <Transition in={inProp} timeout={500}>
  993. * {state => (
  994. * // ...
  995. * )}
  996. * </Transition>
  997. * <button onClick={() => setInProp(true)}>
  998. * Click to Enter
  999. * </button>
  1000. * </div>
  1001. * );
  1002. * }
  1003. * ```
  1004. *
  1005. * When the button is clicked the component will shift to the `'entering'` state
  1006. * and stay there for 500ms (the value of `timeout`) before it finally switches
  1007. * to `'entered'`.
  1008. *
  1009. * When `in` is `false` the same thing happens except the state moves from
  1010. * `'exiting'` to `'exited'`.
  1011. */
  1012. var Transition =
  1013. /*#__PURE__*/
  1014. function (_React$Component) {
  1015. _inheritsLoose(Transition, _React$Component);
  1016. function Transition(props, context) {
  1017. var _this;
  1018. _this = _React$Component.call(this, props, context) || this;
  1019. var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears
  1020. var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
  1021. var initialStatus;
  1022. _this.appearStatus = null;
  1023. if (props.in) {
  1024. if (appear) {
  1025. initialStatus = EXITED;
  1026. _this.appearStatus = ENTERING;
  1027. } else {
  1028. initialStatus = ENTERED;
  1029. }
  1030. } else {
  1031. if (props.unmountOnExit || props.mountOnEnter) {
  1032. initialStatus = UNMOUNTED;
  1033. } else {
  1034. initialStatus = EXITED;
  1035. }
  1036. }
  1037. _this.state = {
  1038. status: initialStatus
  1039. };
  1040. _this.nextCallback = null;
  1041. return _this;
  1042. }
  1043. var _proto = Transition.prototype;
  1044. _proto.getChildContext = function getChildContext() {
  1045. return {
  1046. transitionGroup: null // allows for nested Transitions
  1047. };
  1048. };
  1049. Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
  1050. var nextIn = _ref.in;
  1051. if (nextIn && prevState.status === UNMOUNTED) {
  1052. return {
  1053. status: EXITED
  1054. };
  1055. }
  1056. return null;
  1057. }; // getSnapshotBeforeUpdate(prevProps) {
  1058. // let nextStatus = null
  1059. // if (prevProps !== this.props) {
  1060. // const { status } = this.state
  1061. // if (this.props.in) {
  1062. // if (status !== ENTERING && status !== ENTERED) {
  1063. // nextStatus = ENTERING
  1064. // }
  1065. // } else {
  1066. // if (status === ENTERING || status === ENTERED) {
  1067. // nextStatus = EXITING
  1068. // }
  1069. // }
  1070. // }
  1071. // return { nextStatus }
  1072. // }
  1073. _proto.componentDidMount = function componentDidMount() {
  1074. this.updateStatus(true, this.appearStatus);
  1075. };
  1076. _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
  1077. var nextStatus = null;
  1078. if (prevProps !== this.props) {
  1079. var status = this.state.status;
  1080. if (this.props.in) {
  1081. if (status !== ENTERING && status !== ENTERED) {
  1082. nextStatus = ENTERING;
  1083. }
  1084. } else {
  1085. if (status === ENTERING || status === ENTERED) {
  1086. nextStatus = EXITING;
  1087. }
  1088. }
  1089. }
  1090. this.updateStatus(false, nextStatus);
  1091. };
  1092. _proto.componentWillUnmount = function componentWillUnmount() {
  1093. this.cancelNextCallback();
  1094. };
  1095. _proto.getTimeouts = function getTimeouts() {
  1096. var timeout = this.props.timeout;
  1097. var exit, enter, appear;
  1098. exit = enter = appear = timeout;
  1099. if (timeout != null && typeof timeout !== 'number') {
  1100. exit = timeout.exit;
  1101. enter = timeout.enter; // TODO: remove fallback for next major
  1102. appear = timeout.appear !== undefined ? timeout.appear : enter;
  1103. }
  1104. return {
  1105. exit: exit,
  1106. enter: enter,
  1107. appear: appear
  1108. };
  1109. };
  1110. _proto.updateStatus = function updateStatus(mounting, nextStatus) {
  1111. if (mounting === void 0) {
  1112. mounting = false;
  1113. }
  1114. if (nextStatus !== null) {
  1115. // nextStatus will always be ENTERING or EXITING.
  1116. this.cancelNextCallback();
  1117. var node = ReactDOM__default.findDOMNode(this);
  1118. if (nextStatus === ENTERING) {
  1119. this.performEnter(node, mounting);
  1120. } else {
  1121. this.performExit(node);
  1122. }
  1123. } else if (this.props.unmountOnExit && this.state.status === EXITED) {
  1124. this.setState({
  1125. status: UNMOUNTED
  1126. });
  1127. }
  1128. };
  1129. _proto.performEnter = function performEnter(node, mounting) {
  1130. var _this2 = this;
  1131. var enter = this.props.enter;
  1132. var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
  1133. var timeouts = this.getTimeouts();
  1134. var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
  1135. // if we are mounting and running this it means appear _must_ be set
  1136. if (!mounting && !enter) {
  1137. this.safeSetState({
  1138. status: ENTERED
  1139. }, function () {
  1140. _this2.props.onEntered(node);
  1141. });
  1142. return;
  1143. }
  1144. this.props.onEnter(node, appearing);
  1145. this.safeSetState({
  1146. status: ENTERING
  1147. }, function () {
  1148. _this2.props.onEntering(node, appearing);
  1149. _this2.onTransitionEnd(node, enterTimeout, function () {
  1150. _this2.safeSetState({
  1151. status: ENTERED
  1152. }, function () {
  1153. _this2.props.onEntered(node, appearing);
  1154. });
  1155. });
  1156. });
  1157. };
  1158. _proto.performExit = function performExit(node) {
  1159. var _this3 = this;
  1160. var exit = this.props.exit;
  1161. var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED
  1162. if (!exit) {
  1163. this.safeSetState({
  1164. status: EXITED
  1165. }, function () {
  1166. _this3.props.onExited(node);
  1167. });
  1168. return;
  1169. }
  1170. this.props.onExit(node);
  1171. this.safeSetState({
  1172. status: EXITING
  1173. }, function () {
  1174. _this3.props.onExiting(node);
  1175. _this3.onTransitionEnd(node, timeouts.exit, function () {
  1176. _this3.safeSetState({
  1177. status: EXITED
  1178. }, function () {
  1179. _this3.props.onExited(node);
  1180. });
  1181. });
  1182. });
  1183. };
  1184. _proto.cancelNextCallback = function cancelNextCallback() {
  1185. if (this.nextCallback !== null) {
  1186. this.nextCallback.cancel();
  1187. this.nextCallback = null;
  1188. }
  1189. };
  1190. _proto.safeSetState = function safeSetState(nextState, callback) {
  1191. // This shouldn't be necessary, but there are weird race conditions with
  1192. // setState callbacks and unmounting in testing, so always make sure that
  1193. // we can cancel any pending setState callbacks after we unmount.
  1194. callback = this.setNextCallback(callback);
  1195. this.setState(nextState, callback);
  1196. };
  1197. _proto.setNextCallback = function setNextCallback(callback) {
  1198. var _this4 = this;
  1199. var active = true;
  1200. this.nextCallback = function (event) {
  1201. if (active) {
  1202. active = false;
  1203. _this4.nextCallback = null;
  1204. callback(event);
  1205. }
  1206. };
  1207. this.nextCallback.cancel = function () {
  1208. active = false;
  1209. };
  1210. return this.nextCallback;
  1211. };
  1212. _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
  1213. this.setNextCallback(handler);
  1214. var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
  1215. if (!node || doesNotHaveTimeoutOrListener) {
  1216. setTimeout(this.nextCallback, 0);
  1217. return;
  1218. }
  1219. if (this.props.addEndListener) {
  1220. this.props.addEndListener(node, this.nextCallback);
  1221. }
  1222. if (timeout != null) {
  1223. setTimeout(this.nextCallback, timeout);
  1224. }
  1225. };
  1226. _proto.render = function render() {
  1227. var status = this.state.status;
  1228. if (status === UNMOUNTED) {
  1229. return null;
  1230. }
  1231. var _this$props = this.props,
  1232. children = _this$props.children,
  1233. childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]); // filter props for Transtition
  1234. delete childProps.in;
  1235. delete childProps.mountOnEnter;
  1236. delete childProps.unmountOnExit;
  1237. delete childProps.appear;
  1238. delete childProps.enter;
  1239. delete childProps.exit;
  1240. delete childProps.timeout;
  1241. delete childProps.addEndListener;
  1242. delete childProps.onEnter;
  1243. delete childProps.onEntering;
  1244. delete childProps.onEntered;
  1245. delete childProps.onExit;
  1246. delete childProps.onExiting;
  1247. delete childProps.onExited;
  1248. if (typeof children === 'function') {
  1249. return children(status, childProps);
  1250. }
  1251. var child = React__default.Children.only(children);
  1252. return React__default.cloneElement(child, childProps);
  1253. };
  1254. return Transition;
  1255. }(React__default.Component);
  1256. Transition.contextTypes = {
  1257. transitionGroup: propTypes_1
  1258. };
  1259. Transition.childContextTypes = {
  1260. transitionGroup: function transitionGroup() {}
  1261. };
  1262. Transition.propTypes = {
  1263. /**
  1264. * A `function` child can be used instead of a React element. This function is
  1265. * called with the current transition status (`'entering'`, `'entered'`,
  1266. * `'exiting'`, `'exited'`, `'unmounted'`), which can be used to apply context
  1267. * specific props to a component.
  1268. *
  1269. * ```jsx
  1270. * <Transition in={this.state.in} timeout={150}>
  1271. * {state => (
  1272. * <MyComponent className={`fade fade-${state}`} />
  1273. * )}
  1274. * </Transition>
  1275. * ```
  1276. */
  1277. children: propTypes_2([propTypes_5.isRequired, propTypes_3.isRequired]).isRequired,
  1278. /**
  1279. * Show the component; triggers the enter or exit states
  1280. */
  1281. in: propTypes_4,
  1282. /**
  1283. * By default the child component is mounted immediately along with
  1284. * the parent `Transition` component. If you want to "lazy mount" the component on the
  1285. * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
  1286. * mounted, even on "exited", unless you also specify `unmountOnExit`.
  1287. */
  1288. mountOnEnter: propTypes_4,
  1289. /**
  1290. * By default the child component stays mounted after it reaches the `'exited'` state.
  1291. * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
  1292. */
  1293. unmountOnExit: propTypes_4,
  1294. /**
  1295. * Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
  1296. * If you want to transition on the first mount set `appear` to `true`, and the
  1297. * component will transition in as soon as the `<Transition>` mounts.
  1298. *
  1299. * > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
  1300. */
  1301. appear: propTypes_4,
  1302. /**
  1303. * Enable or disable enter transitions.
  1304. */
  1305. enter: propTypes_4,
  1306. /**
  1307. * Enable or disable exit transitions.
  1308. */
  1309. exit: propTypes_4,
  1310. /**
  1311. * The duration of the transition, in milliseconds.
  1312. * Required unless `addEndListener` is provided.
  1313. *
  1314. * You may specify a single timeout for all transitions:
  1315. *
  1316. * ```jsx
  1317. * timeout={500}
  1318. * ```
  1319. *
  1320. * or individually:
  1321. *
  1322. * ```jsx
  1323. * timeout={{
  1324. * appear: 500,
  1325. * enter: 300,
  1326. * exit: 500,
  1327. * }}
  1328. * ```
  1329. *
  1330. * - `appear` defaults to the value of `enter`
  1331. * - `enter` defaults to `0`
  1332. * - `exit` defaults to `0`
  1333. *
  1334. * @type {number | { enter?: number, exit?: number, appear?: number }}
  1335. */
  1336. timeout: function timeout(props) {
  1337. var pt = timeoutsShape;
  1338. if (!props.addEndListener) pt = pt.isRequired;
  1339. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  1340. args[_key - 1] = arguments[_key];
  1341. }
  1342. return pt.apply(void 0, [props].concat(args));
  1343. },
  1344. /**
  1345. * Add a custom transition end trigger. Called with the transitioning
  1346. * DOM node and a `done` callback. Allows for more fine grained transition end
  1347. * logic. **Note:** Timeouts are still used as a fallback if provided.
  1348. *
  1349. * ```jsx
  1350. * addEndListener={(node, done) => {
  1351. * // use the css transitionend event to mark the finish of a transition
  1352. * node.addEventListener('transitionend', done, false);
  1353. * }}
  1354. * ```
  1355. */
  1356. addEndListener: propTypes_5,
  1357. /**
  1358. * Callback fired before the "entering" status is applied. An extra parameter
  1359. * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
  1360. *
  1361. * @type Function(node: HtmlElement, isAppearing: bool) -> void
  1362. */
  1363. onEnter: propTypes_5,
  1364. /**
  1365. * Callback fired after the "entering" status is applied. An extra parameter
  1366. * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
  1367. *
  1368. * @type Function(node: HtmlElement, isAppearing: bool)
  1369. */
  1370. onEntering: propTypes_5,
  1371. /**
  1372. * Callback fired after the "entered" status is applied. An extra parameter
  1373. * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
  1374. *
  1375. * @type Function(node: HtmlElement, isAppearing: bool) -> void
  1376. */
  1377. onEntered: propTypes_5,
  1378. /**
  1379. * Callback fired before the "exiting" status is applied.
  1380. *
  1381. * @type Function(node: HtmlElement) -> void
  1382. */
  1383. onExit: propTypes_5,
  1384. /**
  1385. * Callback fired after the "exiting" status is applied.
  1386. *
  1387. * @type Function(node: HtmlElement) -> void
  1388. */
  1389. onExiting: propTypes_5,
  1390. /**
  1391. * Callback fired after the "exited" status is applied.
  1392. *
  1393. * @type Function(node: HtmlElement) -> void
  1394. */
  1395. onExited: propTypes_5 // Name the function so it is clearer in the documentation
  1396. };
  1397. function noop() {}
  1398. Transition.defaultProps = {
  1399. in: false,
  1400. mountOnEnter: false,
  1401. unmountOnExit: false,
  1402. appear: false,
  1403. enter: true,
  1404. exit: true,
  1405. onEnter: noop,
  1406. onEntering: noop,
  1407. onEntered: noop,
  1408. onExit: noop,
  1409. onExiting: noop,
  1410. onExited: noop
  1411. };
  1412. Transition.UNMOUNTED = 0;
  1413. Transition.EXITED = 1;
  1414. Transition.ENTERING = 2;
  1415. Transition.ENTERED = 3;
  1416. Transition.EXITING = 4;
  1417. var Transition$1 = polyfill(Transition);
  1418. var addClass = function addClass(node, classes) {
  1419. return node && classes && classes.split(' ').forEach(function (c) {
  1420. return addOneClass(node, c);
  1421. });
  1422. };
  1423. var removeClass$1 = function removeClass$1(node, classes) {
  1424. return node && classes && classes.split(' ').forEach(function (c) {
  1425. return removeClass(node, c);
  1426. });
  1427. };
  1428. /**
  1429. * A transition component inspired by the excellent
  1430. * [ng-animate](http://www.nganimate.org/) library, you should use it if you're
  1431. * using CSS transitions or animations. It's built upon the
  1432. * [`Transition`](https://reactcommunity.org/react-transition-group/transition)
  1433. * component, so it inherits all of its props.
  1434. *
  1435. * `CSSTransition` applies a pair of class names during the `appear`, `enter`,
  1436. * and `exit` states of the transition. The first class is applied and then a
  1437. * second `*-active` class in order to activate the CSSS transition. After the
  1438. * transition, matching `*-done` class names are applied to persist the
  1439. * transition state.
  1440. *
  1441. * ```jsx
  1442. * function App() {
  1443. * const [inProp, setInProp] = useState(false);
  1444. * return (
  1445. * <div>
  1446. * <CSSTransition in={inProp} timeout={200} classNames="my-node">
  1447. * <div>
  1448. * {"I'll receive my-node-* classes"}
  1449. * </div>
  1450. * </CSSTransition>
  1451. * <button type="button" onClick={() => setInProp(true)}>
  1452. * Click to Enter
  1453. * </button>
  1454. * </div>
  1455. * );
  1456. * }
  1457. * ```
  1458. *
  1459. * When the `in` prop is set to `true`, the child component will first receive
  1460. * the class `example-enter`, then the `example-enter-active` will be added in
  1461. * the next tick. `CSSTransition` [forces a
  1462. * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
  1463. * between before adding the `example-enter-active`. This is an important trick
  1464. * because it allows us to transition between `example-enter` and
  1465. * `example-enter-active` even though they were added immediately one after
  1466. * another. Most notably, this is what makes it possible for us to animate
  1467. * _appearance_.
  1468. *
  1469. * ```css
  1470. * .my-node-enter {
  1471. * opacity: 0;
  1472. * }
  1473. * .my-node-enter-active {
  1474. * opacity: 1;
  1475. * transition: opacity 200ms;
  1476. * }
  1477. * .my-node-exit {
  1478. * opacity: 1;
  1479. * }
  1480. * .my-node-exit-active {
  1481. * opacity: 0;
  1482. * transition: opacity: 200ms;
  1483. * }
  1484. * ```
  1485. *
  1486. * `*-active` classes represent which styles you want to animate **to**.
  1487. */
  1488. var CSSTransition =
  1489. /*#__PURE__*/
  1490. function (_React$Component) {
  1491. _inheritsLoose(CSSTransition, _React$Component);
  1492. function CSSTransition() {
  1493. var _this;
  1494. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  1495. args[_key] = arguments[_key];
  1496. }
  1497. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  1498. _this.onEnter = function (node, appearing) {
  1499. var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),
  1500. className = _this$getClassNames.className;
  1501. _this.removeClasses(node, 'exit');
  1502. addClass(node, className);
  1503. if (_this.props.onEnter) {
  1504. _this.props.onEnter(node, appearing);
  1505. }
  1506. };
  1507. _this.onEntering = function (node, appearing) {
  1508. var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),
  1509. activeClassName = _this$getClassNames2.activeClassName;
  1510. _this.reflowAndAddClass(node, activeClassName);
  1511. if (_this.props.onEntering) {
  1512. _this.props.onEntering(node, appearing);
  1513. }
  1514. };
  1515. _this.onEntered = function (node, appearing) {
  1516. var appearClassName = _this.getClassNames('appear').doneClassName;
  1517. var enterClassName = _this.getClassNames('enter').doneClassName;
  1518. var doneClassName = appearing ? appearClassName + " " + enterClassName : enterClassName;
  1519. _this.removeClasses(node, appearing ? 'appear' : 'enter');
  1520. addClass(node, doneClassName);
  1521. if (_this.props.onEntered) {
  1522. _this.props.onEntered(node, appearing);
  1523. }
  1524. };
  1525. _this.onExit = function (node) {
  1526. var _this$getClassNames3 = _this.getClassNames('exit'),
  1527. className = _this$getClassNames3.className;
  1528. _this.removeClasses(node, 'appear');
  1529. _this.removeClasses(node, 'enter');
  1530. addClass(node, className);
  1531. if (_this.props.onExit) {
  1532. _this.props.onExit(node);
  1533. }
  1534. };
  1535. _this.onExiting = function (node) {
  1536. var _this$getClassNames4 = _this.getClassNames('exit'),
  1537. activeClassName = _this$getClassNames4.activeClassName;
  1538. _this.reflowAndAddClass(node, activeClassName);
  1539. if (_this.props.onExiting) {
  1540. _this.props.onExiting(node);
  1541. }
  1542. };
  1543. _this.onExited = function (node) {
  1544. var _this$getClassNames5 = _this.getClassNames('exit'),
  1545. doneClassName = _this$getClassNames5.doneClassName;
  1546. _this.removeClasses(node, 'exit');
  1547. addClass(node, doneClassName);
  1548. if (_this.props.onExited) {
  1549. _this.props.onExited(node);
  1550. }
  1551. };
  1552. _this.getClassNames = function (type) {
  1553. var classNames = _this.props.classNames;
  1554. var isStringClassNames = typeof classNames === 'string';
  1555. var prefix = isStringClassNames && classNames ? classNames + '-' : '';
  1556. var className = isStringClassNames ? prefix + type : classNames[type];
  1557. var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];
  1558. var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];
  1559. return {
  1560. className: className,
  1561. activeClassName: activeClassName,
  1562. doneClassName: doneClassName
  1563. };
  1564. };
  1565. return _this;
  1566. }
  1567. var _proto = CSSTransition.prototype;
  1568. _proto.removeClasses = function removeClasses(node, type) {
  1569. var _this$getClassNames6 = this.getClassNames(type),
  1570. className = _this$getClassNames6.className,
  1571. activeClassName = _this$getClassNames6.activeClassName,
  1572. doneClassName = _this$getClassNames6.doneClassName;
  1573. className && removeClass$1(node, className);
  1574. activeClassName && removeClass$1(node, activeClassName);
  1575. doneClassName && removeClass$1(node, doneClassName);
  1576. };
  1577. _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {
  1578. // This is for to force a repaint,
  1579. // which is necessary in order to transition styles when adding a class name.
  1580. if (className) {
  1581. /* eslint-disable no-unused-expressions */
  1582. node && node.scrollTop;
  1583. /* eslint-enable no-unused-expressions */
  1584. addClass(node, className);
  1585. }
  1586. };
  1587. _proto.render = function render() {
  1588. var props = _extends({}, this.props);
  1589. delete props.classNames;
  1590. return React__default.createElement(Transition$1, _extends({}, props, {
  1591. onEnter: this.onEnter,
  1592. onEntered: this.onEntered,
  1593. onEntering: this.onEntering,
  1594. onExit: this.onExit,
  1595. onExiting: this.onExiting,
  1596. onExited: this.onExited
  1597. }));
  1598. };
  1599. return CSSTransition;
  1600. }(React__default.Component);
  1601. CSSTransition.defaultProps = {
  1602. classNames: ''
  1603. };
  1604. CSSTransition.propTypes = _extends({}, Transition$1.propTypes, {
  1605. /**
  1606. * The animation classNames applied to the component as it enters, exits or
  1607. * has finished the transition. A single name can be provided and it will be
  1608. * suffixed for each stage: e.g.
  1609. *
  1610. * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
  1611. * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
  1612. * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
  1613. *
  1614. * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
  1615. * This allows you to define different behavior for when appearing is done and
  1616. * when regular entering is done, using selectors like
  1617. * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an
  1618. * epic entrance animation when element first appears in the DOM using
  1619. * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
  1620. * simply use `fade-enter-done` for defining both cases.
  1621. *
  1622. * Each individual classNames can also be specified independently like:
  1623. *
  1624. * ```js
  1625. * classNames={{
  1626. * appear: 'my-appear',
  1627. * appearActive: 'my-active-appear',
  1628. * appearDone: 'my-done-appear',
  1629. * enter: 'my-enter',
  1630. * enterActive: 'my-active-enter',
  1631. * enterDone: 'my-done-enter',
  1632. * exit: 'my-exit',
  1633. * exitActive: 'my-active-exit',
  1634. * exitDone: 'my-done-exit',
  1635. * }}
  1636. * ```
  1637. *
  1638. * If you want to set these classes using CSS Modules:
  1639. *
  1640. * ```js
  1641. * import styles from './styles.css';
  1642. * ```
  1643. *
  1644. * you might want to use camelCase in your CSS file, that way could simply
  1645. * spread them instead of listing them one by one:
  1646. *
  1647. * ```js
  1648. * classNames={{ ...styles }}
  1649. * ```
  1650. *
  1651. * @type {string | {
  1652. * appear?: string,
  1653. * appearActive?: string,
  1654. * appearDone?: string,
  1655. * enter?: string,
  1656. * enterActive?: string,
  1657. * enterDone?: string,
  1658. * exit?: string,
  1659. * exitActive?: string,
  1660. * exitDone?: string,
  1661. * }}
  1662. */
  1663. classNames: classNamesShape,
  1664. /**
  1665. * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
  1666. * applied.
  1667. *
  1668. * @type Function(node: HtmlElement, isAppearing: bool)
  1669. */
  1670. onEnter: propTypes_5,
  1671. /**
  1672. * A `<Transition>` callback fired immediately after the 'enter-active' or
  1673. * 'appear-active' class is applied.
  1674. *
  1675. * @type Function(node: HtmlElement, isAppearing: bool)
  1676. */
  1677. onEntering: propTypes_5,
  1678. /**
  1679. * A `<Transition>` callback fired immediately after the 'enter' or
  1680. * 'appear' classes are **removed** and the `done` class is added to the DOM node.
  1681. *
  1682. * @type Function(node: HtmlElement, isAppearing: bool)
  1683. */
  1684. onEntered: propTypes_5,
  1685. /**
  1686. * A `<Transition>` callback fired immediately after the 'exit' class is
  1687. * applied.
  1688. *
  1689. * @type Function(node: HtmlElement)
  1690. */
  1691. onExit: propTypes_5,
  1692. /**
  1693. * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
  1694. *
  1695. * @type Function(node: HtmlElement)
  1696. */
  1697. onExiting: propTypes_5,
  1698. /**
  1699. * A `<Transition>` callback fired immediately after the 'exit' classes
  1700. * are **removed** and the `exit-done` class is added to the DOM node.
  1701. *
  1702. * @type Function(node: HtmlElement)
  1703. */
  1704. onExited: propTypes_5
  1705. });
  1706. function _assertThisInitialized(self) {
  1707. if (self === void 0) {
  1708. throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  1709. }
  1710. return self;
  1711. }
  1712. /**
  1713. * Given `this.props.children`, return an object mapping key to child.
  1714. *
  1715. * @param {*} children `this.props.children`
  1716. * @return {object} Mapping of key to child
  1717. */
  1718. function getChildMapping(children, mapFn) {
  1719. var mapper = function mapper(child) {
  1720. return mapFn && React.isValidElement(child) ? mapFn(child) : child;
  1721. };
  1722. var result = Object.create(null);
  1723. if (children) React.Children.map(children, function (c) {
  1724. return c;
  1725. }).forEach(function (child) {
  1726. // run the map function here instead so that the key is the computed one
  1727. result[child.key] = mapper(child);
  1728. });
  1729. return result;
  1730. }
  1731. /**
  1732. * When you're adding or removing children some may be added or removed in the
  1733. * same render pass. We want to show *both* since we want to simultaneously
  1734. * animate elements in and out. This function takes a previous set of keys
  1735. * and a new set of keys and merges them with its best guess of the correct
  1736. * ordering. In the future we may expose some of the utilities in
  1737. * ReactMultiChild to make this easy, but for now React itself does not
  1738. * directly have this concept of the union of prevChildren and nextChildren
  1739. * so we implement it here.
  1740. *
  1741. * @param {object} prev prev children as returned from
  1742. * `ReactTransitionChildMapping.getChildMapping()`.
  1743. * @param {object} next next children as returned from
  1744. * `ReactTransitionChildMapping.getChildMapping()`.
  1745. * @return {object} a key set that contains all keys in `prev` and all keys
  1746. * in `next` in a reasonable order.
  1747. */
  1748. function mergeChildMappings(prev, next) {
  1749. prev = prev || {};
  1750. next = next || {};
  1751. function getValueForKey(key) {
  1752. return key in next ? next[key] : prev[key];
  1753. } // For each key of `next`, the list of keys to insert before that key in
  1754. // the combined list
  1755. var nextKeysPending = Object.create(null);
  1756. var pendingKeys = [];
  1757. for (var prevKey in prev) {
  1758. if (prevKey in next) {
  1759. if (pendingKeys.length) {
  1760. nextKeysPending[prevKey] = pendingKeys;
  1761. pendingKeys = [];
  1762. }
  1763. } else {
  1764. pendingKeys.push(prevKey);
  1765. }
  1766. }
  1767. var i;
  1768. var childMapping = {};
  1769. for (var nextKey in next) {
  1770. if (nextKeysPending[nextKey]) {
  1771. for (i = 0; i < nextKeysPending[nextKey].length; i++) {
  1772. var pendingNextKey = nextKeysPending[nextKey][i];
  1773. childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
  1774. }
  1775. }
  1776. childMapping[nextKey] = getValueForKey(nextKey);
  1777. } // Finally, add the keys which didn't appear before any key in `next`
  1778. for (i = 0; i < pendingKeys.length; i++) {
  1779. childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
  1780. }
  1781. return childMapping;
  1782. }
  1783. function getProp(child, prop, props) {
  1784. return props[prop] != null ? props[prop] : child.props[prop];
  1785. }
  1786. function getInitialChildMapping(props, onExited) {
  1787. return getChildMapping(props.children, function (child) {
  1788. return React.cloneElement(child, {
  1789. onExited: onExited.bind(null, child),
  1790. in: true,
  1791. appear: getProp(child, 'appear', props),
  1792. enter: getProp(child, 'enter', props),
  1793. exit: getProp(child, 'exit', props)
  1794. });
  1795. });
  1796. }
  1797. function getNextChildMapping(nextProps, prevChildMapping, onExited) {
  1798. var nextChildMapping = getChildMapping(nextProps.children);
  1799. var children = mergeChildMappings(prevChildMapping, nextChildMapping);
  1800. Object.keys(children).forEach(function (key) {
  1801. var child = children[key];
  1802. if (!React.isValidElement(child)) return;
  1803. var hasPrev = key in prevChildMapping;
  1804. var hasNext = key in nextChildMapping;
  1805. var prevChild = prevChildMapping[key];
  1806. var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
  1807. if (hasNext && (!hasPrev || isLeaving)) {
  1808. // console.log('entering', key)
  1809. children[key] = React.cloneElement(child, {
  1810. onExited: onExited.bind(null, child),
  1811. in: true,
  1812. exit: getProp(child, 'exit', nextProps),
  1813. enter: getProp(child, 'enter', nextProps)
  1814. });
  1815. } else if (!hasNext && hasPrev && !isLeaving) {
  1816. // item is old (exiting)
  1817. // console.log('leaving', key)
  1818. children[key] = React.cloneElement(child, {
  1819. in: false
  1820. });
  1821. } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
  1822. // item hasn't changed transition states
  1823. // copy over the last transition props;
  1824. // console.log('unchanged', key)
  1825. children[key] = React.cloneElement(child, {
  1826. onExited: onExited.bind(null, child),
  1827. in: prevChild.props.in,
  1828. exit: getProp(child, 'exit', nextProps),
  1829. enter: getProp(child, 'enter', nextProps)
  1830. });
  1831. }
  1832. });
  1833. return children;
  1834. }
  1835. var values = Object.values || function (obj) {
  1836. return Object.keys(obj).map(function (k) {
  1837. return obj[k];
  1838. });
  1839. };
  1840. var defaultProps = {
  1841. component: 'div',
  1842. childFactory: function childFactory(child) {
  1843. return child;
  1844. }
  1845. /**
  1846. * The `<TransitionGroup>` component manages a set of transition components
  1847. * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
  1848. * components, `<TransitionGroup>` is a state machine for managing the mounting
  1849. * and unmounting of components over time.
  1850. *
  1851. * Consider the example below. As items are removed or added to the TodoList the
  1852. * `in` prop is toggled automatically by the `<TransitionGroup>`.
  1853. *
  1854. * Note that `<TransitionGroup>` does not define any animation behavior!
  1855. * Exactly _how_ a list item animates is up to the individual transition
  1856. * component. This means you can mix and match animations across different list
  1857. * items.
  1858. */
  1859. };
  1860. var TransitionGroup =
  1861. /*#__PURE__*/
  1862. function (_React$Component) {
  1863. _inheritsLoose(TransitionGroup, _React$Component);
  1864. function TransitionGroup(props, context) {
  1865. var _this;
  1866. _this = _React$Component.call(this, props, context) || this;
  1867. var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Initial children should all be entering, dependent on appear
  1868. _this.state = {
  1869. handleExited: handleExited,
  1870. firstRender: true
  1871. };
  1872. return _this;
  1873. }
  1874. var _proto = TransitionGroup.prototype;
  1875. _proto.getChildContext = function getChildContext() {
  1876. return {
  1877. transitionGroup: {
  1878. isMounting: !this.appeared
  1879. }
  1880. };
  1881. };
  1882. _proto.componentDidMount = function componentDidMount() {
  1883. this.appeared = true;
  1884. this.mounted = true;
  1885. };
  1886. _proto.componentWillUnmount = function componentWillUnmount() {
  1887. this.mounted = false;
  1888. };
  1889. TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
  1890. var prevChildMapping = _ref.children,
  1891. handleExited = _ref.handleExited,
  1892. firstRender = _ref.firstRender;
  1893. return {
  1894. children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
  1895. firstRender: false
  1896. };
  1897. };
  1898. _proto.handleExited = function handleExited(child, node) {
  1899. var currentChildMapping = getChildMapping(this.props.children);
  1900. if (child.key in currentChildMapping) return;
  1901. if (child.props.onExited) {
  1902. child.props.onExited(node);
  1903. }
  1904. if (this.mounted) {
  1905. this.setState(function (state) {
  1906. var children = _extends({}, state.children);
  1907. delete children[child.key];
  1908. return {
  1909. children: children
  1910. };
  1911. });
  1912. }
  1913. };
  1914. _proto.render = function render() {
  1915. var _this$props = this.props,
  1916. Component = _this$props.component,
  1917. childFactory = _this$props.childFactory,
  1918. props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
  1919. var children = values(this.state.children).map(childFactory);
  1920. delete props.appear;
  1921. delete props.enter;
  1922. delete props.exit;
  1923. if (Component === null) {
  1924. return children;
  1925. }
  1926. return React__default.createElement(Component, props, children);
  1927. };
  1928. return TransitionGroup;
  1929. }(React__default.Component);
  1930. TransitionGroup.childContextTypes = {
  1931. transitionGroup: propTypes.object.isRequired
  1932. };
  1933. TransitionGroup.propTypes = {
  1934. /**
  1935. * `<TransitionGroup>` renders a `<div>` by default. You can change this
  1936. * behavior by providing a `component` prop.
  1937. * If you use React v16+ and would like to avoid a wrapping `<div>` element
  1938. * you can pass in `component={null}`. This is useful if the wrapping div
  1939. * borks your css styles.
  1940. */
  1941. component: propTypes.any,
  1942. /**
  1943. * A set of `<Transition>` components, that are toggled `in` and out as they
  1944. * leave. the `<TransitionGroup>` will inject specific transition props, so
  1945. * remember to spread them through if you are wrapping the `<Transition>` as
  1946. * with our `<Fade>` example.
  1947. *
  1948. * While this component is meant for multiple `Transition` or `CSSTransition`
  1949. * children, sometimes you may want to have a single transition child with
  1950. * content that you want to be transitioned out and in when you change it
  1951. * (e.g. routes, images etc.) In that case you can change the `key` prop of
  1952. * the transition child as you change its content, this will cause
  1953. * `TransitionGroup` to transition the child out and back in.
  1954. */
  1955. children: propTypes.node,
  1956. /**
  1957. * A convenience prop that enables or disables appear animations
  1958. * for all children. Note that specifying this will override any defaults set
  1959. * on individual children Transitions.
  1960. */
  1961. appear: propTypes.bool,
  1962. /**
  1963. * A convenience prop that enables or disables enter animations
  1964. * for all children. Note that specifying this will override any defaults set
  1965. * on individual children Transitions.
  1966. */
  1967. enter: propTypes.bool,
  1968. /**
  1969. * A convenience prop that enables or disables exit animations
  1970. * for all children. Note that specifying this will override any defaults set
  1971. * on individual children Transitions.
  1972. */
  1973. exit: propTypes.bool,
  1974. /**
  1975. * You may need to apply reactive updates to a child as it is exiting.
  1976. * This is generally done by using `cloneElement` however in the case of an exiting
  1977. * child the element has already been removed and not accessible to the consumer.
  1978. *
  1979. * If you do need to update a child as it leaves you can provide a `childFactory`
  1980. * to wrap every child, even the ones that are leaving.
  1981. *
  1982. * @type Function(child: ReactElement) -> ReactElement
  1983. */
  1984. childFactory: propTypes.func
  1985. };
  1986. TransitionGroup.defaultProps = defaultProps;
  1987. var TransitionGroup$1 = polyfill(TransitionGroup);
  1988. /**
  1989. * The `<ReplaceTransition>` component is a specialized `Transition` component
  1990. * that animates between two children.
  1991. *
  1992. * ```jsx
  1993. * <ReplaceTransition in>
  1994. * <Fade><div>I appear first</div></Fade>
  1995. * <Fade><div>I replace the above</div></Fade>
  1996. * </ReplaceTransition>
  1997. * ```
  1998. */
  1999. var ReplaceTransition =
  2000. /*#__PURE__*/
  2001. function (_React$Component) {
  2002. _inheritsLoose(ReplaceTransition, _React$Component);
  2003. function ReplaceTransition() {
  2004. var _this;
  2005. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  2006. _args[_key] = arguments[_key];
  2007. }
  2008. _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
  2009. _this.handleEnter = function () {
  2010. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  2011. args[_key2] = arguments[_key2];
  2012. }
  2013. return _this.handleLifecycle('onEnter', 0, args);
  2014. };
  2015. _this.handleEntering = function () {
  2016. for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
  2017. args[_key3] = arguments[_key3];
  2018. }
  2019. return _this.handleLifecycle('onEntering', 0, args);
  2020. };
  2021. _this.handleEntered = function () {
  2022. for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
  2023. args[_key4] = arguments[_key4];
  2024. }
  2025. return _this.handleLifecycle('onEntered', 0, args);
  2026. };
  2027. _this.handleExit = function () {
  2028. for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
  2029. args[_key5] = arguments[_key5];
  2030. }
  2031. return _this.handleLifecycle('onExit', 1, args);
  2032. };
  2033. _this.handleExiting = function () {
  2034. for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
  2035. args[_key6] = arguments[_key6];
  2036. }
  2037. return _this.handleLifecycle('onExiting', 1, args);
  2038. };
  2039. _this.handleExited = function () {
  2040. for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
  2041. args[_key7] = arguments[_key7];
  2042. }
  2043. return _this.handleLifecycle('onExited', 1, args);
  2044. };
  2045. return _this;
  2046. }
  2047. var _proto = ReplaceTransition.prototype;
  2048. _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
  2049. var _child$props;
  2050. var children = this.props.children;
  2051. var child = React__default.Children.toArray(children)[idx];
  2052. if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
  2053. if (this.props[handler]) this.props[handler](ReactDOM.findDOMNode(this));
  2054. };
  2055. _proto.render = function render() {
  2056. var _this$props = this.props,
  2057. children = _this$props.children,
  2058. inProp = _this$props.in,
  2059. props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
  2060. var _React$Children$toArr = React__default.Children.toArray(children),
  2061. first = _React$Children$toArr[0],
  2062. second = _React$Children$toArr[1];
  2063. delete props.onEnter;
  2064. delete props.onEntering;
  2065. delete props.onEntered;
  2066. delete props.onExit;
  2067. delete props.onExiting;
  2068. delete props.onExited;
  2069. return React__default.createElement(TransitionGroup$1, props, inProp ? React__default.cloneElement(first, {
  2070. key: 'first',
  2071. onEnter: this.handleEnter,
  2072. onEntering: this.handleEntering,
  2073. onEntered: this.handleEntered
  2074. }) : React__default.cloneElement(second, {
  2075. key: 'second',
  2076. onEnter: this.handleExit,
  2077. onEntering: this.handleExiting,
  2078. onEntered: this.handleExited
  2079. }));
  2080. };
  2081. return ReplaceTransition;
  2082. }(React__default.Component);
  2083. ReplaceTransition.propTypes = {
  2084. in: propTypes.bool.isRequired,
  2085. children: function children(props, propName) {
  2086. if (React__default.Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
  2087. return null;
  2088. }
  2089. };
  2090. exports.CSSTransition = CSSTransition;
  2091. exports.ReplaceTransition = ReplaceTransition;
  2092. exports.Transition = Transition$1;
  2093. exports.TransitionGroup = TransitionGroup$1;
  2094. Object.defineProperty(exports, '__esModule', { value: true });
  2095. }));