import React, { Component } from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import Icon from 'components/Icon';
import icons from 'config/icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import styled from 'styled-components';
import AccountMenu from './components/AccountMenu';
import CoinMenu from './components/CoinMenu';
import { DeviceSelect, DeviceDropdown } from './components/DeviceMenu';
import StickyContainer from './components/StickyContainer';
const TransitionGroupWrapper = styled(TransitionGroup)`
width: 640px;
`;
const TransitionContentWrapper = styled.div`
width: 320px;
display: inline-block;
vertical-align: top;
`;
const StickyBottom = styled.div`
position: fixed;
bottom: 0;
background: ${colors.MAIN};
`;
const MenuWrapper = styled.div`
background: ${colors.LANDING};
`;
const Help = styled.div`
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 319px;
padding: 8px 0px;
border-top: 1px solid ${colors.DIVIDER};
&.fixed {
position: fixed;
bottom: 0px;
}
`;
const A = styled.a`
color: ${colors.TEXT_SECONDARY};
font-size: 12px;
display: inline-block;
padding: 8px;
height: auto;
&:hover {
background: transparent;
color: ${colors.TEXT_PRIMARY};
}
`;
class LeftNavigation extends Component {
constructor(props) {
super(props);
this.state = {
animationType: null,
shouldRenderDeviceSelection: false,
};
}
componentDidMount() {
this.setState({
animationType: null,
shouldRenderDeviceSelection: false,
});
}
componentWillReceiveProps(nextProps) {
const { deviceDropdownOpened } = nextProps;
const { selectedDevice } = nextProps.wallet;
const hasNetwork = nextProps.location.state && nextProps.location.state.network;
const hasFeatures = selectedDevice && selectedDevice.features;
const deviceReady = hasFeatures && !selectedDevice.features.bootloader_mode && selectedDevice.features.initialized;
if (deviceDropdownOpened) {
this.setState({ shouldRenderDeviceSelection: true });
} else if (hasNetwork) {
this.setState({
shouldRenderDeviceSelection: false,
animationType: 'slide-left',
});
} else if (deviceReady) {
this.setState({
shouldRenderDeviceSelection: false,
animationType: 'slide-right',
});
}
}
// 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
&& this.props.location
&& this.props.location.state
&& this.props.location.state.network
&& !this.state.shouldRenderDeviceSelection
&& this.state.animationType === 'slide-left';
}
shouldRenderCoins() {
return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-right';
}
render() {
const { selectedDevice } = this.props.wallet;
return (
{selectedDevice && }
{this.state.shouldRenderDeviceSelection && }
{this.shouldRenderAccounts() && this.getMenuTransition()}
{this.shouldRenderCoins() && this.getMenuTransition()}
Need help?
);
}
}
LeftNavigation.propTypes = {
selectedDevice: PropTypes.object,
wallet: PropTypes.object,
deviceDropdownOpened: PropTypes.bool,
};
export default LeftNavigation;