Replace Map.tsx onLayout to componentDidMount/Update

2 files changed, 45 insertions, 24 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 55bc49c53a..f4070c459f 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Component, Styles, View } from 'reactxp';
+import styled from 'styled-components';
 import AccountExpiry from '../../shared/account-expiry';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
 import NotificationAreaContainer from '../containers/NotificationAreaContainer';
@@ -27,19 +28,19 @@ interface IProps {
 
 type MarkerOrSpinner = 'marker' | 'spinner';
 
+const StyledMap = styled(Map)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 0,
+});
+
 const styles = {
   connect: Styles.createViewStyle({
     flex: 1,
   }),
-  map: Styles.createViewStyle({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    // @ts-ignore
-    zIndex: 0,
-  }),
   body: Styles.createViewStyle({
     flex: 1,
     paddingTop: 0,
@@ -144,7 +145,7 @@ export default class Connect extends Component<IProps, IState> {
   private renderMap() {
     return (
       <View style={styles.connect}>
-        <Map style={styles.map} {...this.getMapProps()} />
+        <StyledMap {...this.getMapProps()} />
         <View style={styles.container}>
           {/* show spinner when connecting */}
           {this.showMarkerOrSpinner() === 'spinner' ? (
diff --git a/gui/src/renderer/components/Map.tsx b/gui/src/renderer/components/Map.tsx
index c22085c8be..8bc78b4b68 100644
--- a/gui/src/renderer/components/Map.tsx
+++ b/gui/src/renderer/components/Map.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { Component, Types, View } from 'reactxp';
-
 import SvgMap from './SvgMap';
 
 // Higher zoom level is more zoomed in
@@ -21,7 +19,7 @@ interface IProps {
   zoomLevel: ZoomLevel;
   showMarker: boolean;
   markerStyle: MarkerStyle;
-  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
+  className?: string;
 }
 
 interface IState {
@@ -31,7 +29,9 @@ interface IState {
   };
 }
 
-export default class Map extends Component<IProps, IState> {
+export default class Map extends React.Component<IProps, IState> {
+  private containerRef = React.createRef<HTMLDivElement>();
+
   public state: IState = {
     bounds: {
       width: 0,
@@ -43,7 +43,7 @@ export default class Map extends Component<IProps, IState> {
     const { width, height } = this.state.bounds;
     const readyToRenderTheMap = width > 0 && height > 0;
     return (
-      <View style={this.props.style} onLayout={this.onLayout}>
+      <div className={this.props.className} ref={this.containerRef}>
         {readyToRenderTheMap && (
           <SvgMap
             width={width}
@@ -55,10 +55,18 @@ export default class Map extends Component<IProps, IState> {
             markerImagePath={this.markerImage(this.props.markerStyle)}
           />
         )}
-      </View>
+      </div>
     );
   }
 
+  public componentDidMount() {
+    this.updateBounds();
+  }
+
+  public componentDidUpdate() {
+    this.updateBounds();
+  }
+
   public shouldComponentUpdate(nextProps: IProps, nextState: IState) {
     const oldProps = this.props;
     const oldState = this.state;
@@ -75,14 +83,26 @@ export default class Map extends Component<IProps, IState> {
     );
   }
 
-  private onLayout = (layoutInfo: Types.ViewOnLayoutEvent) => {
-    this.setState({
-      bounds: {
-        width: layoutInfo.width,
-        height: layoutInfo.height,
-      },
-    });
-  };
+  private updateBounds() {
+    const containerRect = this.containerRef.current?.getBoundingClientRect();
+    if (containerRect) {
+      this.setState((state) => {
+        if (
+          containerRect.width === state.bounds.width &&
+          containerRect.height === state.bounds.height
+        ) {
+          return null;
+        } else {
+          return {
+            bounds: {
+              width: containerRect.width,
+              height: containerRect.height,
+            },
+          };
+        }
+      });
+    }
+  }
 
   // TODO: Remove zoom level in favor of center + coordinate span
   // TODO: Zoomlevels below 2.22 makes australia invisible