Rewrited navigation rendering

src/js/views/Wallet/components/LeftNavigation/NavigationMenu/AccountMenu/index.js

@@ -71,6 +71,7 @@ RowAccount.propTypes = {
 
 const AccountMenu = (props: Props): ?React$Element<string> => {
     const selected = props.wallet.selectedDevice;
+    console.warn('selected', selected);
     if (!selected) return null;
 
     const { location } = props.router;

src/js/views/Wallet/components/LeftNavigation/index.js

@@ -1,115 +1,121 @@
 /* @flow */
-import * as React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import colors from 'config/colors';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
 
 import type { TrezorDevice } from 'flowtype';
 import {
-    AccountMenu,
-    CoinMenu,
-    DeviceSelect,
-    DeviceDropdown,
+    AccountMenu, CoinMenu, DeviceSelect, DeviceDropdown,
 } from './NavigationMenu';
 import StickyContainer from './StickyContainer';
 
-import type { Props } from './common';
-
-type TransitionMenuProps = {
-    animationType: string;
-    children?: React.Node;
-}
-
 const TransitionGroupWrapper = styled(TransitionGroup)`
     width: 640px;
 `;
+
 const TransitionContentWrapper = styled.div`
     width: 320px;
     display: inline-block;
     vertical-align: top;
 `;
 
-const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => {
-    return (
-        <TransitionGroupWrapper component="div" className="transition-container">
-            <CSSTransition
-                key={props.animationType}
-                onExit={() => { window.dispatchEvent(new Event('resize')); }}
-                onExited={() => window.dispatchEvent(new Event('resize'))}
-                in
-                out
-                classNames={props.animationType}
-                appear={false}
-                timeout={300}
-            >
-                <TransitionContentWrapper>
-                    {props.children}
-                </TransitionContentWrapper>
-            </CSSTransition>
-        </TransitionGroupWrapper>
-    );
-};
+const StickyBottom = styled.div`
+    position: fixed;
+    bottom: 0;
+    background: ${colors.MAIN};
+    border-right: 1px solid ${colors.DIVIDER};
+`;
+
+const MenuWrapper = styled.div``;
 
+const Help = styled.div``;
 
-const LeftNavigation = (props: Props): React$Element<typeof StickyContainer | string> => {
-    const selected: ?TrezorDevice = props.wallet.selectedDevice;
-    const { location } = props.router;
-
-    if (location.pathname === '/' || !selected) return (<aside />);
-
-    let menu = <section />;
-
-    let shouldRenderDeviceSelection = false;
-    // let shouldRenderCoins = false;
-    // let shouldRenderAccounts = false;
-
-    let animationType = '';
-    if (props.deviceDropdownOpened) {
-        shouldRenderDeviceSelection = true;
-        // menu = <DeviceDropdown {...props} />;
-    } else if (location.state.network) {
-        // shouldRenderAccounts = true;
-        shouldRenderDeviceSelection = false;
-        animationType = 'slide-left';
-        // menu = (
-        //     <TransitionMenu animationType="slide-left">
-        //         <AccountMenu {...props} />
-        //     </TransitionMenu>
-        // );
-    } else if (selected.features && !selected.features.bootloader_mode && selected.features.initialized) {
-        // shouldRenderCoins = true;
-        shouldRenderDeviceSelection = false;
-        animationType = 'slide-right';
-        // menu = (
-        //     <TransitionMenu animationType="slide-right">
-        //         <CoinMenu {...props} />
-        //     </TransitionMenu>
-        // );
+class LeftNavigation extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            animationType: null,
+            shouldRenderDeviceSelection: false,
+        };
     }
 
-    return (
-        <StickyContainer location={location.pathname} deviceSelection={props.deviceDropdownOpened}>
-            <DeviceSelect {...props} />
-            {/* { menu } */}
+    componentWillReceiveProps() {
+        const { selectedDevice } = this.props.wallet;
+        const hasFeatures = selectedDevice && selectedDevice.features;
+
+        if (this.props.deviceDropdownOpened) {
+            this.setState({ shouldRenderDeviceSelection: true });
+        } else if (this.props.location.network) {
+            this.setState({
+                shouldRenderDeviceSelection: false,
+                animationType: 'slide-left',
+            });
+        } else if (selectedDevice && hasFeatures && !selectedDevice.features.bootloader_mode && selectedDevice.features.initialized) {
+            this.setState({
+                shouldRenderDeviceSelection: false,
+                animationType: 'slide-right',
+            });
+        }
+    }
 
-            {shouldRenderDeviceSelection ? (
-                <DeviceDropdown {...props} />
-            ) : (
-                <TransitionMenu
-                    animationType={animationType}
+    // TODO: refactor to transition component for reuse of transitions
+    getMenuTransition(children) {
+        return (
+            <TransitionGroupWrapper component="div" className="transition-container">
+                <CSSTransition
+                    key={this.state.animationType}
+                    onExit={() => { window.dispatchEvent(new Event('resize')); }}
+                    onExited={() => window.dispatchEvent(new Event('resize'))}
+                    in
+                    out
+                    classNames={this.state.animationType}
+                    appear={false}
+                    timeout={300}
                 >
-                    {animationType === 'slide-left' && <AccountMenu key="accounts" {...props} />}
-                    {animationType === 'slide-right' && <CoinMenu key="coins" {...props} />}
-                </TransitionMenu>
-            )}
-
-
-            <div className="sticky-bottom">
-                <div className="help">
-                    <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
-                </div>
-            </div>
-        </StickyContainer>
-    );
+                    <TransitionContentWrapper>
+                        {children}
+                    </TransitionContentWrapper>
+                </CSSTransition>
+            </TransitionGroupWrapper>);
+    }
+
+    shouldRenderAccounts() {
+        return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-left';
+    }
+
+    shouldRenderCoins() {
+        return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-right';
+    }
+
+    render() {
+        return (
+            <StickyContainer
+                location={this.props.location.pathname}
+                deviceSelection={this.props.deviceDropdownOpened}
+            >
+                <DeviceSelect {...this.props} />
+                <MenuWrapper>
+                    {this.state.shouldRenderDeviceSelection && this.getMenuTransition(<DeviceDropdown {...this.props} />) }
+                    {/* {this.shouldRenderAccounts && <AccountMenu key="accounts" {...this.props} />} */}
+                    {this.shouldRenderCoins && <CoinMenu key="coins" {...this.props} />}
+                </MenuWrapper>
+                <StickyBottom>
+                    <Help className="help">
+                        <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
+                    </Help>
+                </StickyBottom>
+            </StickyContainer>
+        );
+    }
+}
+
+LeftNavigation.propTypes = {
+    selectedDevice: PropTypes.object,
+    wallet: PropTypes.object,
+    deviceDropdownOpened: PropTypes.bool,
 };
 
+
 export default LeftNavigation;