diff --git a/package.json b/package.json
index 3c57abf3..6d073dd9 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
"react-router-redux": "next",
"react-scale-text": "^1.2.2",
"react-select": "2.0.0",
- "react-transition-group": "^2.2.1",
+ "react-transition-group": "^2.4.0",
"redbox-react": "^1.6.0",
"redux": "4.0.0",
"redux-logger": "^3.0.6",
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index 15d2821f..62cbf8d7 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -58,6 +58,29 @@ const A = styled.a`
}
`;
+const Transition = ({ children, animationType }) => (
+
+ {
+ console.log('ON EXIT');
+ window.dispatchEvent(new Event('resize'));
+ }}
+ onEntering={el => console.warn('Entering', el)}
+ onExited={() => window.dispatchEvent(new Event('resize'))}
+ classNames={animationType}
+ appear={false}
+ timeout={20000}
+ in
+ out
+ >
+
+ {children}
+
+
+
+);
+
class LeftNavigation extends Component {
constructor(props) {
super(props);
@@ -96,39 +119,6 @@ class LeftNavigation extends Component {
}
}
- // TODO: refactor to transition component for reuse of transitions
- getMenuTransition(children) {
- return (
-
- {
- console.warn('ON ENTER');
- }}
- onEntering={() => {
- console.warn('ON ENTERING (ACTIVE)');
- }}
- onExit={() => {
- console.warn('ON EXIT');
- window.dispatchEvent(new Event('resize'));
- }}
- onExiting={() => {
- console.warn('ON EXITING (ACTIVE)');
- }}
- onExited={() => window.dispatchEvent(new Event('resize'))}
- classNames={this.state.animationType}
- appear={false}
- timeout={30000}
- in
- out
- >
-
- {children}
-
-
- );
- }
-
shouldRenderAccounts() {
const { selectedDevice } = this.props.wallet;
return selectedDevice
@@ -163,8 +153,16 @@ class LeftNavigation extends Component {
/>
{this.state.shouldRenderDeviceSelection && }
- {this.shouldRenderAccounts() && this.getMenuTransition()}
- {this.shouldRenderCoins() && this.getMenuTransition()}
+ {this.shouldRenderAccounts() && (
+
+
+
+ )}
+ {this.shouldRenderCoins() && (
+
+
+
+ )}