height of the overlay without js calc

5 years ago · 7f0b1373e3
parent 5f883bfeb8
commit 7f0b1373e3
2 changed files with 4 additions and 26 deletions
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@ -14,15 +14,10 @@ import l10nCommonMessages from 'views/common.messages';
 import MenuItems from './components/MenuItems';
 import DeviceList from './components/DeviceList';

-import type { Props as BaseProps } from '../common';
+import type { Props } from '../common';

 import Divider from '../Divider';

-type OwnProps = {
-    overlayHeight: number,
-};
-type Props = BaseProps & OwnProps;
-
 const Wrapper = styled.div`
    position: absolute;
    z-index: 1;
@ -37,7 +32,7 @@ const Wrapper = styled.div`
 const Overlay = styled.div`
    position: absolute;
    width: 100%;
-    height: ${props => `${props.height}px`};
+    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    animation: ${FADE_IN} 0.25s;
 `;
@ -156,7 +151,6 @@ class DeviceMenu extends PureComponent<Props> {
                    onClick={() => {
                        toggleDeviceDropdown(!dropdownOpened);
                    }}
-                    height={this.props.overlayHeight}
                />
            </>
        );
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@ -163,21 +163,18 @@ type State = {
    animationType: ?string,
    clicked: boolean,
    bodyMinHeight: number,
-    bodyHeight: number,
 };

 class LeftNavigation extends React.PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        this.deviceMenuRef = React.createRef();
-        this.leftMenuBodyRef = React.createRef();
        const { location } = this.props.router;
        const hasNetwork = location && location.state && location.state.network;
        this.state = {
            animationType: hasNetwork ? 'slide-left' : null,
            clicked: false,
            bodyMinHeight: 0,
-            bodyHeight: 0,
        };
    }

@ -234,17 +231,10 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
            });
        }
-        if (this.leftMenuBodyRef.current) {
-            this.setState({
-                bodyHeight: this.leftMenuBodyRef.current.getBoundingClientRect().height,
-            });
-        }
    }

    deviceMenuRef: { current: any };

-    leftMenuBodyRef: { current: any };
-
    render() {
        const { props } = this;
        let menu;
@ -376,14 +366,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                        }
                        {...this.props}
                    />
-                    <Body ref={this.leftMenuBodyRef} minHeight={this.state.bodyMinHeight}>
-                        {dropdownOpened && (
-                            <DeviceMenu
-                                ref={this.deviceMenuRef}
-                                overlayHeight={this.state.bodyHeight}
-                                {...this.props}
-                            />
-                        )}
+                    <Body minHeight={this.state.bodyMinHeight}>
+                        {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
                        {isDeviceAccessible && menu}
                    </Body>
                    <Footer data-test="Main__page__footer" key="sticky-footer">