|
|
|
|
@ -24,15 +24,15 @@ const TransitionContentWrapper = styled.div`
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Footer = styled.div`
|
|
|
|
|
position: fixed;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 320px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: ${colors.MAIN};
|
|
|
|
|
border-right: 1px solid ${colors.DIVIDER};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Body = styled.div`
|
|
|
|
|
overflow: auto;
|
|
|
|
|
background: ${colors.LANDING};
|
|
|
|
|
width: 320px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Help = styled.div`
|
|
|
|
|
@ -58,6 +58,25 @@ const A = styled.a`
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
|
|
|
|
|
<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>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
class LeftNavigation extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
@ -96,39 +115,6 @@ class LeftNavigation extends Component {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// TODO: refactor to transition component for reuse of transitions
|
|
|
|
|
getMenuTransition(children) {
|
|
|
|
|
return (
|
|
|
|
|
<TransitionGroupWrapper component="div" className="transition-container">
|
|
|
|
|
<CSSTransition
|
|
|
|
|
key={this.state.animationType}
|
|
|
|
|
onEnter={() => {
|
|
|
|
|
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
|
|
|
|
|
>
|
|
|
|
|
<TransitionContentWrapper>
|
|
|
|
|
{children}
|
|
|
|
|
</TransitionContentWrapper>
|
|
|
|
|
</CSSTransition>
|
|
|
|
|
</TransitionGroupWrapper>);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
shouldRenderAccounts() {
|
|
|
|
|
const { selectedDevice } = this.props.wallet;
|
|
|
|
|
return selectedDevice
|
|
|
|
|
@ -148,6 +134,22 @@ class LeftNavigation extends Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { props } = this;
|
|
|
|
|
let menu;
|
|
|
|
|
if (this.shouldRenderAccounts()) {
|
|
|
|
|
menu = (
|
|
|
|
|
<TransitionMenu animationType="slide-left">
|
|
|
|
|
<AccountMenu {...props} />
|
|
|
|
|
</TransitionMenu>
|
|
|
|
|
);
|
|
|
|
|
} else if (this.shouldRenderCoins()) {
|
|
|
|
|
menu = (
|
|
|
|
|
<TransitionMenu animationType="slide-right">
|
|
|
|
|
<CoinMenu {...props} />
|
|
|
|
|
</TransitionMenu>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<StickyContainer
|
|
|
|
|
location={this.props.location.pathname}
|
|
|
|
|
@ -163,8 +165,7 @@ class LeftNavigation extends Component {
|
|
|
|
|
/>
|
|
|
|
|
<Body>
|
|
|
|
|
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
|
|
|
|
|
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
|
|
|
|
|
{this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
|
|
|
|
|
{menu}
|
|
|
|
|
</Body>
|
|
|
|
|
<Footer className="sticky-bottom">
|
|
|
|
|
<Help>
|
|
|
|
|
|
Vladimir Volek
6 years ago