Map and SwipeableView Fixes/Updates (v46.12.1) (#640)

YoussefHenna · web-flow · commit 8694d47555de · 2023-03-23T16:54:03.000+02:00
* Updated default disable of swipeable view

* Update maps callback args to provide more inforamtion

* Removed nullable on onPress and onSwipe
Will only be rendered under SwipeableView when onPress/onSwipe provided

* Fixed issue with size styles application for web on swipeable view

* v46.12.1

* Addressed PR comments
diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -15,8 +15,8 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "46.12.0",
-    "@draftbit/ui": "46.12.0",
+    "@draftbit/maps": "46.12.1",
+    "@draftbit/ui": "46.12.1",
     "@expo/dev-server": "0.1.120",
     "@expo/webpack-config": "^0.17.0",
     "@react-navigation/drawer": "^5.7.7",
diff --git a/example/src/SwipeableViewExample.tsx b/example/src/SwipeableViewExample.tsx
@@ -15,19 +15,19 @@ const SwipeableViewExample: React.FC = () => {
           <Text>Some Content</Text>
 
           <SwipeableViewButton
-            onPress={null}
+            onPress={() => {}}
             side="left"
             title="Button"
             icon="add"
           />
           <SwipeableViewButton
-            onPress={null}
+            onPress={() => {}}
             side="left"
             title="Button"
             icon="add"
           />
           <SwipeableViewSwipeHandler
-            onSwipe={null}
+            onSwipe={() => {}}
             side="right"
             title="Swipe"
             icon="add"
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "46.12.0",
+  "version": "46.12.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "46.12.0",
+    "@draftbit/types": "46.12.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
diff --git a/packages/core/src/components/SwipeableView/SwipeableView.tsx b/packages/core/src/components/SwipeableView/SwipeableView.tsx
@@ -77,18 +77,23 @@ const SwipeableView: React.FC<React.PropsWithChildren<SwipeableViewProps>> = ({
   const { borderStyles, marginStyles } =
     extractBorderAndMarginStyles(viewStyles);
 
+  const sizeStyles = extractSizeStyles(viewStyles);
+
   const parentContainerStyles = StyleSheet.flatten([
     borderStyles,
     marginStyles,
     extractFlexItemStyles(viewStyles),
     extractPositionStyles(viewStyles),
     extractEffectStyles(viewStyles),
-    extractSizeStyles(viewStyles),
+    sizeStyles,
   ]);
 
   //Remove styles already consumed from viewStyles
   Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
-  const surfaceContainerStyles = viewStyles;
+  const surfaceContainerStyles = StyleSheet.flatten([
+    viewStyles,
+    sizeStyles /* Size styles needs to be readded to surface container due to inconsistencies on web */,
+  ]);
 
   const [componentWidth, setComponentWidth] = React.useState<number | null>(
     null
@@ -289,7 +294,7 @@ const styles = StyleSheet.create({
   surfaceContainer: {
     flexDirection: "row",
     width: "100%",
-    height: "100%",
+    minHeight: 50,
     padding: 10,
     alignItems: "center",
     overflow: "hidden",
diff --git a/packages/core/src/components/SwipeableView/SwipeableViewButton.tsx b/packages/core/src/components/SwipeableView/SwipeableViewButton.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export interface SwipeableViewButtonProps {
   title: string;
   side: "left" | "right";
-  onPress: (() => void) | null; //Not optional in order to always exist in props
+  onPress?: () => void;
   icon?: string;
   iconSize?: number;
   backgroundColor?: string;
diff --git a/packages/core/src/components/SwipeableView/SwipeableViewSwipeHandler.tsx b/packages/core/src/components/SwipeableView/SwipeableViewSwipeHandler.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export interface SwipeableViewSwipeHandlerProps {
   title: string;
   side: "left" | "right";
-  onSwipe: (() => void) | null; //Not optional in order to always exist in props
+  onSwipe?: () => void;
   icon?: string;
   iconSize?: number;
   backgroundColor?: string;
diff --git a/packages/core/src/mappings/SwipeableView.ts b/packages/core/src/mappings/SwipeableView.ts
@@ -86,12 +86,12 @@ export const SEED_DATA = [
       disableLeftSwipe: createBoolProp({
         label: "Disable left swipe",
         description: "Whether left swipe is enabled or not",
-        defaultValue: true,
+        defaultValue: false,
       }),
       disableRightSwipe: createBoolProp({
         label: "Disable right swipe",
         description: "Whether right swipe is enabled or not",
-        defaultValue: true,
+        defaultValue: false,
       }),
       leftOpenValue: createStaticNumberProp({
         label: "Left open value",
diff --git a/packages/core/src/utilities.ts b/packages/core/src/utilities.ts
@@ -169,7 +169,7 @@ export function extractEffectStyles(
   return effectStyles;
 }
 
-export const sizeStyleNames = ["width", "height"];
+export const sizeStyleNames = ["width", "height", "minWidth", "minHeight"];
 
 export function extractSizeStyles(
   style: StyleProp<any>,
diff --git a/packages/maps/package.json b/packages/maps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.0",
-    "@draftbit/web-maps": "46.12.0",
+    "@draftbit/types": "46.12.1",
+    "@draftbit/web-maps": "46.12.1",
     "react-native-maps": "0.31.1"
   },
   "react-native-builder-bob": {
diff --git a/packages/maps/src/components/MapMarker.tsx b/packages/maps/src/components/MapMarker.tsx
@@ -30,7 +30,10 @@ const MapMarker: React.FC<React.PropsWithChildren<MapMarkerProps>> = ({
       description={description != null ? String(description) : undefined}
       flat={flat}
       pinColor={pinColor}
-      onPress={onPress}
+      onPress={(event: any) => {
+        const coordinate = event.nativeEvent.coordinate;
+        onPress?.(coordinate.latitude, coordinate.longitude);
+      }}
       style={style}
     >
       {pinImage && (
diff --git a/packages/maps/src/components/MapView.tsx b/packages/maps/src/components/MapView.tsx
@@ -17,18 +17,12 @@ function zoomToAltitude(zoom: number) {
   return C * Math.pow((A - D) / (zoom - D) - 1, 1 / B);
 }
 
-type State = {
-  isFirstRegionChange: boolean;
-};
-
 class MapView extends React.Component<
-  React.PropsWithChildren<MapViewProps<any>>,
-  State
+  React.PropsWithChildren<MapViewProps<any>>
 > {
   private mapRef: React.RefObject<any>;
   constructor(props: React.PropsWithChildren<MapViewProps<any>>) {
     super(props);
-    this.state = { isFirstRegionChange: true };
     this.mapRef = React.createRef();
   }
 
@@ -133,12 +127,9 @@ class MapView extends React.Component<
         showsPointsOfInterest={showsPointsOfInterest}
         loadingBackgroundColor={loadingBackgroundColor}
         loadingIndicatorColor={loadingIndicatorColor}
-        onRegionChangeComplete={(region: any) => {
-          if (this.state.isFirstRegionChange) {
-            //Skip first region change to match behavior of web maps
-            this.setState({ isFirstRegionChange: false });
-          } else {
-            onRegionChange?.(region.latitude, region.longitude);
+        onRegionChangeComplete={(region: any, { isGesture }: any) => {
+          if (isGesture) {
+            onRegionChange?.(region);
           }
         }}
         style={style}
diff --git a/packages/native/package.json b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/native",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Draftbit UI Components that Depend on Native Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.0",
+    "@draftbit/types": "46.12.1",
     "@expo/vector-icons": "^13.0.0",
     "@react-native-community/datetimepicker": "6.2.0",
     "@react-native-community/slider": "4.2.3",
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/types",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Shared constants and types between native and core components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
diff --git a/packages/types/src/mapTypes.tsx b/packages/types/src/mapTypes.tsx
@@ -8,6 +8,13 @@ type MapTypes =
   | "none"
   | "mutedStandard";
 
+export type MapRegion = {
+  latitude: number;
+  longitude: number;
+  latitudeDelta: number;
+  longitudeDelta: number;
+};
+
 export interface MapMarkerProps {
   latitude: number;
   longitude: number;
@@ -16,7 +23,7 @@ export interface MapMarkerProps {
   pinColor?: string;
   pinImage?: string | ImageSourcePropType;
   pinImageSize?: number;
-  onPress?: () => void;
+  onPress?: (latitude: number, longitude: number) => void;
   flat?: boolean;
   style?: StyleProp<ViewStyle>;
 }
@@ -50,7 +57,7 @@ export interface MapViewProps<TMarkerData> {
     item: TMarkerData;
     index: number;
   }) => JSX.Element;
-  onRegionChange?: (latitude: number, longitude: number) => void;
+  onRegionChange?: (region: MapRegion) => void;
 }
 
 export interface MapCalloutProps {
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/ui",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Draftbit UI Library",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -43,8 +43,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/core": "46.12.0",
-    "@draftbit/native": "46.12.0"
+    "@draftbit/core": "46.12.1",
+    "@draftbit/native": "46.12.1"
   },
   "react-native-builder-bob": {
     "source": "src",
diff --git a/packages/web-maps/package.json b/packages/web-maps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/web-maps",
-  "version": "46.12.0",
+  "version": "46.12.1",
   "description": "Web Map Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.0",
+    "@draftbit/types": "46.12.1",
     "@react-google-maps/api": "^2.10.2"
   },
   "react-native-builder-bob": {
diff --git a/packages/web-maps/src/components/MapMarker.tsx b/packages/web-maps/src/components/MapMarker.tsx
@@ -84,8 +84,9 @@ const MapMarker: React.FC<React.PropsWithChildren<MapMarkerProps>> = ({
           lat: latitude,
           lng: longitude,
         }}
-        onClick={() => {
-          onPress?.();
+        onClick={(event: any) => {
+          const latLng = event.latLng;
+          onPress?.(latLng.lat(), latLng.lng());
           handleMarkerClick();
         }}
         onLoad={handleOnLoad}
diff --git a/packages/web-maps/src/components/MapView.tsx b/packages/web-maps/src/components/MapView.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "46.12.0",`
	`2`	`+ "version": "46.12.1",`
`3`	`3`	`"npmClient": "yarn",`
`4`	`4`	`"useWorkspaces": true,`
`5`	`5`	`"packages": ["packages/*", "example"],`
Original file line number	Diff line number	Diff line change
`@@ -169,7 +169,7 @@ export function extractEffectStyles(`
`169`	`169`	`return effectStyles;`
`170`	`170`	`}`
`171`	`171`
`172`		`-export const sizeStyleNames = ["width", "height"];`
	`172`	`+export const sizeStyleNames = ["width", "height", "minWidth", "minHeight"];`
`173`	`173`
`174`	`174`	`export function extractSizeStyles(`
`175`	`175`	`style: StyleProp<any>,`