diff --git a/demos/demo0/Demo.js b/demos/demo0/Demo.js
index 332320e..b1c2487 100644
--- a/demos/demo0/Demo.js
+++ b/demos/demo0/Demo.js
@@ -9,9 +9,11 @@ const contentBoxStyle = {
};
const transitionConfig = {
- transitionName: 'fadeTransition',
- transitionEnterTimeout: 300,
- transitionLeaveTimeout: 300,
+ classNames: 'fadeTransition',
+ timeout: {
+ enter: 300,
+ exit: 300,
+ },
};
class Demo extends Component {
diff --git a/index.d.ts b/index.d.ts
index 411f10c..60ab2bd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,10 +1,14 @@
import * as React from 'react'
declare module 'react-loader-advanced' {
+ interface Timeout {
+ enter: number
+ exit: number
+ }
+
interface TransitionConfig {
- transitionName: string
- transitionEnterTimeout: number
- transitionLeaveTimeout: number
+ classNames: string
+ timeout: number | Timeout
}
interface Props {
diff --git a/package.json b/package.json
index b5fa225..06117f7 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
"dependencies": {
"babel-runtime": "^6.10.0",
"prop-types": "^15.5.6",
- "react-transition-group": "^1.2.0",
+ "react-transition-group": "^2.0.0",
"wolfy87-eventemitter": "^5.2.2"
},
"peerDependencies": {
diff --git a/src/react-loader-advanced.js b/src/react-loader-advanced.js
index 238a24e..7383288 100644
--- a/src/react-loader-advanced.js
+++ b/src/react-loader-advanced.js
@@ -7,7 +7,8 @@
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
import EventEmitter from 'wolfy87-eventemitter';
function uid() {
@@ -120,9 +121,14 @@ const createLoader = loaderStack => class Loader extends Component {
style: PropTypes.object,
transitionConfig: PropTypes.shape({
- transitionName: PropTypes.string.isRequired,
- transitionEnterTimeout: PropTypes.number.isRequired,
- transitionLeaveTimeout: PropTypes.number.isRequired,
+ classNames: PropTypes.string.isRequired,
+ timeout: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.shape({
+ enter: PropTypes.number,
+ exit: PropTypes.number,
+ }),
+ ]).isRequired,
}),
}
@@ -245,9 +251,13 @@ const createLoader = loaderStack => class Loader extends Component {
{transitionConfig ? (
-
- {loaderElement}
-
+
+ {loaderElement && (
+
+ {loaderElement}
+
+ )}
+
) : loaderElement}
);
diff --git a/yarn.lock b/yarn.lock
index 077fdde..7e023c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1373,10 +1373,6 @@ center-align@^0.1.1:
align-text "^0.1.3"
lazy-cache "^1.0.3"
-chain-function@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1830,9 +1826,9 @@ doctrine@^2.0.0:
esutils "^2.0.2"
isarray "^1.0.0"
-dom-helpers@^3.2.0:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+dom-helpers@^3.3.1:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-serialize@^2.2.0:
version "2.2.1"
@@ -3090,6 +3086,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+"js-tokens@^3.0.0 || ^4.0.0":
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+ integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
js-yaml@^3.9.1:
version "3.10.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
@@ -3357,6 +3358,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
dependencies:
js-tokens "^3.0.0"
+loose-envify@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+ integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+ dependencies:
+ js-tokens "^3.0.0 || ^4.0.0"
+
loud-rejection@^1.0.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -4026,6 +4034,14 @@ prop-types@^15.5.10, prop-types@^15.5.6:
loose-envify "^1.3.1"
object-assign "^4.1.1"
+prop-types@^15.6.2:
+ version "15.6.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+ integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+ dependencies:
+ loose-envify "^1.3.1"
+ object-assign "^4.1.1"
+
prop-types@~15.5.0:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
@@ -4149,15 +4165,20 @@ react-hot-loader@1.3.1:
react-hot-api "^0.4.5"
source-map "^0.4.4"
-react-transition-group@^1.2.0:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+react-lifecycles-compat@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+ integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-transition-group@^2.0.0:
+ version "2.5.2"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.2.tgz#9457166a9ba6ce697a3e1b076b3c049b9fb2c408"
+ integrity sha512-vwHP++S+f6KL7rg8V1mfs62+MBKtbMeZDR8KiNmD7v98Gs3UPGsDZDahPJH2PVprFW5YHJfh6cbNim3zPndaSQ==
dependencies:
- chain-function "^1.0.0"
- dom-helpers "^3.2.0"
- loose-envify "^1.3.1"
- prop-types "^15.5.6"
- warning "^3.0.0"
+ dom-helpers "^3.3.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+ react-lifecycles-compat "^3.0.4"
react@15.5.0:
version "15.5.0"
@@ -5027,12 +5048,6 @@ void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-warning@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
- dependencies:
- loose-envify "^1.0.0"
-
watchpack@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"