From 74049b480acbd2ea5432b6c1056cfa362a24ce79 Mon Sep 17 00:00:00 2001 From: Joonas Kerttula Date: Thu, 12 Dec 2024 12:34:16 +0200 Subject: [PATCH] feat: update setPadding interface --- example/src/controls/mapsControls.tsx | 93 ++++++++++++++------------- example/src/styles.ts | 23 +------ src/auto/useNavigationAuto.ts | 9 +-- src/maps/mapView/mapViewController.ts | 4 +- src/maps/mapView/types.ts | 22 +++++-- 5 files changed, 74 insertions(+), 77 deletions(-) diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx index 95c7a88..1e77055 100644 --- a/example/src/controls/mapsControls.tsx +++ b/example/src/controls/mapsControls.tsx @@ -27,6 +27,7 @@ import { type Circle, type Polyline, type Polygon, + type Padding, } from '@googlemaps/react-native-navigation-sdk'; export interface MapControlsProps { @@ -41,11 +42,11 @@ const MapsControls: React.FC = ({ mapViewController }) => { const [enableLocationMarker, setEnableLocationMarker] = useState(true); const [latitude, onLatChanged] = useState(''); const [longitude, onLngChanged] = useState(''); - const [padding, setPadding] = useState({ - top: '', - bottom: '', - left: '', - right: '', + const [padding, setPadding] = useState({ + top: 0, + bottom: 0, + left: 0, + right: 0, }); useEffect(() => { @@ -202,14 +203,9 @@ const MapsControls: React.FC = ({ mapViewController }) => { }; const onPaddingChanged = (edge: keyof typeof padding, value: string) => { - const updatedPadding = { ...padding, [edge]: value }; + const updatedPadding: Padding = { ...padding, [edge]: Number(value) }; setPadding(updatedPadding); - mapViewController.setPadding( - Number(updatedPadding.top), - Number(updatedPadding.left), - Number(updatedPadding.bottom), - Number(updatedPadding.right) - ); + mapViewController.setPadding(updatedPadding); }; return ( @@ -297,38 +293,47 @@ const MapsControls: React.FC = ({ mapViewController }) => { dropdownStyle={styles.dropdownMenuStyle} /> - onPaddingChanged('top', value)} - value={padding.top} - placeholder="Top padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('bottom', value)} - value={padding.bottom} - placeholder="Bottom padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('left', value)} - value={padding.left} - placeholder="Left padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> - onPaddingChanged('right', value)} - value={padding.right} - placeholder="Right padding" - placeholderTextColor="#000" - keyboardType="numeric" - /> + + + Top padding + onPaddingChanged('top', value)} + value={padding.top?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Bottom padding + onPaddingChanged('bottom', value)} + value={padding.bottom?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Left padding + onPaddingChanged('left', value)} + value={padding.left?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + + + Right padding + onPaddingChanged('right', value)} + value={padding.right?.toFixed(0)} + keyboardType="numeric" + inputMode="numeric" + /> + ); }; diff --git a/example/src/styles.ts b/example/src/styles.ts index dbee2fb..f4fadf8 100644 --- a/example/src/styles.ts +++ b/example/src/styles.ts @@ -27,28 +27,13 @@ const styles = StyleSheet.create({ button: { backgroundColor: '#2196f3', }, - center: { - alignItems: 'center', - }, - toggleControl: { - backgroundColor: '#9ee2ff', - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'baseline', - position: 'absolute', - right: 0, - padding: 6, - marginTop: 150, - }, input: { backgroundColor: '#ffffff', height: 40, margin: 12, borderWidth: 1, padding: 10, - }, - zoomBtn: { - color: '#fff', + flexGrow: 1, }, rowContainer: { margin: 5, @@ -56,13 +41,9 @@ const styles = StyleSheet.create({ marginRight: 20, flexDirection: 'row', justifyContent: 'space-between', + alignItems: 'center', color: 'white', }, - rowBtnContainer: { - flexDirection: 'row', - alignSelf: 'center', - justifyContent: 'space-between', - }, controlButtons: { alignSelf: 'stretch', flexDirection: 'row', diff --git a/src/auto/useNavigationAuto.ts b/src/auto/useNavigationAuto.ts index d6e1202..3df6108 100644 --- a/src/auto/useNavigationAuto.ts +++ b/src/auto/useNavigationAuto.ts @@ -29,6 +29,7 @@ import type { Polygon, CameraPosition, UISettings, + Padding, } from '../maps'; import { useMemo } from 'react'; @@ -189,12 +190,8 @@ export const useNavigationAuto = (): { return NavAutoModule.moveCamera(cameraPosition); }, - setPadding: ( - top: number, - left: number, - bottom: number, - right: number - ) => { + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; return NavAutoModule.setPadding(top, left, bottom, right); }, }), diff --git a/src/maps/mapView/mapViewController.ts b/src/maps/mapView/mapViewController.ts index fd35cf8..85581a1 100644 --- a/src/maps/mapView/mapViewController.ts +++ b/src/maps/mapView/mapViewController.ts @@ -30,6 +30,7 @@ import type { MapType, MapViewController, MarkerOptions, + Padding, PolygonOptions, PolylineOptions, } from './types'; @@ -165,7 +166,8 @@ export const getMapViewController = (viewId: number): MapViewController => { sendCommand(viewId, commands.moveCamera, [cameraPosition]); }, - setPadding: (top: number, left: number, bottom: number, right: number) => { + setPadding: (padding: Padding) => { + const { top = 0, left = 0, bottom = 0, right = 0 } = padding; sendCommand(viewId, commands.setPadding, [top, left, bottom, right]); }, }; diff --git a/src/maps/mapView/types.ts b/src/maps/mapView/types.ts index da6b233..afd5f18 100644 --- a/src/maps/mapView/types.ts +++ b/src/maps/mapView/types.ts @@ -123,6 +123,20 @@ export enum MapType { HYBRID, } +/** + * Defines the padding options for a map. + */ +export interface Padding { + /** Top padding in pixels. */ + top?: number; + /** Left padding in pixels. */ + left?: number; + /** Bottom padding in pixels. */ + bottom?: number; + /** Right padding in pixels. */ + right?: number; +} + /** * Defines the type of the map fragment. */ @@ -416,10 +430,8 @@ export interface MapViewController { /** * Sets padding to the map. * - * @param top - Top padding. - * @param left - Left padding. - * @param bottom - Bottom padding. - * @param right - Right padding. + * @param padding - An object defining padding for each side. + * Example: { top: 10, left: 5, bottom: 15, right: 10 } */ - setPadding(top: number, left: number, bottom: number, right: number): void; + setPadding(padding: Padding): void; }