From d72ae8d6d3dea9e66ddcdedc33dc26fa7f8d05f1 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 16 Aug 2023 11:57:50 -0700
Subject: [PATCH 1/2] feat: add directionStyle prop

---
 src/MapView/Direction.tsx     |  7 ++++---
 src/MapView/Direction.web.tsx |  5 +++--
 src/MapView/MapView.tsx       |  9 +++++++--
 src/MapView/MapViewTypes.ts   | 14 ++++++++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/MapView/Direction.tsx b/src/MapView/Direction.tsx
index 5ba9e63..f6f6795 100644
--- a/src/MapView/Direction.tsx
+++ b/src/MapView/Direction.tsx
@@ -1,6 +1,7 @@
 import Mapbox from '@rnmapbox/maps';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -20,8 +21,8 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
             <Mapbox.LineLayer
                 id="routeFill"
                 style={{
-                    lineColor: 'blue',
-                    lineWidth: 3,
+                    lineColor: directionStyle?.color ?? '#000000',
+                    lineWidth: directionStyle?.width ?? 1,
                 }}
             />
         </Mapbox.ShapeSource>
diff --git a/src/MapView/Direction.web.tsx b/src/MapView/Direction.web.tsx
index ac43c6a..cf5fb21 100644
--- a/src/MapView/Direction.web.tsx
+++ b/src/MapView/Direction.web.tsx
@@ -1,7 +1,8 @@
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -25,7 +26,7 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
                         type="line"
                         source="route"
                         layout={{'line-join': 'round', 'line-cap': 'round'}}
-                        paint={{'line-color': '#888', 'line-width': 4}}
+                        paint={{'line-color': directionStyle?.color ?? '#000000', 'line-width': directionStyle?.width ?? 1}}
                     />
                 </Source>
             )}
diff --git a/src/MapView/MapView.tsx b/src/MapView/MapView.tsx
index 6405a06..602c1ff 100644
--- a/src/MapView/MapView.tsx
+++ b/src/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import Direction from './Direction';
 import Utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates},
+    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates, directionStyle},
     ref,
 ) {
     const cameraRef = useRef<Mapbox.Camera>(null);
@@ -72,7 +72,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                             <MarkerComponent />
                         </MarkerView>
                     ))}
-                {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                {directionCoordinates && (
+                    <Direction
+                        coordinates={directionCoordinates}
+                        directionStyle={directionStyle}
+                    />
+                )}
             </Mapbox.MapView>
         </View>
     );
diff --git a/src/MapView/MapViewTypes.ts b/src/MapView/MapViewTypes.ts
index 23b363f..21c6b9d 100644
--- a/src/MapView/MapViewTypes.ts
+++ b/src/MapView/MapViewTypes.ts
@@ -23,6 +23,20 @@ export type MapViewProps = {
     markerComponent?: ComponentType;
     // List of coordinates which together forms a direction.
     directionCoordinates?: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+};
+
+export type DirectionProps = {
+    // Coordinates of points that constitute the direction
+    coordinates: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+};
+
+type DirectionStyle = {
+    width?: number;
+    color?: string;
 };
 
 export type MapViewHandle = {

From fd545d6a3980b9da13acec4e7652f607a65d3a09 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 16 Aug 2023 12:38:14 -0700
Subject: [PATCH 2/2] feat: allow different component for waypoints

---
 src/MapView/MapView.tsx     | 17 ++++++++---------
 src/MapView/MapView.web.tsx | 20 ++++++++------------
 src/MapView/MapViewTypes.ts | 23 ++++++++++++++++-------
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/MapView/MapView.tsx b/src/MapView/MapView.tsx
index 602c1ff..e4bfefa 100644
--- a/src/MapView/MapView.tsx
+++ b/src/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import Direction from './Direction';
 import Utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates, directionStyle},
+    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle},
     ref,
 ) {
     const cameraRef = useRef<Mapbox.Camera>(null);
@@ -17,12 +17,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
         }
 
         if (waypoints.length === 1) {
-            cameraRef.current?.flyTo(waypoints[0]);
+            cameraRef.current?.flyTo(waypoints[0].coordinate);
             cameraRef.current?.zoomTo(15);
             return undefined;
         }
 
-        const {southWest, northEast} = Utils.getBounds(waypoints);
+        const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
         return {
             ne: northEast,
             sw: southWest,
@@ -61,13 +61,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                     }}
                     bounds={bounds}
                 />
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <MarkerView
-                            id={`${waypoint[0]},${waypoint[1]}`}
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            coordinate={waypoint}
+                            id={`${coordinate[0]},${coordinate[1]}`}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            coordinate={coordinate}
                         >
                             <MarkerComponent />
                         </MarkerView>
diff --git a/src/MapView/MapView.web.tsx b/src/MapView/MapView.web.tsx
index 92632d3..83053fe 100644
--- a/src/MapView/MapView.web.tsx
+++ b/src/MapView/MapView.web.tsx
@@ -17,10 +17,7 @@ const getMapDimension = (mapRef: RefObject<MapRef>): {width: number; height: num
     return {width: clientWidth, height: clientHeight};
 };
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, waypoints, style, mapPadding, markerComponent: MarkerComponent, directionCoordinates, initialState = DEFAULT_INITIAL_STATE},
-    ref,
-) {
+const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, initialState = DEFAULT_INITIAL_STATE}, ref) {
     const mapRef = useRef<MapRef>(null);
     const [bounds, setBounds] = useState<{
         longitude: number;
@@ -35,13 +32,13 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
 
         if (waypoints.length === 1) {
             mapRef.current?.flyTo({
-                center: waypoints[0],
+                center: waypoints[0].coordinate,
                 zoom: 15,
             });
             return;
         }
 
-        const {northEast, southWest} = Utils.getBounds(waypoints);
+        const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
         const {width, height} = getMapDimension(mapRef) || {
             width: 0,
             height: 0,
@@ -80,13 +77,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                 mapStyle="mapbox://styles/mapbox/streets-v9"
                 {...bounds}
             >
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <Marker
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            longitude={waypoint[0]}
-                            latitude={waypoint[1]}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            longitude={coordinate[0]}
+                            latitude={coordinate[1]}
                         >
                             <MarkerComponent />
                         </Marker>
diff --git a/src/MapView/MapViewTypes.ts b/src/MapView/MapViewTypes.ts
index 21c6b9d..8111c9a 100644
--- a/src/MapView/MapViewTypes.ts
+++ b/src/MapView/MapViewTypes.ts
@@ -13,14 +13,9 @@ export type MapViewProps = {
     // Padding to apply when the map is adjusted to fit waypoints and directions
     mapPadding?: number;
     // Initial coordinate and zoom level
-    initialState?: {
-        location: [number, number];
-        zoom: number;
-    };
+    initialState?: InitialState;
     // Locations on which to put markers
-    waypoints?: Array<[number, number]>;
-    // React component to use for the marker. If not provided, markers are not displayed for waypoints.
-    markerComponent?: ComponentType;
+    waypoints?: WayPoint[];
     // List of coordinates which together forms a direction.
     directionCoordinates?: Array<[number, number]>;
     // Style used for the line that displays direction
@@ -34,6 +29,20 @@ export type DirectionProps = {
     directionStyle?: DirectionStyle;
 };
 
+// Initial state of the map
+type InitialState = {
+    // Coordinate on which to center the map
+    location: [number, number];
+    zoom: number;
+};
+
+// Waypoint to be displayed on the map
+type WayPoint = {
+    coordinate: [number, number];
+    markerComponent: ComponentType;
+};
+
+// Style used for the line that displays direction
 type DirectionStyle = {
     width?: number;
     color?: string;