mirror of
https://github.com/trezor/trezor-wallet
synced 2025-01-27 08:21:27 +00:00
set minHeight to fix rendering of devicemenu for unitialized device
This commit is contained in:
parent
9f190dc993
commit
cc41a963cd
@ -54,6 +54,7 @@ class DeviceMenu extends PureComponent<Props> {
|
||||
super(props);
|
||||
this.mouseDownHandler = this.mouseDownHandler.bind(this);
|
||||
this.blurHandler = this.blurHandler.bind(this);
|
||||
this.myRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
@ -85,6 +86,10 @@ class DeviceMenu extends PureComponent<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
getMenuHeight(): number {
|
||||
return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0;
|
||||
}
|
||||
|
||||
blurHandler(): void {
|
||||
this.props.toggleDeviceDropdown(false);
|
||||
}
|
||||
@ -118,13 +123,15 @@ class DeviceMenu extends PureComponent<Props> {
|
||||
return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice);
|
||||
}
|
||||
|
||||
myRef: { current: ?HTMLDivElement }
|
||||
|
||||
render() {
|
||||
const { devices, onSelectDevice, forgetDevice } = this.props;
|
||||
const { transport } = this.props.connect;
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Wrapper ref={this.myRef}>
|
||||
{this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
|
||||
{this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
|
||||
<DeviceList
|
||||
|
@ -56,6 +56,7 @@ const Footer = styled.div.attrs(props => ({
|
||||
|
||||
const Body = styled.div`
|
||||
width: 320px;
|
||||
min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')};
|
||||
`;
|
||||
|
||||
const Help = styled.div`
|
||||
@ -109,45 +110,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGro
|
||||
|
||||
type State = {
|
||||
animationType: ?string;
|
||||
shouldRenderDeviceSelection: boolean;
|
||||
clicked: boolean;
|
||||
bodyMinHeight: number;
|
||||
}
|
||||
|
||||
class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.deviceMenuRef = React.createRef();
|
||||
const { location } = this.props.router;
|
||||
const hasNetwork = location && location.state && location.state.network;
|
||||
this.state = {
|
||||
animationType: hasNetwork ? 'slide-left' : null,
|
||||
shouldRenderDeviceSelection: false,
|
||||
clicked: false,
|
||||
bodyMinHeight: 0,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.recalculateBodyMinHeight();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: Props) {
|
||||
const { dropdownOpened, selectedDevice } = nextProps.wallet;
|
||||
const { selectedDevice } = nextProps.wallet;
|
||||
const { location } = nextProps.router;
|
||||
const hasNetwork = location && location.state.network;
|
||||
const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal';
|
||||
if (dropdownOpened) {
|
||||
this.setState({ shouldRenderDeviceSelection: true });
|
||||
} else {
|
||||
this.setState({ shouldRenderDeviceSelection: false });
|
||||
}
|
||||
|
||||
if (hasNetwork) {
|
||||
this.setState({
|
||||
// shouldRenderDeviceSelection: false,
|
||||
animationType: 'slide-left',
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
// shouldRenderDeviceSelection: false,
|
||||
animationType: deviceReady ? 'slide-right' : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.recalculateBodyMinHeight();
|
||||
}
|
||||
|
||||
shouldRenderAccounts() {
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
const { location } = this.props.router;
|
||||
@ -167,6 +171,16 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
return this.state.animationType !== 'slide-left';
|
||||
}
|
||||
|
||||
recalculateBodyMinHeight() {
|
||||
if (this.deviceMenuRef.current) {
|
||||
this.setState({
|
||||
bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
deviceMenuRef: { current: any };
|
||||
|
||||
render() {
|
||||
const { props } = this;
|
||||
let menu;
|
||||
@ -184,7 +198,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
);
|
||||
}
|
||||
|
||||
const { selectedDevice } = props.wallet;
|
||||
const { selectedDevice, dropdownOpened } = props.wallet;
|
||||
const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
|
||||
return (
|
||||
<StickyContainer
|
||||
@ -219,8 +233,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
)}
|
||||
{...this.props}
|
||||
/>
|
||||
<Body>
|
||||
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
|
||||
<Body minHeight={this.state.bodyMinHeight}>
|
||||
{dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
|
||||
{isDeviceAccessible && menu}
|
||||
</Body>
|
||||
<Footer key="sticky-footer">
|
||||
|
Loading…
Reference in New Issue
Block a user