1
0
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:
slowbackspace 2019-01-22 12:57:10 +01:00
parent 9f190dc993
commit cc41a963cd
2 changed files with 35 additions and 14 deletions

View File

@ -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

View File

@ -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">