|
|
|
/* @flow */
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
//import React, { Node } from 'react';
|
|
|
|
import * as React from 'react';
|
|
|
|
import { Link, NavLink } from 'react-router-dom';
|
|
|
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
|
|
|
|
|
|
import { DeviceSelect, DeviceDropdown } from './DeviceSelection';
|
|
|
|
import AccountSelection from './AccountSelection';
|
|
|
|
import CoinSelection from './CoinSelection';
|
|
|
|
import StickyContainer from './StickyContainer';
|
|
|
|
import { findSelectedDevice } from '~/js/reducers/TrezorConnectReducer';
|
|
|
|
|
|
|
|
import type { Props } from './index';
|
|
|
|
import type { TrezorDevice } from '~/flowtype';
|
|
|
|
|
|
|
|
|
|
|
|
type TransitionMenuProps = {
|
|
|
|
animationType: string;
|
|
|
|
children?: React.Node;
|
|
|
|
}
|
|
|
|
|
|
|
|
const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => {
|
|
|
|
return (
|
|
|
|
<TransitionGroup component="div" className="transition-container">
|
|
|
|
<CSSTransition
|
|
|
|
key={ props.animationType }
|
|
|
|
onExit= { () => { window.dispatchEvent( new Event('resize') ) } }
|
|
|
|
onExited= { () => window.dispatchEvent( new Event('resize') ) }
|
|
|
|
in={ true }
|
|
|
|
out={ true }
|
|
|
|
classNames={ props.animationType }
|
|
|
|
appear={false}
|
|
|
|
timeout={ 300 }>
|
|
|
|
{ props.children }
|
|
|
|
</CSSTransition>
|
|
|
|
</TransitionGroup>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const Aside = (props: Props): React$Element<typeof StickyContainer | string> => {
|
|
|
|
|
|
|
|
const selected: ?TrezorDevice = findSelectedDevice(props.connect);
|
|
|
|
const { location } = props.router;
|
|
|
|
|
|
|
|
if (location.pathname === '/' || !selected) return (<aside></aside>);
|
|
|
|
|
|
|
|
let menu = <section></section>;
|
|
|
|
|
|
|
|
if (props.deviceDropdownOpened) {
|
|
|
|
menu = <DeviceDropdown {...props} />;
|
|
|
|
} else if (location.state.network) {
|
|
|
|
menu = (
|
|
|
|
<TransitionMenu animationType={ "slide-left" }>
|
|
|
|
<AccountSelection { ...props} />
|
|
|
|
</TransitionMenu>
|
|
|
|
);
|
|
|
|
} else if (!selected.unacquired) {
|
|
|
|
menu = (
|
|
|
|
<TransitionMenu animationType={ "slide-right" }>
|
|
|
|
<CoinSelection { ...props} />
|
|
|
|
</TransitionMenu>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StickyContainer location={ location.pathname } deviceSelection={ props.deviceDropdownOpened }>
|
|
|
|
<DeviceSelect {...props} />
|
|
|
|
{ menu }
|
|
|
|
<div className="sticky-bottom">
|
|
|
|
<div className="help">
|
|
|
|
<a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</StickyContainer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Aside;
|