Improved map rendering

Allow to swipe sidebar over map
kiwigrid · Dec 7, 2021 · f422fdf · f422fdf
1 parent bb4033e
commit f422fdf
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 14 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -455,8 +455,9 @@ function createAppDrawerNavigator(props: BaseProps) {
         headerShown: false,
         drawerType: 'front',
         swipeEnabled: false,
-        swipeEdgeWidth: 20,
-        unmountOnBlur: false
+        swipeEdgeWidth: scale(50),
+        unmountOnBlur: false,
+
       })}
       backBehavior={'history'}
       drawerPosition="left"

diff --git a/src/components/header/HeaderComponent.tsx b/src/components/header/HeaderComponent.tsx
@@ -100,7 +100,7 @@ export default class HeaderComponent extends React.Component<Props, State> {
         </View>
         <View style={style.actionsContainer}>
           {actions?.map((action, index) => (
-            <TouchableOpacity style={style.action} key={index} onPress={action.onPress}>
+            <TouchableOpacity delayPressIn={0} style={style.action} key={index} onPress={action.onPress}>
               {action.renderAction?.()}
             </TouchableOpacity>
           ))}

diff --git a/src/components/map/ClusterMap.tsx b/src/components/map/ClusterMap.tsx
@@ -41,6 +41,7 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
     const style = computeStyleSheet();
     return (
       <View style={style.map}>
+        <View style={style.mapOverlay} />
         {initialRegion && (
           <MapView
             customMapStyle={isDarkModeEnabled ? this.darkMapTheme : null}
@@ -56,7 +57,7 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
             spiderLineColor={commonColors.textColor}
             mapType={satelliteMap ? 'satellite' : 'standard'}
             initialRegion={initialRegion}
-            onRegionChangeComplete={onMapRegionChangeComplete}
+            onRegionChangeComplete={(region) => onMapRegionChangeComplete(region)}
           >
             {items.map((item, index) => (
               renderMarker?.(item, index)
@@ -68,11 +69,9 @@ export default class ClusterMap<T extends Localizable> extends React.Component<P
   }
 
   private computeRadius(latitudeDelta: number): number {
-    if(latitudeDelta <= 0.0005) {
-      return 5
-    } else if(latitudeDelta <= 0.001 ) {
-      return 20
+    if (latitudeDelta <= 0.0005) {
+      return 5;
     }
-    return 30
+    return 30;
   }
 }
diff --git a/src/components/map/ClusterMapStyle.tsx b/src/components/map/ClusterMapStyle.tsx
@@ -8,6 +8,12 @@ export default function computeStyleSheet(): StyleSheet.NamedStyles<any> {
     map: {
       width: '100%',
       height: '100%'
+    },
+    mapOverlay: {
+      width: '50@s',
+      position: 'absolute',
+      zIndex: 1,
+      height: '100%'
     }
   });
   const portraitStyles = {};

diff --git a/src/screens/charging-stations/list/ChargingStations.tsx b/src/screens/charging-stations/list/ChargingStations.tsx
@@ -299,8 +299,11 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
   };
 
   public onMapRegionChangeComplete = (region: Region) => {
-    this.currentRegion = region;
-    this.refresh();
+    if(region.latitude.toFixed(6) !== this.currentRegion.latitude.toFixed(6) ||
+      region.longitude.toFixed(6) !== this.currentRegion.longitude.toFixed(6)) {
+      this.currentRegion = region;
+      this.refresh();
+    }
   }
 
   public filterChanged(newFilters: ChargingStationsFiltersDef) {
@@ -410,8 +413,9 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
             </TouchableOpacity>
           )}
           <TouchableOpacity
+            delayPressIn={0}
             style={fabStyles.fab}
-            onPress={() => this.setState({ showMap: ! showMap}, () => this.refresh(true)) }
+            onPress={() => this.setState({ showMap: !showMap}, () => this.refresh(true)) }
           >
             <Icon style={fabStyles.fabIcon} type={'MaterialCommunityIcons'} name={showMap ? 'format-list-bulleted' : 'map'} />
           </TouchableOpacity>
@@ -485,7 +489,7 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
             </Marker>
           )}
           initialRegion={this.currentRegion}
-          onMapRegionChangeComplete={this.onMapRegionChangeComplete}
+          onMapRegionChangeComplete={(region) => this.onMapRegionChangeComplete(region)}
         />
       </View>
     )

diff --git a/src/screens/tenants/Tenants.tsx b/src/screens/tenants/Tenants.tsx
@@ -94,7 +94,7 @@ export default class Tenants extends BaseScreen<Props, State> {
           />
         ) : (
           <View style={style.container}>
-            <TouchableOpacity onPress={() => this.setState({ showAddTenantDialog: true })} style={[fabStyles.fab, fabStyles.placedFab]}>
+            <TouchableOpacity delayPressIn={0} onPress={() => this.setState({ showAddTenantDialog: true })} style={[fabStyles.fab, fabStyles.placedFab]}>
               <Icon type={'MaterialCommunityIcons'} name={'plus'} style={fabStyles.fabIcon} />
             </TouchableOpacity>
             {showAddTenantManuallyDialog && (